// Header.jsx — Full-bleed editorial mega-menu function Header({ onBook }) { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); const [activeCat, setActiveCat] = React.useState(0); const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1440); // Utility-link icons: socials get glyphs, shops get a chevron const utilityIcon = (label) => { const props = { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (label === 'Instagram') return ( ); if (label === 'Google Reviews') return ( ); if (label === 'Facebook') return ( ); if (label === 'TikTok') return ( ); // shop links: arrow return ( ); }; React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); const onResize = () => setVw(window.innerWidth); window.addEventListener('scroll', onScroll); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; }, []); React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); }; window.addEventListener('keydown', onKey); return () => { window.removeEventListener('keydown', onKey); }; }, [menuOpen]); if (typeof window !== 'undefined' && window.useScrollLock) { window.useScrollLock(menuOpen); } const isMobile = vw < 820; const [mobileDetail, setMobileDetail] = React.useState(false); // Reset mobile drawer state when menu closes React.useEffect(() => { if (!menuOpen) setMobileDetail(false); }, [menuOpen]); const categories = [ { label: 'Face', num: '01', tag: 'Skin · Injectables · Laser', lede: 'From first injectables to advanced resurfacing — treatments tuned to your skin, not a trend.', items: [ { n: 'Botox & Neuromodulators', d: 'Micro-dosed relaxation for lines' }, { n: 'Dermal Fillers', d: 'Juvederm, Radiesse · restoration & contour' }, { n: 'Sylfirm X', d: 'RF microneedling · 12 benefits' }, { n: 'MOXI', d: 'Gentle laser · low-downtime glow' }, { n: 'BBL Hero', d: 'BroadBand Light · tone & pigment' }, { n: 'Skinvive', d: 'Injectable hydrator · microdroplet' }, { n: 'Skin Care', d: 'Medical-grade products & peels' }, ], accent: 'linear-gradient(135deg, #F7EDE1 0%, #E7C9A0 100%)', }, { label: 'Body', num: '02', tag: 'Contour · Hair · Wellness', lede: 'Refinement, not transformation. Sculpting and regenerative care grounded in evidence.', items: [ { n: 'CoolSculpting Elite', d: 'Non-invasive fat reduction' }, { n: 'BBL Heroic', d: 'BroadBand Light for body' }, { n: 'Body Sculpting', d: 'NuEra Tight · RF contouring' }, { n: 'Weight Loss', d: 'Medically supervised programs' }, { n: 'IV Drips', d: 'Hydration & recovery protocols' }, { n: 'PRP Hair Restoration', d: 'Regenerative follicle support' }, { n: 'Laser Hair Removal', d: 'Full-body smoothing' }, { n: 'Vein Therapy', d: 'Spider & reticular veins' }, ], accent: 'linear-gradient(135deg, #EBDCEA 0%, #C4A0EF 100%)', }, { label: 'Membership', num: '03', tag: 'Annual savings', lede: 'Two annual tiers built around how often you visit. Renew unlocks core injectable savings. Reviv goes deeper — across face, body, skin, and the Renewal Rituals.', groups: [ { title: 'Compare tiers', sub: 'Annual', items: [ { n: 'Renew · $99 / year', d: '20–30% off neurotoxin · core perks' }, { n: 'Reviv · $299 / year', d: 'Deeper savings · 12 categories included' }, { n: 'Member benefits in full', d: 'Side-by-side comparison' }, { n: 'Gift a Membership', d: 'Digital gift cards' }, ], }, { title: 'What members save on', sub: 'Highlights', items: [ { n: 'Neurotoxin', d: '20–30% off both tiers' }, { n: 'Filler', d: '10% off · Reviv tier' }, { n: 'CoolSculpting Elite', d: '20–25% off · Reviv tier' }, { n: 'Sylfirm X RF', d: 'Included for both tiers' }, { n: 'SkinMedica skincare', d: '25% off · Reviv tier' }, ], }, ], items: [ { n: 'Compare Membership', d: 'Renew vs Reviv side-by-side' }, { n: 'Renew · $99 / year', d: 'Core injectable savings' }, { n: 'Reviv · $299 / year', d: 'Full menu savings' }, { n: 'Member benefits in full', d: 'See the comparison table' }, { n: 'Gift a Membership', d: 'Digital gift cards' }, ], accent: 'linear-gradient(135deg, #3E1F6B 0%, #9F65E6 100%)', dark: true, }, { label: 'Featured', num: '04', tag: 'Signature technology', lede: 'The devices and modalities we believe in — each selected for a reason we can explain.', items: [ { n: 'Sylfirm X', d: 'RF microneedling' }, { n: 'Exosomes', d: 'Regenerative signaling' }, { n: 'MOXI', d: 'Gentle laser resurfacing' }, { n: 'CoolSculpting Elite', d: 'Non-invasive contouring' }, { n: 'BBL Hero / Heroic', d: 'Broadband light' }, { n: 'Skinvive', d: 'Microdroplet hydrator' }, ], accent: 'linear-gradient(135deg, #1A1625 0%, #6B3BB8 100%)', dark: true, }, { label: 'Practice', num: '05', tag: 'The team · The space', lede: 'A multidisciplinary team of physicians, nurses, aestheticians, and wellness specialists.', items: [ { n: 'About Reviv', d: 'Philosophy & approach' }, { n: 'Our Team', d: 'Providers & credentials' }, { n: 'The Space', d: 'Visiting Millbrae' }, { n: 'Gallery', d: 'Before & after case studies' }, { n: 'Contact', d: '(650) 697-3339 · hello@reviv.com' }, { n: 'Careers', d: 'Now hiring · 4 roles' }, ], accent: 'linear-gradient(135deg, #F5F1FA 0%, #E7E0EF 100%)', }, ]; const cat = categories[activeCat]; return ( <>
{/* Left: Menu trigger */}
{!isMobile && ( (650) 697-3339 )}
{/* Center: logo */} Reviv Med Spa {/* Right: Book */}
{!isMobile && ( Millbrae, CA )} { e.preventDefault(); onBook(); } : undefined} style={{ background: 'var(--rv-ink)', color: 'white', border: 0, padding: isMobile ? '12px 16px' : '14px 22px', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer', transition: 'background 200ms', textDecoration: 'none', display: 'inline-block', }} onMouseEnter={e => e.currentTarget.style.background = 'var(--rv-purple-700)'} onMouseLeave={e => e.currentTarget.style.background = 'var(--rv-ink)'} >Book {isMobile ? '' : 'Consult'}
{/* Mega-menu overlay */}
{menuOpen && (
{/* Ambient ghost wordmark */} {/* MOBILE: two-pane slider (category list ↔ detail) */} {isMobile && (
{/* Pane 1: category list */}
Explore
{categories.map((c, i) => ( ))}
{/* Contact block */}
{[ ['Call', '(650) 697-3339'], ['Visit', '31 S. El Camino Real · Millbrae'], ['Hours', 'Tue–Fri 10–6 · Sat 10–3'], ].map(([l, v], i) => (
{l}
{v}
))}
{['Instagram', 'Google Reviews', 'Shop SkinMedica', 'Shop Supplements'].map(s => ( {s} ))}
{/* Pane 2: category detail */}
{/* Feature tile — full width on mobile, moves to top */}
{Array.from({length: 5}).map((_, k) => ( ))}
{cat.num} · {cat.label}
{cat.label}
{cat.tag}

{cat.lede}

{/* Items list */} {cat.groups ? (
{cat.groups.map((g, gi) => (
{g.title} {g.sub}
{g.items.map((it, ii) => ( {String(ii+1).padStart(2,'0')}
{it.n}
{it.d}
 → ))}
))}
) : ( )}
{/* Pane indicator */}
)} {/* DESKTOP grid — unchanged */} {!isMobile && (
{/* Left: category list */}
Explore
{categories.map((c, i) => ( ))}
{/* Utility links */}
{['Instagram', 'Google Reviews', 'Shop SkinMedica', 'Shop Supplements'].map(s => ( {s} ))}
{/* Right: category detail */}
{/* Panel header */}
{cat.tag}

{cat.lede}

{/* Panel body — treatment list + feature tile */}
{/* Item list — grouped if cat.groups present, else flat */} {cat.groups ? ( ) : ( )} {/* Feature tile */}
{/* Hairline grid */} {Array.from({length: 5}).map((_, k) => ( ))} {/* Arch */}
Featured · {cat.label}
{cat.items[0].n}
{cat.items[0].d}
{/* Compact footer line */}
(650) 697-3339 31 S. El Camino Real · Millbrae Tue–Fri 10–6 · Sat 10–3
)}
)}
); } window.Header = Header;