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

// =========================================================
// BEFORE / AFTER drag-to-compare slider
// =========================================================
function PackCompare({ before, after, beforeAlt, afterAlt, stamp }) {
  return (
    <div className="cmp cmp--static">
      <div className="cmp__pane cmp__pane--before">
        <img src={before} alt={beforeAlt || ""} draggable="false" />
        <span className="cmp__tag cmp__tag--before">Before</span>
      </div>
      <div className="cmp__pane cmp__pane--after">
        <img src={after} alt={afterAlt || ""} draggable="false" />
        <span className="cmp__tag cmp__tag--after">After</span>
      </div>
      <div className="cmp__seam" aria-hidden="true"></div>
      {stamp && (
        <div className="cmp__stamp" aria-hidden="true">
          <svg viewBox="0 0 100 100">
            <defs>
              <path id="cmpStampArcTop" d="M50 50 m-37 0 a37 37 0 0 1 74 0" />
              <path id="cmpStampArcBot" d="M50 50 m37 0 a37 37 0 0 1 -74 0" />
            </defs>
            <circle className="cmp__stamp-ring" cx="50" cy="50" r="46" />
            <circle className="cmp__stamp-ring cmp__stamp-ring--inner" cx="50" cy="50" r="38" />
            <text className="cmp__stamp-arc"><textPath href="#cmpStampArcTop" startOffset="50%">ACCEPTED &#183; RETAIL</textPath></text>
            <text className="cmp__stamp-arc"><textPath href="#cmpStampArcBot" startOffset="50%">CANADA &#183; 2024</textPath></text>
            <text className="cmp__stamp-word" x="50" y="58">GNC</text>
          </svg>
        </div>
      )}
    </div>
  );
}

// =========================================================
// CASE STUDIES — hover-reveal cards
// =========================================================
function Cases() {
  const cases = [
    {
      cat: "First-time sellers",
      big: ["90% ", "in 90 days"],
      name: "Private students · first sale",
      viz: "milestone",
      milestones: ["enrolled", "picked", "launched", "first sale"],
      start: "Today",
      toast: "$39.99",
      sparkFrom: "day 0",
      sparkTo: "first 90 days",
      headline: "9 in 10 of my private students make their first sale within 90 days.",
      body: "Most people never clear the starting line — the research loops, the second-guessing, the fear of placing that first order. Working with me one-on-one, nine in ten private students push through and make a real first sale inside 90 days. The first sale is the hardest one; everything after it is just repeating what already worked.",
      stats: [["90%", "make a first sale"], ["≤ 90 days", "to get there"]],
    },
    {
      cat: "Client results",
      big: ["", "90-day results"],
      name: "8 clients · coaching + consulting",
      viz: "leaderboard",
      board: [
        { amt: "$73K", pct: 100, tag: "Consulting" },
        { amt: "$32K", pct: 44, tag: "Consulting" },
        { amt: "$16K", pct: 22 },
        { amt: "$15K", pct: 21 },
        { amt: "$14K", pct: 19 },
        { amt: "$14K", pct: 19 },
        { amt: "$13K", pct: 18 },
        { amt: "$12K", pct: 16 },
      ],
      sparkFrom: "Top wins",
      sparkTo: "top $73K",
      headline: "Eight client wins on the board — coaching launches and consulting clients, top cleared $73K in 90 days.",
      body: "Same operating system across both sides of the house: a product that survives the research filter, a listing built around one sharp angle, and ad spend that doesn't bleed. The names change — the playbook doesn't.",
      stats: [["$73K", "top client win"], ["8 clients", "on the board"]],
    },
    {
      cat: "Who I've helped",
      big: ["", "20 countries"],
      name: "From moms to pilots to doctors",
      viz: "reach",
      flags: [
        { code: "nz", name: "New Zealand" }, { code: "au", name: "Australia" },
        { code: "us", name: "United States" }, { code: "ca", name: "Canada" },
        { code: "gb", name: "United Kingdom" }, { code: "es", name: "Spain" },
        { code: "de", name: "Germany" }, { code: "fr", name: "France" },
        { code: "lv", name: "Latvia" }, { code: "in", name: "India" },
        { code: "cn", name: "China" }, { code: "lk", name: "Sri Lanka" },
        { code: "be", name: "Belgium" }, { code: "ae", name: "United Arab Emirates" },
        { code: "pl", name: "Poland" }, { code: "cz", name: "Czechia" },
        { code: "ua", name: "Ukraine" }, { code: "hr", name: "Croatia" },
        { code: "sg", name: "Singapore" }, { code: "za", name: "South Africa" },
      ],
      roles: ["Moms", "Pilots", "Doctors", "Nurses", "Teachers", "Police", "Students", "Salespeople", "Service staff", "Scientists", "Photographers", "Architects", "Software engineers", "Retirees"],
      sparkFrom: "20 countries",
      sparkTo: "3,000+ students",
      headline: "Students in 20 countries — moms, pilots, doctors, teachers, retirees.",
      body: "This was never built for a special type of person. The people who get it working come from every walk of life and every timezone — full-time parents, airline pilots, ER doctors, tradies, retirees. The common thread isn't background. It's following the steps in order and not quitting early.",
      stats: [["20", "countries"], ["3,000+", "students taught"]],
    },
  ];

  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">
            Three numbers from real <b>1:1 clients, group students, and consulting clients</b> —
            first sales, top wins, and the range of people behind them.
            Hover any card for <b>the story behind the number</b>.
          </div>
        </Reveal>

        <div className="cases">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 60}>
              <article className={"case" + (c.viz === "compare" ? " case--static" : "")}>
                <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 === "leaderboard" && (
                  <div className="case__viz case__viz--board">
                    <div className="case__board">
                      {c.board.map((b, j) => (
                        <div className={"case__board-row" + (j === 0 ? " is-top" : "")} key={j}>
                          <span className="case__board-rank">{j + 1}</span>
                          <span className="case__board-amt">{b.amt}</span>
                          <span className="case__board-bar">
                            <i style={{ width: b.pct + "%" }}></i>
                          </span>
                          <span className="case__board-tag">{b.tag || ""}</span>
                        </div>
                      ))}
                    </div>
                    <div className="case__spark-axis">
                      <span>{c.sparkFrom}</span>
                      <span>{c.sparkTo}</span>
                    </div>
                  </div>
                )}
                {c.viz === "reach" && (
                  <div className="case__viz case__viz--reach">
                    <div className="reach">
                      <div className="reach__flags">
                        {c.flags.map((f, j) => (
                          <span className="reach__flag" key={j} title={f.name}>
                            <img src={"https://flagcdn.com/w80/" + f.code + ".png"} alt={f.name} />
                          </span>
                        ))}
                      </div>
                      <div className="reach__roles">
                        {c.roles.map((r, j) => (
                          <span className="reach__role" key={j}>{r}</span>
                        ))}
                      </div>
                    </div>
                    <div className="case__spark-axis">
                      <span>{c.sparkFrom}</span>
                      <span>{c.sparkTo}</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>
                        {c.start && (
                          <div className="case__start-chip" aria-hidden="true">
                            <span className="case__start-chip-icon">
                              <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M4 9.5h16M8 3v4M16 3v4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                            </span>
                            <span className="case__start-chip-text">
                              <span className="case__start-chip-label">Starting</span>
                              <span className="case__start-chip-val">{c.start}</span>
                            </span>
                          </div>
                        )}
                        {c.toast && (
                          <div className="case__order-toast" aria-hidden="true">
                            <span className="case__order-toast-icon">
                              <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8zm3 0V6a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                            </span>
                            <span className="case__order-toast-text">
                              <span className="case__order-toast-label">New order</span>
                              <span className="case__order-toast-amt">{c.toast}</span>
                            </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-wrap">
                      {c.productImg ? (
                        <div className="case__pack">
                          <img src={c.productImg} alt={c.productAlt || ""} />
                          <div className="case__stamp case__stamp--overlay">
                            <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>
                      ) : (
                        <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.sparkFrom && (
                      <div className="case__spark-axis">
                        <span>{c.sparkFrom}</span>
                        <span>{c.sparkTo}</span>
                      </div>
                    )}
                  </div>
                )}
                {c.viz === "compare" && (
                  <div className="case__viz case__viz--compare">
                    <div className="cmp-wrap">
                      <PackCompare
                        before={c.beforeImg}
                        after={c.afterImg}
                        beforeAlt={c.beforeAlt}
                        afterAlt={c.afterAlt}
                        stamp={c.stamp}
                      />
                    </div>
                    {c.sparkFrom && (
                      <div className="case__spark-axis">
                        <span>{c.sparkFrom}</span>
                        <span>{c.sparkTo}</span>
                      </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 });