/* Header + Hero variants — patient site */ const { useEffect: useEf, useState: useSt, useRef: useRf } = React; function Header({ onOpenModal }) { const [scrolled, setScrolled] = useSt(false); useEf(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
For dentists
); } /* ---------- HERO A — Cinema / Cover Star ---------- Full-bleed dark stage. Product placeholder centered, big italic headline overlaps. Cursor-following spotlight. Edition stamp. */ function HeroA({ onOpenModal }) { const stageRef = useRf(null); useEf(() => { const el = stageRef.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width) * 100; const y = ((e.clientY - r.top) / r.height) * 100; el.style.setProperty("--mx", `${x}%`); el.style.setProperty("--my", `${y}%`); }; el.addEventListener("mousemove", onMove); return () => el.removeEventListener("mousemove", onMove); }, []); return (
{/* Spotlight */}
); } function Stat({ n, unit, label }) { return (
{n} {unit}
{label}
); } /* ---------- HERO B — Magazine Cover ---------- Cream / champagne. Masthead at top with issue + date. Big serif coverlines down the left. Product photo block bottom-right with captioned cover-call. Sticker stamp top-right. */ function HeroB({ onOpenModal }) { return (
{/* Masthead */}
360° The truth about whitening · 20 years · UK ★ No shortcuts ★
{/* Left coverlines */}

A very
white
lie.

{/* Right — product cover photo */}
360 Whitening kit, open, showing the gel syringes and trays
360 Whitening · Edition 01 · Cover photo
); } function Coverline({ n, t, body }) { return (
{n}
{t}
{body}
); } Object.assign(window, { Header, HeroA, HeroB });