// Apricus — modale liste d'attente / prise de contact
function WaitlistModal({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ prenom: '', email: '', interet: 'sejour', message: '' });
  const D = 'var(--font-display)';
  React.useEffect(() => { if (open) { setStep(0); setForm({ prenom: '', email: '', interet: 'sejour', message: '' }); } }, [open]);
  if (!open) return null;
  const canSend = form.prenom.trim() && /.+@.+\..+/.test(form.email);
  const interets = [
    ['sejour', 'Un séjour 2026'],
    ['menopause', 'Accompagnement ménopause'],
    ['suivi', 'Suivi individualisé'],
  ];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(50,40,18,0.42)', backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(540px, 100%)', maxHeight: '92vh', overflowY: 'auto',
        background: 'var(--apr-linen)', borderRadius: 24, boxShadow: 'var(--shadow-lg)', position: 'relative' }}>
        <button onClick={onClose} aria-label="Fermer" style={{ position: 'absolute', top: 16, right: 16, zIndex: 2,
          width: 38, height: 38, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'rgba(50,45,30,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="x" size={20} color="var(--apr-ink)" />
        </button>
        <div style={{ display: 'flex', gap: 6, padding: '22px 26px 0' }}>
          {[0, 1].map(i => (
            <div key={i} style={{ height: 4, flex: 1, borderRadius: 999,
              background: i <= step ? 'var(--apr-citron)' : 'var(--apr-line)', transition: 'background .3s' }} />
          ))}
        </div>
        <div style={{ padding: '22px 30px 28px' }}>
          {step === 0 ? (
            <>
              <Eyebrow>Rejoindre Apricus</Eyebrow>
              <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 30, color: 'var(--apr-ink)', margin: '8px 0 6px' }}>
                Faisons connaissance
              </h3>
              <p style={{ color: 'var(--apr-ink-soft)', fontSize: 15, lineHeight: 1.6, margin: '0 0 20px' }}>
                Laissez-moi vos coordonnées — je vous écris en avant-première dès l'ouverture.
              </p>
              <div style={{ marginBottom: 18 }}>
                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--apr-ink-soft)', marginBottom: 9, letterSpacing: '0.02em' }}>Ce qui vous intéresse</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
                  {interets.map(([id, label]) => {
                    const active = form.interet === id;
                    return (
                      <button key={id} onClick={() => setForm({ ...form, interet: id })} style={{
                        cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600,
                        padding: '9px 15px', borderRadius: 999, transition: 'all .15s var(--ease-out)',
                        background: active ? 'var(--apr-citron-pale)' : 'transparent',
                        color: active ? 'var(--apr-ink)' : 'var(--apr-ink-soft)',
                        border: `1.5px solid ${active ? 'var(--apr-citron)' : 'var(--apr-line-strong)'}` }}>{label}</button>
                    );
                  })}
                </div>
              </div>
              <BookingField label="Prénom" value={form.prenom} onChange={v => setForm({ ...form, prenom: v })} placeholder="Camille" />
              <BookingField label="Email" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder="vous@exemple.fr" />
              <BookingField label="Un mot pour moi (optionnel)" textarea value={form.message} onChange={v => setForm({ ...form, message: v })} placeholder="Ce qui vous amène, vos envies…" />
            </>
          ) : (
            <div style={{ textAlign: 'center', padding: '10px 0' }}>
              <div style={{ width: 76, height: 76, borderRadius: 999, border: '1.5px solid var(--apr-zest)', margin: '6px auto 18px',
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="check" size={40} color="var(--apr-zest)" />
              </div>
              <h3 style={{ fontFamily: D, fontWeight: 400, fontSize: 32, color: 'var(--apr-ink)', margin: '0 0 10px' }}>
                À très vite, {form.prenom || 'chère vous'} !
              </h3>
              <p style={{ color: 'var(--apr-ink-soft)', fontSize: 16, lineHeight: 1.65, maxWidth: 380, margin: '0 auto' }}>
                C'est noté. Je vous écris très bientôt pour la suite, <span style={{ fontStyle: 'italic', fontFamily: D }}>piano piano</span>.
              </p>
            </div>
          )}
        </div>
        <div style={{ borderTop: '1px solid var(--apr-line)', padding: '16px 30px',
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 10 }}>
          {step === 0 ? (
            <Button glow onClick={() => setStep(1)} disabled={!canSend}>
              Envoyer ma demande <Icon name="arrow-right" size={15} />
            </Button>
          ) : (
            <Button onClick={onClose}>Fermer</Button>
          )}
        </div>
      </div>
    </div>
  );
}

function BookingField({ label, value, onChange, placeholder, type, textarea }) {
  const [focus, setFocus] = React.useState(false);
  const base = {
    width: '100%', boxSizing: 'border-box', fontFamily: 'var(--font-body)', fontSize: 15,
    color: 'var(--apr-ink)', background: 'var(--apr-shell)', borderRadius: 12, padding: '12px 14px',
    outline: 'none', resize: 'vertical',
    border: `1.5px solid ${focus ? 'var(--apr-zest)' : 'var(--apr-line-strong)'}`,
    boxShadow: focus ? '0 0 0 3px rgba(224,150,0,.18)' : 'none', transition: 'all .15s var(--ease-out)',
  };
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--apr-ink-soft)', marginBottom: 7, letterSpacing: '0.02em' }}>{label}</label>
      {textarea
        ? <textarea rows={3} value={value} placeholder={placeholder} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} onChange={e => onChange(e.target.value)} style={base} />
        : <input type={type || 'text'} value={value} placeholder={placeholder} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} onChange={e => onChange(e.target.value)} style={base} />}
    </div>
  );
}
window.WaitlistModal = WaitlistModal;