const { Reveal, Icon, MagneticBtn, LogoMark, useLandingStats } = window;

function FinalCTA() {
  return (
    <section className="section" style={{ paddingBottom: 'var(--pad-section-y)' }}>
      <div className="container">
        <Reveal>
          <div style={{
            position: 'relative',
            padding: '72px 60px',
            borderRadius: 32,
            background: 'var(--bg-card)',
            border: '1px solid var(--line)',
            overflow: 'hidden',
            textAlign: 'center',
          }}>
            {/* big orb */}
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              width: 600, height: 600,
              background: 'radial-gradient(circle, var(--accent-glow), transparent 60%)',
              filter: 'blur(60px)', opacity: 0.6,
              animation: 'breathe 6s ease-in-out infinite',
            }} />
            <div style={{ position: 'relative' }}>
              <h2 className="h2" style={{ marginTop: 0, fontSize: 'clamp(42px, 5.5vw, 80px)', textTransform: 'none' }}>
                Arrête de reporter ta réussite.<br />
                <span className="serif-i" style={{ color: 'var(--accent)', fontWeight: 400 }}>commence dès maintenant.</span>
              </h2>
              <p style={{ marginTop: 24, color: 'var(--ink-dim)', fontSize: 18, maxWidth: 560, margin: '24px auto 0' }}>
                Rejoins VIZION en moins de deux minutes. Tu accèdes à la formation, aux outils et à la communauté dès ce soir.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40 }}>
                <MagneticBtn variant="primary" href="#pricing">Rejoindre maintenant <span className="btn-arrow"><Icon.Arrow /></span></MagneticBtn>
                <MagneticBtn variant="ghost" href="https://ig.me/m/remydigit" target="_blank" rel="noopener noreferrer">Parler à l'équipe</MagneticBtn>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const { footer } = useLandingStats();
  const pages = footer?.pages ?? [];

  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '28px 0', marginTop: 0 }}>
      <div className="container footer-inner">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <LogoMark />
          <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '0.04em' }}>VIZION</span>
        </div>

        <nav className="footer-links">
          {pages.map((p, i) => (
            <a key={i} href={`/p/${p.slug}`} data-cursor="hover" style={{ color: 'var(--ink-mute)', fontSize: 12, whiteSpace: 'nowrap' }}>
              {p.title}
            </a>
          ))}
        </nav>

        <span style={{ color: 'var(--ink-mute)', fontSize: 12, whiteSpace: 'nowrap' }}>
          © 2026 VIZION
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { FinalCTA, Footer });