/* global React, Reveal, ArrowGlyph */
const { useState: useS, useEffect: useE, useRef: useR } = React;

// =========================================================
// HERO
// =========================================================
function Hero({ layout, headline, onBook }) {
  // Each headline option is an array of (string | { em: string }) tokens for inline italics.
  const HEADLINES = {
    a: [
    "I help new Amazon sellers turn ",
    { em: "noise" },
    " into a real, ",
    { em: "boring" },
    " business."],

    b: [
    "Your first ",
    { em: "real" },
    " month on Amazon starts with one honest conversation."],

    c: [
    "Stop ",
    { em: "guessing" },
    ". Start building the Amazon brand you actually wanted."]

  };
  const tokens = HEADLINES[headline] || HEADLINES.a;

  return (
    <header id="top" className="hero" data-layout={layout}>
      <div className="container">
        <div className="hero__grid">
          {layout === "asym" &&
          <div className="hero__col-stat">
              <div className="stat-card">
                <div className="label-mono">since 2018</div>
                <div className="stat-card__big" style={{ marginTop: 12 }}>
                  <em>$84M+</em>
                </div>
                <div className="label-mono" style={{ marginTop: 6 }}>student GMV coached</div>
              </div>
              <div className="stat-card">
                <div className="label-mono">cohorts run</div>
                <div className="stat-card__big" style={{ marginTop: 12 }}>
                  41
                </div>
                <div className="label-mono" style={{ marginTop: 6 }}>across 6 years</div>
              </div>
            </div>
          }

          <div>
            <div className="hero__eyebrow">
              <span className="eyebrow">Amazon coach &nbsp;·&nbsp; 1:1 + group</span>
            </div>
            <h1 className="display hero__title">
              {tokens.map((t, i) =>
              typeof t === "string" ? <React.Fragment key={i}>{t}</React.Fragment> : <em key={i}>{t.em}</em>
              )}
            </h1>
            <p className="lead">
              I'm Jay. For six years I've sat next to first-time sellers
              and walked them through product, listing, ads, and the boring
              middle. No funnels, no hype — just the next right move.
            </p>
            <div className="hero__sub">
              <button className="btn btn--primary btn--lg" onClick={onBook}>
                Book a discovery call <ArrowGlyph />
              </button>
              <a className="btn btn--ghost btn--lg" href="#story">
                See how I work
              </a>
            </div>

            <div className="hero__metrics">
              <div>
                <div className="metric__num">10<span style={{ color: "var(--ink-3)" }}>+</span></div>
                <div className="metric__label">Years, same craft</div>
                <div className="metric__kicker">on Amazon, since 2015</div>
              </div>
              <div>
                <div className="metric__num">3,000+</div>
                <div className="metric__label">Sellers, 1:1</div>
                <div className="metric__kicker">no mass courses, no funnels</div>
              </div>
              <div>
                <div className="metric__num">90<span style={{ color: "var(--ink-3)" }}>%</span></div>
                <div className="metric__label">To first sale</div>
                <div className="metric__kicker">within 90 days</div>
              </div>
            </div>
          </div>

          {layout !== "centered" && <HeroPortraitBlock onBook={onBook} />}
        </div>
      </div>
    </header>);

}

// =========================================================
// MARQUEE — student wins
// =========================================================
function Marquee() {
  const items = [
  ["0 → 1 sale, week 9", "Michael · first launch"],
  ["$0 → $9K/mo", "Daniel · home · AU"],
  ["$0 → $10K/mo", "LibiGem · supplements · CA"],
  ["GNC Canada, accepted", "LibiGem · retail '24"],
  ["£0 → £10K/mo", "Waldek · private label · UK"],
  ["$0 → $15K, sold out", "Tim · electronics · 3 mo"],
  ["$0 → $100K · 90 days", "Xtreme Heaters · automotive · US"],
  ["231 units · 3 SKUs", "Tanja · launch"],
  ["147 units · $6,613", "Patricia · december"],
  ["300 units · £7,500", "Mared · first product"]];

  const loop = [...items, ...items];
  return (
    <div className="marquee" aria-label="Student wins">
      <div className="marquee__track">
        {loop.map((it, i) =>
        <div key={i} className="marquee__item">
            <span className="marquee__num">{it[0]}</span>
            <span className="marquee__text">{it[1]}</span>
            <span className="marquee__dot"></span>
          </div>
        )}
      </div>
    </div>);

}

// =========================================================
// PRESS strip
// =========================================================
function Press() {
  return (
    <div className="container">
      <div className="press">
        <div className="press__label">as featured in</div>
        <div className="press__logo">Seller Sessions</div>
        <div className="press__logo press__logo--alt">Helium 10</div>
        <div className="press__logo">The PPC Den</div>
        <div className="press__logo press__logo--alt">EcomCrew</div>
        <div className="press__logo">Million Dollar Cases</div>
      </div>
    </div>);

}

// =========================================================
// PLEDGE CARD — handwritten paper note for chapter 04
// =========================================================
function PledgeCard() {
  return (
    <div className="pledge">
      <div className="pledge__paper">
        <div className="pledge__stamp">PLEDGE · '26</div>
        <div className="pledge__head">things I won't do —</div>
        <ul className="pledge__list">
          <li>
            <span className="pledge__check" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 13l5 5L20 6" /></svg>
            </span>
            promise you a number
          </li>
          <li>
            <span className="pledge__check" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 13l5 5L20 6" /></svg>
            </span>
            sell a course &amp; ghost
          </li>
          <li>
            <span className="pledge__check" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 13l5 5L20 6" /></svg>
            </span>
            take you on if you're not ready
          </li>
        </ul>
        <div className="pledge__sig">
          <span>— Jay</span>
          <svg className="pledge__scribble" viewBox="0 0 120 14" fill="none" aria-hidden="true">
            <path d="M2 9 C 20 2, 38 12, 56 7 S 92 3, 118 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" />
          </svg>
        </div>
      </div>
    </div>);

}

// =========================================================
// STORY — scroll-triggered chapters
// =========================================================
function Story() {
  const chapters = [
  {
    n: "01",
    title: "I sold on Amazon for four years before I taught anyone.",
    body: <>First SKU in <b>2016</b> out of my apartment. <b>Six brands</b> across supplements, kitchen and outdoor. <b>Two exits</b>. Everything I teach, <b>I shipped first.</b></>,
    visual: "[ early storefront — 2016 ]",
    img: "assets/early-storefront.png",
    pos: "top left"
  },
  {
    n: "02",
    title: "Most new sellers don't have a strategy problem. They have an execution problem.",
    body: <>They <b>overthink their first product</b>. They jump to ads <b>before listings are ready</b>. They chase <b>rankings and algorithm hacks</b>. Execution isn't hustle. It's sequence — the <b>right things in the right order</b>.</>,
    visual: "[ setup sequence — steps 6–10 ]",
    img: "assets/workflow-diagram.png"
  },
  {
    n: "03",
    title: "So I built the coaching I wish I'd had at $0.",
    body: <>Direct, patient, <b>no-bro-energy</b>. <b>1:1</b> to fix your specific mess. <b>Group cohorts</b> to compress <b>18 months of learning into 12 weeks</b>. No fluff modules.</>,
    visual: "[ cohort workshop — Auckland ]",
    img: "assets/cohort-workshop.avif"
  },
  {
    n: "04",
    title: "What I won't do.",
    body: <><b>I won't promise a number.</b> I won't sell you a course and <b>ghost</b>. I won't take you on if your product or budget isn't ready — <b>I'll tell you straight</b>, and tell you what to fix first.</>,
    visual: "[ 1:1 — straight talk ]",
    img: "assets/jay-straight-talk.png"
  }];


  const refs = useR([]);
  const [active, setActive] = useS(0);
  useE(() => {
    // Activate a chapter the moment its top crosses 1/3 down the viewport.
    // Stay active until the next chapter's top crosses the same line.
    const ACTIVATE_AT = 0.33; // 33% from top of viewport
    const onScroll = () => {
      const lineY = window.innerHeight * ACTIVATE_AT;
      let next = 0;
      refs.current.forEach((el, i) => {
        if (!el) return;
        const top = el.getBoundingClientRect().top;
        if (top <= lineY) next = i;
      });
      setActive((prev) => prev === next ? prev : next);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section id="story" className="section">
      <div className="container">
        <Reveal className="s-head">
          <div>
            <div className="eyebrow">The story</div>
            <h2 className="display">How I got here, and why I coach.</h2>
          </div>
          <div className="s-head__right">
            Most "Amazon gurus" <b>never built a brand</b>. I spent <b>four years selling before I taught a soul</b>.
            That order matters.
          </div>
        </Reveal>

        <div className="story">
          <div className="story__sticky">
            <div className="story__stick-inner">
              <div className="eyebrow">chapter {String(active + 1).padStart(2, "0")} / 04</div>
              <h2 className="display" style={{ fontSize: "clamp(34px, 3vw, 50px)" }}>
                {(() => {
                  const t = chapters[active].title;
                  const i = t.indexOf(". ");
                  return i === -1 ? t : t.slice(0, i + 1);
                })()}
              </h2>
              <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 24 }}>
                <div className="story__progress" style={{ flex: "0 0 2px" }}>
                  <span style={{ height: `${(active + 1) / chapters.length * 100}%` }}></span>
                </div>
                <span className="label-mono">scroll to read</span>
              </div>
            </div>
          </div>

          <div className="story__chapters">
            {chapters.map((c, i) =>
            <div
              key={i}
              ref={(el) => refs.current[i] = el}
              data-idx={i}
              className={"chapter" + (i === active ? " is-active" : "")}>
              
                <div className="chapter__num">{c.n}</div>
                <div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  <div className={"chapter__visual" + (c.img ? " has-img" : "") + (c.fit === "contain" ? " is-contain" : "") + (c.kind === "pledge" ? " is-pledge" : "")}>
                    {c.img && <img src={c.img} alt="" style={c.pos ? { objectPosition: c.pos } : undefined} />}
                    {c.kind === "pledge" && <PledgeCard />}
                    <span>{c.visual}</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// =========================================================
// HERO PORTRAIT BLOCK — composed cream card that replaces
// the old .hero__portrait. Scoped styles in hero-portrait-block.css.
// =========================================================
function HeroPortraitBlock({ onBook }) {
  const months = [
  { name: "Apr", state: "booked" },
  { name: "May", state: "booked" },
  { name: "Jun", state: "next" },
  { name: "Jul", state: "open" },
  { name: "Aug", state: "open" },
  { name: "Sep", state: "open" }];

  const HpbArrow = () =>
  <svg className="hpb__arrow" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>;

  return (
    <div className="hpb">
      <div className="hpb__photo-block" style={{ width: "560px" }}>
        <div className="hpb__blob"></div>
        <div className="hpb__photo-wrap">
          <img className="hpb__photo" src="assets/jay-1on1.png" alt="Jay coaching 1:1" />
        </div>
        <div className="hpb__pulse-pill">
          <span className="hpb__pulse-dot"></span>
          Booking June
        </div>
        <div className="hpb__quote-card">
          <p className="hpb__quote-text">
            "Three months in, my catalog was unrecognizable — not because we added, because we cut."
          </p>
          <div className="hpb__quote-cite"><strong>Tara V.</strong> · supplements brand</div>
        </div>
        <div className="hpb__scrap">
          <img src="assets/jay-teaching.jpg" alt="Jay coaching a workshop" />
          <div className="hpb__scrap-tag">Auckland · workshop, '26</div>
        </div>
      </div>

      <div className="hpb__avail">
        <div className="hpb__avail-label">1:1 availability</div>
        <div className="hpb__avail-months">
          {months.map((m) =>
          <button key={m.name} className={`hpb__avail-m is-${m.state}`} onClick={onBook} type="button">
              <span className="hpb__avail-m-dot"></span>
              {m.name}
            </button>
          )}
        </div>
        <button className="hpb__avail-cta" onClick={onBook} type="button">
          Book Jun <HpbArrow />
        </button>
      </div>
    </div>);

}

Object.assign(window, { Hero, HeroPortraitBlock, Marquee, Press, Story, PledgeCard });