function FormSection({ tweaks }) {
  const [variant, setVariant] = React.useState(tweaks.formVariant || "quiz");
  React.useEffect(() => { setVariant(tweaks.formVariant || "quiz"); }, [tweaks.formVariant]);

  return (
    <section id="start" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="form-grid">
          <div className="col gap-24">
            <span className="eyebrow">Begin gently</span>
            <h2 className="display section-title">Tell us a little.<br/>We'll take it from there.</h2>
            <p className="section-sub">Two ways in: a friendly walk-through if you'd like to think it through, or an advanced path if you already know what you're after. We won't ask for medical history. We won't sell what you tell us. And the whole thing should feel more like a chat than a form.</p>
            <div style={{ display: "inline-flex", padding: 4, background: "var(--paper-2)", borderRadius: 999, border: "1px solid var(--line)", alignSelf: "flex-start" }}>
              {[
                ["quiz", "Full intake"],
                ["lightweight", "Advanced"],
              ].map(([k, l]) => (
                <button key={k} onClick={() => setVariant(k)}
                  style={{
                    padding: "8px 16px", borderRadius: 999,
                    background: variant === k ? "var(--white)" : "transparent",
                    border: 0, cursor: "pointer",
                    fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600,
                    color: variant === k ? "var(--ink)" : "var(--ink-3)",
                    boxShadow: variant === k ? "0 1px 3px rgba(0,0,0,0.06)" : "none",
                  }}>{l}</button>
              ))}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                "Encrypted, kept private, never sold.",
                "Aggregate-only insights — your answers stay your answers.",
                "One tap deletes everything. We won't ask why.",
              ].map((x, i) => (
                <li key={i} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14, color: "var(--ink-3)" }}>
                  <ICheck size={16} stroke="var(--accent)" /> {x}
                </li>
              ))}
            </ul>
          </div>
          <div>
            {variant === "quiz" ? <FormQuiz priceMonthly={tweaks.priceMonthly} /> : <FormLightweight accent={tweaks.accent} priceMonthly={tweaks.priceMonthly} />}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .form-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { FormSection });