// js/landing.jsx — Hero, Problem, Transform sections
// Note: all cross-file window lookups are inside component functions (lazy)

// ─── Navbar ──────────────────────────────────────────────────────────
const NavBar = ({ onCTA }) => {
  const { useTweaks, CTAButton } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const { accent } = useTweaks();
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      padding: '0 48px', height: 68,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(10,22,40,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : 'none',
      transition: 'all .4s ease'
    }}>
      <img src="img/logos/gorently-logo-h-white.png" alt="GoRently" style={{ height: 32, width: 'auto' }} />
      <div className="nav-links" style={{ alignItems: 'center', gap: 36 }}>
        {['Comment ça marche', 'Nos services', 'Témoignages'].map((link) =>
        <a key={link} href="#" style={{ color: '#94A3B8', fontSize: 14, fontWeight: 500, textDecoration: 'none', transition: 'color .2s' }}
        onMouseEnter={(e) => e.target.style.color = '#fff'}
        onMouseLeave={(e) => e.target.style.color = '#94A3B8'}>
          {link}</a>
        )}
        <button onClick={onCTA} style={{ background: `${accent}22`, border: `1px solid ${accent}55`, color: accent, borderRadius: 10, padding: '9px 22px', fontSize: 14, fontWeight: 700, fontFamily: 'Plus Jakarta Sans,sans-serif', cursor: 'pointer', transition: 'all .2s' }}
        onMouseEnter={(e) => {e.target.style.background = `${accent}33`;e.target.style.boxShadow = `0 0 20px ${accent}44`;}}
        onMouseLeave={(e) => {e.target.style.background = `${accent}22`;e.target.style.boxShadow = 'none';}}>
          Analyser ma location →</button>
      </div>
    </nav>);

};

// ─── Hero Section ────────────────────────────────────────────────────
const HeroSection = ({ onCTA }) => {
  const { IPhoneMockup, PortalScreen, CTAButton, PillBadge, GlowOrb, DotGrid, useTweaks } = window;
  const { accent, ctaVariant, heroFontSize } = useTweaks();
  const ctaLabels = {
    A: '→ Analyser gratuitement ma location',
    B: 'Commencer mon diagnostic →',
    C: 'Voir mes opportunités gratuitement →'
  };
  return (
    <section id="hero" data-screen-label="hero" className="sp--hero" style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      background: 'radial-gradient(ellipse 80% 70% at 50% 40%, #162B52 0%, #0A1628 70%)',
      overflow: 'hidden', position: 'relative'
    }}>
      <DotGrid />
      <GlowOrb size={500} opacity={0.13} top={-80} right={-100} />
      <GlowOrb size={400} opacity={0.10} bottom={-60} left={-80} />
      <div className="hero-layout" style={{ position: 'relative', zIndex: 2 }}>
        {/* Left */}
        <div style={{ flex: 1, maxWidth: 620 }}>
          <div style={{ marginBottom: 28, animation: 'fadeInUp .6s ease both' }}>
            <PillBadge>Première étape du parcours GoRently · Places limitées</PillBadge>
          </div>
          <h1 className="h-xl-force" style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: heroFontSize, lineHeight: 1.12, letterSpacing: '-1.5px', color: '#fff', marginBottom: 24, animation: 'fadeInUp .7s .1s ease both', textWrap: 'balance' }}>
            Ce n'est pas votre logement qui limite vos revenus.{' '}
            C'est votre <span className="grad">système.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: '#94A3B8', maxWidth: 560, marginBottom: 40, animation: 'fadeInUp .7s .2s ease both' }}>GoRently s'intègre à votre activité comme un partenaire digital dédié — conseil, tarification, portail digital, expérience voyageur, upsells — pour que vous vous concentriez sur ce qui compte.

          </p>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16, animation: 'fadeInUp .7s .3s ease both' }}>
            <CTAButton size="large" onClick={onCTA}>{ctaLabels[ctaVariant] || ctaLabels.A}</CTAButton>
            <div className="hero-proofs" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
              {['Diagnostic personnalisé', '3 minutes', 'Sans engagement'].map((t) =>
              <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: '#94A3B8', whiteSpace: 'nowrap' }}>
                  <span style={{ color: '#10B981', fontWeight: 700 }}>✓</span> {t}
                </span>
              )}
            </div>
          </div>
          <div className="hero-social" style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 12, animation: 'fadeInUp .7s .4s ease both' }}>
            <div style={{ display: 'flex' }}>
              {['#3B7BF6', '#2563EB', '#1d4ed8', '#1e40af', '#1e3a8a'].map((c, i) =>
              <div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: `linear-gradient(135deg,${c},${c}aa)`, border: '2px solid #0A1628', marginLeft: i ? -8 : 0, fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700 }}>
                  {['S', 'T', 'C', 'M', 'A'][i]}
                </div>
              )}
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>⭐⭐⭐⭐⭐
Déjà 40+ appartements sont optimisés avec GoRently
</div>
          </div>
        </div>
        {/* Right — hero mockup */}
        <div style={{ position: 'relative', flexShrink: 0, animation: 'float 4s ease-in-out infinite' }}>
          <div style={{ position: 'absolute', bottom: -30, left: '50%', transform: 'translateX(-50%)', width: 200, height: 40, background: `radial-gradient(ellipse, ${accent}55 0%, transparent 70%)`, filter: 'blur(16px)' }} />
          <img src="img/heromockup.png" alt="GoRently Portal" className="hero-image" style={{ display: 'block', filter: 'drop-shadow(0 40px 80px rgba(59,123,246,0.25))' }} />
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 1 }}>
        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height: 60 }}>
          <path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#0F2040" />
        </svg>
      </div>
    </section>);};

// ─── Problem Section ──────────────────────────────────────────────────
const ProblemSection = ({ onCTA }) => {
  const { useInView, BrowserWindow, AirbnbCalendar, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.1);
  const { accent } = useTweaks();
  const painPoints = [
  { icon: '🏢', text: 'Vos concurrents sur Booking.com remplissent leur calendrier pendant que vous attendez les réservations Airbnb.' },
  { icon: '💸', text: 'Votre tarif est le même en janvier qu\'un week-end de Roland-Garros.' },
  { icon: '📋', text: 'Vos voyageurs cherchent un restaurant sur Google faute de guide préparé.' },
  { icon: '🛒', text: 'Chaque séjour se termine sans qu\'un seul service supplémentaire ait été proposé.' }];

  return (
    <section id="problem" data-screen-label="problem" className="sp" style={{ background: '#0F2040', overflow: 'hidden', position: 'relative' }}>
      <GlowOrb size={450} opacity={0.07} top={-100} right={100} />
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <div style={{ display: 'inline-block', fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 12 }}>Le constat</div>
          <h2 className="h-lg" style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, letterSpacing: '-1px', color: '#fff', lineHeight: 1.15, textWrap: 'balance' }}>
            Vous gérez bien. Mais vous pourriez<br /><span className="grad">gagner bien plus.</span>
          </h2>
        </div>
        <div className="grid-2--center" style={{ marginTop: 60 }}>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.9, color: '#CBD5E1', marginBottom: 32, opacity: inView ? 1 : 0, transition: 'opacity .7s .2s' }}>
              Vous avez investi dans votre logement. Vous répondez aux messages, vous gérez les entrées et sorties, vous maintenez vos avis au top.
            </p>
            <p style={{ fontSize: 19, lineHeight: 1.9, color: '#CBD5E1', marginBottom: 40, opacity: inView ? 1 : 0, transition: 'opacity .7s .3s' }}>
              Mais pendant ce temps, des leviers essentiels restent inexploités — et vos revenus plafonnent sans raison apparente.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {painPoints.map((p, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, background: 'rgba(239,68,68,.06)', borderLeft: '3px solid #EF4444', borderRadius: '0 8px 8px 0', padding: '14px 18px', opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(-20px)', transition: `opacity .5s ${.4 + i * .12}s, transform .5s ${.4 + i * .12}s` }}>
                  <div style={{ width: 36, height: 36, background: 'rgba(239,68,68,.12)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>{p.icon}</div>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: '#94A3B8', margin: 0 }}>{p.text}</p>
                </div>
              )}
            </div>
            <p style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontSize: 20, fontWeight: 800, color: '#fff', textAlign: 'center', marginTop: 44, padding: '20px 24px', background: `linear-gradient(135deg,${accent}12,${accent}06)`, borderRadius: 14, border: `1px solid ${accent}22`, opacity: inView ? 1 : 0, transition: 'opacity .8s 1s' }}>
              Ce n'est pas un problème de logement.<br />C'est un problème de <span className="grad">système.</span>
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: inView ? 1 : 0, transform: inView ? 'translateX(0)' : 'translateX(40px)', transition: 'opacity .7s .3s, transform .7s .3s' }}>
            <div style={{ animation: 'floatSlow 6s ease-in-out infinite' }}>
              <BrowserWindow width={340} title="calendar.airbnb.com" redTint={true}><AirbnbCalendar /></BrowserWindow>
            </div>
          </div>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>
        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height: 60 }}>
          <path d="M0,20 C400,60 1040,0 1440,40 L1440,60 L0,60 Z" fill="#0A1628" />
        </svg>
      </div>
    </section>);

};

// ─── Transform Section — visual comparison strips ────────────────────
const TransformSection = () => {
  const { useInView, GlowOrb, useTweaks, IPhoneMockup, PortalScreen } = window;
  const [ref, inView] = useInView(0.05);
  const { accent } = useTweaks();

  const rows = [
  {
    badge: 'DISTRIBUTION',
    label: 'Présence multi-plateforme',
    stat: '+35%', statLabel: 'de réservations en moyenne',
    avant: {
      title: '1 plateforme',
      sub: 'Airbnb uniquement',
      visual:
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', justifyContent: 'center', padding: '18px 0' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: 'rgba(255,90,90,.15)', border: '1.5px solid rgba(255,90,90,.3)', borderRadius: 10, padding: '7px 14px' }}>
              <svg width="16" height="16" viewBox="0 0 32 32" fill="none"><path d="M16 2C9 2 3 8.5 3 16.5c0 5.3 2.8 9.9 7 12.4l1-2.2c-3.4-2.1-5.7-5.8-5.7-10C5.3 9.8 10.1 4.3 16 4.3s10.7 5.5 10.7 12.4c0 4.2-2.3 7.9-5.7 10l1 2.2C26.2 26.4 29 21.8 29 16.5 29 8.5 23 2 16 2z" fill="#FF5A5F"/><path d="M16 7c-3.9 0-7.2 3.5-7.2 7.8 0 4.6 5.3 10.6 7.2 12.7 1.9-2.1 7.2-8.1 7.2-12.7C23.2 10.5 19.9 7 16 7zm0 11.5c-2 0-3.7-1.6-3.7-3.7S14 11.1 16 11.1s3.7 1.6 3.7 3.7-1.7 3.7-3.7 3.7z" fill="#FF5A5F"/></svg>
              <span style={{ fontSize: 12, fontWeight: 700, color: '#FF7070' }}>Airbnb</span>
            </div>
            <div style={{ color: '#4A6080', fontSize: 12 }}>uniquement</div>
          </div>

    },
    apres: {
      title: '5 plateformes',
      sub: 'Sync instantané, zéro double réservation',
      visual:
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, justifyContent: 'center', padding: '14px 8px' }}>
            {[
              { name: 'Airbnb', color: '#FF5A5F', bg: 'rgba(255,90,90,.15)', border: 'rgba(255,90,90,.3)',
                icon: <svg width="14" height="14" viewBox="0 0 32 32" fill="none"><path d="M16 2C9 2 3 8.5 3 16.5c0 5.3 2.8 9.9 7 12.4l1-2.2c-3.4-2.1-5.7-5.8-5.7-10C5.3 9.8 10.1 4.3 16 4.3s10.7 5.5 10.7 12.4c0 4.2-2.3 7.9-5.7 10l1 2.2C26.2 26.4 29 21.8 29 16.5 29 8.5 23 2 16 2z" fill="#FF5A5F"/><path d="M16 7c-3.9 0-7.2 3.5-7.2 7.8 0 4.6 5.3 10.6 7.2 12.7 1.9-2.1 7.2-8.1 7.2-12.7C23.2 10.5 19.9 7 16 7zm0 11.5c-2 0-3.7-1.6-3.7-3.7S14 11.1 16 11.1s3.7 1.6 3.7 3.7-1.7 3.7-3.7 3.7z" fill="#FF5A5F"/></svg> },
              { name: 'Booking', color: '#003580', bg: 'rgba(0,53,128,.2)', border: 'rgba(0,53,128,.4)',
                icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="4" fill="#003580"/><text x="12" y="16" textAnchor="middle" fontSize="11" fontWeight="900" fill="white">B.</text></svg> },
              { name: 'Abritel', color: '#FF6600', bg: 'rgba(255,102,0,.15)', border: 'rgba(255,102,0,.35)',
                icon: <svg width="14" height="14" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#FF6600"/><text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="900" fill="white">A</text></svg> },
              { name: 'VRBO', color: '#1A5EBF', bg: 'rgba(26,94,191,.15)', border: 'rgba(26,94,191,.35)',
                icon: <svg width="14" height="14" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#1A5EBF"/><text x="12" y="16" textAnchor="middle" fontSize="8" fontWeight="900" fill="white">VR</text></svg> },
              { name: 'Direct', color: '#10B981', bg: 'rgba(16,185,129,.15)', border: 'rgba(16,185,129,.35)',
                icon: <svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#10B981"/><text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="900" fill="white">↗</text></svg> },
            ].map((p, pi) =>
        <div key={pi} style={{ display: 'flex', alignItems: 'center', gap: 5, background: p.bg, color: p.color, border: `1.5px solid ${p.border}`, borderRadius: 8, padding: '5px 10px', fontSize: 11, fontWeight: 700 }}>{p.icon}{p.name}</div>
        )}
          </div>

    }
  },
  {
    badge: 'PRICING',
    label: 'Tarification dynamique',
    stat: '+28%', statLabel: 'de revenus annuels à taux d\'occupation équivalent',
    avant: {
      title: 'Tarif fixe',
      sub: '95€/nuit toute l\'année',
      visual:
      <div style={{ padding: '16px 12px' }}>
            <svg width="100%" height="44" viewBox="0 0 260 44">
              <line x1="0" y1="22" x2="260" y2="22" stroke="#94A3B8" strokeWidth="2.5" strokeDasharray="6 4" />
              <text x="130" y="40" textAnchor="middle" fontSize="11" fill="#94A3B8" fontStyle="italic">Fixe toute l'année</text>
            </svg>
          </div>

    },
    apres: {
      title: 'Prix dynamique',
      sub: '68€ → 210€ selon la demande',
      visual:
      <div style={{ padding: '16px 12px', position: 'relative' }}>
            <svg width="100%" height="56" viewBox="0 0 260 56" style={{ overflow: 'visible', width: "276px" }}>
              <defs><linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#10B981" /><stop offset="100%" stopColor={accent} /></linearGradient></defs>
              <path d="M0,40 C40,35 60,42 90,20 C120,5 140,38 170,10 C195,0 220,30 260,8" fill="none" stroke="url(#lineGrad)" strokeWidth="2.5" />
              <circle cx="170" cy="10" r="5" fill={accent} />
              <text x="170" y="6" textAnchor="middle" fontSize="9" fill={accent} fontWeight="700">Roland-Garros</text>
              <text x="0" y="54" fontSize="10" fill="#94A3B8">68€</text>
              <text x="230" y="16" fontSize="10" fill={accent} fontWeight="700">210€</text>
            </svg>
          </div>

    }
  },
  {
    badge: 'EXPÉRIENCE VOYAGEUR',
    label: 'Guidebook & Upsells',
    stat: '+47€', statLabel: 'de revenus additionnels par réservation',
    avant: {
      title: 'Message basique',
      sub: 'Appels à 21h pour le WiFi',
      visual:
      <div style={{ padding: '14px 12px', display: 'flex', justifyContent: 'center' }}>
            <div style={{ background: 'rgba(255,255,255,.06)', borderRadius: '16px 16px 16px 4px', padding: '12px 16px', maxWidth: 200, color: '#94A3B8', fontStyle: 'italic', lineHeight: 1.5, border: '1px solid rgba(255,255,255,.1)', fontSize: 13, height: "95px" }}>
              "Bonjour, le code WiFi est 1234. Bonne nuit 👋"
            </div>
          </div>

    },
    apres: {
      title: 'Portal digital complet',
      sub: 'WiFi · Guide · Upsells · 5 étoiles',
      visual:
      <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0' }}>
            <img src="img/mckp-portal.png" alt="Portal digital GoRently" style={{ height: 100, width: 'auto', borderRadius: 10, objectFit: 'contain' }} />
          </div>

    }
  },
  {
    badge: 'VISIBILITÉ',
    label: 'Classement & conversions',
    stat: '×2.5', statLabel: 'de taux de conversion listing',
    avant: {
      title: 'Page 4',
      sub: 'Taux de conversion ~2%',
      visual:
      <div style={{ padding: '14px 0', textAlign: 'center' }}>
            <div style={{ fontSize: 28, marginBottom: 6, filter: 'grayscale(1) opacity(.5)' }}>★★★☆☆</div>
            <div style={{ background: 'rgba(239,68,68,.18)', color: '#EF6666', borderRadius: 8, display: 'inline-block', padding: '4px 16px', fontSize: 13, fontWeight: 800 }}>Page 4</div>
          </div>

    },
    apres: {
      title: 'Page 1',
      sub: 'Taux de conversion ~5%',
      visual:
      <div style={{ padding: '14px 0', textAlign: 'center' }}>
            <div style={{ fontSize: 28, marginBottom: 6, color: '#F59E0B' }}>★★★★★</div>
            <div style={{ background: 'rgba(16,185,129,.18)', color: '#10B981', borderRadius: 8, display: 'inline-block', padding: '4px 16px', fontSize: 13, fontWeight: 800 }}>1ère page ✓</div>
          </div>

    }
  }];


  return (
    <section id="transform" data-screen-label="transform" className="sp" style={{ background: '#0A1628', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={600} opacity={0.06} top={200} left={-200} />
      <GlowOrb size={500} opacity={0.06} bottom={100} right={-100} />
      <div ref={ref} style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 14 }}>La transformation</div>
          <h2 className="h-lg" style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, letterSpacing: '-1px', color: '#fff', lineHeight: 1.2, textWrap: 'balance' }}>
            La différence entre un hôte qui subit<br />et un hôte qui <span className="grad">optimise</span>
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {rows.map((row, i) => {
            const delay = i * .12;
            return (
              <div key={i} className="transform-row" style={{
                background: 'rgba(255,255,255,.03)',
                border: '1px solid rgba(255,255,255,.07)',
                borderRadius: 20, overflow: 'hidden',
                opacity: inView ? 1 : 0,
                transform: inView ? 'translateY(0)' : 'translateY(20px)',
                transition: `opacity .5s ${delay}s, transform .5s ${delay}s`
              }}>
                {/* AVANT */}
                <div style={{ padding: '24px 28px', background: 'rgba(239,68,68,.04)', borderRight: '1px solid rgba(255,255,255,.06)' }}>
                  <div style={{ display: 'inline-block', background: 'rgba(239,68,68,.15)', color: '#EF6666', borderRadius: 6, padding: '3px 10px', fontSize: 10, fontWeight: 800, letterSpacing: '1px', marginBottom: 12 }}>AVANT</div>
                  <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 22, color: '#fff', marginBottom: 4 }}>{row.avant.title}</div>
                  <div style={{ fontSize: 13, color: '#94A3B8', marginBottom: 8 }}>{row.avant.sub}</div>
                  {row.avant.visual}
                </div>

                {/* Center arrow + stat */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '16px 20px', minWidth: 100, background: `linear-gradient(180deg,${accent}08,${accent}04)`, borderRight: '1px solid rgba(255,255,255,.06)' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#4A6080', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: 6 }}>{row.badge}</div>
                  <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 36, color: accent, letterSpacing: '-1px', lineHeight: 1.1 }}>{row.stat}</div>
                  <div style={{ fontSize: 11, color: '#94A3B8', textAlign: 'center', marginTop: 4, maxWidth: 120, lineHeight: 1.5 }}>{row.statLabel}</div>
                  <div style={{ fontSize: 22, marginTop: 10, color: accent }}>→</div>
                </div>

                {/* APRÈS */}
                <div style={{ padding: '24px 28px', background: 'rgba(16,185,129,.03)' }}>
                  <div style={{ display: 'inline-block', background: 'rgba(16,185,129,.18)', color: '#10B981', borderRadius: 6, padding: '3px 10px', fontSize: 10, fontWeight: 800, letterSpacing: '1px', marginBottom: 12 }}>APRÈS</div>
                  <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 22, color: '#fff', marginBottom: 4 }}>{row.apres.title}</div>
                  <div style={{ fontSize: 13, color: '#94A3B8', marginBottom: 8 }}>{row.apres.sub}</div>
                  {row.apres.visual}
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

Object.assign(window, { NavBar, HeroSection, ProblemSection, TransformSection });