// QBClone — Migrate section + lead capture form
const Migrate = () => {
  const blank = { name: '', company: '', email: '', phone: '', platform: 'desktop', size: '', notes: '' };
  const [form, setForm] = React.useState(blank);
  const [submitted, setSubmitted] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    setBusy(true);
    // TODO: wire to /api/migrate-request once email backend is set up.
    // For now, log to console + show success state.
    try {
      console.log('[migrate request]', form);
      await new Promise(r => setTimeout(r, 500));
      setSubmitted(true);
    } finally {
      setBusy(false);
    }
  };

  return (
    <section className="qb-section qb-migrate" id="migrate" data-screen-label="05 Migrate">
      <div className="qb-container">
        <div className="mig-grid">
          <div className="mig-copy">
            <div className="qb-eyebrow"><span className="dot">●</span>White-glove migration · one-time fee</div>
            <h2 className="qb-display qb-display-lg" style={{ marginTop: 18 }}>
              Off QuickBooks <br/>
              in <span className="qb-italic">12 to 24 hours.</span>
            </h2>
            <p className="qb-body-lg" style={{ marginTop: 22, maxWidth: 540 }}>
              We migrate any QuickBooks Desktop or QuickBooks Online file to the free cloud platform of your choice — on our hosting, your AWS, or a Mac mini in the back office. <strong>100% accuracy. One small one-time fee.</strong>
            </p>
            <p className="qb-body-lg" style={{ marginTop: 14, maxWidth: 540 }}>
              Unlimited companies. Unlimited users. No more monthly subscriptions, no more per-seat bills, no more per-company fees. Intuit made enough money off you already.
            </p>
            <div className="mig-no-more"><span className="qb-italic">No more.</span></div>

            <div className="mig-bullets">
              <div className="mig-bullet"><span className="ic">✓</span><div><b>Same-day kickoff.</b> Done in 12–24 hours from file handoff.</div></div>
              <div className="mig-bullet"><span className="ic">✓</span><div><b>100% accuracy.</b> Trial balance and historical reports match to the cent.</div></div>
              <div className="mig-bullet"><span className="ic">✓</span><div><b>One-time fee.</b> No subscription. No per-company billing. Ever.</div></div>
              <div className="mig-bullet"><span className="ic">✓</span><div><b>Your cloud, your data.</b> Self-host, managed cloud, or on-prem — you pick.</div></div>
            </div>
          </div>

          <div className="mig-form-card">
            {!submitted ? (
              <form onSubmit={onSubmit} noValidate={false}>
                <div className="mig-form-h">Request a migration</div>
                <div className="mig-form-sub">We'll reply within one business day with a quote and timing.</div>

                <div className="mig-form-row">
                  <label>
                    <span>Full name *</span>
                    <input required value={form.name} onChange={set('name')} placeholder="Jordan Carter" />
                  </label>
                  <label>
                    <span>Company *</span>
                    <input required value={form.company} onChange={set('company')} placeholder="Maple &amp; Co." />
                  </label>
                </div>

                <div className="mig-form-row">
                  <label>
                    <span>Email *</span>
                    <input required type="email" value={form.email} onChange={set('email')} placeholder="you@company.com" />
                  </label>
                  <label>
                    <span>Phone</span>
                    <input value={form.phone} onChange={set('phone')} placeholder="+1 (555) 123-4567" />
                  </label>
                </div>

                <div className="mig-form-row">
                  <label>
                    <span>Currently using *</span>
                    <select value={form.platform} onChange={set('platform')} required>
                      <option value="desktop">QuickBooks Desktop</option>
                      <option value="online">QuickBooks Online</option>
                      <option value="both">Both Desktop and Online</option>
                      <option value="other">Other / Spreadsheets</option>
                    </select>
                  </label>
                  <label>
                    <span>Companies / users</span>
                    <input value={form.size} onChange={set('size')} placeholder="e.g. 3 companies, 12 users" />
                  </label>
                </div>

                <label style={{ display: 'block', marginBottom: 8 }}>
                  <span>Anything else</span>
                  <textarea rows={3} value={form.notes} onChange={set('notes')} placeholder="File size, fiscal year, integrations…" />
                </label>

                <button type="submit" className="qb-btn qb-btn-primary mig-submit" disabled={busy}>
                  {busy ? 'Sending…' : 'Request migration'} <span className="arr">→</span>
                </button>
                <div className="mig-form-foot">No credit card · No commitment · Reply within 1 business day</div>
              </form>
            ) : (
              <div className="mig-success">
                <div className="mig-success-mark">✓</div>
                <h3>Got it. We'll be in touch.</h3>
                <p>
                  We've received your migration request and will reply to <b>{form.email}</b> within one business day with a quote and timing.
                </p>
                <button
                  className="qb-btn qb-btn-outline"
                  onClick={() => { setSubmitted(false); setForm(blank); }}>
                  Send another <span className="arr">→</span>
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Migrate });