/* global React, Reveal, ArrowGlyph */
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

// =========================================================
// CASE STUDIES — hover-reveal cards
// =========================================================
function Cases() {
  const cases = [
    {
      cat: "First-time seller",
      big: ["0 → ", "1 sale"],
      name: "Michael · cohort · 9 weeks",
      viz: "milestone",
      milestones: ["enrolled", "picked", "launched", "first sale"],
      sparkFrom: "week 0 · zero exp.",
      sparkTo: "week 9 · first sale",
      headline: "Zero ecommerce background. Wednesday afternoon, week nine, first sale.",
      body: "Michael came into the cohort knowing nothing about selling on Amazon. Nine weeks later he and his partner shipped their first product and watched the first order come through. The hardest part of selling on Amazon isn't the second sale — it's the first.",
      stats: [["9 weeks", "training to first sale"], ["0", "prior experience"]],
    },
    {
      cat: "Home & Lifestyle",
      big: ["$0 → ", "$9K/mo"],
      name: "Daniel · coaching · Australia",
      viz: "bars",
      barSet: "record",
      sparkFrom: "Nov 22",
      sparkTo: "Dec 21 · record day",
      headline: "Cracked the US market from Australia. Doubled his best day in month four.",
      body: "Daniel launched into a market he couldn't physically walk into. Month one was quiet. We rebuilt the listing twice and sharpened ad targeting around three distinct buyer intents — by week 14, a single Sunday smashed his previous best by 100%.",
      stats: [["+89%", "month over month"], ["2×", "previous best day"]],
    },
    {
      cat: "Supplements",
      big: ["$0 → ", "$10K/mo"],
      name: "LibiGem · packaging + retail · CA",
      viz: "stamp",
      stampHead: "accepted",
      stampMain: "GNC Canada",
      stampFoot: "supplements · 2024",
      headline: "Redesigned the packaging. Wrote the buyer pitch. Landed shelf space at GNC Canada.",
      body: "Nutrafirm had a working product and no retail story. We rebuilt the packaging and brand presentation around a single buyer-facing pitch — clinical credibility wrapped in approachable design. The buyer said yes.",
      stats: [["$10K/mo", "best month"], ["GNC CA", "retail launched"]],
    },
    {
      cat: "Private label",
      big: ["£0 → ", "£10K/mo"],
      name: "Waldek · coaching · UK",
      viz: "quote",
      quote: "My sales for December were around £10,000. Really chuffed — ordered a couple more products to launch in Feb–March.",
      quoteCite: "— Waldek, Dec 2020",
      headline: "First hero SKU cleared £10K. Catalog expansion already underway.",
      body: "Waldek wanted to nail one product before adding a second — we held that line for six months. Once unit economics were solid, we used existing buyer data (not gut) to pick the next two launches.",
      stats: [["£10K", "best month"], ["2+", "SKUs in pipeline"]],
    },
    {
      cat: "Consumer Electronics",
      big: ["$0 → ", "$15K"],
      name: "Tim · cohort · 3 months",
      viz: "bars",
      sparkFrom: "Nov 14",
      sparkTo: "Dec 9 · sold out",
      headline: "Sold fans in winter. Hit page 1 for 'fans' in 30 days. Sold out in five.",
      body: "Tim ordered 1,000 units upfront thinking it was a six-month mistake. The listing ranked organically inside thirty days — he had to pull his coupon and raise price just to throttle demand. Counter-seasonal launches work when the listing does the talking.",
      stats: [["+2,628%", "30-day growth"], ["5 days", "to sold out"]],
    },
    {
      cat: "Automotive",
      big: ["$0 → ", "$100K"],
      name: "Xtreme Heaters · USA · 90 days",
      viz: "spark",
      sparkFrom: "Day 0",
      sparkTo: "+90 days",
      headline: "Cold-launched a niche marine engine heater to $100K in 90 days. US market only.",
      body: "Coast Guard certification became the hero trust-hook in the listing. Tight US-only positioning meant every ad dollar worked twice as hard — and ACoS held steady through the entire climb.",
      stats: [["$100K", "in 90 days"], ["USA only", "single market"]],
    },
  ];

  return (
    <section id="wins" className="section">
      <div className="container">
        <Reveal className="s-head">
          <div>
            <div className="eyebrow">Case studies</div>
            <h2 className="display">Wins that are<br />actually mine to claim.</h2>
          </div>
          <div className="s-head__right">
            Every win below is from a <b>1:1 client or a cohort student</b>.
            Hover any card for the actual play — the listing change,
            the ad move, <b>the moment it shifted</b>.
          </div>
        </Reveal>

        <div className="cases">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 60}>
              <article className="case">
                <div className="case__bg"></div>
                <div className="case__top">
                  <span className="case__chip">{c.cat}</span>
                  <span className="case__arrow">
                    <ArrowGlyph />
                  </span>
                </div>
                {c.img && (
                  <div className="case__product">
                    <img src={c.img} alt="" />
                  </div>
                )}
                {c.viz === "spark" && (
                  <div className="case__viz">
                    <svg className="case__spark" viewBox="0 0 200 90" preserveAspectRatio="none" aria-hidden="true">
                      <line className="case__spark-grid" x1="0" y1="22" x2="200" y2="22" />
                      <line className="case__spark-grid" x1="0" y1="55" x2="200" y2="55" />
                      <path className="case__spark-area" d="M4,84 C 22,82 38,80 56,76 S 90,68 110,58 138,40 158,24 184,10 196,6 L196,90 L4,90 Z" />
                      <path className="case__spark-line" d="M4,84 C 22,82 38,80 56,76 S 90,68 110,58 138,40 158,24 184,10 196,6" />
                      <circle className="case__spark-dot" cx="4" cy="84" r="3" />
                      <circle className="case__spark-dot case__spark-dot--end" cx="196" cy="6" r="3.5" />
                    </svg>
                    <div className="case__spark-axis">
                      <span>{c.sparkFrom || "Day 0"}</span>
                      <span>{c.sparkTo || "+90 days"}</span>
                    </div>
                  </div>
                )}
                {c.viz === "quote" && (
                  <div className="case__viz case__viz--quote">
                    <div className="case__quote">
                      <svg className="case__quote-mark" viewBox="0 0 32 32" aria-hidden="true">
                        <path d="M9 22c-3 0-5-2-5-5 0-5 3-9 8-12l1 2c-3 2-5 4-6 7 1-1 2-1 3-1 3 0 5 2 5 5s-2 4-6 4zm14 0c-3 0-5-2-5-5 0-5 3-9 8-12l1 2c-3 2-5 4-6 7 1-1 2-1 3-1 3 0 5 2 5 5s-2 4-6 4z" fill="currentColor"/>
                      </svg>
                      <p>{c.quote}</p>
                      <div className="case__quote-cite">{c.quoteCite}</div>
                    </div>
                  </div>
                )}
                {c.viz === "milestone" && (
                  <div className="case__viz">
                    <div className="case__milestone">
                      {c.milestones && (
                        <div className="case__milestone-labels">
                          {c.milestones.map((m, i) => (
                            <span key={i} className={i === c.milestones.length - 1 ? "is-win" : ""}>{m}</span>
                          ))}
                        </div>
                      )}
                      <div className="case__milestone-rail">
                        <div className="case__milestone-track"></div>
                        <div className="case__milestone-fill"></div>
                        <div className="case__milestone-dots">
                          <span></span>
                          <span></span>
                          <span></span>
                          <span className="is-win"></span>
                        </div>
                      </div>
                    </div>
                    <div className="case__spark-axis">
                      <span>{c.sparkFrom}</span>
                      <span>{c.sparkTo}</span>
                    </div>
                  </div>
                )}
                {c.viz === "stamp" && (
                  <div className="case__viz case__viz--stamp">
                    <div className="case__stamp">
                      <div className="case__stamp-head">— {c.stampHead} —</div>
                      <div className="case__stamp-main">{c.stampMain}</div>
                      <div className="case__stamp-foot">{c.stampFoot}</div>
                    </div>
                  </div>
                )}
                {c.viz === "bars" && (() => {
                  const sets = {
                    default: [8, 30, 20, 18, 14, 22, 28, 18, 14, 22, 24, 16, 12, 14, 18, 48, 30, 12, 14, 30, 65, 95, 70, 50],
                    record:  [40, 14, 12, 14, 11, 32, 22, 25, 11, 11, 23, 20, 25, 26, 22, 24, 30, 43, 32, 24, 29, 30, 37, 53, 100],
                  };
                  const heights = sets[c.barSet] || sets.default;
                  const peak = heights.indexOf(Math.max(...heights));
                  const W = 200, gap = 1.4, n = heights.length;
                  const bw = (W - gap * (n - 1)) / n;
                  return (
                    <div className="case__viz">
                      <svg className="case__spark" viewBox="0 0 200 90" preserveAspectRatio="none" aria-hidden="true">
                        <line className="case__spark-grid" x1="0" y1="22" x2="200" y2="22" />
                        <line className="case__spark-grid" x1="0" y1="55" x2="200" y2="55" />
                        {heights.map((h, i) => {
                          const x = i * (bw + gap);
                          const barH = (h / 100) * 86;
                          return (
                            <rect
                              key={i}
                              className={"case__bar" + (i === peak ? " case__bar--peak" : "")}
                              x={x}
                              y={88 - barH}
                              width={bw}
                              height={barH}
                              rx={0.8}
                            />
                          );
                        })}
                      </svg>
                      <div className="case__spark-axis">
                        <span>{c.sparkFrom}</span>
                        <span>{c.sparkTo}</span>
                      </div>
                    </div>
                  );
                })()}
                <div className="case__body">
                  <div className="case__big">
                    {c.big[0]}<em>{c.big[1]}</em>
                  </div>
                  <div className="case__name">{c.name}</div>
                </div>

                <div className="case__hover">
                  <div>
                    <span className="case__chip">{c.cat}</span>
                    <h4>{c.headline}</h4>
                    <p>{c.body}</p>
                  </div>
                  <div className="case__stats">
                    {c.stats.map((s, j) => (
                      <div key={j}>
                        <div className="case__stat-num">{s[0]}</div>
                        <div className="case__stat-lbl">{s[1]}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="cases__foot">
            <span className="cases__foot-mark">¶</span>
            Names shortened where requested. Numbers reported by clients,
            cross-checked against their seller dashboards — happy to walk
            through the originals on a call.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// =========================================================
// QUIZ — "Which path is right for me?"
// =========================================================
function Quiz({ onBook }) {
  const Q = [
    {
      q: "Where are you on Amazon right now?",
      opts: [
        { label: "Haven't launched yet — still researching products", w: { p: 2, c: 1 } },
        { label: "Launched, but doing under $5K/mo", w: { p: 2, c: 2 } },
        { label: "Between $5K and $50K/mo, want to scale", w: { p: 1, c: 3 } },
        { label: "Doing $50K+/mo, hitting a specific wall", w: { p: 0, c: 3 } },
      ],
    },
    {
      q: "How much time can you put in each week?",
      opts: [
        { label: "10–15 hrs · this is a side bet for now", w: { p: 3, c: 1 } },
        { label: "20–30 hrs · serious side project", w: { p: 2, c: 2 } },
        { label: "Full time · this is my main thing", w: { p: 1, c: 3 } },
      ],
    },
    {
      q: "What kind of help moves the needle most for you?",
      opts: [
        { label: "Structured curriculum + a cohort to learn alongside", w: { p: 3, c: 0 } },
        { label: "Direct feedback on my specific listings, ads, numbers", w: { p: 0, c: 3 } },
        { label: "A bit of both — structure plus 1:1 unsticks", w: { p: 2, c: 2 } },
      ],
    },
  ];

  const [step, setStep] = useS2(0);
  const [score, setScore] = useS2({ p: 0, c: 0 });
  const [done, setDone] = useS2(false);

  const pick = (opt) => {
    const ns = { p: score.p + opt.w.p, c: score.c + opt.w.c };
    setScore(ns);
    if (step + 1 >= Q.length) setDone(true);
    else setStep(step + 1);
  };
  const restart = () => {
    setStep(0);
    setScore({ p: 0, c: 0 });
    setDone(false);
  };

  let resultTitle, resultBody, primaryCta;
  if (done) {
    if (score.c > score.p + 1) {
      resultTitle = ["Best fit: ", "1:1 Coaching"];
      resultBody = "You've got specifics that need specific answers. We'd work weekly, screen-share through your actual catalog, ads and numbers. Best ROI for sellers with traction.";
      primaryCta = "Book a 1:1 discovery call";
    } else if (score.p > score.c + 1) {
      resultTitle = ["Best fit: ", "The Foundation Cohort"];
      resultBody = "12 weeks, small group, every week a deliverable. We compress the first 18 months of selling into a structured build, with me on calls twice a week.";
      primaryCta = "See cohort dates · book a chat";
    } else {
      resultTitle = ["Best fit: ", "Hybrid track"];
      resultBody = "You'd get the most from cohort structure plus 4 private 1:1s along the way. Lets you learn alongside others without losing the personal feedback.";
      primaryCta = "Talk through the hybrid";
    }
  }

  return (
    <section id="programs" className="section">
      <div className="container">
        <Reveal>
          <div className="quiz">
            <div className="quiz__left">
              <div className="label-mono">2-min fit check</div>
              <h2 className="display">Which path<br />is right for you?</h2>
              <p>Three honest questions. You'll get a recommendation — and the option to book a call to talk it through. No email gate.</p>
              <div className="quiz__progress">
                {Q.map((_, i) => (
                  <span key={i} className={i <= step || done ? "is-on" : ""}></span>
                ))}
              </div>
            </div>

            <div>
              {!done ? (
                <>
                  <div className="label-mono" style={{ color: "var(--ink-3)", marginBottom: 14 }}>
                    Question {step + 1} of {Q.length}
                  </div>
                  <h3 className="quiz__q">{Q[step].q}</h3>
                  <div className="quiz__opts">
                    {Q[step].opts.map((o, i) => (
                      <button key={i} className="quiz__opt" onClick={() => pick(o)}>
                        <span>{o.label}</span>
                        <span className="key">{String.fromCharCode(65 + i)}</span>
                      </button>
                    ))}
                  </div>
                </>
              ) : (
                <div className="quiz__result">
                  <div className="label-mono" style={{ color: "var(--accent)" }}>
                    your fit
                  </div>
                  <h3>
                    {resultTitle[0]}<em>{resultTitle[1]}</em>
                  </h3>
                  <p>{resultBody}</p>
                  <div className="quiz__result-actions">
                    <button className="btn btn--primary" onClick={onBook}>
                      {primaryCta} <ArrowGlyph />
                    </button>
                    <button className="btn btn--ghost" onClick={restart}>Retake</button>
                  </div>
                  <div className="quiz__restart" onClick={restart}>↺ start over</div>
                </div>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Cases, Quiz });