/* global React, PageShell */

const NewsletterPage = () => (
  <PageShell>
    {/* HERO */}
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow-row">
          <span className="pill" style={{ background: 'var(--vert-menthe-soft)', borderColor: 'transparent', color: 'var(--vert-sapin)', fontWeight: 600 }}>
            Newsletter
          </span>
          <span className="pill" style={{ background: 'var(--blanc)', fontWeight: 500 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
            2 300 abonnés acquis
          </span>
        </div>
        <h1 className="t-h1" style={{ maxWidth: 880 }}>
          Le rendez-vous IA des PME. <span className="italic-accent">Tous les 15 jours.</span> Le mardi.
        </h1>
        <p className="t-body-lg lead">
          Pas une digest superficielle de 3 minutes. Un mini-magazine de 8 à 10 minutes,
          avec un édito de fond, des cas chiffrés terrain, un témoignage métier et un outil pour se situer.
        </p>
      </div>
    </section>

    {/* SUBSCRIBE FORM */}
    <section style={{ paddingTop: 24 }}>
      <div className="container" style={{ maxWidth: 640, margin: '0 auto' }}>
        <div className="card" style={{ padding: 36, background: 'var(--vert-sapin)', color: 'var(--blanc)', border: 'none' }}>
          <h2 style={{ fontSize: 24, fontWeight: 700, margin: '0 0 8px' }}>S'abonner — gratuit, désinscription en 1 clic</h2>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.8)', margin: '0 0 22px' }}>
            On ne partage jamais votre email. Pas de cross-sell. Une newsletter, point.
          </p>
          <form
            style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}
            onSubmit={(e) => { e.preventDefault(); window.openVirageDemo && window.openVirageDemo(); }}
          >
            <input
              type="email"
              required
              placeholder="vous@entreprise.fr"
              style={{
                flex: 1, minWidth: 240,
                padding: '14px 18px', borderRadius: 999,
                border: 'none', outline: 'none',
                fontSize: 15, fontFamily: 'inherit',
                background: 'rgba(255,255,255,0.1)', color: 'var(--blanc)',
              }}
            />
            <button type="submit" className="btn" style={{
              background: 'var(--vert-menthe)', color: 'var(--vert-profond)', fontWeight: 700,
            }}>
              S'abonner →
            </button>
          </form>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', margin: '14px 0 0' }}>
            En soumettant, vous acceptez de recevoir notre newsletter. RGPD.
          </p>
        </div>
      </div>
    </section>

    {/* FORMAT */}
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="t-eyebrow">Le format</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Quatre rubriques, 8 à 10 minutes de lecture</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, maxWidth: 920, margin: '0 auto' }}>
          {[
            { title: '📰 L\'édito de fond', desc: 'Un sujet, une analyse contextualisée, une prise de position assumée. Pas de tiédeur.' },
            { title: '📊 Cas chiffrés terrain', desc: 'Trois cas concrets de PME françaises, avec les chiffres avant/après. Sources vérifiables.' },
            { title: '🎤 Témoignage métier', desc: 'Un dirigeant, un DAF, un DRH ou un responsable IT raconte ce qui a marché chez lui.' },
            { title: '🧭 L\'outil pour se situer', desc: 'Une grille, un baromètre, un comparatif — quelque chose à utiliser tout de suite.' },
          ].map((s) => (
            <div key={s.title} className="card" style={{ padding: 28 }}>
              <h3 className="t-h3" style={{ marginBottom: 8 }}>{s.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--texte-soft)', margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ARCHIVES */}
    <section style={{ background: 'var(--blanc)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="t-eyebrow">Archives</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Les numéros parus</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, maxWidth: 920, margin: '0 auto' }}>
          {[
            { num: 'N°1', date: 'Avril 2026', title: 'L\'IA en PME : où en est-on vraiment ?', desc: 'Édito sur le décalage entre adoption affichée et usage réel. 3 cas concrets PME 50-150 collaborateurs.', live: true },
            { num: 'N°2', date: 'Mai 2026', title: 'En préparation', desc: 'Sortie prévue mi-mai. Abonnez-vous pour le recevoir directement.', live: false },
          ].map((a) => (
            <div key={a.num} className="card card-hover" style={{ padding: 28, opacity: a.live ? 1 : 0.7 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <span className="pill" style={{ background: a.live ? 'var(--vert-menthe-soft)' : 'var(--creme-deep)', borderColor: 'transparent', color: a.live ? 'var(--vert-sapin)' : 'var(--texte-mute)', fontWeight: 600 }}>
                  {a.num}
                </span>
                <span style={{ fontSize: 13, color: 'var(--texte-mute)' }}>{a.date}</span>
              </div>
              <h3 className="t-h3" style={{ marginBottom: 8 }}>{a.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--texte-soft)', lineHeight: 1.55, margin: '0 0 14px' }}>{a.desc}</p>
              {a.live ? (
                <a href="#" className="ulink" style={{ fontSize: 14, color: 'var(--vert-sapin)', fontWeight: 600 }}>Lire le numéro →</a>
              ) : (
                <span style={{ fontSize: 13, color: 'var(--texte-mute)', fontStyle: 'italic' }}>Bientôt disponible</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '80px 0' }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <img src="/assets/illus/blog-post.png" alt="" style={{ width: '100%', maxWidth: 360, marginBottom: 24 }}
             onError={(e) => { e.currentTarget.style.display = 'none'; }} />
        <h2 className="t-h2" style={{ marginBottom: 16 }}>Pas envie d'attendre la prochaine ?</h2>
        <p className="t-body" style={{ marginBottom: 32 }}>
          Voyez la plateforme en action et obtenez un audit gratuit de la maturité IA de vos équipes.
        </p>
        <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
           className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
          Demander une démo
        </a>
      </div>
    </section>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById('root')).render(<NewsletterPage />);