function InquiryModal({ open, onClose }) {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({ industry: '', useCase: '', name: '', email: '', company: '', abn: '' });
  const [done, setDone] = React.useState(false);
  if (!open) return null;

  const next = () => setStep(s => Math.min(3, s + 1));
  const prev = () => setStep(s => Math.max(1, s - 1));
  const submit = () => setDone(true);
  const close = () => { setStep(1); setDone(false); onClose(); };

  return (
    <div role="dialog" aria-modal="true" style={{
      position: 'fixed', inset: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(10,15,26,0.55)', padding: 20,
    }} onClick={close}>
      <div onClick={e => e.stopPropagation()} style={{
        background: '#fff', borderRadius: 12, maxWidth: 640, width: '100%',
        boxShadow: '0 24px 60px rgba(10,15,26,0.18)', overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', padding: '18px 24px',
          borderBottom: '1px solid #E6EAF0', gap: 16,
        }}>
          <div style={{ fontFamily: 'Inter', fontSize: 16, fontWeight: 600, color: '#0A0F1A' }}>Request a demo</div>
          {!done && (
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
              {[1,2,3].map(n => (
                <span key={n} style={{
                  width: 24, height: 4, borderRadius: 2,
                  background: n <= step ? '#E8753D' : '#E6EAF0',
                }}/>
              ))}
              <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#7B8593', marginLeft: 8, letterSpacing: '0.1em' }}>STEP {step}/3</span>
            </div>
          )}
          <button aria-label="Close" onClick={close} style={{
            background: 'transparent', border: 'none', color: '#56606E', cursor: 'pointer',
            padding: 4, display: 'flex', alignItems: 'center',
          }}><Icons.X size={20}/></button>
        </div>

        <div style={{ padding: 24 }}>
          {done ? (
            <div style={{ textAlign: 'center', padding: '24px 0' }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%', background: '#E0EFE7', color: '#1E6B47',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16,
              }}><Icons.Check size={26}/></div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: 0 }}>Inquiry sent</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.55, color: '#56606E', maxWidth: 400, margin: '10px auto 0' }}>
                We'll reply within one business day from our Perth office.
              </p>
              <div style={{ marginTop: 20 }}><Button onClick={close}>Done</Button></div>
            </div>
          ) : step === 1 ? (
            <div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: 0 }}>Which industry are you in?</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14, color: '#56606E', margin: '6px 0 18px' }}>We'll tailor the conversation to your sector.</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
                {INDUSTRIES.map(ind => {
                  const sel = data.industry === ind.id;
                  return (
                    <button key={ind.id} onClick={() => setData({ ...data, industry: ind.id })} style={{
                      display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
                      border: `1px solid ${sel ? '#E8753D' : '#D2D8E0'}`,
                      background: sel ? '#FBE4D6' : '#fff', borderRadius: 4, cursor: 'pointer',
                      textAlign: 'left', fontFamily: 'Inter', fontSize: 14, fontWeight: 500, color: '#0A0F1A',
                      boxShadow: sel ? '0 0 0 3px rgba(232,117,61,0.2)' : 'none',
                      transition: 'all 140ms',
                    }}>
                      <ind.Icon size={18}/> {ind.name}
                    </button>
                  );
                })}
              </div>
            </div>
          ) : step === 2 ? (
            <div>
              <h3 style={{ fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: 0 }}>Tell us about the use case</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14, color: '#56606E', margin: '6px 0 18px' }}>A sentence or two. We'll follow up with the right specialist.</p>
              <textarea value={data.useCase} onChange={e => setData({ ...data, useCase: e.target.value })}
                placeholder="e.g. Post-blast inspection at two open-pit sites in the Pilbara"
                style={{
                  width: '100%', minHeight: 140, padding: '12px 14px', fontFamily: 'Inter', fontSize: 14,
                  border: '1px solid #D2D8E0', borderRadius: 4, resize: 'vertical', color: '#121721',
                  boxSizing: 'border-box', lineHeight: 1.5,
                }}/>
            </div>
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <h3 style={{ gridColumn: '1/-1', fontFamily: 'Inter', fontSize: 20, fontWeight: 600, letterSpacing: '-0.015em', color: '#0A0F1A', margin: '0 0 6px' }}>Your contact details</h3>
              <Field label="Full name" value={data.name} onChange={v => setData({ ...data, name: v })}/>
              <Field label="Work email" value={data.email} onChange={v => setData({ ...data, email: v })}/>
              <Field label="Company" value={data.company} onChange={v => setData({ ...data, company: v })}/>
              <Field label="ABN (optional)" value={data.abn} onChange={v => setData({ ...data, abn: v })}/>
            </div>
          )}
        </div>

        {!done && (
          <div style={{ display: 'flex', padding: '16px 24px', borderTop: '1px solid #E6EAF0', gap: 10, background: '#FAFBFC' }}>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 10 }}>
              {step > 1 && <Button variant="secondary" onClick={prev}>Back</Button>}
              {step < 3
                ? <Button onClick={next} disabled={step === 1 && !data.industry} iconRight={<Icons.Arrow size={14}/>}>Continue</Button>
                : <Button onClick={submit} disabled={!data.name || !data.email}>Send inquiry</Button>}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <span style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 500, color: '#121721' }}>{label}</span>
      <input value={value} onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          fontFamily: 'Inter', fontSize: 14, padding: '10px 12px',
          border: `1px solid ${focus ? '#E8753D' : '#D2D8E0'}`, borderRadius: 4,
          background: '#fff', color: '#121721', outline: 'none',
          boxShadow: focus ? '0 0 0 3px rgba(232,117,61,0.35)' : 'none',
          transition: 'all 140ms',
        }}/>
    </label>
  );
}

window.InquiryModal = InquiryModal;