function FinalCTA() {
  const calRef = React.useRef(null);
  React.useEffect(() => {
    const ensure = () => {
      if (!document.querySelector('link[data-calendly]')) {
        const l = document.createElement('link');
        l.rel = 'stylesheet';
        l.href = 'https://assets.calendly.com/assets/external/widget.css';
        l.setAttribute('data-calendly', '1');
        document.head.appendChild(l);
      }
      if (window.Calendly) { init(); return; }
      let s = document.querySelector('script[data-calendly]');
      if (!s) {
        s = document.createElement('script');
        s.src = 'https://assets.calendly.com/assets/external/widget.js';
        s.async = true;
        s.setAttribute('data-calendly', '1');
        s.onload = init;
        document.body.appendChild(s);
      } else {
        s.addEventListener('load', init);
      }
    };
    const init = () => {
      if (!calRef.current || calRef.current.dataset.inited) return;
      calRef.current.dataset.inited = '1';
      window.Calendly && window.Calendly.initInlineWidget({
        url: 'https://calendly.com/thomas-qorpoia/30min?hide_gdpr_banner=1&background_color=faf6ee&text_color=1a1815&primary_color=c85a2e',
        parentElement: calRef.current,
      });
    };
    ensure();
  }, []);

  return (
    <section className="final-cta" data-screen-label="08 CTA Final" id="contact">
      <div className="final-cta-inner">
        <img src="assets/logo.png" alt="Qorpo" className="final-logo reveal" />
        <h2 className="contact-huge reveal">
          Réservez votre<br/>
          <span className="italic">appel</span> <span className="outline">de démo.</span>
        </h2>
        <p className="final-lede reveal">
          Un audit offert de 30 minutes pour comprendre vos objectifs, évaluer votre potentiel et valider si notre solution est faite pour vous.
        </p>
        <div className="final-actions reveal">
          <div className="final-meta">
            <span><span className="accent">●</span> Places limitées</span>
            <span>Réponse sous 24h</span>
          </div>
        </div>
        <div className="calendly-wrap reveal" ref={calRef} />
      </div>

      <div className="final-bg-text" aria-hidden="true"></div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer-v2">
      <div className="footer-v2-top">
        <a href="#" className="footer-v2-brand" aria-label="Qorpo">
          <span className="footer-v2-logo">
            <img src="assets/logo.png" alt="" />
          </span>
          <span className="footer-v2-brand-text">Qorpo</span>
        </a>
        <div className="footer-v2-social">
          <div className="footer-v2-social-label">Social</div>
          <div className="footer-v2-social-row">
            <a href="#" className="footer-v2-social-link" aria-label="Instagram">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.7"/>
                <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.7"/>
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
              </svg>
              Instagram
            </a>
            <a href="#" className="footer-v2-social-link" aria-label="YouTube">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <rect x="2.5" y="5.5" width="19" height="13" rx="3.5" stroke="currentColor" strokeWidth="1.7"/>
                <path d="M10 9.5L15 12L10 14.5V9.5Z" fill="currentColor"/>
              </svg>
              YouTube
            </a>
            <a href="#" className="footer-v2-social-link" aria-label="LinkedIn">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="1.7"/>
                <path d="M7 10v7M7 7.5v.5M11 17v-4a2 2 0 0 1 4 0v4M11 10v7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/>
              </svg>
              LinkedIn
            </a>
          </div>
        </div>
      </div>

      <div className="footer-v2-wordmark" aria-hidden="true"></div>

      <div className="footer-v2-bottom">
        <span>© 2026 Qorpo. Tous droits réservés.</span>
        <a href="#">Mentions légales</a>
        <span>Designé avec <span className="footer-v2-heart">♥</span></span>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;