// ============================================================
// MULTI-STEP RFQ WIZARD
// 4 steps + confirmation. Real-form validation. Animated step
// transitions. Direction B aesthetic (technical/conversion).
// ============================================================

function RfqWizard({ onBack, onNavigate }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    application: '',
    end_product: '',
    grade_known: '',
    products: [],
    purity: 99.5,
    volume_lbs: '',
    cadence: 'one-time',
    delivery_zip: '',
    package: 'bulk-rail',
    needed_by: '',
    name: '',
    company: '',
    email: '',
    phone: '',
    role: '',
    notes: '',
    consent: false,
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const steps = [
    { title: 'Application', desc: 'What are you making?' },
    { title: 'Material', desc: 'Which spec or grade?' },
    { title: 'Logistics', desc: 'Volume and delivery' },
    { title: 'Contact', desc: 'Who should we reach?' },
  ];

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const setMulti = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const validate = (s) => {
    const e = {};
    if (s === 0) {
      if (!data.application) e.application = 'Choose an application';
      if (!data.end_product || data.end_product.length < 3) e.end_product = 'Tell us what you’re making (3+ chars)';
    }
    if (s === 1) {
      if (data.grade_known === 'yes' && data.products.length === 0) e.products = 'Pick at least one product';
      if (!data.grade_known) e.grade_known = 'Choose one';
    }
    if (s === 2) {
      if (!data.volume_lbs || isNaN(+data.volume_lbs)) e.volume_lbs = 'Enter an estimated annual volume';
      if (!data.delivery_zip || !/^\d{5}$/.test(data.delivery_zip)) e.delivery_zip = 'Enter a 5-digit ZIP';
    }
    if (s === 3) {
      if (!data.name) e.name = 'Required';
      if (!data.company) e.company = 'Required';
      if (!data.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) e.email = 'Enter a work email';
      if (!data.phone || !/^[\d\s\-\+\(\)]{7,}$/.test(data.phone)) e.phone = 'Enter a valid phone';
      if (!data.consent) e.consent = 'Required';
    }
    return e;
  };

  const next = () => {
    const e = validate(step);
    setErrors(e);
    if (Object.keys(e).length === 0) {
      if (step === 3) {
        setSubmitted(true);
      } else {
        setStep(step + 1);
      }
    }
  };
  const back = () => setStep(s => Math.max(0, s - 1));

  return (
    <div className="dir-b ab-page" style={{ display: 'flex', flexDirection: 'column' }}>
      <BrowserChrome url="ussilica.com/quote" />
      <NavB onNavigate={onNavigate} />
      <div className="fmap-grid" style={{ flex: 1, display: 'grid', gridTemplateColumns: '360px 1fr', background: 'var(--bg)', height: 'calc(900px - 36px - 60px)', overflow: 'hidden' }}>
        {/* Left rail — progress + summary */}
        <aside style={{ background: 'var(--bg-deep)', color: 'var(--paper)', padding: '36px 30px', overflowY: 'auto' }}>
          <button onClick={onBack} style={{ background: 'transparent', border: 0, color: 'rgba(255,255,255,0.6)', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, marginBottom: 28 }}>
            <span style={{ transform: 'rotate(180deg)' }}><Icon.arrow size={12}/></span> Cancel & return
          </button>
          <div className="label-mono" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 12 }}>REQUEST FOR QUOTE</div>
          <h1 className="display" style={{ fontSize: 36, margin: '0 0 8px', fontWeight: 500, color: 'var(--paper)' }}>
            Tell us what you're making.
          </h1>
          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, margin: 0 }}>
            Four short steps, ~ 90 seconds. We route to the right material specialist and respond within one business day.
          </p>
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {steps.map((s, i) => {
              const done = i < step || submitted;
              const active = !submitted && i === step;
              return (
                <div key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', alignItems: 'center', opacity: (done || active) ? 1 : 0.45 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 99, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: '1px solid', borderColor: active || done ? 'var(--accent)' : 'rgba(255,255,255,0.25)',
                    background: done ? 'var(--accent)' : 'transparent',
                    color: done ? '#fff' : (active ? 'var(--accent)' : 'rgba(255,255,255,0.5)'),
                    fontSize: 12, fontFamily: 'IBM Plex Mono', fontWeight: 500,
                  }}>
                    {done ? <Icon.check size={12}/> : (i + 1).toString().padStart(2, '0')}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{s.title}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{s.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 32, padding: 18, background: 'rgba(255,255,255,0.05)', borderRadius: 10, border: '1px solid rgba(255,255,255,0.1)' }}>
            <div className="label-mono" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>NEED HELP?</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5 }}>
              Skip the form. Call us at <span className="mono" style={{ color: 'var(--accent)' }}>+1 (240) 343-2300</span> Mon–Fri 7a–6p ET.
            </div>
          </div>
        </aside>

        {/* Right — form */}
        <main style={{ overflowY: 'auto', padding: '48px 64px' }}>
          {submitted ? (
            <SuccessState data={data} onBack={onBack} onNavigate={onNavigate}/>
          ) : (
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
                <div className="label-mono" style={{ color: 'var(--ink-soft)' }}>STEP {String(step + 1).padStart(2, '0')} OF 04</div>
                <div style={{ display: 'flex', gap: 6, flex: 1, marginLeft: 24, maxWidth: 240 }}>
                  {[0, 1, 2, 3].map(i => (
                    <div key={i} style={{
                      flex: 1, height: 4, borderRadius: 99,
                      background: i <= step ? 'var(--accent)' : 'var(--line)',
                      transition: 'background .3s',
                    }}/>
                  ))}
                </div>
              </div>
              <div key={step} className="fade-in">
                {step === 0 && <StepApplication data={data} set={set} errors={errors}/>}
                {step === 1 && <StepMaterial data={data} set={set} setMulti={setMulti} errors={errors}/>}
                {step === 2 && <StepLogistics data={data} set={set} errors={errors}/>}
                {step === 3 && <StepContact data={data} set={set} errors={errors}/>}
              </div>
              <div style={{ marginTop: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <button onClick={back} disabled={step === 0}
                  style={{
                    background: 'transparent', border: 0, color: step === 0 ? 'var(--ink-soft)' : 'var(--ink)',
                    fontSize: 14, display: 'flex', alignItems: 'center', gap: 8,
                    cursor: step === 0 ? 'not-allowed' : 'pointer', opacity: step === 0 ? 0.4 : 1,
                  }}>
                  <span style={{ transform: 'rotate(180deg)' }}><Icon.arrow size={13}/></span> Back
                </button>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  {Object.keys(errors).length > 0 && (
                    <div style={{ fontSize: 12, color: '#b53b2a', display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon.warn size={13}/> Please fix the highlighted fields
                    </div>
                  )}
                  <MagButton variant="primary" size="lg" dir="b" onClick={next}>
                    {step === 3 ? 'Submit request' : 'Continue'} <Icon.arrow size={14}/>
                  </MagButton>
                </div>
              </div>
            </>
          )}
        </main>
      </div>
    </div>
  );
}

// ─── Step 1: Application ──────────────────────────────────
function StepApplication({ data, set, errors }) {
  return (
    <div>
      <h2 className="display" style={{ fontSize: 40, margin: 0, fontWeight: 500 }}>What are you making?</h2>
      <p style={{ marginTop: 10, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 560, lineHeight: 1.55 }}>
        Pick the industry that fits best — we'll route to the specialist who knows your chemistry.
      </p>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {APPLICATIONS.map(a => {
          const sel = data.application === a.id;
          return (
            <button key={a.id} onClick={() => set('application', a.id)}
              style={{
                padding: 18, textAlign: 'left', borderRadius: 10, cursor: 'pointer',
                border: '1.5px solid', borderColor: sel ? 'var(--accent)' : 'var(--line)',
                background: sel ? 'var(--accent-soft)' : 'var(--paper)',
                transition: 'all .12s', position: 'relative',
              }}>
              <div className="label-mono" style={{ color: sel ? 'var(--accent)' : 'var(--ink-soft)' }}>{String(a.count).padStart(2, '0')} grades</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 8 }}>{a.name}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>{a.tagline}</div>
              {sel && (
                <span style={{
                  position: 'absolute', top: 14, right: 14, width: 20, height: 20, borderRadius: 99,
                  background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}><Icon.check size={12}/></span>
              )}
            </button>
          );
        })}
      </div>
      {errors.application && <div style={{ marginTop: 12, fontSize: 12, color: '#b53b2a' }}>{errors.application}</div>}
      <div style={{ marginTop: 36 }}>
        <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>
          WHAT'S THE END PRODUCT? *
        </label>
        <input className={`field-input ${errors.end_product ? 'is-error' : ''}`}
          placeholder="e.g. amber container glass, foundry green-sand for ductile iron, epoxy filler"
          value={data.end_product} onChange={e => set('end_product', e.target.value)} />
        {errors.end_product && <div style={{ marginTop: 6, fontSize: 12, color: '#b53b2a' }}>{errors.end_product}</div>}
        <div style={{ marginTop: 8, fontSize: 12, color: 'var(--ink-soft)' }}>
          Free-text. The more specific, the better our match.
        </div>
      </div>
    </div>
  );
}

// ─── Step 2: Material ─────────────────────────────────────
function StepMaterial({ data, set, setMulti, errors }) {
  return (
    <div>
      <h2 className="display" style={{ fontSize: 40, margin: 0, fontWeight: 500 }}>Do you have a spec in mind?</h2>
      <p style={{ marginTop: 10, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 560, lineHeight: 1.55 }}>
        If you already buy from someone, you probably know the grade. If not, our team will propose candidates.
      </p>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {[
          ['yes', 'I know the grade', "I'll pick from your catalog."],
          ['no', "Help me choose", 'Propose candidates based on application.'],
        ].map(([v, t, sub]) => (
          <button key={v} onClick={() => set('grade_known', v)} style={{
            padding: '22px 24px', borderRadius: 10, textAlign: 'left',
            border: '1.5px solid', borderColor: data.grade_known === v ? 'var(--accent)' : 'var(--line)',
            background: data.grade_known === v ? 'var(--accent-soft)' : 'var(--paper)',
            cursor: 'pointer',
          }}>
            <div style={{ fontSize: 17, fontWeight: 500 }}>{t}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 6 }}>{sub}</div>
          </button>
        ))}
      </div>
      {errors.grade_known && <div style={{ marginTop: 12, fontSize: 12, color: '#b53b2a' }}>{errors.grade_known}</div>}

      {data.grade_known === 'yes' && (
        <div style={{ marginTop: 32 }} className="fade-in">
          <label className="label-mono" style={{ display: 'block', marginBottom: 12 }}>SELECT ONE OR MORE PRODUCTS</label>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {PRODUCTS.map(p => {
              const checked = data.products.includes(p.sku);
              return (
                <label key={p.sku} style={{
                  padding: 14, borderRadius: 8, cursor: 'pointer',
                  background: checked ? 'var(--accent-soft)' : 'var(--paper)',
                  border: '1px solid', borderColor: checked ? 'var(--accent)' : 'var(--line)',
                  display: 'flex', gap: 12, alignItems: 'center',
                }}>
                  <span style={{
                    width: 20, height: 20, borderRadius: 4, background: checked ? 'var(--accent)' : 'transparent',
                    border: '1.5px solid', borderColor: checked ? 'var(--accent)' : 'var(--line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                  }}>{checked && <Icon.check size={12}/>}</span>
                  <input type="checkbox" checked={checked} onChange={() => setMulti('products', p.sku)} style={{ display: 'none' }} />
                  <div style={{ flex: 1 }}>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{p.sku}</div>
                    <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{p.name}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)' }}>{p.mesh}</div>
                </label>
              );
            })}
          </div>
          {errors.products && <div style={{ marginTop: 8, fontSize: 12, color: '#b53b2a' }}>{errors.products}</div>}
        </div>
      )}

      {data.grade_known === 'no' && (
        <div style={{ marginTop: 32 }} className="fade-in">
          <label className="label-mono" style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <span>TARGET MIN. SiO₂ PURITY</span>
            <span className="mono" style={{ color: 'var(--accent)' }}>≥ {(+data.purity).toFixed(1)}%</span>
          </label>
          <input type="range" min="98" max="99.9" step="0.1" value={data.purity}
            onChange={e => set('purity', +e.target.value)}
            style={{ width: '100%', accentColor: 'oklch(0.48 0.18 252)' }} />
          <div style={{ marginTop: 24, padding: 18, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 10 }}>
            <div className="label-mono" style={{ marginBottom: 12 }}>SUGGESTED CANDIDATES · BASED ON YOUR INPUTS</div>
            {PRODUCTS.filter(p => p.silica_pct >= data.purity).slice(0, 3).map(p => (
              <div key={p.sku} style={{ padding: '12px 0', borderBottom: '1px dashed var(--line)', display: 'flex', justifyContent: 'space-between' }}>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{p.sku}</div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{p.name}</div>
                </div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{p.silica_pct}% SiO₂ · {p.mesh}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Step 3: Logistics ────────────────────────────────────
function StepLogistics({ data, set, errors }) {
  return (
    <div>
      <h2 className="display" style={{ fontSize: 40, margin: 0, fontWeight: 500 }}>Volume and delivery</h2>
      <p style={{ marginTop: 10, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 560, lineHeight: 1.55 }}>
        Rough numbers are fine — you'll firm these up with your specialist on the call.
      </p>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
        <div>
          <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>ESTIMATED ANNUAL VOLUME (lb) *</label>
          <input className={`field-input ${errors.volume_lbs ? 'is-error' : ''}`}
            inputMode="numeric" placeholder="e.g. 250000"
            value={data.volume_lbs}
            onChange={e => set('volume_lbs', e.target.value.replace(/[^\d.]/g, ''))} />
          {errors.volume_lbs && <div style={{ marginTop: 6, fontSize: 12, color: '#b53b2a' }}>{errors.volume_lbs}</div>}
          {data.volume_lbs && !errors.volume_lbs && (
            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--ink-soft)' }}>
              ≈ {(+data.volume_lbs / 2000).toLocaleString(undefined, {maximumFractionDigits: 1})} short tons · {(+data.volume_lbs / 2204.62).toLocaleString(undefined, {maximumFractionDigits: 1})} metric tonnes
            </div>
          )}
        </div>
        <div>
          <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>CADENCE</label>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {[['one-time', 'One-time'], ['recurring', 'Recurring'], ['contract', 'Annual contract']].map(([v, l]) => (
              <button key={v} onClick={() => set('cadence', v)} style={{
                padding: '12px 8px', fontSize: 13, fontWeight: 500,
                border: '1.5px solid', borderColor: data.cadence === v ? 'var(--accent)' : 'var(--line)',
                background: data.cadence === v ? 'var(--accent-soft)' : 'var(--paper)',
                color: data.cadence === v ? 'var(--accent)' : 'var(--ink)',
                borderRadius: 8, cursor: 'pointer',
              }}>{l}</button>
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
        <div>
          <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>DELIVERY ZIP *</label>
          <input className={`field-input ${errors.delivery_zip ? 'is-error' : ''}`}
            placeholder="e.g. 43615"
            value={data.delivery_zip} maxLength="5"
            onChange={e => set('delivery_zip', e.target.value.replace(/\D/g, ''))} />
          {errors.delivery_zip && <div style={{ marginTop: 6, fontSize: 12, color: '#b53b2a' }}>{errors.delivery_zip}</div>}
          {data.delivery_zip.length === 5 && !errors.delivery_zip && (
            <div style={{ marginTop: 6, fontSize: 12, color: 'oklch(0.55 0.15 145)', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Icon.check size={12}/> Closest plant: <strong style={{ marginLeft: 4 }}>Berkeley Springs, WV</strong> · 218 mi · rail-served
            </div>
          )}
        </div>
        <div>
          <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>NEEDED BY</label>
          <input className="field-input" type="date"
            value={data.needed_by} onChange={e => set('needed_by', e.target.value)} />
        </div>
      </div>
      <div style={{ marginTop: 22 }}>
        <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>PACKAGING</label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            ['bulk-rail', 'Bulk · Rail', '110 t / car'],
            ['bulk-truck', 'Bulk · Truck', '25 t / load'],
            ['super-sack', 'Super-sack', '2,000 lb FIBC'],
            ['bag', '50 lb bag', 'Palletized · 40/pal'],
          ].map(([v, l, s]) => (
            <button key={v} onClick={() => set('package', v)} style={{
              padding: 16, fontSize: 13, textAlign: 'left',
              border: '1.5px solid', borderColor: data.package === v ? 'var(--accent)' : 'var(--line)',
              background: data.package === v ? 'var(--accent-soft)' : 'var(--paper)',
              borderRadius: 8, cursor: 'pointer',
            }}>
              <div style={{ fontWeight: 500 }}>{l}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 4 }}>{s}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Step 4: Contact ──────────────────────────────────────
function StepContact({ data, set, errors }) {
  return (
    <div>
      <h2 className="display" style={{ fontSize: 40, margin: 0, fontWeight: 500 }}>Who should we reach?</h2>
      <p style={{ marginTop: 10, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 560, lineHeight: 1.55 }}>
        Last step. We'll respond within one business day with a sample, spec sheet, and indicative pricing.
      </p>
      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
        <Field label="Full name *" error={errors.name}>
          <input className={`field-input ${errors.name ? 'is-error' : ''}`}
            value={data.name} onChange={e => set('name', e.target.value)} placeholder="Jane Rivera"/>
        </Field>
        <Field label="Company *" error={errors.company}>
          <input className={`field-input ${errors.company ? 'is-error' : ''}`}
            value={data.company} onChange={e => set('company', e.target.value)} placeholder="Acme Glass"/>
        </Field>
        <Field label="Work email *" error={errors.email}>
          <input className={`field-input ${errors.email ? 'is-error' : ''}`}
            value={data.email} onChange={e => set('email', e.target.value)} placeholder="j.rivera@company.com"/>
        </Field>
        <Field label="Phone *" error={errors.phone}>
          <input className={`field-input ${errors.phone ? 'is-error' : ''}`}
            value={data.phone} onChange={e => set('phone', e.target.value)} placeholder="+1 555 123 4567"/>
        </Field>
        <Field label="Your role" error={null}>
          <select className="field-input"
            value={data.role} onChange={e => set('role', e.target.value)}>
            <option value="">Select role…</option>
            <option>Procurement</option>
            <option>R&amp;D / Materials Engineer</option>
            <option>Plant manager</option>
            <option>Operations</option>
            <option>Other</option>
          </select>
        </Field>
        <Field label="Anything else?" error={null}>
          <input className="field-input"
            value={data.notes} onChange={e => set('notes', e.target.value)}
            placeholder="(optional) Existing supplier, target price, etc."/>
        </Field>
      </div>
      <label style={{ marginTop: 28, display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer' }}>
        <span style={{
          width: 20, height: 20, borderRadius: 4, marginTop: 2,
          background: data.consent ? 'var(--accent)' : 'transparent',
          border: '1.5px solid', borderColor: data.consent ? 'var(--accent)' : (errors.consent ? '#b53b2a' : 'var(--line)'),
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flex: '0 0 auto',
        }}>{data.consent && <Icon.check size={12}/>}</span>
        <input type="checkbox" checked={data.consent} onChange={e => set('consent', e.target.checked)} style={{ display: 'none' }} />
        <span style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
          I agree to be contacted by U.S. Silica about this request. I understand my information is handled per the privacy policy. *
        </span>
      </label>
      {errors.consent && <div style={{ marginTop: 6, fontSize: 12, color: '#b53b2a', marginLeft: 30 }}>{errors.consent}</div>}
    </div>
  );
}

function Field({ label, error, children }) {
  return (
    <div>
      <label className="label-mono" style={{ display: 'block', marginBottom: 8 }}>{label}</label>
      {children}
      {error && <div style={{ marginTop: 6, fontSize: 12, color: '#b53b2a' }}>{error}</div>}
    </div>
  );
}

// ─── Success ──────────────────────────────────────────────
function SuccessState({ data, onBack, onNavigate }) {
  const sku = data.products[0] || (data.grade_known === 'no' ? 'TBD' : '—');
  return (
    <div className="fade-in" style={{ maxWidth: 720 }}>
      <div style={{ width: 64, height: 64, borderRadius: 99, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
        <Icon.check size={28}/>
      </div>
      <h1 className="display" style={{ fontSize: 56, margin: 0, fontWeight: 500 }}>Request sent.</h1>
      <p style={{ marginTop: 12, fontSize: 17, color: 'var(--ink-soft)', maxWidth: 540, lineHeight: 1.55 }}>
        We've routed your inquiry to a material specialist familiar with{' '}
        <strong style={{ color: 'var(--ink)' }}>
          {APPLICATIONS.find(a => a.id === data.application)?.name || 'your application'}
        </strong>.
        You'll hear from {data.name?.split(' ')[0] ? 'us at ' + data.email : 'a specialist'} within one business day.
      </p>
      <div style={{ marginTop: 32, padding: 24, background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12 }}>
        <div className="label-mono" style={{ marginBottom: 14 }}>REQUEST SUMMARY · #RFQ-{Math.floor(100000 + Math.random() * 900000)}</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          {[
            ['Application', APPLICATIONS.find(a => a.id === data.application)?.name || '—'],
            ['End product', data.end_product || '—'],
            ['Grade', sku === 'TBD' ? 'TBD (>= ' + data.purity + '% SiO₂)' : data.products.join(', ')],
            ['Volume', data.volume_lbs ? `${(+data.volume_lbs).toLocaleString()} lb / yr (${data.cadence})` : '—'],
            ['Delivery', data.delivery_zip ? `ZIP ${data.delivery_zip}, ${data.package}` : '—'],
            ['Needed by', data.needed_by || 'Flexible'],
            ['Contact', data.name],
            ['Company', data.company],
          ].map(([k, v]) => (
            <div key={k} style={{ borderBottom: '1px dashed var(--line)', paddingBottom: 10 }}>
              <div className="label-mono">{k}</div>
              <div style={{ fontSize: 14, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
        <MagButton variant="primary" size="lg" dir="b" onClick={onBack}>Back to home</MagButton>
        <MagButton variant="ghost" size="lg" dir="b" onClick={() => onNavigate?.('product')}>Browse catalog</MagButton>
      </div>
    </div>
  );
}

Object.assign(window, { RfqWizard });