// Final CTA section — "Simulez votre prochain investissement avec les bons chiffres."

function FinalCtaSection({ mobile = false }) {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setVisible(true); });
    }, { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const reveal = (i) => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateY(0)' : 'translateY(16px)',
    transition: `opacity .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${i * 110}ms`,
  });

  return (
    <section ref={ref} data-final-cta style={{
      width: '100%',
      padding: mobile ? '40px 20px 80px' : '60px 56px 120px',
      background: TOKENS.paper,
      position: 'relative',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        position: 'relative', overflow: 'hidden',
        borderRadius: mobile ? 22 : 28,
        background: '#141210',
        padding: mobile ? '40px 28px 36px' : '76px 80px 68px',
        ...reveal(0),
      }}>
        {/* Photo bg */}
        <img src="assets/final-cta-bg.jpg" alt="" aria-hidden style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center 45%',
          filter: 'saturate(0.85) brightness(0.7)',
        }}/>
        {/* Warm dark overlay */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(20,10,6,0.78) 0%, rgba(14,8,6,0.82) 45%, rgba(10,6,4,0.88) 100%)',
          pointerEvents: 'none',
        }}/>
        {/* Warm glow + grain */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,255,46,0.14) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 50% 120%, rgba(61,10,10,0.5) 0%, transparent 60%)',
          pointerEvents: 'none',
        }}/>
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
          opacity: 0.08,
          mixBlendMode: 'overlay',
          pointerEvents: 'none',
        }}/>

        {/* Content */}
        <div style={{
          position: 'relative', textAlign: 'center',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
        }}>
          {/* Headline */}
          <h2 style={{
            fontFamily: FONTS.display, fontWeight: 700,
            fontSize: mobile ? 30 : 72, lineHeight: mobile ? 1.1 : 1.02,
            letterSpacing: mobile ? -1.3 : -2.8,
            color: '#fff',
            margin: '0 0 20px', maxWidth: 900,
            textWrap: 'balance',
            ...reveal(2),
          }}>
            Simulez votre prochain investissement{' '}
            <span style={{ color: TOKENS.green }}>
              avec les bons chiffres<span style={{ color: TOKENS.green }}>.</span>
            </span>
          </h2>

          {/* Sub */}
          <p style={{
            fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16,
            lineHeight: 1.5,
            color: 'rgba(255,255,255,0.55)',
            margin: mobile ? '0 0 24px' : '0 0 44px',
            maxWidth: 560,
            textWrap: 'balance',
            ...reveal(3),
          }}>
            Rentabilité nette, cashflow réel, fiscalité, financement — tout ce qu'il faut pour décider.
          </p>

          {/* CTA row */}
          <div style={{
            display: 'flex', alignItems: 'center',
            gap: mobile ? 12 : 22,
            flexDirection: mobile ? 'column' : 'row',
            marginBottom: mobile ? 28 : 44,
            ...reveal(4),
          }}>
            <button data-cta-source="lpi_final-cta" style={{
              background: TOKENS.bordeaux, color: '#fff', border: 'none',
              padding: mobile ? '18px 28px' : '20px 32px',
              borderRadius: 12,
              fontFamily: FONTS.sans, fontSize: mobile ? 15 : 17, fontWeight: 600,
              cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 12,
              boxShadow: '0 10px 30px -5px rgba(92,13,7,0.45), 0 0 80px -10px rgba(92,13,7,0.3)',
              position: 'relative',
            }}>
              Démarrer maintenant
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M2 8h11m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </button>

            <button
              data-cal-link="team/moneyshape/demo-moneyshape"
              data-cal-namespace="demo-moneyshape"
              data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true","metadata[cta_source]":"final-cta"}'
              style={{
                background: 'rgba(255,255,255,0.08)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.22)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                padding: mobile ? '18px 28px' : '20px 32px',
                borderRadius: 12,
                fontFamily: FONTS.sans, fontSize: mobile ? 15 : 17, fontWeight: 600,
                cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>
              Parler à un expert
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M4 12L12 4M12 4H5M12 4V11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>

          {/* Stats row */}
          <div style={{
            display: 'flex', alignItems: 'flex-start',
            gap: mobile ? 40 : 64,
            ...reveal(5),
          }}>
            {[
              { big: '200+', label: 'Investisseurs actifs' },
              { big: '4,8/5', label: 'Note moyenne' },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{
                  fontFamily: FONTS.display, fontWeight: 700,
                  fontSize: mobile ? 28 : 34, lineHeight: 1,
                  letterSpacing: -0.8,
                  color: TOKENS.green,
                  fontVariantNumeric: 'tabular-nums',
                  marginBottom: 6,
                }}>{s.big}</div>
                <div style={{
                  fontFamily: FONTS.sans, fontSize: 11,
                  color: 'rgba(255,255,255,0.55)',
                  letterSpacing: 0.3,
                }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.FinalCtaSection = FinalCtaSection;