/* Site sections — verbatim brief structure. Exports to window. */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* scroll reveal hook */
function useReveal() {
  const ref = useRefS(null);
  useEffectS(() => {
    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.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el, i) => { el.style.transitionDelay = `${Math.min(i * 60, 240)}ms`; io.observe(el); });
    return () => io.disconnect();
  }, []);
  return ref;
}

/* brass line icons for the cuts */
function CutIcon({ kind }) {
  const c = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "clipper") return (
    <svg viewBox="0 0 32 32" width="30" height="30" {...c}>
      <rect x="10" y="13" width="12" height="14" rx="2" /><path d="M11 13V8M14 13V8M17 13V8M20 13V8M21 13V8" />
      <path d="M10 20h12" />
    </svg>);
  if (kind === "razor") return (
    <svg viewBox="0 0 32 32" width="30" height="30" {...c}>
      <path d="M5 22c6-1 13-8 18-16l2 2c-4 9-11 15-18 17z" /><path d="M5 22l-1 4 4-1" />
    </svg>);
  return ( // towel
    <svg viewBox="0 0 32 32" width="30" height="30" {...c}>
      <path d="M6 9c4 3 16 3 20 0v16c-4 3-16 3-20 0z" /><path d="M6 14c4 3 16 3 20 0M6 19c4 3 16 3 20 0" />
    </svg>);
}

/* ---------- NAV ---------- */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useStateS(false);
  const [open, setOpen] = useStateS(false);
  useEffectS(() => {
    const on = () => setScrolled(window.scrollY > 30);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [["Services", "#cuts"], ["Book", "#book"], ["Visit", "#visit"]];
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-in">
        <a href="#top" className="nav-logo">
          <span className="pole nav-pole"></span>
          <span className="nav-brand">
            <span className="nav-name serif">{SHOP.name}</span>
            <span className="nav-sub cond">{SHOP.area}</span>
          </span>
        </a>
        <nav className="nav-links">
          {links.map(([l, h]) => <a key={h} href={h} className="cond">{l}</a>)}
        </nav>
        <div className="nav-right">
          <a href={`tel:${SHOP.phoneTel}`} className="nav-phone cond">{SHOP.phone}</a>
          <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">{open ? "✕" : "☰"}</button>
        </div>
      </div>
      {open && (
        <div className="nav-mobile">
          {links.map(([l, h]) => <a key={h} href={h} className="cond" onClick={() => setOpen(false)}>{l}</a>)}
          <a href={`tel:${SHOP.phoneTel}`} className="btn btn-ghost" onClick={() => setOpen(false)}>Call {SHOP.phone}</a>
        </div>
      )}
    </header>
  );
}

/* ---------- HERO (left-heavy) ---------- */
function Hero({ onBook, layout }) {
  return (
    <section id="top" className={"hero hero-" + layout}>
      <div className="hero-glow"></div>
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <div className="kicker hero-eyebrow reveal in">✪ Barber · W Broadway · Fairview</div>
          <h1 className="serif hero-title reveal in">
            Sharp lines.<br /><span className="hero-em">Honest cuts.</span>
          </h1>
          <p className="hero-sub reveal in">{SHOP.lede}</p>
          <div className="hero-cta reveal in">
            <button className="btn btn-primary" onClick={() => onBook(null)}>Book a chair →</button>
            <a className="btn btn-ghost" href={`tel:${SHOP.phoneTel}`}>Call {SHOP.phone}</a>
          </div>
        </div>
        <div className="hero-art reveal in">
          <image-slot id="hero-main" class="hero-slot" shape="rounded" radius="14"
            src="https://images.pexels.com/photos/1319459/pexels-photo-1319459.jpeg?auto=compress&cs=tinysrgb&w=1600"
            placeholder="Barber chair leather · classic clipper on counter · warm wood · no face"></image-slot>
          <div className="hero-art-tag cond">950 W Broadway</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- THE CUTS ---------- */
function Cuts({ onBook }) {
  const ref = useReveal();
  return (
    <section id="cuts" className="sec" ref={ref}>
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="kicker">The cuts</div>
          <h2 className="serif sec-title">What we do, and what it runs.</h2>
        </div>
        <div className="cut-grid">
          {CUTS.map((c) => (
            <button key={c.id} className="cut-card reveal" onClick={() => onBook(c)}>
              <span className="cut-icon"><CutIcon kind={c.icon} /></span>
              <h3 className="serif cut-name">{c.name}</h3>
              <p className="cut-desc">{c.desc}</p>
              <div className="cut-foot">
                <span className="cut-price cond">From&nbsp;${c.price}</span>
                <span className="cut-book cond">Book →</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- THE NUMBERS band ---------- */
function Numbers() {
  return (
    <section className="numbers">
      <div className="wrap numbers-row">
        {NUMBERS.map(([big, small], i) => (
          <div key={i} className="num-cell">
            <span className="serif num-big">{big}</span>
            <span className="cond num-small">{small}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- WALK-IN POLICY ---------- */
function WalkIn() {
  const ref = useReveal();
  return (
    <section id="book" className="sec walkin" ref={ref}>
      <div className="wrap walkin-wrap">
        <div className="kicker reveal">The door is open</div>
        <p className="serif-italic walkin-copy reveal">{WALKIN}</p>
      </div>
    </section>
  );
}

/* ---------- VISIT (charcoal card) ---------- */
function Visit({ onBook }) {
  const ref = useReveal();
  return (
    <section id="visit" className="sec" ref={ref}>
      <div className="wrap visit-card reveal">
        <div className="visit-grid">
          <div className="visit-info">
            <div className="kicker">Visit</div>
            <h2 className="serif visit-addr">950 W Broadway #103<br />Vancouver BC.</h2>
            <p className="visit-postal cond">{SHOP.city} {SHOP.postal}</p>
            <div className="visit-meta">
              <div className="visit-block">
                <span className="visit-k cond">Hours</span>
                <table className="visit-hours">
                  <tbody>
                    {SHOP.hours.map(([d, h]) => (
                      <tr key={d}><td>{d}</td><td>{h}</td></tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="visit-block">
                <span className="visit-k cond">Phone</span>
                <a href={`tel:${SHOP.phoneTel}`} className="visit-phone">{SHOP.phone}</a>
                <button className="btn btn-primary visit-btn" onClick={() => onBook(null)}>Book a chair →</button>
              </div>
            </div>
          </div>
          <div className="visit-map">
            <iframe className="visit-map-frame" title="Map — The Barber Shop, 950 W Broadway, Vancouver BC"
              src="https://maps.google.com/maps?q=950+W+Broadway+Vancouver+BC&output=embed&z=15"
              loading="lazy" allowFullScreen referrerPolicy="no-referrer-when-downgrade"></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ onBook }) {
  return (
    <footer className="footer">
      <div className="wrap footer-cta">
        <h2 className="serif footer-big">Chair's open.<br />Come get sharp.</h2>
        <button className="btn btn-primary footer-book" onClick={() => onBook(null)}>Book a chair →</button>
      </div>
      <div className="stripe"></div>
      <div className="wrap footer-bot">
        <div className="footer-brand">
          <span className="pole footer-pole"></span>
          <span className="serif">{SHOP.name}</span>
        </div>
        <div className="footer-fine cond">
          © The Barber Shop · W Broadway, Vancouver BC · Concept by X9 Lab Media · 2026
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Cuts, Numbers, WalkIn, Visit, Footer });