// Steps 2 & 3 of warranty registration: customer info + purchase/vehicle info

function StepOwner({ data, setData, onNext, onBack }) {
  const [errs, setErrs] = React.useState({});

  const validate = () => {
    const e = {};
    if (!data.name?.trim()) e.name = "Required";
    if (!data.email?.match(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)) e.email = "Valid email required";
    if (!data.phone?.trim()) e.phone = "Required";
    if (!data.address1?.trim()) e.address1 = "Required";
    if (!data.city?.trim()) e.city = "Required";
    if (!data.country?.trim()) e.country = "Required";
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const submit = () => { if (validate()) onNext(); };

  const upd = (k) => (e) => { setData(d => ({ ...d, [k]: e.target.value })); setErrs(er => ({ ...er, [k]: undefined })); };

  return (
    <div style={{ maxWidth: 760, margin: "0 auto", padding: "40px 24px", width: "100%" }}>
      <SectionHeader number="02" title="Owner information" subtitle="This is who the warranty is registered to. Lifetime coverage stays with this person." />

      <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--radius-xl)", padding: 28 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field2 label="Full name" error={errs.name} required>
            <input className="field" value={data.name || ""} onChange={upd("name")} placeholder="Marcus Chen" />
          </Field2>
          <Field2 label="Company (optional)">
            <input className="field" value={data.company || ""} onChange={upd("company")} placeholder="Touge Garage LLC" />
          </Field2>
          <Field2 label="Email" error={errs.email} required>
            <input className="field" type="email" value={data.email || ""} onChange={upd("email")} placeholder="you@example.com" />
          </Field2>
          <Field2 label="Phone" error={errs.phone} required>
            <input className="field" type="tel" value={data.phone || ""} onChange={upd("phone")} placeholder="+1 (555) 123-4567" />
          </Field2>

          <Field2 label="Street address" error={errs.address1} required style={{ gridColumn: "1 / -1" }}>
            <input className="field" value={data.address1 || ""} onChange={upd("address1")} placeholder="1234 Mulholland Dr" />
          </Field2>
          <Field2 label="Apt / suite" style={{ gridColumn: "1 / -1" }}>
            <input className="field" value={data.address2 || ""} onChange={upd("address2")} placeholder="Suite 200" />
          </Field2>

          <Field2 label="City" error={errs.city} required>
            <input className="field" value={data.city || ""} onChange={upd("city")} placeholder="Los Angeles" />
          </Field2>
          <Field2 label="State / region">
            <input className="field" value={data.state || ""} onChange={upd("state")} placeholder="CA" />
          </Field2>
          <Field2 label="Postal code">
            <input className="field" value={data.postal || ""} onChange={upd("postal")} placeholder="90028" />
          </Field2>
          <Field2 label="Country" error={errs.country} required>
            <select className="field" value={data.country || ""} onChange={upd("country")}>
              <option value="">Select country…</option>
              <option>United States</option><option>Canada</option><option>Mexico</option>
              <option>Japan</option><option>Korea</option><option>Australia</option>
              <option>United Kingdom</option><option>Germany</option><option>Italy</option>
              <option>Sweden</option><option>France</option><option>Other</option>
            </select>
          </Field2>

          <Field2 label="Instagram handle (optional)" style={{ gridColumn: "1 / -1" }}>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-4)", fontSize: 13 }}>@</span>
              <input className="field" value={data.instagram || ""} onChange={upd("instagram")} placeholder="your_handle" style={{ paddingLeft: 26 }} />
            </div>
          </Field2>
        </div>
      </div>

      <NavRow onBack={onBack} onNext={submit} nextLabel="Continue →" />
    </div>
  );
}

function StepPurchase({ data, setData, onNext, onBack }) {
  const [errs, setErrs] = React.useState({});

  const validate = () => {
    const e = {};
    if (!data.purchaseDate) e.purchaseDate = "Required";
    if (!data.dealer?.trim()) e.dealer = "Required";
    setErrs(e);
    return Object.keys(e).length === 0;
  };
  const submit = () => { if (validate()) onNext(); };
  const upd = (k) => (e) => { setData(d => ({ ...d, [k]: e.target.value })); setErrs(er => ({ ...er, [k]: undefined })); };

  return (
    <div style={{ maxWidth: 760, margin: "0 auto", padding: "40px 24px", width: "100%" }}>
      <SectionHeader number="03" title="Purchase & vehicle" subtitle="So we know which build it's living on." />

      <div style={{ background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--radius-xl)", padding: 28 }}>
        <div className="lbl" style={{ marginBottom: 14 }}>Where & when</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field2 label="Purchase date" error={errs.purchaseDate} required>
            <input className="field" type="date" value={data.purchaseDate || ""} onChange={upd("purchaseDate")} />
          </Field2>
          <Field2 label="Dealer / retailer" error={errs.dealer} required>
            <input className="field" value={data.dealer || ""} onChange={upd("dealer")} placeholder="adro.com / Tarmac Works / etc." />
          </Field2>
          <Field2 label="Order # (optional)" style={{ gridColumn: "1 / -1" }}>
            <input className="field" value={data.orderNo || ""} onChange={upd("orderNo")} placeholder="ADR-XXXXXX" />
          </Field2>
        </div>

        <div className="lbl" style={{ marginTop: 28, marginBottom: 14 }}>Vehicle</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          <Field2 label="Make">
            <input className="field" value={data.make || ""} onChange={upd("make")} placeholder="Toyota" />
          </Field2>
          <Field2 label="Model">
            <input className="field" value={data.model || ""} onChange={upd("model")} placeholder="GR Supra" />
          </Field2>
          <Field2 label="Year">
            <input className="field" type="number" value={data.year || ""} onChange={upd("year")} placeholder="2024" min="1980" max="2027" />
          </Field2>
          <Field2 label="Color (optional)">
            <input className="field" value={data.color || ""} onChange={upd("color")} placeholder="Phantom Matte" />
          </Field2>
          <Field2 label="VIN (optional)" style={{ gridColumn: "span 2" }}>
            <input className="field mono" value={data.vin || ""} onChange={upd("vin")} placeholder="JT1XXXXXXXXXX0000" maxLength="17" style={{ textTransform: "uppercase" }} />
          </Field2>
        </div>

        <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
          <Checkbox checked={!!data.optMarketing} onChange={(v) => setData(d => ({ ...d, optMarketing: v }))}>
            <strong>Yes, send me drops & launch alerts.</strong>
            <span style={{ display: "block", color: "var(--ink-3)", fontSize: 12, marginTop: 4 }}>
              Limited-run releases sell out in hours. We'll only email when something new is dropping.
            </span>
          </Checkbox>
          <div style={{ height: 12 }} />
          <Checkbox checked={!!data.optTerms} onChange={(v) => setData(d => ({ ...d, optTerms: v }))} required>
            I agree to the <a href="#" style={{ color: "var(--ink-2)" }}>warranty terms</a> and <a href="#" style={{ color: "var(--ink-2)" }}>privacy policy</a>.
          </Checkbox>
        </div>
      </div>

      <NavRow onBack={onBack} onNext={submit} nextLabel="Activate warranty →" disabled={!data.optTerms} />
    </div>
  );
}

function SectionHeader({ number, title, subtitle }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div className="display" style={{ fontSize: 14, color: "var(--red)", marginBottom: 6, letterSpacing: "0.15em" }}>
        STEP {number}
      </div>
      <h2 className="display" style={{ fontSize: 36, margin: 0, lineHeight: 1, fontWeight: 800 }}>{title}</h2>
      <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>{subtitle}</p>
    </div>
  );
}

function Field2({ label, error, required, children, style }) {
  return (
    <div style={style}>
      <label className="lbl" style={{ display: "flex", justifyContent: "space-between" }}>
        <span>{label}{required && <span style={{ color: "var(--red)", marginLeft: 4 }}>*</span>}</span>
        {error && <span style={{ color: "var(--red-2)", textTransform: "none", letterSpacing: 0, fontWeight: 500 }}>{error}</span>}
      </label>
      {children}
    </div>
  );
}

function Checkbox({ checked, onChange, children, required }) {
  return (
    <label style={{ display: "flex", gap: 12, cursor: "pointer", alignItems: "flex-start" }}>
      <button type="button" onClick={() => onChange(!checked)} style={{
        width: 18, height: 18, flexShrink: 0, borderRadius: 4, marginTop: 1,
        background: checked ? "var(--red)" : "transparent",
        border: checked ? "1px solid var(--red)" : "1px solid var(--line-2)",
        color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 12, cursor: "pointer", fontFamily: "inherit",
      }}>{checked ? "✓" : ""}</button>
      <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>{children}</span>
    </label>
  );
}

function NavRow({ onBack, onNext, nextLabel, disabled }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24 }}>
      <Btn variant="ghost" size="lg" onClick={onBack}>← Back</Btn>
      <Btn variant="primary" size="lg" onClick={onNext} disabled={disabled}>{nextLabel}</Btn>
    </div>
  );
}

Object.assign(window, { StepOwner, StepPurchase, SectionHeader, Field2, Checkbox, NavRow });