// Lightweight form — feels like a calculator, 3-4 fields max
const COMMON_PEPTIDES = [
  "BPC-157", "TB-500", "Ipamorelin", "CJC-1295", "GHK-Cu",
  "Tirzepatide", "Retatrutide", "Semaglutide", "Tesamorelin", "MOTS-c"
];

function FormLightweight({ accent, priceMonthly }) {
  const [peptides, setPeptides] = React.useState(["BPC-157"]);
  const [frequency, setFrequency] = React.useState("daily");
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

  const togglePep = (p) => {
    setPeptides(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p]);
  };

  // Calculate kit needs
  const dosesPerWeek = frequency === "daily" ? 7 : frequency === "eod" ? 3.5 : frequency === "weekly" ? 1 : 7;
  const totalDosesPerMonth = Math.round(peptides.length * dosesPerWeek * 4.3);
  const syringesNeeded = Math.ceil(totalDosesPerMonth * 1.15); // 15% buffer

  if (submitted) {
    return (
      <div className="card" style={{ padding: 40, textAlign: "center" }}>
        <div style={{ width: 56, height: 56, margin: "0 auto 16px", borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent-deep)", display: "grid", placeItems: "center" }}>
          <ICheck size={28} />
        </div>
        <h3 className="display" style={{ fontSize: 28, margin: "0 0 8px" }}>Lovely. We have what we need.</h3>
        <p style={{ color: "var(--ink-3)", margin: "0 0 24px" }}>A short text in 60 seconds to confirm where to drop the box. No medical questions.</p>
        <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>Edit my answers</button>
      </div>
    );
  }

  return (
    <div className="card" style={{ padding: 32 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <span className="eyebrow">Advanced · a friendly minute</span>
        <span className="pill"><span className="pill-dot" /> sized for you</span>
      </div>

      <div className="col gap-24">
        <div>
          <label className="field-label">Which peptide are you considering?</label>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {COMMON_PEPTIDES.map(p => (
              <button
                key={p}
                onClick={() => togglePep(p)}
                style={{
                  padding: "8px 14px",
                  borderRadius: 999,
                  border: `1px solid ${peptides.includes(p) ? "var(--accent)" : "var(--line)"}`,
                  background: peptides.includes(p) ? "var(--accent)" : "var(--white)",
                  color: peptides.includes(p) ? "white" : "var(--ink-2)",
                  fontSize: 13, fontWeight: 500, cursor: "pointer",
                  fontFamily: "var(--font-body)",
                }}
              >
                {p}
              </button>
            ))}
            <button style={{ padding: "8px 14px", borderRadius: 999, border: "1px dashed var(--line)", background: "transparent", color: "var(--ink-3)", fontSize: 13, cursor: "pointer", fontFamily: "var(--font-body)" }}>
              + custom
            </button>
          </div>
        </div>

        <div>
          <label className="field-label">How often, do you think?</label>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
            {[
              ["daily", "Daily"],
              ["eod", "Every other day"],
              ["weekly", "Weekly"],
              ["custom", "Mixed"],
            ].map(([k, l]) => (
              <button key={k} onClick={() => setFrequency(k)}
                style={{
                  padding: "12px 8px", borderRadius: 10,
                  border: `1px solid ${frequency === k ? "var(--accent)" : "var(--line)"}`,
                  background: frequency === k ? "var(--accent-soft)" : "var(--white)",
                  color: frequency === k ? "var(--accent-deep)" : "var(--ink-2)",
                  fontSize: 13, fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-body)",
                }}>
                {l}
              </button>
            ))}
          </div>
        </div>

        <div style={{ background: "var(--paper-2)", borderRadius: 12, padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Your monthly kit</div>
            <div className="display" style={{ fontSize: 32, lineHeight: 1, margin: "6px 0 2px" }}>{syringesNeeded}<span style={{ fontSize: 16, color: "var(--ink-3)", marginLeft: 6 }}>syringes</span></div>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>+ BAC water · swabs · gauze · pouch</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>From</div>
            <div className="display" style={{ fontSize: 32, lineHeight: 1, margin: "6px 0 2px" }}>฿{priceMonthly}<span style={{ fontSize: 16, color: "var(--ink-3)", marginLeft: 6 }}>/mo</span></div>
            <div style={{ fontSize: 12, color: "var(--ink-3)" }}>cancel anytime</div>
          </div>
        </div>

        <div>
          <label className="field-label">Email or LINE ID</label>
          <input className="field" placeholder="you@example.com" value={email} onChange={e => setEmail(e.target.value)} />
        </div>

        <button className="btn btn-accent" style={{ justifyContent: "center" }} onClick={() => setSubmitted(true)}>
          Reserve my kit · ฿{priceMonthly}/mo <IArrow size={16} />
        </button>
        <p className="legal" style={{ margin: 0, textAlign: "center" }}>No charge until your kit ships. Your protocol stays yours.</p>
      </div>
    </div>
  );
}

Object.assign(window, { FormLightweight, COMMON_PEPTIDES });