// Quiz form — fun, multi-step, gets the user invested
const QUIZ_STEPS = ["experience", "goals", "peptides", "dose", "frequency", "weight", "shipping", "result"];

const GOAL_OPTIONS = [
  { id: "recovery", label: "Recovery & joints", emoji: "🦴" },
  { id: "weight", label: "Weight loss / GLP-1", emoji: "⚖️" },
  { id: "longevity", label: "Longevity", emoji: "🧬" },
  { id: "sleep", label: "Sleep & growth hormone", emoji: "🌙" },
  { id: "skin", label: "Skin & hair", emoji: "✨" },
  { id: "performance", label: "Performance", emoji: "⚡" },
];

function FormQuiz({ priceMonthly }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    experience: null,
    goals: [],
    peptides: [],
    dose: 250,
    frequency: "daily",
    weight: 75,
    cycle: 8,
    email: "",
    line: "",
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const next = () => setStep(s => Math.min(s + 1, QUIZ_STEPS.length - 1));
  const prev = () => setStep(s => Math.max(s - 1, 0));

  const progress = ((step + 1) / QUIZ_STEPS.length) * 100;

  const dosesPerWeek = data.frequency === "daily" ? 7 : data.frequency === "eod" ? 3.5 : data.frequency === "weekly" ? 1 : 5;
  const monthlyDoses = Math.max(1, data.peptides.length) * dosesPerWeek * 4.3;
  const syringesNeeded = Math.ceil(monthlyDoses * 1.15);

  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      {/* Progress */}
      <div style={{ height: 4, background: "var(--paper-2)" }}>
        <div style={{ height: "100%", width: `${progress}%`, background: "var(--accent)", transition: "width .3s ease" }} />
      </div>

      <div style={{ padding: "20px 32px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="eyebrow">Step {step + 1} of {QUIZ_STEPS.length}</span>
        <button onClick={prev} disabled={step === 0} style={{ background: "transparent", border: 0, color: step === 0 ? "var(--ink-4)" : "var(--ink-2)", cursor: step === 0 ? "default" : "pointer", fontSize: 13, fontFamily: "var(--font-body)" }}>← Back</button>
      </div>

      <div style={{ padding: 32, minHeight: 420 }}>
        {/* Experience */}
        {step === 0 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>Where are you in this?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Honest answers only. We size kits differently for the first vial vs. the fortieth.</p>
            </div>
            <div className="col gap-8">
              {[
                ["first", "First time. The vial is in the fridge, untouched.", "🧊"],
                ["beginner", "A few cycles in. Still double-checking the math.", "🌱"],
                ["intermediate", "Comfortable. Tracking what's working.", "📊"],
                ["veteran", "Multiple stacks, dialed in.", "🧪"],
              ].map(([k, l, e]) => (
                <button key={k} onClick={() => { set("experience", k); next(); }}
                  style={{
                    padding: "16px 20px", borderRadius: 12, textAlign: "left",
                    border: `1px solid ${data.experience === k ? "var(--accent)" : "var(--line)"}`,
                    background: data.experience === k ? "var(--accent-soft)" : "var(--white)",
                    cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 500,
                    color: "var(--ink)", display: "flex", alignItems: "center", gap: 14,
                  }}>
                  <span style={{ fontSize: 22 }}>{e}</span> {l}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Goals */}
        {step === 1 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>What are you stocking up for?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Pick anything that fits. We'll match the supplies and dosing references to your protocol.</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {GOAL_OPTIONS.map(g => (
                <button key={g.id} onClick={() => toggle("goals", g.id)}
                  style={{
                    padding: "16px 18px", borderRadius: 12, textAlign: "left",
                    border: `1px solid ${data.goals.includes(g.id) ? "var(--accent)" : "var(--line)"}`,
                    background: data.goals.includes(g.id) ? "var(--accent-soft)" : "var(--white)",
                    cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500,
                    color: "var(--ink)", display: "flex", alignItems: "center", gap: 12,
                  }}>
                  <span style={{ fontSize: 20 }}>{g.emoji}</span> {g.label}
                </button>
              ))}
            </div>
            <button className="btn btn-accent" onClick={next} disabled={data.goals.length === 0} style={{ alignSelf: "flex-start", justifyContent: "center", opacity: data.goals.length === 0 ? 0.4 : 1 }}>
              Continue <IArrow size={16} />
            </button>
          </div>
        )}

        {/* Peptides */}
        {step === 2 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>Which peptide is in the fridge?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>The one you bought, not the one you're considering. Custom names go at the end.</p>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {COMMON_PEPTIDES.map(p => (
                <button key={p} onClick={() => toggle("peptides", p)}
                  style={{
                    padding: "10px 16px", borderRadius: 999,
                    border: `1px solid ${data.peptides.includes(p) ? "var(--accent)" : "var(--line)"}`,
                    background: data.peptides.includes(p) ? "var(--accent)" : "var(--white)",
                    color: data.peptides.includes(p) ? "white" : "var(--ink-2)",
                    fontSize: 14, fontWeight: 500, cursor: "pointer", fontFamily: "var(--font-body)",
                  }}>{p}</button>
              ))}
            </div>
            <button className="btn btn-accent" onClick={next} disabled={data.peptides.length === 0} style={{ alignSelf: "flex-start", opacity: data.peptides.length === 0 ? 0.4 : 1 }}>
              Continue <IArrow size={16} />
            </button>
          </div>
        )}

        {/* Dose */}
        {step === 3 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>What dose did you settle on?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>If you're not sure, leave the slider at 250mcg — a typical starting point for most healing peptides.</p>
            </div>
            <div className="col gap-12" style={{ background: "var(--paper-2)", padding: 24, borderRadius: 14 }}>
              <div className="display" style={{ fontSize: 56, lineHeight: 1, color: "var(--accent-deep)" }}>{data.dose}<span style={{ fontSize: 18, color: "var(--ink-3)", marginLeft: 8 }}>mcg</span></div>
              <input type="range" min="50" max="2000" step="25" value={data.dose} onChange={e => set("dose", parseInt(e.target.value))} style={{ width: "100%", accentColor: "var(--accent)" }} />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--ink-3)" }} className="mono">
                <span>50 mcg</span><span>2000 mcg</span>
              </div>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {[100, 250, 500, 1000].map(v => (
                <button key={v} onClick={() => set("dose", v)} style={{ padding: "8px 14px", borderRadius: 999, border: "1px solid var(--line)", background: "transparent", fontSize: 13, color: "var(--ink-2)", cursor: "pointer", fontFamily: "var(--font-body)" }}>
                  {v} mcg
                </button>
              ))}
            </div>
            <button className="btn btn-accent" onClick={next} style={{ alignSelf: "flex-start" }}>
              Continue <IArrow size={16} />
            </button>
          </div>
        )}

        {/* Frequency */}
        {step === 4 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>How often will you inject?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Pick the cadence you'll actually keep — not the perfect one.</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {[
                ["daily", "Daily", "7×/week"],
                ["eod", "Every other day", "3-4×/week"],
                ["weekly", "Weekly", "1×/week"],
                ["custom", "Mixed schedule", "varies"],
              ].map(([k, l, sub]) => (
                <button key={k} onClick={() => { set("frequency", k); next(); }}
                  style={{
                    padding: "20px", borderRadius: 12, textAlign: "left",
                    border: `1px solid ${data.frequency === k ? "var(--accent)" : "var(--line)"}`,
                    background: data.frequency === k ? "var(--accent-soft)" : "var(--white)",
                    cursor: "pointer", fontFamily: "var(--font-body)",
                  }}>
                  <div style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{l}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4, letterSpacing: "0.08em" }}>{sub}</div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Weight */}
        {step === 5 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>Body weight? (optional)</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Only used to flag if your dose lands outside the typical range. Skip if you'd rather.</p>
            </div>
            <div className="col gap-12" style={{ background: "var(--paper-2)", padding: 24, borderRadius: 14 }}>
              <div className="display" style={{ fontSize: 56, lineHeight: 1, color: "var(--accent-deep)" }}>{data.weight}<span style={{ fontSize: 18, color: "var(--ink-3)", marginLeft: 8 }}>kg</span></div>
              <input type="range" min="40" max="150" step="1" value={data.weight} onChange={e => set("weight", parseInt(e.target.value))} style={{ width: "100%", accentColor: "var(--accent)" }} />
            </div>
            <button className="btn btn-accent" onClick={next} style={{ alignSelf: "flex-start" }}>
              Continue <IArrow size={16} />
            </button>
            <button onClick={next} style={{ background: "transparent", border: 0, color: "var(--ink-3)", textDecoration: "underline", fontSize: 13, cursor: "pointer", alignSelf: "flex-start", fontFamily: "var(--font-body)" }}>Skip — I'd rather not say</button>
          </div>
        )}

        {/* Shipping */}
        {step === 6 && (
          <div className="col gap-24">
            <div>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>Where should we drop it?</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Plain box, no label. The driver doesn't know what's inside.</p>
            </div>
            <div className="col gap-16">
              <div>
                <label className="field-label">Email</label>
                <input className="field" placeholder="you@example.com" value={data.email} onChange={e => set("email", e.target.value)} />
              </div>
              <div>
                <label className="field-label">LINE ID (optional, for delivery updates)</label>
                <input className="field" placeholder="@yourhandle" value={data.line} onChange={e => set("line", e.target.value)} />
              </div>
            </div>
            <button className="btn btn-accent" onClick={next} disabled={!data.email} style={{ alignSelf: "flex-start", opacity: !data.email ? 0.4 : 1 }}>
              See my kit <IArrow size={16} />
            </button>
          </div>
        )}

        {/* Result */}
        {step === 7 && (
          <div className="col gap-20">
            <div>
              <span className="pill" style={{ marginBottom: 12 }}><span className="pill-dot" /> Your custom kit</span>
              <h3 className="display" style={{ fontSize: 32, margin: "0 0 8px", lineHeight: 1.1 }}>This is what you'll go through every month.</h3>
              <p style={{ color: "var(--ink-3)", margin: 0 }}>Sized for {data.peptides.length} peptide{data.peptides.length !== 1 ? "s" : ""}, {data.frequency === "daily" ? "daily" : data.frequency === "eod" ? "every-other-day" : "weekly"}. Adjust anytime — the kit follows you.</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div style={{ padding: 18, background: "var(--paper-2)", borderRadius: 12 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Insulin syringes</div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>{syringesNeeded}</div>
              </div>
              <div style={{ padding: 18, background: "var(--paper-2)", borderRadius: 12 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>BAC water</div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>{Math.max(1, Math.ceil(data.peptides.length / 2))}<span style={{ fontSize: 14, color: "var(--ink-3)", marginLeft: 6 }}>× 30ml</span></div>
              </div>
              <div style={{ padding: 18, background: "var(--paper-2)", borderRadius: 12 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Alcohol swabs</div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>{syringesNeeded * 2}</div>
              </div>
              <div style={{ padding: 18, background: "var(--accent-soft)", borderRadius: 12 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--accent-deep)", letterSpacing: "0.12em", textTransform: "uppercase" }}>From</div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 6, color: "var(--accent-deep)" }}>฿{priceMonthly}<span style={{ fontSize: 14, marginLeft: 4 }}>/mo</span></div>
              </div>
            </div>
            <button className="btn btn-accent" style={{ justifyContent: "center" }}>
              Reserve my kit <IArrow size={16} />
            </button>
            <p className="legal" style={{ margin: 0, textAlign: "center" }}>No charge until your kit ships. Cancel before any renewal.</p>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { FormQuiz });