// V5 Mobile (Variant C) — photo en full background + titre hero aéré,
// pas de bento au-dessus du fold. 390×844.

function V5Mobile() {
  const [loaded, setLoaded] = React.useState(false);
  const [yieldVal, setYieldVal] = React.useState(6.8);

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

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

  const glass = {
    background: 'rgba(255,255,255,0.88)',
    backdropFilter: 'blur(16px) saturate(1.15)',
    WebkitBackdropFilter: 'blur(16px) saturate(1.15)',
    borderRadius: 14,
    border: '1px solid rgba(255,255,255,0.5)',
    boxShadow: '0 8px 24px -8px rgba(29,29,29,0.25)',
    position: 'relative', overflow: 'hidden',
  };

  return (
    <div style={{
      width: 390, minHeight: 844, fontFamily: FONTS.sans,
      position: 'relative', overflow: 'hidden', color: '#fff',
    }}>
      {/* PHOTO FULL BACKGROUND */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/apartment-paris.jpg)`,
        backgroundSize: 'cover',
        backgroundPosition: 'center 35%',
        transform: loaded ? 'scale(1)' : 'scale(1.06)',
        transition: 'transform 2.4s cubic-bezier(.2,.7,.2,1)',
      }}/>
      {/* scrim : top-heavy for status/nav legibility, bottom-heavy to cool fadeout */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(29,29,29,0.62) 0%, rgba(29,29,29,0.32) 24%, rgba(29,29,29,0.18) 55%, rgba(29,29,29,0.55) 100%)',
      }}/>
      {/* subtle bordeaux tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(92,13,7,0.25) 0%, transparent 40%)',
        mixBlendMode: 'multiply',
      }}/>

      {/* NAV is rendered at page level (sticky) — reserve ~60px for it */}
      {/* (iOS status bar removed for web responsive handoff) */}
      <div style={{ position: 'relative', zIndex: 2, height: 60 }}/>

      {/* HERO — aéré, centré verticalement dans l'écran */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '64px 28px 40px',
        textAlign: 'center',
      }}>
        {/* badge */}
        <div style={reveal(0)}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 10px',
            background: 'rgba(255,255,255,0.14)',
            border: '1px solid rgba(255,255,255,0.28)',
            backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
            borderRadius: 99,
            fontFamily: FONTS.mono, fontSize: 9, fontWeight: 500,
            letterSpacing: 1.2, textTransform: 'uppercase', color: '#fff',
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: TOKENS.green, boxShadow: `0 0 8px ${TOKENS.green}` }}/>
            Nouveau · Analyse complète par bien
          </span>
        </div>

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

        {/* subtitle */}
        <p style={{
          fontFamily: FONTS.sans, fontWeight: 400, fontSize: 15, lineHeight: 1.5,
          color: 'rgba(255,255,255,0.9)',
          margin: '22px auto 0', maxWidth: 280,
          textShadow: '0 1px 8px rgba(0,0,0,0.4)',
          ...reveal(2),
        }}>
          Cashflow, rentabilité, fiscalité, capacité d'emprunt — tout en une seule analyse.
        </p>
      </div>

      {/* CTAs — aligned to bottom of fold */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '0 28px',
        display: 'flex', flexDirection: 'column', gap: 10,
        ...reveal(3),
      }}>
        <button data-cta-source="lpi_hero-mobile" style={{
          background: TOKENS.bordeaux, color: '#fff', border: 'none',
          padding: '18px 20px', borderRadius: 12, fontSize: 16, fontWeight: 600,
          fontFamily: FONTS.sans, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          boxShadow: '0 10px 30px -5px rgba(92,13,7,0.4)',
        }}>
          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.6" 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.15)', color: '#fff',
            border: '1px solid rgba(255,255,255,0.3)',
            backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
            padding: '16px 20px', borderRadius: 12, fontSize: 15, fontWeight: 600,
            fontFamily: FONTS.sans, cursor: 'pointer',
          }}>
          Réserver une démo
        </button>
      </div>

      {/* social proof pill */}
      <div style={{
        position: 'relative', zIndex: 2,
        padding: '22px 28px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        ...reveal(4),
      }}>
        <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: 28, height: 28, borderRadius: 99,
              background: a.bg, color: a.fg,
              border: '2px solid rgba(255,255,255,0.95)',
              marginLeft: i ? -8 : 0,
              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.sans, fontSize: 10, fontWeight: 700, letterSpacing: 0.2,
            }}>{a.i}</div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: FONTS.sans, textShadow: '0 1px 6px rgba(0,0,0,0.4)' }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>+200 investisseurs</span>
          <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>·</span>
          <span style={{ fontSize: 11, fontWeight: 600, color: '#fff' }}>★ 4,8</span>
        </div>
      </div>

      {/* home indicator removed for web responsive handoff */}

      <style>{`
        @keyframes v5mblink { 0%,100%{opacity:1} 50%{opacity:0.2} }
        @keyframes v5mbounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
      `}</style>
    </div>
  );
}

window.V5Mobile = V5Mobile;