function CtaFooter() {
  return (
    <>
      <section className="cta" data-screen-label="07 CTA">
        <div className="container">
          <div className="cta-card reveal">
            <h2>Prêt à lancer ton prochain projet digital ?</h2>
            <p>Un appel de 30 minutes, un devis clair sous 48h, et une équipe qui s'engage. Aucun bullshit, juste du travail bien fait.</p>
            <div className="cta-actions">
              <button 
                className="btn btn-accent"
                onClick={() => window.dispatchEvent(new CustomEvent("openContactModal"))}
              >
                Démarrer un projet <Icon.Arrow />
              </button>
              <button
                className="btn btn-outline-white"
                onClick={() => {
                  const el = document.getElementById("projets");
                  if (!el) return;
                  const headerOffset = 110;
                  const y = el.getBoundingClientRect().top + window.pageYOffset - headerOffset;
                  window.scrollTo({ top: Math.max(y, 0), behavior: "smooth" });
                }}
              >
                Voir le portfolio
              </button>
            </div>
          </div>
        </div>
      </section>

      <footer className="footer" data-screen-label="08 Footer">
        <div className="container">
          <div className="footer-grid">
            <div>
              <a href="#" className="logo">
                <img src="logo.svg" alt="Discover Studio" style={{ height: 36, filter: "brightness(0) invert(1)" }} />
              </a>
              <p className="desc">Studio digital indépendant — conception de sites internet et solutions IT pour entreprises ambitieuses.</p>
              <div className="socials">
                <a href="https://www.facebook.com/discoverstudio1/" target="_blank" rel="noopener noreferrer" className="soc"><Icon.Facebook /></a>
                <a href="https://www.instagram.com/discover.studios/" target="_blank" rel="noopener noreferrer" className="soc"><Icon.Instagram /></a>
                <a href="https://www.tiktok.com/@discoverstudio_" target="_blank" rel="noopener noreferrer" className="soc"><Icon.TikTok /></a>
                <a href="https://www.linkedin.com/company/111637607/" target="_blank" rel="noopener noreferrer" className="soc"><Icon.Linkedin /></a>
              </div>
            </div>
            <div>
              <h5>Studio</h5>
              <ul>
                {[
                  { label: "Accueil",  id: "accueil"  },
                  { label: "Projets",  id: "projets"  },
                  { label: "Services", id: "services" },
                  { label: "Sur nous", id: "sur-nous" },
                  { label: "FAQ",      id: "faq"      },
                ].map(({ label, id }) => (
                  <li key={id}>
                    <a href={`#${id}`} onClick={(e) => {
                      e.preventDefault();
                      const el = document.getElementById(id);
                      if (!el) return;
                      window.scrollTo({ top: Math.max(el.getBoundingClientRect().top + window.pageYOffset - 110, 0), behavior: "smooth" });
                    }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h5>Services</h5>
              <ul>
                {["Sites web", "Solutions IT", "SEO", "Maintenance"].map((label) => (
                  <li key={label}>
                    <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openContactModal")); }}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h5>Newsletter</h5>
              <p style={{ fontSize: 14, color: "rgba(255,255,255,0.55)" }}>
                Une fois par mois, des études de cas et des coulisses d'agence. Pas de spam.
              </p>
              <form className="newsletter" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder="toi@tonemail.com" />
                <button type="submit">S'inscrire</button>
              </form>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© 2026 Discover Studio — Tous droits réservés</span>
            <span>
              <a href="/admin" style={{ marginRight: 18 }}>Connexion admin</a>
              <a href="#" style={{ marginRight: 18 }} onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openMentions")); }}>Mentions légales</a>
              <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("openPrivacy")); }}>Politique de confidentialité</a>
            </span>
          </div>
        </div>
      </footer>
    </>
  );
}

window.CtaFooter = CtaFooter;