/* ============================================================
   Page sections — verified facts + OWNER-TO-SUPPLY placeholders
   ============================================================ */

function CTAButtons(){
  return (
    <div className="cta-row">
      <a className="btn btn-fill cta-tel" href={SHOP.phoneHref}>Call {SHOP.phoneDisplay}</a>
      <a className="btn btn-ghost" href={SHOP.booksy} target="_blank" rel="noopener">Book on Booksy</a>
    </div>
  );
}

function Hero(){
  const ref = useRef(null);
  const imgRef = useRef(null);
  useEffect(()=>{
    const el = ref.current;
    const t = setTimeout(()=>{
      if(!el) return;
      el.classList.add('in');
      const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
      if(reduce) return;
      clockAdvances().then(ok=>{
        if(!ok) return;
        el.querySelectorAll('.hl-line').forEach((s,i)=>{
          s.animate(
            [{opacity:0, transform:'translateY(18px)'},{opacity:1, transform:'none'}],
            { duration:880, delay:120 + i*120, easing:'cubic-bezier(.16,1,.3,1)', fill:'both' }
          );
        });
      });
    }, 120);
    const onScroll = ()=>{
      if(!imgRef.current) return;
      const y = window.scrollY;
      imgRef.current.style.transform = `translateY(${Math.min(y*0.16, 70)}px) scale(1.06)`;
    };
    window.addEventListener('scroll', onScroll, { passive:true });
    return ()=>{ clearTimeout(t); window.removeEventListener('scroll', onScroll); };
  },[]);
  return (
    <section className="hero" ref={ref} id="top">
      <div className="hero-head">
        <span className="kicker">A Fairview Documentary · Est.</span>
      </div>
      <h1 className="display">
        <span className="hl-line">The door</span>
        <span className="hl-line">opens.</span>
        <span className="hl-line">950 W Broadway.</span>
      </h1>
      <p className="hero-lede">
        The Barber Shop is a small storefront on West Broadway, in the heart of Fairview —
        and {SHOP.reviews} reviews say the neighbourhood already knows it. What it doesn’t have
        yet is a website. So here’s one: an unsolicited proposal, a draft web design from
        X9&nbsp;Lab&nbsp;Media.
      </p>
      <div className="hero-img-wrap">
        <div className="hero-pole"></div>
        <div ref={imgRef} style={{height:'100%'}}>
          <Ph label="950 W Broadway" className="hero-img" img={IMG(1319459)} />
        </div>
        <div className="hero-float">
          <span className="meta">X9 Lab Media</span>
          <p>“An unsolicited proposal for The Barber Shop.”</p>
        </div>
      </div>
    </section>
  );
}

function Marquee(){
  const items = ['Cut','Cut + Style','Beard Trim','Shave','Kids Cut'];
  const loop = [...items, ...items, ...items];
  return (
    <div className="dark" style={{padding:0}}>
      <div className="marquee">
        <div className="marquee-track">
          {loop.map((t,i)=><span key={i}>{t}</span>)}
        </div>
      </div>
    </div>
  );
}

function Essay(){
  const ref = useReveal();
  return (
    <section className="essay" ref={ref}>
      <div className="reveal"><span className="kicker">The Idea</span></div>
      <h2 className="section-title reveal d1" style={{margin:'18px 0 26px'}}>
        A chair, a mirror,<br/>and your own time.
      </h2>
      <div className="essay-body reveal d2">
        <p><span className="drop">T</span>here is a particular kind of quiet that lives inside a barber shop. The door closes on Broadway and the street drops away. The clippers start up somewhere behind you. For twenty minutes, the chair is the only place you have to be.</p>
        <p>A good shop on a busy street doesn’t need to shout. It needs to be found, remembered, and easy to reach. That is all a site like this is really for.</p>
      </div>
      <p className="essay-sign reveal d3">— Draft copy · X9 Lab Media</p>
    </section>
  );
}

function Ledger(){
  const ref = useReveal();
  return (
    <section className="services" ref={ref} id="ledger">
      <div className="reveal"><span className="kicker">The Ledger</span></div>
      <h2 className="section-title reveal d1" style={{marginTop:16}}>Services<br/>& pricing.</h2>
      <div className="ledger-list reveal d2">
        {LEDGER.map((s,i)=>(
          <div className="ledger-row" key={i}>
            <span className="ledger-name">{s.name}</span>
            <span className="ledger-dots"></span>
            <span className="ledger-price">$ ?</span>
          </div>
        ))}
      </div>
      <p className="ledger-note reveal d2">Pricing — OWNER TO SUPPLY. No amounts have been invented; every figure on this page is left for the shop to confirm.</p>
      <div className="svc-foot reveal d3"><CTAButtons /></div>
    </section>
  );
}

function Barbers(){
  const ref = useReveal();
  return (
    <section className="barbers" ref={ref} id="barbers">
      <div className="reveal"><span className="kicker">At The Chair</span></div>
      <h2 className="section-title reveal d1" style={{marginTop:16}}>The hands.</h2>
      <div className="barber-rail reveal d2">
        {BARBER_SLOTS.map(i=>{
          const craft=[{img:IMG(1570807),cap:'the fade'},{img:IMG(1319461),cap:'straight razor'},{img:IMG(1453005),cap:'scissor cut'}][i];
          return (
          <div className="barber-card" key={i}>
            <div className="supply-card barber-supply">
              <Ph label={craft.cap} className="barber-ph" img={craft.img} />
              <p className="supply-cap">Illustrative craft — owner to supply staff portraits &amp; names</p>
            </div>
          </div>
          );
        })}
      </div>
      <div className="rail-hint reveal d2">← swipe →</div>
    </section>
  );
}

function Gallery(){
  const ref = useReveal();
  return (
    <section className="gallery dark" ref={ref}>
      <div className="reveal"><span className="kicker">The Work · Illustrative</span></div>
      <h2 className="section-title reveal d1" style={{marginTop:16}}>Recent cuts.</h2>
      <div className="gal-grid reveal d2">
        <Ph dark label="the tools" className="tall" img={IMG(1319460)} />
        <Ph dark label="clippers" img={IMG(1570806)} />
        <Ph dark label="scissor work" img={IMG(3992874)} />
        <Ph dark label="the line-up" img={IMG(7697269)} />
        <Ph dark label="hot-towel kit" className="tall" img={IMG(1319459)} />
      </div>
    </section>
  );
}

function Reviews(){
  const ref = useReveal();
  return (
    <section className="reviews" ref={ref}>
      <div className="reveal"><span className="kicker">Word of Mouth</span></div>
      <h2 className="section-title reveal d1" style={{marginTop:16, marginBottom:22}}>The street<br/>already knows.</h2>
      <div className="reveal d2">
        <div className="rev-count">{SHOP.reviews}<small>reviews and counting</small></div>
      </div>
      <div className="rev-supply reveal d3">
        <div className="supply-card">
          <span className="supply-tag">Review 01</span>
          <p className="supply-cap">OWNER TO SUPPLY — pull a verified review + first name from Booksy / Google</p>
        </div>
        <div className="supply-card">
          <span className="supply-tag">Review 02</span>
          <p className="supply-cap">OWNER TO SUPPLY — pull a verified review + first name from Booksy / Google</p>
        </div>
      </div>
    </section>
  );
}

function Visit(){
  const ref = useReveal();
  return (
    <section className="location" ref={ref} id="visit">
      <div className="reveal"><span className="kicker">Visit</span></div>
      <h2 className="section-title reveal d1" style={{marginTop:16}}>950 West<br/>Broadway.</h2>
      <p className="lede reveal d2" style={{marginTop:14}}>{SHOP.address1} · Vancouver, BC V5Z&nbsp;1K7 · Fairview</p>
      <div className="reveal d2" style={{marginTop:24}}>
        <div className="hours-row">
          <span className="day">Hours</span><span className="supply-tag">OWNER TO SUPPLY</span>
        </div>
      </div>
      <div className="map-wrap reveal d3">
        <iframe
          className="map-embed"
          title="Map — 950 W Broadway, Vancouver"
          src={SHOP.mapEmbed}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
        <span className="map-cap">950 W Broadway #103 · Vancouver</span>
      </div>
      <div className="reveal d3" style={{marginTop:22}}><CTAButtons /></div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="foot">
      <div className="display" style={{fontSize:'34px', lineHeight:.95, marginBottom:24}}>The Barber Shop<br/>· Broadway.</div>
      <a className="foot-row" href={SHOP.phoneHref}><span className="meta">Call</span><span style={{fontFamily:'var(--ff-mono)', fontSize:14}}>{SHOP.phoneDisplay}</span></a>
      <div className="foot-row"><span className="meta">Address</span><span style={{fontSize:13, textAlign:'right'}}>{SHOP.address1}, {SHOP.address2}</span></div>
      <a className="foot-row" href={SHOP.booksy} target="_blank" rel="noopener"><span className="meta">Booking</span><span style={{fontSize:14}}>Book on Booksy ↗</span></a>
      <div className="foot-row"><span className="meta">Instagram</span><span className="supply-tag">OWNER TO SUPPLY</span></div>
      <div style={{marginTop:30, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <span className="meta">Unsolicited proposal</span>
        <span className="meta">Draft · X9 Lab Media</span>
      </div>
    </footer>
  );
}

Object.assign(window, { CTAButtons, Hero, Marquee, Essay, Ledger, Barbers, Gallery, Reviews, Visit, Footer });