// sections.jsx — responsive sections for The Barber Shop
// Honest draft / X9 Lab Media unsolicited proposal. No fabricated facts.
const { Reveal, Eyebrow, DoubleRule, Ornament, Pole, Placeholder, Stars } = window;
const { SERVICES, BARBERS, GALLERY, HOURS, PHONE, PHONE_HREF, BOOKSY_URL,
        STUDIO, RATING, ADDRESS_1, ADDRESS_2, MAP_SRC } = window;

/* ------------------------------- HERO ------------------------------- */
function Hero({ variant = "pole" }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <Reveal className="hero-top">
          <span className="eyebrow metal">A Broadway Ledger · Est.</span>
          <span className="eyebrow" style={{ color:"var(--cream-faint)" }}>{RATING.score} ★ · {RATING.count} reviews</span>
        </Reveal>

        <div className="hero-grid">
          <div className="hero-copy">
            <Reveal>
              <div className="hero-mark">The Barber Shop</div>
            </Reveal>
            <Reveal delay={80}>
              <h1>
                <span>A clean line.</span>
                <span className="metal">A quiet shop.</span>
                <span>On Broadway.</span>
              </h1>
            </Reveal>
            <Reveal delay={200}>
              <p className="hero-lede">
                The Barber Shop is a Fairview neighbourhood barber on West Broadway —
                {" "}{RATING.score} stars across {RATING.count} reviews. This page is a draft
                web design from {STUDIO}, an unsolicited proposal. If you’d like the real
                version, the number on this page is ours.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <div className="hero-ctas">
                <a className="btn-brass" href={PHONE_HREF}>{PHONE}</a>
                <a className="btn-ghost" href={BOOKSY_URL} target="_blank" rel="noopener">Book on Booksy ↗</a>
                <a className="link-quiet" href="#ledger">See the Ledger ↓</a>
              </div>
            </Reveal>
          </div>

          <Reveal delay={160} className="hero-visual">
            <Placeholder label="950 W Broadway" img="https://images.pexels.com/photos/1319459/pexels-photo-1319459.jpeg?auto=compress&cs=tinysrgb&w=1600" />
            <div className="pole-host"><Pole /></div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------ MARQUEE ----------------------------- */
function Marquee() {
  // generic service categories only — no unverifiable operational claims
  const items = ["Cuts","Skin Fades","Beard Trims","Hot-Towel Shaves","Kids’ Cuts","A Broadway Ledger"];
  const run = (k) => <span key={k}>{items.map((x,i)=><span key={i}>{x}</span>)}</span>;
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">{run("a")}{run("b")}</div>
    </div>
  );
}

/* ----------------------------- ESSAY: THE CHAIR ----------------------------- */
function TheChair() {
  return (
    <section id="chair">
      <div className="wrap">
        <div className="essay-grid essay">
          <Reveal className="essay-head">
            <Eyebrow>The Chair</Eyebrow>
            <h2 className="h-sec">The half-hour<br/>that’s yours.</h2>
          </Reveal>
          <Reveal delay={120} className="essay-body">
            <div className="prose on-dark">
              <p className="dropcap">
                There is a particular quiet to a good barber shop — the snap of a fresh cape,
                the low hum of the clippers, the radio kept deliberately soft. You sit down, and
                for half an hour the week is asked to wait outside.
              </p>
              <p>
                A haircut is one of the few small rituals left that asks you to be still and be
                tended to. The work itself is plain and exact: a clean line at the nape, a beard
                squared off true, a part that falls exactly where it should. No screen can do it —
                it takes a steady hand, a sharp blade, and, more often than not, the same chair
                week after week.
              </p>
              <p className="pullquote">A clean line at the nape. A beard squared true. No screen can do that.</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------ LEDGER ------------------------------ */
function Ledger() {
  return (
    <section id="ledger" className="paper">
      <div className="wrap">
        <div className="ledger-sheet">
          <Reveal style={{ textAlign:"center" }}>
            <Eyebrow>The Ledger</Eyebrow>
            <h2 className="h-sec" style={{ color:"var(--paper-ink)" }}>Services &amp; Rates</h2>
            <p className="f-mono" style={{ fontSize:11, color:"var(--paper-mute)", letterSpacing:"0.05em", margin:"12px 0 26px", textTransform:"uppercase" }}>
              Rates owner to supply
            </p>
          </Reveal>

          <div className="ledger-list">
            {SERVICES.map((s, i) => (
              <Reveal key={s.no} delay={i * 45}>
                <div className="ledger-row">
                  <span className="ledger-no">{s.no}</span>
                  <span>
                    <span className="ledger-name">{s.name}</span>
                    <span className="ledger-sub">{s.sub}</span>
                  </span>
                  <span className="ledger-lead" />
                  <span className="ledger-price">$ ?</span>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={120} style={{ marginTop: 30, textAlign:"center" }}>
            <p className="f-mono" style={{ fontSize:10.5, letterSpacing:"0.08em", color:"var(--paper-mute)", margin:0, textTransform:"uppercase" }}>
              Final menu &amp; pricing — owner to supply · book via Booksy
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------- BENCH ------------------------------ */
function Bench() {
  return (
    <section id="bench">
      <div className="wrap">
        <Reveal style={{ textAlign:"center", marginBottom:"clamp(28px,4vw,46px)" }}>
          <Ornament>The Bench</Ornament>
          <h2 className="h-sec" style={{ marginTop:18 }}>The chairs, <span className="metal">in time.</span></h2>
          <p className="f-body" style={{ color:"var(--cream-mute)", fontSize:16, marginTop:10 }}>Illustrative craft shots — real photos &amp; names owner to supply.</p>
        </Reveal>
        <div className="card-grid">
          {BARBERS.map((b, i) => (
            <Reveal key={b.chair} delay={i * 80} className="bench-card">
              <Placeholder label={b.cap} img={b.img} />
              <div className="bench-meta">
                <h3>Barber name</h3>
                <span className="f-mono metal" style={{ fontSize:11 }}>{b.chair}</span>
              </div>
              <p className="f-mono" style={{ margin:"8px 0 0", fontSize:10, letterSpacing:"0.14em", color:"var(--cream-faint)", textTransform:"uppercase" }}>
                Owner to supply
              </p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------ GALLERY ----------------------------- */
function Gallery() {
  return (
    <section className="gallery" id="work">
      <div className="wrap">
        <Reveal style={{ textAlign:"center", marginBottom:"clamp(24px,3vw,40px)" }}>
          <Eyebrow>The Work</Eyebrow>
          <h2 className="h-sec" style={{ marginTop:12 }}>Off the floor</h2>
          <p className="f-mono" style={{ fontSize:10, letterSpacing:"0.14em", color:"var(--cream-faint)", textTransform:"uppercase", marginTop:10 }}>
            Illustrative stock — owner to supply real photos
          </p>
        </Reveal>
        <div className="gal-grid">
          {GALLERY.map((g, i) => (
            <Reveal key={g.cap} delay={(i % 4) * 50} style={(i === 0 || i === 3) ? { gridRow:"span 2" } : undefined}>
              <Placeholder label={g.cap} img={g.img} className={(i === 0 || i === 3) ? "tall" : ""} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- ESSAY: THE BLOCK ----------------------------- */
function TheBlock() {
  return (
    <section id="block">
      <div className="wrap">
        <div className="essay-grid essay flip">
          <Reveal className="essay-head">
            <Eyebrow>The Block</Eyebrow>
            <h2 className="h-sec">A fixture<br/>on Broadway.</h2>
          </Reveal>
          <Reveal delay={120} className="essay-body">
            <div className="prose on-dark">
              <p className="dropcap">
                West Broadway is Fairview’s working spine — an unhurried corridor of grocers,
                coffee counters, tailors and clinics that runs from the hospitals down toward the
                water. It is a street people use rather than visit: a prescription collected, dry
                cleaning dropped, a quick cut squeezed between errands.
              </p>
              <p>
                A barber shop belongs on a street like this one. Not a destination, exactly — a
                fixture. Somewhere you pass often enough that stepping in becomes routine, and the
                chair learns your name without anyone making a fuss of it.
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------ RATING ------------------------------ */
function Rating() {
  return (
    <section className="paper rating" id="reviews">
      <div className="wrap">
        <Reveal>
          <Eyebrow>Word of Mouth</Eyebrow>
          <div style={{ display:"flex", justifyContent:"center", margin:"20px 0 12px" }}>
            <Stars n={5} size={22} color="var(--sanguine)" />
          </div>
          <div className="big" style={{ color:"var(--paper-ink)" }}>{RATING.score}</div>
          <div className="f-mono" style={{ fontSize:12, letterSpacing:"0.18em", color:"var(--sanguine)", marginTop:16, textTransform:"uppercase" }}>
            {RATING.count} reviews
          </div>
          <p className="f-body" style={{ fontSize:16, fontStyle:"italic", color:"var(--paper-mute)", margin:"22px auto 0", maxWidth:"42ch" }}>
            A 4.6-star average across 376 reviews. Selected customer quotes — owner to supply.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* ------------------------------ VISIT ------------------------------ */
function Visit() {
  return (
    <section id="visit">
      <div className="wrap">
        <Reveal style={{ marginBottom:"clamp(26px,3vw,40px)" }}>
          <Eyebrow>Visit</Eyebrow>
          <h2 className="h-sec" style={{ marginTop:12 }}>Find the corner.</h2>
        </Reveal>

        <div className="visit-grid">
          <Reveal className="visit-map">
            <iframe title="The Barber Shop — 950 W Broadway, Vancouver" src={MAP_SRC}
              loading="lazy" allowFullScreen referrerPolicy="no-referrer-when-downgrade"></iframe>
          </Reveal>

          <Reveal delay={100} className="visit-info">
            <div style={{ marginBottom: 22 }}>
              <div className="eyebrow metal" style={{ marginBottom: 10 }}>Address</div>
              <div className="f-display" style={{ fontStyle:"italic", fontSize:26, fontWeight:600, lineHeight:1.18, color:"var(--cream)" }}>
                {ADDRESS_1}<br/>{ADDRESS_2}
              </div>
            </div>

            <div style={{ marginBottom: 22 }}>
              <div className="eyebrow metal" style={{ marginBottom: 10 }}>Phone</div>
              <a href={PHONE_HREF} className="f-display" style={{ fontStyle:"italic", fontSize:28, fontWeight:600, color:"var(--cream)", textDecoration:"none" }}>{PHONE}</a>
            </div>

            <div className="eyebrow metal" style={{ marginBottom: 10 }}>Hours</div>
            <div className="hours-card" style={{ marginBottom: 22 }}>
              {HOURS.map((d) => (
                <div key={d} className="hours-row">
                  <span className="f-mono" style={{ fontSize:12, letterSpacing:"0.16em", color:"var(--cream-mute)" }}>{d.toUpperCase()}</span>
                  <span className="f-mono" style={{ fontSize:10.5, letterSpacing:"0.1em", color:"var(--cream-faint)", textTransform:"uppercase" }}>owner to supply</span>
                </div>
              ))}
            </div>

            <div style={{ display:"flex", flexWrap:"wrap", gap:12, marginTop:"auto" }}>
              <a className="btn-brass" href={PHONE_HREF} style={{ flex:"1 1 auto" }}>Call</a>
              <a className="btn-ghost" href={BOOKSY_URL} target="_blank" rel="noopener" style={{ flex:"1 1 auto" }}>Booksy ↗</a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, TheChair, Ledger, Bench, Gallery, TheBlock, Rating, Visit });