// Page chrome — Header, Footer, and small reusable bits
// Optional router context. When a provider is present (interactive prototype),
// nav clicks navigate. When absent (design canvas), links are inert.
const RouterCtx = React.createContext(null);
function useRouter() { return React.useContext(RouterCtx); }
function RouterProvider({ value, children }) {
return {children};
}
function PhoneNumber({ t, big, ink, mono }) {
return (
0808 094 2210
);
}
function Header({ t, active = 'Home' }) {
const nav = ['Home','Services','Gallery','About','Trade','Contact'];
return (
Fin's Flooring
);
}
function MobileHeader({ t, active = 'Home' }) {
const router = useRouter();
const [menuOpen, setMenuOpen] = React.useState(false);
const nav = ['Home','Services','Gallery','About','Trade','Contact'];
return (
setMenuOpen(o => !o)} style={{ display:'flex', flexDirection:'column', gap:3, cursor:'pointer', padding: 4, margin: -4 }}>
Fin’s Flooring
router && router.go('Contact')} style={{
fontFamily: t.bFont, fontSize: 11, fontWeight: 600, color: t.primary,
textDecoration: 'none', cursor: router ? 'pointer' : 'default',
}}>Call
{menuOpen && (
)}
);
}
// Nav link — uses router if present, otherwise inert text
function NavLink({ t, to, active }) {
const router = useRouter();
return (
router && router.go(to)} style={{
fontFamily: t.bFont, fontSize: 13.5, fontWeight: 500,
color: active ? t.primary : t.body, textDecoration:'none',
paddingBottom: 4,
borderBottom: active ? `1.5px solid ${t.primary}` : '1.5px solid transparent',
cursor: router ? 'pointer' : 'default',
}}>{to}
);
}
// CTA button that navigates if router is present
function CTAButton({ t, to, children, style }) {
const router = useRouter();
return (
);
}
function MobileBottomBar({ t }) {
const router = useRouter();
return (
);
}
function Footer({ t, mobile }) {
return (
);
}
function FooterCol({ t, title, items }) {
return (
);
}
// Section primitive
function Section({ t, bg, children, pad = '72px 48px', style }) {
return (
);
}
function Eyebrow({ t, color, children }) {
return (
{children}
);
}
function SectionTitle({ t, children, size = 44, color }) {
return (
{children}
);
}
function Rule({ t, color }) {
return ;
}
// Small star row
function Stars({ t, color, n = 5 }) {
return (
{Array.from({length:n}).map((_,i)=> ★)}
);
}
Object.assign(window, { Header, MobileHeader, MobileBottomBar, Footer, Section, Eyebrow, SectionTitle, Rule, Stars, PhoneNumber, RouterCtx, RouterProvider, useRouter, NavLink, CTAButton });