// Modal: 60-second analysis fake form
const AnalysisModal = ({ open, onClose }) => {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ branche: '', size: '', pain: '' });

  React.useEffect(() => { if (open) setStep(0); }, [open]);
  if (!open) return null;

  const close = () => { onClose(); setForm({ branche:'', size:'', pain:'' }); };
  const next = () => setStep(s => Math.min(3, s + 1));

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(10,10,10,0.6)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100,
      padding: 24,
    }} onClick={close}>
      <div onClick={e=>e.stopPropagation()} style={{
        background: '#fff', borderRadius: 16, width: '100%', maxWidth: 560,
        padding: 40, position: 'relative',
      }}>
        <button onClick={close} aria-label="Schließen" style={{
          position: 'absolute', top: 16, right: 16, width: 32, height: 32,
          border: 'none', background: 'transparent', borderRadius: 4, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="x" size={20} stroke={2} color="#0A0A0A"/>
        </button>

        <div style={{
          display: 'flex', gap: 4, marginBottom: 24,
        }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              flex: 1, height: 3, borderRadius: 2,
              background: i <= step ? '#FFD500' : '#E5E5E5',
              transition: 'background 200ms',
            }}/>
          ))}
        </div>

        {step === 0 && (
          <div>
            <h3 style={{ font: '700 28px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 8px' }}>
              60-Sekunden-Analyse
            </h3>
            <p style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252', margin:'0 0 24px' }}>
              Drei Fragen. Eine Einschätzung Ihres Einsparpotenzials.
            </p>
            <Field label="Welche Branche?">
              <select value={form.branche} onChange={e=>setForm({...form, branche:e.target.value})}
                style={inputStyle()}>
                <option value="">Bitte wählen…</option>
                <option>Rechtsberatung / Steuerberatung</option>
                <option>Handwerk</option>
                <option>Gesundheitswesen</option>
                <option>Handel &amp; E-Commerce</option>
                <option>Industrie</option>
                <option>Andere</option>
              </select>
            </Field>
          </div>
        )}

        {step === 1 && (
          <div>
            <h3 style={{ font: '700 28px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 24px' }}>
              Wie viele Mitarbeiter?
            </h3>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {['1–10', '11–50', '51–200', '200+'].map(s => (
                <button key={s} onClick={()=>{setForm({...form,size:s}); next();}}
                  style={{
                    padding: '16px', borderRadius: 8,
                    border: form.size===s ? '2px solid #0A0A0A' : '1px solid #E5E5E5',
                    background: '#fff', cursor: 'pointer',
                    font: '500 14px Roboto, sans-serif', color: '#0A0A0A',
                    textAlign: 'left',
                  }}>
                  {s} Mitarbeiter
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <h3 style={{ font: '700 28px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 8px' }}>
              Größter Zeitfresser?
            </h3>
            <p style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252', margin:'0 0 16px' }}>
              Was kostet Ihr Team aktuell am meisten Zeit?
            </p>
            <Field>
              <textarea rows={4} value={form.pain} onChange={e=>setForm({...form, pain:e.target.value})}
                placeholder="z.B. Anrufe entgegennehmen, Angebote schreiben, E-Mails sortieren…"
                style={{...inputStyle(), height: 'auto', padding: '12px', resize: 'none'}}/>
            </Field>
          </div>
        )}

        {step === 3 && (
          <div>
            <div style={{
              width: 56, height: 56, borderRadius: '50%', background: '#FFD500',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
            }}>
              <Icon name="check" size={28} stroke={2.4} color="#0A0A0A"/>
            </div>
            <h3 style={{ font: '700 28px/1.15 Roboto, sans-serif', letterSpacing:'-0.01em', margin:'0 0 12px' }}>
              Geschätztes Potenzial: 12–18 Std/Woche
            </h3>
            <p style={{ font:'400 15px/1.6 Roboto, sans-serif', color:'#525252', margin:'0 0 24px' }}>
              Auf Basis Ihrer Antworten lassen sich vermutlich mehrere Prozesse automatisieren —
              vor allem Telefonie und Dokumenten-Routing. Wir melden uns innerhalb von 24 Stunden mit
              einer konkreten Einschätzung.
            </p>
          </div>
        )}

        <div style={{ display:'flex', justifyContent:'space-between', marginTop: 24 }}>
          <button onClick={close} style={{
            background:'transparent', border:'none', cursor:'pointer',
            font:'500 14px Roboto, sans-serif', color:'#737373',
          }}>Abbrechen</button>
          {step < 3 && step !== 1 && (
            <button onClick={next} style={{
              height: 44, padding:'0 20px', border:'none', borderRadius: 8,
              background:'#FFD500', color:'#0A0A0A',
              font:'600 14px Roboto, sans-serif', cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap:8,
            }}>
              Weiter <Icon name="arrowRight" size={14} stroke={2}/>
            </button>
          )}
          {step === 3 && (
            <button onClick={close} style={{
              height: 44, padding:'0 20px', border:'none', borderRadius: 8,
              background:'#0A0A0A', color:'#fff',
              font:'600 14px Roboto, sans-serif', cursor:'pointer',
            }}>
              Schließen
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, children }) => (
  <label style={{ display:'flex', flexDirection:'column', gap: 6 }}>
    {label && <span style={{font:'600 13px Roboto, sans-serif', color:'#0A0A0A'}}>{label}</span>}
    {children}
  </label>
);

const inputStyle = () => ({
  height: 44, padding: '0 12px', font: '400 14px Roboto, sans-serif',
  border: '1px solid #E5E5E5', borderRadius: 4, background: '#fff', color: '#0A0A0A',
  width: '100%', outline: 'none',
});

window.AnalysisModal = AnalysisModal;