// V5 (Variant C) — Hero photo-immersif : appartement parisien en fond,
// titre blanc fort à gauche, bento en verre à droite. Desktop 1440×880.

function V5() {
  const [loaded, setLoaded] = React.useState(false);
  const [cycle, setCycle] = React.useState(0);
  const [yieldVal, setYieldVal] = React.useState(6.8);

  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 60);
    const ci = setInterval(() => setCycle(c => (c + 1) % 5), 2400);
    const yi = setInterval(() => setYieldVal(6.8 + (Math.random() - 0.5) * 0.06), 1800);
    return () => { clearTimeout(t); clearInterval(ci); clearInterval(yi); };
  }, []);

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

  // glass tile — semi-transparent white w/ backdrop blur
  const glass = {
    background: 'rgba(255,255,255,0.82)',
    backdropFilter: 'blur(18px) saturate(1.15)',
    WebkitBackdropFilter: 'blur(18px) saturate(1.15)',
    borderRadius: 14,
    border: '1px solid rgba(255,255,255,0.7)',
    boxShadow: '0 10px 30px -10px rgba(29,29,29,0.25), inset 0 1px 0 rgba(255,255,255,0.8)',
    position: 'relative', overflow: 'hidden',
    transition: 'transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s',
  };

  const onEnter = (e) => {
    e.currentTarget.style.transform = 'translateY(-3px)';
    e.currentTarget.style.boxShadow = '0 18px 40px -10px rgba(29,29,29,0.3), inset 0 1px 0 rgba(255,255,255,0.8)';
  };
  const onLeave = (e) => {
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = '0 10px 30px -10px rgba(29,29,29,0.25), inset 0 1px 0 rgba(255,255,255,0.8)';
  };

  const highlightRing = (i) => cycle === i ? {
    boxShadow: `0 0 0 2px ${TOKENS.bordeaux}, 0 18px 40px -10px rgba(92,13,7,0.35)`,
  } : {};

  return (
    <div style={{
      width: 1440, height: 880, fontFamily: FONTS.sans,
      position: 'relative', overflow: 'hidden', color: '#fff',
    }}>
      {/* PHOTO BACKGROUND */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/apartment-paris.jpg)`,
        backgroundSize: '90% auto',
        backgroundPosition: 'right center',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#2a1f18',
        transform: loaded ? 'scale(1)' : 'scale(1.04)',
        transition: 'transform 2.4s cubic-bezier(.2,.7,.2,1)',
      }}/>
      {/* Gradient scrim for left-side legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(95deg, rgba(29,29,29,0.72) 0%, rgba(29,29,29,0.55) 30%, rgba(29,29,29,0.15) 55%, rgba(249,247,246,0) 78%)',
      }}/>
      {/* subtle bordeaux tint on left edge */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(95deg, rgba(92,13,7,0.35) 0%, transparent 40%)',
        mixBlendMode: 'multiply',
      }}/>
      {/* warm film grain vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(29,29,29,0.35) 100%)',
        pointerEvents: 'none',
      }}/>

      {/* NAV is rendered at page level (sticky) — placeholder space reserved below */}
      <div style={{ height: 76, position: 'relative', zIndex: 2 }}/>

      <div style={{
        position: 'relative', zIndex: 2,
        display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 56,
        padding: '32px 56px 0',
      }}>
        {/* LEFT */}
        <div style={{ paddingTop: 70 }}>
          <div style={reveal(0)}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px',
              background: 'rgba(255,255,255,0.12)',
              border: '1px solid rgba(255,255,255,0.22)',
              backdropFilter: 'blur(10px)',
              WebkitBackdropFilter: 'blur(10px)',
              borderRadius: 99,
              fontFamily: FONTS.mono, fontSize: 10, fontWeight: 500,
              letterSpacing: 1.5, textTransform: 'uppercase', color: '#fff',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKENS.green, boxShadow: `0 0 8px ${TOKENS.green}` }}/>
              Nouveau · Analyse complète par bien
            </span>
          </div>

          <h1 style={{
            fontFamily: FONTS.display, fontWeight: 700,
            fontSize: 88, lineHeight: 0.98, letterSpacing: -2.8,
            margin: '24px 0 26px', color: '#fff',
            textShadow: '0 2px 20px rgba(0,0,0,0.3)',
            ...reveal(1),
          }}>
            Avant de<br/>
            signer,<br/>
            <span style={{ color: TOKENS.green }}>simulez</span>
            <span style={{ color: TOKENS.green }}>.</span>
          </h1>

          <p style={{
            fontFamily: FONTS.sans, fontWeight: 400, fontSize: 17, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.85)', maxWidth: 430, marginBottom: 36,
            textShadow: '0 1px 8px rgba(0,0,0,0.35)',
            ...reveal(2),
          }}>
            Cashflow, rentabilité, fiscalité, capacité d'emprunt — tout ce qu'il faut savoir sur un bien, en une seule analyse.
          </p>

          <div style={{ display: 'flex', gap: 20, alignItems: 'center', marginTop: 12, ...reveal(4) }}>
            <button
              data-cta-source="lpi_hero"
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 14px 36px -5px rgba(92,13,7,0.5)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 30px -5px rgba(92,13,7,0.4)'; }}
              style={{
                background: TOKENS.bordeaux, color: '#fff', border: 'none',
                padding: '20px 32px', borderRadius: 12, fontSize: 17, fontWeight: 600,
                fontFamily: FONTS.sans, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 12,
                boxShadow: '0 10px 30px -5px rgba(92,13,7,0.4)',
                transition: 'transform .2s, box-shadow .2s',
              }}>
              Démarrer maintenant
              <svg width="16" height="16" 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]":"hero"}'
              style={{
                background: 'rgba(255,255,255,0.12)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.28)',
                backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                padding: '20px 30px', borderRadius: 12, fontSize: 17, fontWeight: 600,
                fontFamily: FONTS.sans, cursor: 'pointer',
              }}>
              Réserver une démo
            </button>
          </div>

          <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 14, ...reveal(5) }}>
            <div style={{ display: 'flex' }}>
              {[
                { bg: TOKENS.bordeaux, fg: '#fff', i: 'LM' },
                { bg: TOKENS.green, fg: TOKENS.ink, i: 'SD' },
                { bg: TOKENS.blue, fg: '#fff', i: 'AK' },
                { bg: TOKENS.coral, fg: '#fff', i: 'RP' },
              ].map((a, i) => (
                <div key={i} style={{
                  width: 32, height: 32, borderRadius: 99,
                  background: a.bg, color: a.fg,
                  border: '2px solid rgba(255,255,255,0.95)',
                  marginLeft: i ? -9 : 0,
                  boxShadow: '0 2px 6px rgba(0,0,0,0.28)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: FONTS.sans, fontSize: 11, fontWeight: 700, letterSpacing: 0.2,
                }}>{a.i}</div>
              ))}
            </div>
            <div>
              <div style={{ fontFamily: FONTS.sans, fontSize: 13, fontWeight: 600, color: '#fff', whiteSpace: 'nowrap' }}>
                +200 investisseurs actifs ce mois
              </div>
              <div style={{ fontFamily: FONTS.sans, fontSize: 12, color: 'rgba(255,255,255,0.7)', whiteSpace: 'nowrap' }}>
                ★★★★★ 4,8
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — GLASS BENTO */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gridTemplateRows: 'repeat(4, 148px)',
          gap: 12, paddingTop: 44,
        }}>
          {/* Comparateur 2 biens */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{ ...glass, gridColumn: '1 / 5', gridRow: '1 / 3', padding: 22, ...reveal(2), ...highlightRing(0) }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.5 }}>
                Comparateur · 2 biens
              </div>
              <div style={{
                fontFamily: FONTS.mono, fontSize: 10, fontWeight: 700,
                background: TOKENS.green, color: TOKENS.ink,
                padding: '4px 8px', borderRadius: 6, letterSpacing: 0.5,
                whiteSpace: 'nowrap',
              }}>✓ Paris 12 · Plus rentable</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {/* Bien A — gagnant */}
              <div style={{
                background: '#fff',
                border: `1.5px solid ${TOKENS.green}`,
                borderRadius: 10, padding: 12,
                boxShadow: '0 4px 14px -4px rgba(200,255,46,0.35)',
                position: 'relative',
              }}>
                <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.2 }}>Studio Paris 12</div>
                <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 26, color: TOKENS.ink, marginTop: 8, letterSpacing: -0.6, lineHeight: 1 }}>6,8 %</div>
                <div style={{ fontSize: 10, color: TOKENS.ink60, marginTop: 3 }}>Rentabilité nette</div>
                <div style={{ height: 1, background: 'rgba(29,29,29,0.08)', margin: '10px 0' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: TOKENS.ink60 }}>
                  <span>Cashflow</span><span style={{ color: TOKENS.greenDark || '#5a7a00', fontWeight: 700 }}>+287 €</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: TOKENS.ink60, marginTop: 4 }}>
                  <span>Prix</span><span style={{ color: TOKENS.ink, fontWeight: 600 }}>235 k€</span>
                </div>
              </div>
              {/* Bien B — dimmed */}
              <div style={{
                background: 'rgba(29,29,29,0.04)',
                border: '1px solid rgba(29,29,29,0.06)',
                borderRadius: 10, padding: 12,
                opacity: 0.75,
              }}>
                <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: TOKENS.ink40, textTransform: 'uppercase', letterSpacing: 1.2 }}>Studio Vincennes</div>
                <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 26, color: TOKENS.ink, marginTop: 8, letterSpacing: -0.6, lineHeight: 1 }}>4,9 %</div>
                <div style={{ fontSize: 10, color: TOKENS.ink60, marginTop: 3 }}>Rentabilité nette</div>
                <div style={{ height: 1, background: 'rgba(29,29,29,0.08)', margin: '10px 0' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: TOKENS.ink60 }}>
                  <span>Cashflow</span><span style={{ color: TOKENS.ink, fontWeight: 600 }}>+175 €</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: TOKENS.ink60, marginTop: 4 }}>
                  <span>Prix</span><span style={{ color: TOKENS.ink, fontWeight: 600 }}>285 k€</span>
                </div>
              </div>
            </div>
          </div>

          {/* Rentabilité — dark glass (same treatment as "Ce bien bat la moyenne") */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{
              gridColumn: '5 / 7', gridRow: '1 / 2',
              background: 'rgba(29,29,29,0.78)',
              backdropFilter: 'blur(18px) saturate(1.2)',
              WebkitBackdropFilter: 'blur(18px) saturate(1.2)',
              border: '1px solid rgba(255,255,255,0.08)',
              color: '#fff',
              borderRadius: 14, padding: 20, position: 'relative', overflow: 'hidden',
              transition: 'transform .3s, box-shadow .3s',
              ...reveal(3), ...highlightRing(1),
            }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%)',
              backgroundSize: '200% 100%',
              animation: 'v5shimmer 4s linear infinite',
              pointerEvents: 'none',
            }}/>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1.5 }}>
              Rentabilité nette
            </div>
            <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 42, letterSpacing: -1.2, lineHeight: 1, marginTop: 8 }}>
              6,8 %
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>Après charges et vacance locative</div>
          </div>

          {/* Fiscalité glass */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{ ...glass, gridColumn: '5 / 7', gridRow: '2 / 3', padding: 18, ...reveal(4), ...highlightRing(2) }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: TOKENS.blue, animation: 'v5pulseDot 1.6s ease-in-out infinite' }}/>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.5 }}>
                Régime optimal
              </div>
            </div>
            <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 28, color: TOKENS.ink, letterSpacing: -0.6, lineHeight: 1 }}>
              LMNP réel
            </div>
            <div style={{ marginTop: 10, fontSize: 11, color: TOKENS.ink60 }}>
              − 4 120 € d'impôts/an vs micro-BIC
            </div>
          </div>

          {/* IA — dark glass */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{
              gridColumn: '1 / 3', gridRow: '3 / 5',
              background: 'rgba(29,29,29,0.78)',
              backdropFilter: 'blur(18px) saturate(1.2)',
              WebkitBackdropFilter: 'blur(18px) saturate(1.2)',
              border: '1px solid rgba(255,255,255,0.08)',
              color: '#fff',
              borderRadius: 14, padding: 20, position: 'relative', overflow: 'hidden',
              transition: 'transform .3s',
              ...reveal(5),
            }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%)',
              backgroundSize: '200% 100%',
              animation: 'v5shimmer 4s linear infinite',
              pointerEvents: 'none',
            }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{
                width: 6, height: 6, borderRadius: 99, background: TOKENS.green,
                boxShadow: `0 0 10px ${TOKENS.green}`,
                animation: 'v5pulseDot 1.6s ease-in-out infinite',
              }}/>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1.5 }}>
                Avis expert
              </div>
            </div>
            <div style={{ fontFamily: FONTS.display, fontWeight: 600, fontSize: 22, marginTop: 14, lineHeight: 1.2, letterSpacing: -0.4 }}>
              « Ce bien bat la moyenne du quartier<br/>de +14 %. »
            </div>
            <div style={{ position: 'absolute', bottom: 16, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', fontFamily: FONTS.mono, fontSize: 10, color: 'rgba(255,255,255,0.45)' }}>
              <span>Validé par nos Moneyshapers</span>
              <span>→</span>
            </div>
          </div>

          {/* Capacité */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{ ...glass, gridColumn: '3 / 5', gridRow: '3 / 4', padding: 18, ...reveal(6), ...highlightRing(3) }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.5 }}>
              Capacité d'emprunt
            </div>
            <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 26, color: TOKENS.ink, marginTop: 6, letterSpacing: -0.6 }}>
              <Ticker value={312000} suffix=" €" duration={1800}/>
            </div>
            <div style={{ marginTop: 10, height: 4, borderRadius: 99, background: 'rgba(29,29,29,0.1)', overflow: 'hidden' }}>
              <div style={{
                width: loaded ? '72%' : '0%', height: '100%', background: TOKENS.blue,
                transition: 'width 1.6s cubic-bezier(.2,.7,.2,1) 500ms',
                boxShadow: `0 0 8px ${TOKENS.blue}`,
              }}/>
            </div>
          </div>

          {/* Mensualité */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{ ...glass, gridColumn: '5 / 7', gridRow: '3 / 4', padding: 18, ...reveal(7) }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.5 }}>
              Mensualité
            </div>
            <div style={{ fontFamily: FONTS.display, fontWeight: 700, fontSize: 26, color: TOKENS.ink, marginTop: 6, letterSpacing: -0.6 }}>
              1 248 €
            </div>
            <div style={{ fontSize: 11, color: TOKENS.ink60, marginTop: 4 }}>3,85 % · 25 ans</div>
          </div>

          {/* Cashflow mensuel net — green accent */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{
              gridColumn: '3 / 5', gridRow: '4 / 5',
              background: TOKENS.green, color: TOKENS.ink,
              borderRadius: 14, padding: 18, position: 'relative', overflow: 'hidden',
              transition: 'transform .3s',
              boxShadow: '0 10px 30px -10px rgba(200,255,46,0.4)',
              ...reveal(8), ...highlightRing(4),
            }}>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: 'rgba(29,29,29,0.7)', textTransform: 'uppercase', letterSpacing: 1.5, fontWeight: 600 }}>
              Cashflow mensuel net
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
              <div style={{ fontFamily: FONTS.display, fontWeight: 800, fontSize: 32, color: TOKENS.ink, letterSpacing: -0.8, lineHeight: 1 }}>+706 €</div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: 'rgba(29,29,29,0.7)' }}>/ mois</div>
            </div>
            <div style={{ fontSize: 10, color: 'rgba(29,29,29,0.7)', marginTop: 6, lineHeight: 1.4 }}>
              Après charges, impôts,<br/>assurance PNO
            </div>
          </div>

          {/* Régimes fiscaux comparés */}
          <div onMouseEnter={onEnter} onMouseLeave={onLeave}
            style={{ ...glass, gridColumn: '5 / 7', gridRow: '4 / 5', padding: 16, ...reveal(9) }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: TOKENS.ink60, textTransform: 'uppercase', letterSpacing: 1.5 }}>
                Régimes fiscaux
              </div>
              <div style={{ fontFamily: FONTS.mono, fontSize: 9, color: TOKENS.ink40, textTransform: 'uppercase', letterSpacing: 1 }}>
                Tous comparés
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              {[
                { k: 'Micro-foncier', on: false },
                { k: 'LMNP micro-BIC', on: false },
                { k: 'LMNP réel', on: true },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '5px 8px',
                  background: r.on ? 'rgba(200,255,46,0.2)' : 'rgba(29,29,29,0.03)',
                  border: r.on ? `1px solid ${TOKENS.green}` : '1px solid rgba(29,29,29,0.06)',
                  borderRadius: 6,
                }}>
                  <span style={{
                    width: 5, height: 5, borderRadius: 99,
                    background: r.on ? TOKENS.greenDark || '#5a7a00' : 'rgba(29,29,29,0.2)',
                  }}/>
                  <span style={{ fontFamily: FONTS.sans, fontSize: 11, color: TOKENS.ink, fontWeight: r.on ? 600 : 400, flex: 1 }}>{r.k}</span>
                  {r.on && <span style={{ fontFamily: FONTS.mono, fontSize: 9, color: TOKENS.greenDark || '#5a7a00', fontWeight: 700 }}>✓</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes v5blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
        @keyframes v5pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
        @keyframes v5shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
      `}</style>
    </div>
  );
}

window.V5 = V5;