// sections.jsx — The Pit. Sections built to exact brief spec. const { useState, useEffect, useRef } = React; function useReveal() { const ref = useRef(null); useEffect(() => { const els = ref.current ? ref.current.querySelectorAll(".reveal") : []; const io = new IntersectionObserver((ents) => { ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.14 }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); return ref; } // ---- 1. NAV ---- function Nav({ onBook }) { const [solid, setSolid] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const on = () => setSolid(window.scrollY > 40); window.addEventListener("scroll", on); on(); return () => window.removeEventListener("scroll", on); }, []); const links = [["CUTS", "#cuts"], ["NEXT AVAILABLE", "#next"], ["VISIT", "#visit"]]; return (
setMenuOpen(false)} style={{ textDecoration: "none", display: "flex", flexDirection: "column", lineHeight: 1 }}> THE PIT {SHOP.sub}
{/* mobile dropdown */}
{links.map(([t, h]) => ( setMenuOpen(false)} className="label" style={{ fontSize: 15, color: "var(--cream)", textDecoration: "none", minHeight: 52, display: "flex", alignItems: "center", borderBottom: "1px solid var(--ash)" }}>{t} ))}
); } // ---- 2. HERO ---- function Hero({ onBook, layout, showMarquee }) { const stacked = layout === "stacked"; return (
{/* marquee bg — THE PIT · THE PIT · */} {showMarquee && ( )}
{SHOP.eyebrow}

BOOKED. WALK-IN
BACKUP.

{LEDE}

CALL {SHOP.phone}
{!stacked && (
NO. 3168 OAK
)}
SCROLL
); } // ---- 3. THE CUTS ---- function Cuts({ onBook }) { const ref = useReveal(); return (
THE CUTS

WHAT YOU
SIT FOR

Clipper cut, taper fade, beard work. No menus of upsells — just the cut, done right.

{CUTS.map((c, i) => ( ))}
); } // ---- 4. THE NUMBERS ---- function Numbers() { const ref = useReveal(); return (
{NUMBERS.map((n, i) => (
{n.big}
{n.small}
))}
BARBERSHOP · 3168 OAK ST · VANCOUVER · WALK-INS WELCOME · BOOK AHEAD
); } // ---- 5. NEXT AVAILABLE ---- function NextAvailable({ onBook }) { const ref = useReveal(); return (
NEXT AVAILABLE

NEXT CHAIR
FREE.

Booking through Fresha. If we don't have a slot today, tomorrow's better. Or call — sometimes a chair opens up.

CALL {SHOP.phone}
); } // ---- 6. VISIT ---- function Visit({ onBook }) { const ref = useReveal(); return (
VISIT

{SHOP.addrLine1}
{SHOP.addrLine2}.

{SHOP.addr}
{SHOP.phone} {HOURS.map((h) => ( ))}
{h.d} {h.h}
HOURS TO CONFIRM WITH SHOP
3168 OAK ST
); } // ---- 7. FOOTER ---- function Footer({ onBook }) { return ( ); } Object.assign(window, { useReveal, Nav, Hero, Cuts, Numbers, NextAvailable, Visit, Footer });