// RFP, multi-step form
const RFP = ({ nav }) => {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    eventType: '', fleet: 500, date: '', location: '', budget: '', crowd: '', theme: '', name: '', email: '', company: ''
  });
  const [done, setDone] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [result, setResult] = React.useState(null);
  const [err, setErr] = React.useState('');

  const steps = ['Event type', 'Scale & timing', 'Location & crowd', 'Contact'];
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submitRFP = async () => {
    setErr(''); setSubmitting(true);
    try {
      const res = await fetch((window.__API_BASE||'') + '/api/quotes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          client_name: [data.name, data.company].filter(Boolean).join(' · ') || data.name,
          client_email: data.email,
          event_type: data.eventType,
          event_date: data.date,
          location: data.location,
          audience_size: data.crowd,
          drone_count_needed: String(data.fleet),
          budget: data.budget,
          message: data.theme,
        }),
      });
      const body = await res.json();
      if (!res.ok) throw new Error(body.error || 'Submission failed');
      setResult(body);
      setDone(true);
      window.__toast?.('RFP submitted · ' + (body.ref || ('#' + body.id)));
    } catch (ex) {
      setErr(ex.message);
    } finally {
      setSubmitting(false);
    }
  };

  if (done) {
    return (
      <div className="page">
        <div className="container-narrow" style={{ padding: '80px 32px' }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 24 }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--accent-bg)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>✓</div>
            <div>
              <div className="eyebrow">RFP submitted · {result?.ref || `#${result?.id || ''}`}</div>
            </div>
          </div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 52, margin: '0 0 16px', letterSpacing: '-0.02em', fontWeight: 400 }}>Your RFP is out in the network.</h1>
          <p style={{ fontSize: 17, color: 'var(--ink-2)', marginBottom: 32, lineHeight: 1.55 }}>
            We've routed it to 7 matched operators based on your location, date, and budget. You'll start hearing back within 24–48 hours at <strong>{data.email || 'your@email.com'}</strong>.
          </p>
          <div className="card" style={{ padding: 24, marginBottom: 24 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Matched operators</div>
            {window.__DSC_DATA.operators.slice(0, 4).map(o => (
              <div key={o.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: '1px solid var(--line)' }}>
                <span style={{ width: 36, height: 36, background: o.hex, borderRadius: 4 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: 14 }}>{o.name}</div>
                  <div className="mono muted" style={{ fontSize: 11 }}>{o.city} · {o.fleet} drones</div>
                </div>
                <span className="chip" style={{ fontSize: 10 }}>Notified</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-primary" onClick={() => nav({ page: 'directory' })}>Browse directory</button>
            <button className="btn" onClick={() => { setDone(false); setStep(0); }}>Submit another</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="container-narrow" style={{ padding: '48px 32px' }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Post an RFP · Free for clients</div>
        <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 42, margin: '0 0 32px', letterSpacing: '-0.02em', fontWeight: 400 }}>Tell us about your event.</h1>

        {/* Progress */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 32 }}>
          {steps.map((s, i) => (
            <div key={s} style={{ flex: 1 }}>
              <div style={{ height: 3, background: i <= step ? 'var(--ink)' : 'var(--line)', marginBottom: 6 }} />
              <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: i === step ? 'var(--ink)' : 'var(--ink-3)' }}>0{i + 1} · {s}</div>
            </div>
          ))}
        </div>

        <div className="card" style={{ padding: 32 }}>
          {step === 0 && (
            <div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--ff-display)', fontSize: 24, fontWeight: 400 }}>What kind of event?</h3>
              <p className="muted" style={{ fontSize: 13, marginBottom: 20 }}>Helps us match you with operators who specialize in your kind of show.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {['Brand activation', 'Wedding', 'Corporate / launch', 'Festival or concert', 'Stadium / sports', 'Municipal / civic', 'Private event', 'Other'].map(t => (
                  <button key={t} onClick={() => update('eventType', t)}
                    style={{
                      padding: 14, textAlign: 'left',
                      border: `1px solid ${data.eventType === t ? 'var(--ink)' : 'var(--line)'}`,
                      background: data.eventType === t ? 'var(--bg-2)' : 'var(--bg)',
                      borderRadius: 4, fontSize: 14,
                    }}>{t}</button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--ff-display)', fontSize: 24, fontWeight: 400 }}>How big, and when?</h3>
              <p className="muted" style={{ fontSize: 13, marginBottom: 24 }}>Rough numbers are fine, you can refine later with each operator.</p>
              <div style={{ marginBottom: 24 }}>
                <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Drone fleet size · {data.fleet.toLocaleString()}</label>
                <input type="range" min={100} max={2000} step={50} value={data.fleet} onChange={e => update('fleet', +e.target.value)} style={{ width: '100%', marginTop: 8 }} />
                <div className="mono muted" style={{ fontSize: 10, display: 'flex', justifyContent: 'space-between' }}><span>100</span><span>2,000+</span></div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Event date</label>
                  <input className="input" placeholder="e.g. June 14, 2026" value={data.date} onChange={e => update('date', e.target.value)} style={{ marginTop: 6 }} />
                </div>
                <div>
                  <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Est. budget (USD)</label>
                  <select className="select" value={data.budget} onChange={e => update('budget', e.target.value)} style={{ marginTop: 6 }}>
                    <option value="">Choose…</option>
                    <option>Under $50k</option>
                    <option>$50k–$100k</option>
                    <option>$100k–$250k</option>
                    <option>$250k–$500k</option>
                    <option>$500k+</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--ff-display)', fontSize: 24, fontWeight: 400 }}>Where, and who's watching?</h3>
              <p className="muted" style={{ fontSize: 13, marginBottom: 24 }}>Location drives permitting and travel cost. Crowd size drives FAA requirements.</p>
              <div style={{ marginBottom: 16 }}>
                <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Location</label>
                <input className="input" placeholder="City, venue, or GPS coords" value={data.location} onChange={e => update('location', e.target.value)} style={{ marginTop: 6 }} />
              </div>
              <div style={{ marginBottom: 16 }}>
                <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Estimated crowd</label>
                <select className="select" value={data.crowd} onChange={e => update('crowd', e.target.value)} style={{ marginTop: 6 }}>
                  <option value="">Choose…</option>
                  <option>Under 500</option>
                  <option>500–5,000</option>
                  <option>5,000–20,000</option>
                  <option>20,000+</option>
                </select>
              </div>
              <div>
                <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Theme / creative direction (optional)</label>
                <textarea className="textarea" placeholder="Brand marks? A specific moment? Synced music?" value={data.theme} onChange={e => update('theme', e.target.value)} style={{ marginTop: 6 }} />
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--ff-display)', fontSize: 24, fontWeight: 400 }}>How should we get back to you?</h3>
              <p className="muted" style={{ fontSize: 13, marginBottom: 24 }}>We share contact info only with operators matched to your RFP.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Name</label>
                  <input className="input" value={data.name} onChange={e => update('name', e.target.value)} style={{ marginTop: 6 }} />
                </div>
                <div>
                  <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Company</label>
                  <input className="input" value={data.company} onChange={e => update('company', e.target.value)} style={{ marginTop: 6 }} />
                </div>
              </div>
              <div style={{ marginTop: 12 }}>
                <label className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase' }}>Email</label>
                <input className="input" value={data.email} onChange={e => update('email', e.target.value)} style={{ marginTop: 6 }} />
              </div>

              <div className="card" style={{ padding: 16, marginTop: 24, background: 'var(--bg-2)' }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Summary</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 13 }}>
                  <div><span className="muted">Event · </span>{data.eventType || ''}</div>
                  <div><span className="muted">Fleet · </span>{data.fleet.toLocaleString()} drones</div>
                  <div><span className="muted">Date · </span>{data.date || ''}</div>
                  <div><span className="muted">Budget · </span>{data.budget || ''}</div>
                  <div><span className="muted">Location · </span>{data.location || ''}</div>
                  <div><span className="muted">Crowd · </span>{data.crowd || ''}</div>
                </div>
              </div>
            </div>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
            <button className="btn" disabled={step === 0} onClick={() => setStep(step - 1)} style={{ opacity: step === 0 ? 0.4 : 1 }}>← Back</button>
            {step < 3 ? (
              <button className="btn btn-primary"
                onClick={() => setStep(step + 1)}
                disabled={step === 0 && !data.eventType}>Continue →</button>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                {err && <div style={{ color: 'oklch(55% 0.2 25)', fontSize: 12 }}>{err}</div>}
                <button className="btn btn-primary btn-lg"
                  disabled={!data.email || !data.name || submitting}
                  onClick={submitRFP}>{submitting ? 'Submitting…' : 'Submit RFP'}</button>
              </div>
            )}
          </div>
        </div>

        <div style={{ marginTop: 20, textAlign: 'center', fontSize: 12 }} className="muted">
          <span className="mono">~3 MIN</span> · No signup required · Your RFP is reviewed before routing
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { RFP });