// CTA / waitlist + footer
function CtaFooter() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email && email.includes('@')) setSent(true);
  };

  return (
    <React.Fragment>
      <section className="cta-section" id="telecharger">
        <div className="container">
          <h2>
            Essaie. <em>Décide.</em>
            <br />
            <span className="stroke">Adopte.</span>
          </h2>
          <p className="lede">
            Téléchargement gratuit. Aucune carte demandée.<br />
            Premier essayage en moins d'une minute.
          </p>

          {!sent ? (
            <form className="waitlist" onSubmit={submit}>
              <input
                type="email"
                placeholder="ton@email.com — pour la beta iOS"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <button type="submit">Rejoindre</button>
            </form>
          ) : (
            <div style={{
              maxWidth: 460,
              margin: '0 auto 24px',
              padding: '20px 24px',
              background: 'var(--myrrae-sage)',
              borderRadius: 999,
              color: 'var(--myrrae-green)',
              fontSize: 15,
              fontWeight: 500,
              position: 'relative',
            }}>
              ✓ Merci ! On t'écrit dès qu'on ouvre une place.
            </div>
          )}

          <div className="stores">
            <img src={window.R('appStore','assets/section_1/app_store.png')} alt="App Store" />
            <img src={window.R('playStore','assets/section_1/play_store.png')} alt="Google Play" />
          </div>

          <div className="meta-row">
            Gratuit · iOS 16+ · Android 12+ · ~32 Mo
          </div>
        </div>
      </section>

      <footer className="site-footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-brand">
              <div className="word"><em style={{fontStyle:'italic'}}>M</em>yrrae</div>
              <p>
                L'app mode qui t'aide à décider en confiance —
                essayage virtuel photoréaliste et styliste IA personnel,
                au creux de ta main.
              </p>
            </div>
            <div className="footer-col">
              <h5>Produit</h5>
              <ul>
                <li><a href="#essai">Essayage virtuel</a></li>
                <li><a href="#styliste">Styliste IA</a></li>
                <li><a href="#marques">Marques</a></li>
                <li><a href="#avis">Avis utilisatrices</a></li>
                <li><a href="#telecharger">Télécharger</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h5>Société</h5>
              <ul>
                <li><a href="#">À propos</a></li>
                <li><a href="#">Carrières</a></li>
                <li><a href="#">Presse</a></li>
                <li><a href="#">Partenaires</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h5>Légal</h5>
              <ul>
                <li><a href="mentions-legales.html">Confidentialité</a></li>
                <li><a href="mentions-legales.html">Conditions</a></li>
                <li><a href="mentions-legales.html">Cookies</a></li>
                <li><a href="mentions-legales.html">Mentions légales</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <div>© {new Date().getFullYear()} Myrrae · Paris · Conçu en France</div>
            <div className="socials">
              <a href="#" aria-label="Instagram">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="1.4"><rect x="2" y="2" width="12" height="12" rx="3.5"/><circle cx="8" cy="8" r="3"/><circle cx="11.5" cy="4.5" r="0.6" fill="white"/></svg>
              </a>
              <a href="#" aria-label="Facebook">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="white"><path d="M9.2 14V8.4h1.9l.3-2.2H9.2V4.8c0-.6.2-1.1 1.1-1.1h1.2V1.8C12.1 1.7 11.4 1.6 10.6 1.6c-1.7 0-2.9 1-2.9 3v1.6H5.7v2.2h2V14h1.5z"/></svg>
              </a>
              <a href="#" aria-label="LinkedIn">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="white"><path d="M4.3 5.5H2.5V14h1.8V5.5zM3.4 2.3a1.05 1.05 0 1 0 0 2.1 1.05 1.05 0 0 0 0-2.1zM13.5 14V9.3c0-2.3-1.2-3.3-2.8-3.3-1.3 0-1.9.7-2.2 1.2V5.5H6.7c0 .6 0 8.5 0 8.5h1.8V9.3c0-.2 0-.3.1-.5.2-.4.5-.8 1.1-.8.8 0 1.1.6 1.1 1.5V14h1.7z"/></svg>
              </a>
            </div>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}

window.CtaFooter = CtaFooter;