// Waitlist — page + form with success state.
function Waitlist({ setRoute }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [forWhom, setForWhom] = React.useState('self');
  const [email, setEmail] = React.useState('');

  if (submitted) {
    return <WaitlistConfirmation setRoute={setRoute} email={email} />;
  }

  return (
    <Section tone="default" id="waitlist" style={{ paddingBlock: 'clamp(64px, 9vw, 112px)' }}>
      <div style={{ maxWidth: '44rem', margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <div className="eyebrow">Liste d’attente</div>
          <h1 style={{ marginTop: 12 }}>Soyez parmi les premiers protégés.</h1>
          <p className="lead" style={{ marginTop: 16, marginInline: 'auto' }}>
            Inscrivez-vous pour accéder à Kin-Guard en priorité, bénéficier du tarif fondateur et être accompagné à l’installation.
          </p>
        </div>

        <ul
          style={{
            listStyle: 'none', padding: 0, margin: '40px 0 32px',
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12,
          }}
        >
          {[
            { icon: 'rocket',   label: 'Accès anticipé' },
            { icon: 'tag',      label: 'Tarif fondateur' },
            { icon: 'life-buoy',label: 'Accompagnement à l’installation' },
          ].map((b) => (
            <li key={b.label} className="kg-card" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: 16 }}>
              <div className="icon-circle" style={{ width: 32, height: 32 }}>
                <Icon name={b.icon} size={16} />
              </div>
              <span style={{ color: 'var(--charcoal-700)', fontSize: 15, fontWeight: 700 }}>{b.label}</span>
            </li>
          ))}
        </ul>

        <form
          onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
          style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 'var(--radius-2xl)',
            padding: 'clamp(24px, 4vw, 40px)',
            display: 'flex', flexDirection: 'column', gap: 20,
          }}
        >
          <label className="kg-label">
            <span>Email <span aria-hidden="true" style={{ color: 'var(--amber-600)' }}>*</span></span>
            <input
              type="email" required autoComplete="email"
              placeholder="vous@exemple.fr"
              className="kg-input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </label>

          <fieldset style={{ border: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <legend className="kg-label" style={{ marginBottom: 4, padding: 0 }}>Je m’inscris pour…</legend>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {[
                { v: 'self',     l: 'Moi' },
                { v: 'loved',    l: 'Un proche' },
                { v: 'both',     l: 'Les deux' },
              ].map((r) => {
                const active = forWhom === r.v;
                return (
                  <label
                    key={r.v}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      padding: '12px 14px',
                      border: active ? '2px solid var(--amber-500)' : '1px solid var(--border)',
                      borderRadius: 'var(--radius-md)',
                      background: active ? 'var(--amber-100)' : '#fff',
                      cursor: 'pointer',
                      fontSize: 15, color: active ? 'var(--charcoal-900)' : 'var(--charcoal-700)',
                      fontWeight: 700,
                      transition: 'all 140ms ease',
                    }}
                  >
                    <input
                      type="radio" name="for" value={r.v}
                      checked={active}
                      onChange={() => setForWhom(r.v)}
                      style={{ accentColor: 'var(--amber-500)', width: 16, height: 16 }}
                    />
                    {r.l}
                  </label>
                );
              })}
            </div>
          </fieldset>

          <label className="kg-label">
            <span>Code postal <span className="kg-label-aside">(facultatif)</span></span>
            <input
              type="text" inputMode="numeric" pattern="[0-9]{5}"
              placeholder="75011" className="kg-input"
              style={{ maxWidth: 160 }}
            />
          </label>

          <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--charcoal-700)', lineHeight: 1.5 }}>
            <input type="checkbox" required style={{ marginTop: 4, accentColor: 'var(--amber-500)', width: 18, height: 18 }} />
            <span>J’accepte que mon adresse email soit utilisée pour me tenir informé du lancement de Kin-Guard. Je peux me désinscrire à tout moment.</span>
          </label>

          <button type="submit" className="kg-btn kg-btn--primary" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
            Rejoindre la liste d'attente
          </button>

          <p style={{ color: 'var(--fg-muted)', fontSize: 13, margin: 0 }}>
            Nous ne vendons jamais votre adresse. Vous pouvez vous désinscrire en un clic à tout moment.
          </p>
        </form>
      </div>
    </Section>
  );
}

function WaitlistConfirmation({ setRoute, email }) {
  return (
    <Section tone="default" style={{ paddingBlock: 'clamp(80px, 12vw, 140px)' }}>
      <div
        style={{
          maxWidth: '36rem', margin: '0 auto',
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(28px, 5vw, 48px)',
          boxShadow: 'var(--shadow-lg)',
          textAlign: 'center',
        }}
      >
        <div
          style={{
            width: 64, height: 64, borderRadius: 999,
            background: 'var(--amber-100)', color: 'var(--amber-700)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 20,
          }}
        >
          <Icon name="check" size={30} />
        </div>
        <h1 style={{ fontSize: 'var(--fs-3xl)' }}>Vous êtes inscrit.</h1>
        <p className="lead" style={{ marginTop: 16, marginInline: 'auto' }}>
          Merci. Nous reviendrons vers vous dès que votre accès sera ouvert. En attendant, surveillez votre boîte : nous ne vous spammerons pas.
        </p>
        {email && (
          <p style={{ marginTop: 16, color: 'var(--fg-muted)', fontSize: 14 }}>
            Confirmation envoyée à <strong style={{ color: 'var(--charcoal-900)' }}>{email}</strong>
          </p>
        )}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <button className="kg-btn kg-btn--primary" onClick={() => setRoute('home')}>
            Retour à l’accueil
          </button>
        </div>
      </div>
    </Section>
  );
}

window.Waitlist = Waitlist;