// Shared multi-step "Start a project" form. Used by home.jsx, home-v2.jsx, home-v3.jsx.
// Styling hooks via .sp-form; per-variant overrides live in home*.css.

function StartForm({variant='v1'}){
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', role: '',
    goal: '', services: [], budget: '', timeline: '',
    context: ''
  });
  const [sent, setSent] = React.useState(false);

  const SERVICES = ['Paid search','SEO','Paid social','Content','Analytics','Creative','Web design & dev'];
  const GOALS = ['More qualified leads','Lower CAC / CPL','Launch a new product','Re-platform / replatform','Fix attribution','Audit existing spend'];
  const BUDGETS = ['< $15k / mo','$15–40k / mo','$40–80k / mo','$80k+ / mo','Not sure yet'];
  const TIMELINES = ['This quarter','Next quarter','Within 6 months','Exploratory'];

  const toggleService = (s) => {
    setForm(f => ({...f, services: f.services.includes(s) ? f.services.filter(x => x !== s) : [...f.services, s]}));
  };

  const canNext = (() => {
    if (step === 0) return form.name.trim() && form.email.trim() && form.company.trim();
    if (step === 1) return !!form.goal;
    if (step === 2) return form.services.length > 0;
    if (step === 3) return !!form.budget && !!form.timeline;
    return true;
  })();

  const submit = async () => {
    setSent(true);
  };

  const steps = [
    {k:'Who', t:'Who should we reply to?'},
    {k:'Why', t:'What are you trying to change?'},
    {k:'What', t:'Which practices fit?'},
    {k:'When', t:'Shape of the engagement.'},
    {k:'Context', t:'Anything we should know.'},
  ];

  if (sent) return (
    <div className="sp-form sp-form--done">
      <div className="sp-done__mark">✓</div>
      <div className="sp-done__k mono">INTAKE RECEIVED · {new Date().toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})}</div>
      <h3 className="sp-done__h display">
        Thanks, {form.name.split(' ')[0] || 'friend'}.<br/>
        <em className="serif">We'll be in touch within one business day.</em>
      </h3>
      <p className="sp-done__p">
        A partner is reading your brief right now. You'll get back a one-page read: what we'd do first, what we'd leave alone, and three benchmarks we'd hold ourselves to in the first 90 days.
      </p>
      <div className="sp-done__meta mono">
        <div><span>Reference</span><span>GV-{Date.now().toString(36).toUpperCase().slice(-6)}</span></div>
        <div><span>Assigned</span><span>Partner desk · Scottsdale</span></div>
        <div><span>ETA</span><span>&lt; 24h business time</span></div>
      </div>
    </div>
  );

  return (
    <div className="sp-form" data-step={step}>
      <div className="sp-form__rail">
        <div className="sp-form__steps">
          {steps.map((s, i) => (
            <button key={s.k} type="button" className={`sp-step ${i === step ? 'is-current' : ''} ${i < step ? 'is-done' : ''}`} onClick={() => i < step && setStep(i)} disabled={i > step}>
              <span className="sp-step__n mono">{String(i+1).padStart(2,'0')}</span>
              <span className="sp-step__k">{s.k}</span>
              <span className="sp-step__line"/>
            </button>
          ))}
        </div>
        <div className="sp-form__meta mono">
          <div><span>Est. time</span><span>90 sec</span></div>
          <div><span>Next step</span><span>1-page read · &lt;24h</span></div>
          <div><span>No obligation</span><span>Zero sales theater</span></div>
        </div>
      </div>

      <div className="sp-form__panel">
        <div className="sp-form__head">
          <span className="sp-form__eyebrow mono">Step {step+1} of {steps.length} · {steps[step].k}</span>
          <h3 className="sp-form__title display">{steps[step].t}</h3>
        </div>

        {step === 0 && (
          <div className="sp-grid sp-grid--2">
            <label className="sp-field">
              <span>Your name</span>
              <input value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} placeholder="Monica Hale" autoFocus/>
            </label>
            <label className="sp-field">
              <span>Role</span>
              <input value={form.role} onChange={e => setForm(f => ({...f, role: e.target.value}))} placeholder="SVP Growth"/>
            </label>
            <label className="sp-field">
              <span>Company</span>
              <input value={form.company} onChange={e => setForm(f => ({...f, company: e.target.value}))} placeholder="Keystone Home Services"/>
            </label>
            <label className="sp-field">
              <span>Work email</span>
              <input type="email" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} placeholder="monica@keystone.com"/>
            </label>
          </div>
        )}

        {step === 1 && (
          <div className="sp-chips">
            {GOALS.map(g => (
              <button key={g} type="button" className={`sp-chip ${form.goal === g ? 'is-on' : ''}`} onClick={() => setForm(f => ({...f, goal: g}))}>
                <span>{g}</span>
              </button>
            ))}
          </div>
        )}

        {step === 2 && (
          <div className="sp-chips">
            {SERVICES.map(s => (
              <button key={s} type="button" className={`sp-chip ${form.services.includes(s) ? 'is-on' : ''}`} onClick={() => toggleService(s)}>
                <span>{s}</span>
              </button>
            ))}
          </div>
        )}

        {step === 3 && (
          <div className="sp-grid sp-grid--2">
            <div className="sp-field sp-field--group">
              <span>Monthly budget</span>
              <div className="sp-chips sp-chips--tight">
                {BUDGETS.map(b => (
                  <button key={b} type="button" className={`sp-chip sp-chip--sm ${form.budget === b ? 'is-on' : ''}`} onClick={() => setForm(f => ({...f, budget: b}))}>
                    <span>{b}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="sp-field sp-field--group">
              <span>When do you want to start?</span>
              <div className="sp-chips sp-chips--tight">
                {TIMELINES.map(t => (
                  <button key={t} type="button" className={`sp-chip sp-chip--sm ${form.timeline === t ? 'is-on' : ''}`} onClick={() => setForm(f => ({...f, timeline: t}))}>
                    <span>{t}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {step === 4 && (
          <label className="sp-field sp-field--full">
            <span>Tell us the story — where you are, where you need to be, what's gotten in the way.</span>
            <textarea rows="6" value={form.context} onChange={e => setForm(f => ({...f, context: e.target.value}))} placeholder="We're 18 months into a scale-up and CAC has doubled. Our attribution is leaky, our creative is stale, and our CRO is saying 'hire an agency.' We'd like to know what you'd do in our seat."/>
          </label>
        )}

        <div className="sp-form__foot">
          <button type="button" className="sp-btn sp-btn--ghost" onClick={() => setStep(s => Math.max(0, s-1))} disabled={step === 0}>
            <span>← Back</span>
          </button>
          {step < steps.length - 1 ? (
            <button type="button" className="sp-btn sp-btn--primary" onClick={() => canNext && setStep(s => s + 1)} disabled={!canNext}>
              <span>Continue</span><span className="arrow">→</span>
            </button>
          ) : (
            <button type="button" className="sp-btn sp-btn--primary" onClick={submit}>
              <span>Send brief</span><span className="arrow">↗</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StartForm });