// LandingV1.jsx — Editorial Enke. Two variants: 'A' (default, dark hero, mesh)
// and 'B' (light hero, abstract waves, warmer feel). Same DNA, different mood.
//
// Updates per feedback:
// - Big ENKE wordmark moment + "¿En ke se va tu plata?" wordplay
// - Real bank logos (BankLogo) + Apple Pay
// - Copy: Google signup, "1 min", removed "sin tarjeta"
// - Simplified PWA install (static phone w/ banner)
// - Responsive (CSS clamps + media queries via container width)
// - No more particle network animation in V1-B

const V1Ink = '#0B1220';
const V1Blue = '#005AD6';
const V1Sky = '#2171E0';
const V1Cloud = '#F6F8FC';
const V1Mint = '#34d399';
const V1Warm = '#FBF7F0';

const v1Styles = {
  serif: { fontFamily: "'DM Serif Display', serif", fontStyle: 'italic' },
  mono: { fontFamily: "'IBM Plex Mono', monospace" },
};

function V1Pill({ tone = 'light', children }) {
  const dark = tone === 'dark';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: "'IBM Plex Mono', monospace",
      fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
      borderRadius: 999, padding: '6px 14px',
      color: dark ? 'rgba(255,255,255,0.7)' : V1Sky,
      background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(33,113,224,0.08)',
      border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(33,113,224,0.18)',
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: '50%',
        background: 'currentColor', animation: 'v1blink 1.8s steps(2) infinite',
      }} />
      {children}
    </span>
  );
}

function V1Btn({ children, primary, dark, style, fullWidth }) {
  return (
    <a href="/static/ui.html" style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      padding: '14px 26px', borderRadius: 999,
      fontSize: 14, fontWeight: 600, textDecoration: 'none',
      background: primary ? V1Sky : (dark ? 'rgba(255,255,255,0.08)' : '#fff'),
      color: primary ? '#fff' : (dark ? '#fff' : V1Ink),
      border: primary ? 'none' : (dark ? '1px solid rgba(255,255,255,0.16)' : '1px solid rgba(11,18,32,0.1)'),
      boxShadow: primary ? '0 12px 36px rgba(33,113,224,0.35)' : 'none',
      transition: 'transform .25s, box-shadow .25s',
      width: fullWidth ? '100%' : 'auto',
      ...style,
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      {children}
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
      </svg>
    </a>
  );
}

function V1GoogleBtn({ dark, fullWidth, children = 'Empezar con Google' }) {
  return (
    <a href="/static/ui.html" style={{
      display: fullWidth ? 'flex' : 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      padding: '14px 22px', borderRadius: 999,
      fontSize: 14, fontWeight: 600, textDecoration: 'none',
      background: '#fff', color: V1Ink,
      border: '1px solid rgba(11,18,32,0.12)',
      boxShadow: '0 10px 28px rgba(11,18,32,0.08)',
      transition: 'transform .25s',
      width: fullWidth ? '100%' : 'auto',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" /><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" /><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" /><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" /></svg>
      {children}
    </a>
  );
}

// ─── HERO V1-A: BRUTALIST — cream + lime + coral, hard shadows, oversized type ───
const V1Lime = '#D9FF3C';
const V1Coral = '#FF5A4E';
const V1Cream = '#F5F0E1';

function V1HeroA() {
  return (
    <section style={{
      position: 'relative', minHeight: 920, background: V1Cream, overflow: 'hidden',
      borderBottom: `4px solid ${V1Ink}`,
    }}>
      {/* nav */}
      <nav style={{
        position: 'relative', zIndex: 10, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', padding: '20px 5vw',
        borderBottom: `2px solid ${V1Ink}`, background: V1Cream,
      }}>
        <EnkeLogo kind="lockup" color="blue" size={28} />
        <div className="v1-nav-links" style={{ display: 'flex', gap: 28 }}>
          {[['Cómo funciona', '#como-funciona'], ['Mapa', '#mapa'], ['Instalar', '#instalar'], ['Precio', '#precio']].map(([l, h]) => (
            <a key={l} href={h} style={{ color: V1Ink, fontSize: 13, textDecoration: 'none', fontWeight: 600 }}>{l}</a>
          ))}
        </div>
        <V1GoogleBtn>Entrar con Google</V1GoogleBtn>
      </nav>

      {/* split layout */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', minHeight: 820 }} className="v1a-hero-grid">
        {/* LEFT — massive type */}
        <div style={{
          padding: 'clamp(40px, 6vw, 80px) clamp(32px, 5vw, 80px)',
          borderRight: `2px solid ${V1Ink}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* lime stripe accent */}
          <div style={{
            position: 'absolute', top: 0, right: 0, width: '40%', height: 8,
            background: V1Lime, borderLeft: `2px solid ${V1Ink}`,
          }} />

          <div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              ...v1Styles.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              padding: '6px 12px', background: V1Ink, color: V1Lime,
              fontWeight: 700,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: V1Lime, animation: 'v1blink 1.6s steps(2) infinite' }} />
              Finanzas personales · Chile
            </span>

            <h1 style={{
              margin: '32px 0 0',
              fontSize: 'clamp(72px, 11vw, 180px)',
              fontWeight: 900, letterSpacing: '-0.06em', lineHeight: 0.85,
              color: V1Ink,
            }}>
              ¿En<br/>
              <span style={{ ...v1Styles.serif, color: V1Blue, fontStyle: 'italic', fontWeight: 400 }}>ke</span>
              <span style={{ color: V1Coral }}>·</span><br/>
              se va<br/>
              tu plata?
            </h1>
          </div>

          <div style={{ marginTop: 48 }}>
            <p style={{
              color: V1Ink, fontSize: 'clamp(15px, 1.4vw, 18px)',
              lineHeight: 1.6, maxWidth: 460, fontWeight: 500,
            }}>
              Conecta tu banco con Google. Enke detecta cada gasto, lo
              clasifica y te muestra adónde se va — sin planillas,
              sin esfuerzo, en menos de un minuto.
            </p>

            <div style={{
              display: 'inline-flex', alignItems: 'stretch', marginTop: 28,
              border: `2px solid ${V1Ink}`, boxShadow: `6px 6px 0 ${V1Ink}`,
              background: '#fff',
            }}>
              <a href="/static/ui.html" style={{
                padding: '16px 28px', background: V1Lime, color: V1Ink,
                fontWeight: 700, fontSize: 15, textDecoration: 'none',
                display: 'flex', alignItems: 'center', gap: 12,
                borderRight: `2px solid ${V1Ink}`,
              }}>
                <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" /><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" /><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" /><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" /></svg>
                Empezar con Google
              </a>
              <span style={{
                padding: '16px 22px', ...v1Styles.mono, fontSize: 11,
                letterSpacing: '0.1em', color: V1Ink, alignSelf: 'center',
                fontWeight: 600,
              }}>
                20 DÍAS<br/>GRATIS
              </span>
            </div>

            <div style={{ marginTop: 18, ...v1Styles.mono, fontSize: 11, letterSpacing: '0.1em', color: 'rgba(11,18,32,0.55)' }}>
              ↳ LUEGO $2.500 CLP/MES · CANCELA CUANDO QUIERAS
            </div>
          </div>
        </div>

        {/* RIGHT — visual: stacked bold panels */}
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            flex: 1, background: V1Blue, padding: '32px 28px',
            borderBottom: `2px solid ${V1Ink}`, position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: '#fff',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em', color: V1Lime, fontWeight: 700 }}>
                ● HOY · 14:32
              </span>
              <span style={{ ...v1Styles.mono, fontSize: 9, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.6)' }}>
                EN VIVO
              </span>
            </div>
            <div>
              <div style={{ ...v1Styles.mono, fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.12em' }}>
                CAFETERÍA · LASTARRIA
              </div>
              <div style={{ marginTop: 6, fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 800, letterSpacing: '-0.025em' }}>
                Café Altura
              </div>
              <div style={{ marginTop: 6, fontSize: 'clamp(48px, 7vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', color: V1Lime, lineHeight: 1 }}>
                $3.800
              </div>
            </div>
          </div>

          <div style={{
            background: V1Lime, padding: '28px 28px',
            borderBottom: `2px solid ${V1Ink}`, color: V1Ink,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div>
              <div style={{ ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em', fontWeight: 700 }}>
                ● HOY · 11:08
              </div>
              <div style={{ marginTop: 6, fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>
                Uber · Providencia
              </div>
            </div>
            <div style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-0.03em' }}>$2.450</div>
          </div>

          <div style={{
            background: V1Coral, padding: '28px 28px', color: '#fff',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div>
              <div style={{ ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em', fontWeight: 700, color: 'rgba(255,255,255,0.85)' }}>
                ● AYER · 19:44
              </div>
              <div style={{ marginTop: 6, fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>
                Líder · Ñuñoa
              </div>
            </div>
            <div style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-0.03em' }}>$48.230</div>
          </div>
        </div>
      </div>

      {/* stats strip */}
      <div className="v1-stats-strip" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        background: V1Ink, color: '#fff',
      }}>
        {[
          ['1 min', 'CONECTAR TU BANCO'],
          ['0', 'INGRESOS MANUALES'],
          ['100%', 'AUTOMÁTICO'],
          ['$2.500', 'CLP/MES'],
        ].map(([v, l], i) => (
          <div key={l} style={{
            padding: '24px 24px',
            borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none',
          }}>
            <div style={{ color: V1Lime, fontWeight: 900, fontSize: 32, letterSpacing: '-0.03em' }}>{v}</div>
            <div style={{ ...v1Styles.mono, color: 'rgba(255,255,255,0.55)', fontSize: 11, marginTop: 6, letterSpacing: '0.15em', fontWeight: 600 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── HERO V1-B: light, warm, professional & approachable ───
function V1HeroB() {
  return (
    <section style={{
      position: 'relative', minHeight: 880, background: V1Warm, overflow: 'hidden',
    }}>
      {/* abstract serif waves bg */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.7 }} preserveAspectRatio="xMidYMid slice" viewBox="0 0 1200 900">
        <defs>
          <linearGradient id="v1bWave1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="rgba(0,90,214,0.12)" />
            <stop offset="100%" stopColor="rgba(0,90,214,0.0)" />
          </linearGradient>
        </defs>
        <path d="M0,650 Q300,500 600,620 T1200,580 L1200,900 L0,900 Z" fill="url(#v1bWave1)" />
        <path d="M0,750 Q300,650 600,720 T1200,680 L1200,900 L0,900 Z" fill="rgba(33,113,224,0.06)" />
      </svg>

      {/* nav */}
      <nav style={{
        position: 'relative', zIndex: 10, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', padding: '20px 5vw',
      }}>
        <EnkeLogo kind="lockup" color="blue" size={28} />
        <div className="v1-nav-links" style={{ display: 'flex', gap: 28 }}>
          {[['Cómo funciona', '#como-funciona'], ['Mapa', '#mapa'], ['Instalar', '#instalar'], ['Precio', '#precio']].map(([l, h]) => (
            <a key={l} href={h} style={{ color: 'rgba(11,18,32,0.65)', fontSize: 13, textDecoration: 'none' }}>{l}</a>
          ))}
        </div>
        <V1GoogleBtn>Entrar con Google</V1GoogleBtn>
      </nav>

      {/* HUGE serif wordmark */}
      <div style={{
        position: 'relative', zIndex: 2, padding: '60px 5vw 40px',
        maxWidth: 1500, margin: '0 auto', width: '100%',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }} className="v1b-hero-grid">
          <div>
            <V1Pill>Finanzas personales · Chile</V1Pill>
            <div style={{
              marginTop: 24, fontSize: 'clamp(80px, 14vw, 220px)',
              fontFamily: "'Inter', system-ui, sans-serif",
              fontWeight: 800,
              letterSpacing: '-0.05em', lineHeight: 0.9,
              color: V1Ink,
            }}>
              enke<span style={{ color: V1Blue }}>.</span>
            </div>
            <h1 style={{
              margin: '24px 0 0', fontSize: 'clamp(34px, 4.8vw, 60px)',
              letterSpacing: '-0.025em', lineHeight: 1.05, fontWeight: 700, color: V1Ink,
            }}>
              ¿En <span style={{ ...v1Styles.serif, color: V1Blue, fontWeight: 400 }}>ke</span> se va<br />tu plata?
            </h1>
            <p style={{
              marginTop: 24, color: 'rgba(11,18,32,0.6)',
              fontSize: 'clamp(15px, 1.4vw, 18px)', lineHeight: 1.7, maxWidth: 520,
            }}>
              Regístrate con Google y Enke detecta automáticamente tus gastos,
              los clasifica y te muestra exactamente dónde se va tu plata.
              Sin planillas, sin esfuerzo, en menos de un minuto.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <V1GoogleBtn>Empezar con Google</V1GoogleBtn>
              <span style={{ ...v1Styles.mono, color: 'rgba(11,18,32,0.45)', fontSize: 12, letterSpacing: '0.08em' }}>
                20 DÍAS GRATIS · LUEGO $2.500 CLP/MES
              </span>
            </div>
          </div>

          {/* sample transaction stack — friendlier visual */}
          <div style={{ position: 'relative', minHeight: 420 }} className="v1b-hero-cards">
            {[
              { t: 'HOY · 14:32', n: 'Café Altura · Lastarria', a: '$3.800', tag: 'Cafetería', tx: 0, ty: 0, rot: -2 },
              { t: 'HOY · 11:08', n: 'Uber · Providencia', a: '$2.450', tag: 'Transporte', tx: 60, ty: 90, rot: 1.5 },
              { t: 'AYER · 19:44', n: 'Líder · Ñuñoa', a: '$48.230', tag: 'Supermercado', tx: 20, ty: 200, rot: -1 },
            ].map((c, i) => (
              <div key={i} style={{
                position: 'absolute', left: c.tx, top: c.ty,
                width: 320, padding: 18, borderRadius: 16,
                background: '#fff', border: '1px solid rgba(11,18,32,0.06)',
                boxShadow: '0 16px 40px rgba(0,90,214,0.08)',
                transform: `rotate(${c.rot}deg)`,
                animation: `v1float ${3 + i}s ease-in-out infinite`,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ ...v1Styles.mono, fontSize: 10, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.12em' }}>{c.t}</span>
                  <span style={{
                    ...v1Styles.mono, fontSize: 9, padding: '3px 8px', borderRadius: 999,
                    background: 'rgba(0,90,214,0.08)', color: V1Blue, letterSpacing: '0.1em',
                  }}>{c.tag.toUpperCase()}</span>
                </div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                  <span style={{ fontSize: 14, fontWeight: 600 }}>{c.n}</span>
                  <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{c.a}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* stats strip */}
      <div className="v1-stats-strip" style={{
        position: 'relative', zIndex: 2, marginTop: 64,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1px solid rgba(11,18,32,0.08)', borderBottom: '1px solid rgba(11,18,32,0.08)',
        background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(8px)',
      }}>
        {[
          ['1 min', 'PARA CONECTAR TU BANCO'],
          ['0', 'INGRESOS MANUALES'],
          ['100%', 'AUTOMÁTICO'],
          ['$2.500', 'CLP/MES · MENOS QUE UN CAFÉ'],
        ].map(([v, l], i) => (
          <div key={l} style={{
            padding: '28px 24px',
            borderRight: i < 3 ? '1px solid rgba(11,18,32,0.08)' : 'none',
          }}>
            <div style={{ color: V1Ink, fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em' }}>{v}</div>
            <div style={{ ...v1Styles.mono, color: 'rgba(11,18,32,0.45)', fontSize: 11, marginTop: 6, letterSpacing: '0.15em' }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── FEATURES — qué hace Enke (3 tarjetas) ───
function V1Features() {
  return (
    <section id="como-funciona" style={{
      padding: 'clamp(70px, 9vw, 110px) 5vw', background: V1Cloud,
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto' }}>
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <V1Pill>Cómo funciona</V1Pill>
          <h2 style={{
            margin: '16px 0 0', fontSize: 'clamp(36px, 5vw, 56px)',
            fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1,
          }}>
            Tres cosas que Enke hace por ti, automáticamente.
          </h2>
          <p style={{ marginTop: 16, color: 'rgba(11,18,32,0.6)', fontSize: 17, lineHeight: 1.7 }}>
            Conecta una vez. Después, todo es automático. Sin planillas, sin
            ingresos manuales, sin esfuerzo.
          </p>
        </div>

        <div className="v1-features-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
        }}>
          {/* Card 1 — Cross-bank */}
          <div style={{
            padding: 32, background: '#fff', borderRadius: 20,
            border: '1px solid rgba(11,18,32,0.06)',
            display: 'flex', flexDirection: 'column', gap: 24, minHeight: 380,
          }}>
            <div style={{
              ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em',
              color: V1Blue, textTransform: 'uppercase',
              padding: '6px 14px', background: 'rgba(0,90,214,0.08)',
              borderRadius: 999, alignSelf: 'flex-start', fontWeight: 600,
            }}>
              ● Orden automático
            </div>
            <div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Cross-bank sin fricción
              </h3>
              <p style={{ marginTop: 10, color: 'rgba(11,18,32,0.6)', fontSize: 14, lineHeight: 1.6 }}>
                Todos tus bancos y tarjetas unificados y clasificados en un solo lugar.
              </p>
            </div>
            {/* Visual: stacked account cards */}
            <div style={{ marginTop: 'auto', position: 'relative', height: 130 }}>
              {[
                { bank: 'Banco de Chile', last: '8821', tone: '#0033A0', y: 0, scale: 0.92, opacity: 0.5 },
                { bank: 'Santander', last: '4012', tone: '#EC0000', y: 18, scale: 0.96, opacity: 0.75 },
                { bank: 'Mach', last: '7740', tone: '#FF3358', y: 42, scale: 1, opacity: 1 },
              ].map((c, i) => (
                <div key={i} style={{
                  position: 'absolute', left: '50%', top: c.y,
                  transform: `translateX(-50%) scale(${c.scale})`,
                  width: '92%', padding: '14px 18px', background: '#fff',
                  border: '1px solid rgba(11,18,32,0.08)', borderRadius: 12,
                  boxShadow: '0 8px 24px rgba(11,18,32,0.06)',
                  opacity: c.opacity,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                  <div>
                    <div style={{ ...v1Styles.mono, fontSize: 9, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.12em' }}>
                      CUENTA / TARJETA
                    </div>
                    <div style={{ marginTop: 4, fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>
                      {c.bank} ···· {c.last}
                    </div>
                  </div>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: c.tone }} />
                </div>
              ))}
            </div>
          </div>

          {/* Card 2 — Detección instantánea */}
          <div style={{
            padding: 32, background: '#fff', borderRadius: 20,
            border: '1px solid rgba(11,18,32,0.06)',
            display: 'flex', flexDirection: 'column', gap: 24, minHeight: 380,
          }}>
            <div style={{
              ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em',
              color: V1Blue, textTransform: 'uppercase',
              padding: '6px 14px', background: 'rgba(0,90,214,0.08)',
              borderRadius: 999, alignSelf: 'flex-start', fontWeight: 600,
            }}>
              ● Tiempo real
            </div>
            <div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Detección instantánea
              </h3>
              <p style={{ marginTop: 10, color: 'rgba(11,18,32,0.6)', fontSize: 14, lineHeight: 1.6 }}>
                Cada gasto aparece con monto, fecha y comercio — automáticamente,
                en el momento en que ocurre.
              </p>
            </div>
            {/* Visual: animated transaction list */}
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { tag: 'CAFETERÍA', name: 'Café Altura', amt: '$3.800', t: 'AHORA' },
                { tag: 'TRANSPORTE', name: 'Uber · Providencia', amt: '$2.450', t: 'HACE 2H' },
                { tag: 'SUSCRIPCIÓN', name: 'Spotify Premium', amt: '$5.990', t: 'AYER' },
              ].map((tx, i) => (
                <div key={i} style={{
                  padding: '10px 14px', background: V1Cloud, borderRadius: 10,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  border: i === 0 ? `1.5px solid ${V1Blue}` : '1px solid transparent',
                  position: 'relative',
                }}>
                  {i === 0 && (
                    <span style={{
                      position: 'absolute', top: -6, right: 10,
                      ...v1Styles.mono, fontSize: 8, padding: '2px 6px',
                      background: V1Blue, color: '#fff', borderRadius: 4,
                      letterSpacing: '0.1em', fontWeight: 700,
                    }}>NUEVA</span>
                  )}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <span style={{ ...v1Styles.mono, fontSize: 8, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.12em' }}>
                      {tx.tag} · {tx.t}
                    </span>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{tx.name}</span>
                  </div>
                  <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{tx.amt}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Card 3 — Recurrentes */}
          <div style={{
            padding: 32, background: '#fff', borderRadius: 20,
            border: '1px solid rgba(11,18,32,0.06)',
            display: 'flex', flexDirection: 'column', gap: 24, minHeight: 380,
          }}>
            <div style={{
              ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em',
              color: V1Blue, textTransform: 'uppercase',
              padding: '6px 14px', background: 'rgba(0,90,214,0.08)',
              borderRadius: 999, alignSelf: 'flex-start', fontWeight: 600,
            }}>
              ● Suscripciones
            </div>
            <div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Recurrentes y metas
              </h3>
              <p style={{ marginTop: 10, color: 'rgba(11,18,32,0.6)', fontSize: 14, lineHeight: 1.6 }}>
                Detecta pagos recurrentes, planifica tu mes y ahorra
                con metas inteligentes.
              </p>
            </div>
            {/* Visual: mini calendar + recurrent badge */}
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{
                padding: 12, background: V1Cloud, borderRadius: 12,
              }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 6 }}>
                  {['D', 'L', 'M', 'M', 'J', 'V', 'S'].map((d, i) => (
                    <div key={i} style={{ ...v1Styles.mono, fontSize: 9, color: 'rgba(11,18,32,0.4)', textAlign: 'center', letterSpacing: '0.1em' }}>
                      {d}
                    </div>
                  ))}
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
                  {[12, 13, 14, 15, 16, 17, 18].map((n) => {
                    const today = n === 15;
                    return (
                      <div key={n} style={{
                        aspectRatio: '1 / 1', borderRadius: '50%',
                        background: today ? V1Blue : '#fff',
                        color: today ? '#fff' : V1Ink,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12, fontWeight: today ? 700 : 500,
                        border: today ? 'none' : '1px solid rgba(11,18,32,0.06)',
                        boxShadow: today ? `0 6px 16px ${V1Blue}55` : 'none',
                      }}>
                        {n}
                      </div>
                    );
                  })}
                </div>
              </div>
              <div style={{
                padding: '12px 14px', background: V1Cloud, borderRadius: 12,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8, background: '#fff',
                    border: '1px solid rgba(11,18,32,0.08)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={V1Blue} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M21 12a9 9 0 11-3-6.7" /><path d="M21 4v5h-5" />
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 700 }}>Netflix</div>
                    <div style={{ ...v1Styles.mono, fontSize: 9, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.12em' }}>RECURRENTE</div>
                  </div>
                </div>
                <button style={{
                  padding: '8px 14px', background: V1Blue, color: '#fff',
                  border: 'none', borderRadius: 999, fontSize: 12, fontWeight: 600,
                  fontFamily: 'inherit', cursor: 'pointer',
                }}>
                  Guardar
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── BANKS — real logo glyphs ───
const V1_BANKS = ['Banco de Chile', 'Santander', 'BCI', 'Falabella', 'Itaú', 'Mach', 'Tenpo', 'BancoEstado'];

function V1Banks({ variant = 'A' }) {
  const dark = variant === 'A';
  return (
    <section style={{
      padding: 'clamp(60px, 8vw, 110px) 5vw',
      background: dark ? '#fff' : V1Cloud,
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <div>
            <V1Pill>Compatibilidad</V1Pill>
            <h2 style={{ margin: '16px 0 0', fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, letterSpacing: '-0.025em', maxWidth: 600, lineHeight: 1.15 }}>
              Funciona con todos los bancos de <span style={{ ...v1Styles.serif, color: V1Blue }}>Chile</span>.
            </h2>
          </div>
          <span style={{ ...v1Styles.mono, fontSize: 12, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.15em' }}>
            +12 BANCOS · ACTUALIZÁNDOSE
          </span>
        </div>
        <div className="v1-banks-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {V1_BANKS.map(b => (
            <div key={b} style={{
              padding: '24px 16px',
              border: '1px solid rgba(11,18,32,0.08)',
              borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: '#fff', transition: 'transform .2s, box-shadow .2s',
              minHeight: 80,
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,90,214,0.1)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
            >
              <BankLogo name={b} />
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 24, padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 12,
          background: '#fff', border: '1px solid rgba(11,18,32,0.06)', borderRadius: 999,
          width: 'fit-content', margin: '24px auto 0',
        }}>
          <ApplePayMark size={20} />
          <span style={{ ...v1Styles.mono, fontSize: 11, color: 'rgba(11,18,32,0.5)', letterSpacing: '0.1em' }}>
            COMPATIBLE PARA GEOREFERENCIACIÓN DE GASTOS
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── MAP — same component (already animated) ───
const V1_PINS = [
  { x: 52, y: 16, label: 'Antofagasta', amt: '$8.420', t: 0 },
  { x: 48, y: 34, label: 'La Serena', amt: '$12.300', t: 0.6 },
  { x: 50, y: 52, label: 'Santiago · Lastarria', amt: '$24.500', t: 1.0 },
  { x: 53, y: 56, label: 'Providencia', amt: '$9.890', t: 1.4 },
  { x: 47, y: 60, label: 'Viña del Mar', amt: '$15.200', t: 1.8 },
  { x: 51, y: 72, label: 'Concepción', amt: '$6.750', t: 2.2 },
  { x: 49, y: 86, label: 'Pucón', amt: '$32.100', t: 2.6 },
];

function V1Map({ variant = 'A' }) {
  const dark = variant === 'A';
  const bg = dark ? V1Ink : '#fff';
  const fg = dark ? '#fff' : V1Ink;
  const subFg = dark ? 'rgba(255,255,255,0.6)' : 'rgba(11,18,32,0.6)';
  const subSubFg = dark ? 'rgba(255,255,255,0.4)' : 'rgba(11,18,32,0.4)';
  const stroke = dark ? 'rgba(255,255,255,0.08)' : 'rgba(11,18,32,0.08)';
  const cardBg = dark ? 'rgba(255,255,255,0.04)' : V1Cloud;

  return (
    <section id="mapa" style={{
      padding: 'clamp(70px, 9vw, 130px) 5vw',
      background: bg, color: fg, position: 'relative', overflow: 'hidden',
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto', position: 'relative' }} className="v1-map-grid">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.95fr', gap: 64, alignItems: 'center' }}>
          <div>
            <V1Pill tone={dark ? 'dark' : 'light'}>Mapa de gastos</V1Pill>
            <h2 style={{ margin: '20px 0 0', fontSize: 'clamp(36px, 5.5vw, 64px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
              Ve dónde gastaste<br />
              <span style={{ ...v1Styles.serif, color: V1Sky }}>tu plata</span>.
            </h2>
            <p style={{ marginTop: 24, color: subFg, fontSize: 17, lineHeight: 1.7, maxWidth: 480 }}>
              Cada gasto aparece en el mapa con su monto, fecha y comercio.
              Entiende tus patrones de gasto geográficamente y descubre
              adónde se va tu plata sin abrir una sola planilla.
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              {[['7', 'CIUDADES'], ['$108K', 'GASTADO'], ['43', 'TXNS']].map(([v, l]) => (
                <div key={l} style={{
                  padding: '14px 18px', background: cardBg,
                  border: `1px solid ${stroke}`, borderRadius: 14,
                }}>
                  <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{v}</div>
                  <div style={{ ...v1Styles.mono, fontSize: 10, color: subSubFg, marginTop: 3, letterSpacing: '0.15em' }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <V1Btn primary>Ver mi mapa de gastos</V1Btn>
            </div>
            <div style={{
              marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 14px', background: cardBg,
              border: `1px solid ${stroke}`, borderRadius: 999,
            }}>
              <ApplePayMark color={fg} size={16} />
              <span style={{ ...v1Styles.mono, fontSize: 10, color: subSubFg, letterSpacing: '0.1em' }}>
                LA GEOREFERENCIACIÓN DE GASTOS SÓLO APLICA A GASTOS REALIZADOS CON APPLE PAY
              </span>
            </div>
          </div>

          {/* MAP */}
          <div style={{
            position: 'relative', aspectRatio: '0.55 / 1', maxHeight: 720,
            margin: '0 auto', width: '100%',
          }}>
            <svg viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="v1chile" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgba(33,113,224,0.18)" />
                  <stop offset="100%" stopColor="rgba(33,113,224,0.04)" />
                </linearGradient>
              </defs>
              <path d="M50 8C53 12 55 18 53 26C51 32 48 38 49 46C50 52 53 56 52 62C51 70 47 76 49 84C51 92 55 98 53 108C51 118 47 126 49 136C51 146 50 156 47 166C45 174 44 182 47 190C49 194 51 196 50 198L50 198C49 196 47 194 45 190C42 184 41 176 43 168C45 158 47 148 45 138C43 128 45 120 47 110C49 100 47 92 45 84C43 76 47 68 48 60C49 52 46 44 47 36C48 28 50 22 48 16C47 12 48 8 50 8 Z"
                fill="url(#v1chile)" stroke="rgba(33,113,224,0.4)" strokeWidth="0.4" />
            </svg>
            {V1_PINS.map((p, i) => (
              <div key={i} style={{
                position: 'absolute', left: `${p.x}%`, top: `${p.y}%`,
                transform: 'translate(-50%, -50%)',
                animation: `v1pin 3s ease-out ${p.t}s both`,
              }}>
                <div style={{
                  position: 'absolute', inset: -16, borderRadius: '50%',
                  border: `1px solid ${V1Sky}`, opacity: 0.4,
                  animation: `v1ring 3s ease-out ${p.t}s infinite`,
                }} />
                <div style={{
                  width: 14, height: 14, borderRadius: '50%',
                  background: V1Sky, boxShadow: `0 0 24px ${V1Sky}`,
                  border: '2px solid #fff',
                }} />
                <div style={{
                  position: 'absolute', left: 22, top: -10,
                  background: dark ? 'rgba(11,18,32,0.85)' : '#fff',
                  border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(11,18,32,0.08)'}`,
                  borderRadius: 8, padding: '6px 10px', whiteSpace: 'nowrap',
                  boxShadow: dark ? 'none' : '0 8px 20px rgba(0,90,214,0.08)',
                  animation: `v1fadeIn 0.6s ease ${p.t + 0.3}s both`,
                }}>
                  <div style={{ ...v1Styles.mono, fontSize: 9, color: subSubFg, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                    {p.label}
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: fg }}>{p.amt}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── INSTALL — simplified static phone with banner ───
function V1Install({ variant = 'A' }) {
  return (
    <section id="instalar" style={{
      padding: 'clamp(70px, 9vw, 120px) 5vw',
      background: variant === 'A' ? V1Cloud : V1Warm,
      scrollMarginTop: 80,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }} className="v1-install-grid">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
          {/* phone */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{
              width: 280, height: 560, borderRadius: 44, background: V1Ink, padding: 8,
              boxSizing: 'border-box',
              boxShadow: '0 40px 80px rgba(0,90,214,0.18), 0 0 0 1px rgba(11,18,32,0.1)',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
                width: 90, height: 22, background: V1Ink, borderRadius: 11, zIndex: 5,
              }} />
              <div style={{
                width: '100%', height: '100%', borderRadius: 36,
                boxSizing: 'border-box',
                background: V1Cloud, overflow: 'hidden', position: 'relative',
                display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '60px 16px 16px',
              }}>
                {/* home screen icons grid */}
                <div style={{ ...v1Styles.mono, fontSize: 9, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.15em', alignSelf: 'flex-start' }}>
                  PANTALLA DE INICIO
                </div>
                <div style={{
                  marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
                  gap: 14, width: '100%',
                }}>
                  {Array.from({ length: 12 }).map((_, i) => {
                    const isEnke = i === 5;
                    return (
                      <div key={i} style={{
                        aspectRatio: '1 / 1', borderRadius: 12,
                        background: isEnke ? '#fff' : 'rgba(11,18,32,0.08)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        position: 'relative',
                        animation: isEnke ? 'v1iconPulse 2.5s ease-in-out infinite' : 'none',
                        boxShadow: isEnke ? `0 8px 24px rgba(0,90,214,0.3)` : 'none',
                        border: isEnke ? `1.5px solid ${V1Blue}` : 'none',
                      }}>
                        {isEnke && <EnkeLogo kind="iso" color="blue" size={26} />}
                        {isEnke && (
                          <div style={{
                            position: 'absolute', top: -6, right: -6, width: 16, height: 16,
                            borderRadius: '50%', background: V1Mint, border: '2px solid ' + V1Cloud,
                          }} />
                        )}
                      </div>
                    );
                  })}
                </div>
                <div style={{ marginTop: 'auto', textAlign: 'center', ...v1Styles.mono, fontSize: 9, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.1em' }}>
                  ↓ ENKE INSTALADA COMO APP NATIVA
                </div>
              </div>
            </div>
          </div>

          <div>
            <V1Pill>Web App</V1Pill>
            <h2 style={{ margin: '20px 0 0', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1 }}>
              Úsala como una <span style={{ ...v1Styles.serif, color: V1Blue }}>app nativa</span>.
            </h2>
            <p style={{ marginTop: 20, color: 'rgba(11,18,32,0.6)', fontSize: 16, lineHeight: 1.7, maxWidth: 460 }}>
              Enke es una Progressive Web App. Instálala en tu pantalla de inicio
              en segundos — sin App Store, sin descargas pesadas, sin esperar.
            </p>

            <ol style={{ marginTop: 28, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                ['Abre enke.cl en Safari', 'Visita desde tu iPhone'],
                ['Toca el botón Compartir', 'El ícono cuadrado con la flecha'],
                ['Añadir a pantalla de inicio', 'Listo · Enke aparece como app'],
              ].map((s, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start',
                  padding: '14px 16px', background: '#fff', borderRadius: 12,
                  border: '1px solid rgba(11,18,32,0.06)',
                }}>
                  <span style={{
                    flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
                    background: V1Blue, color: '#fff', display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700, ...v1Styles.mono,
                  }}>{i + 1}</span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: V1Ink }}>{s[0]}</div>
                    <div style={{ fontSize: 12, color: 'rgba(11,18,32,0.55)', marginTop: 2 }}>{s[1]}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── PRICING ───
function V1Pricing({ variant = 'A' }) {
  return (
    <section id="precio" style={{ padding: 'clamp(70px, 9vw, 130px) 5vw', background: '#fff', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <V1Pill>Precio</V1Pill>
        <h2 style={{ margin: '20px 0 0', fontSize: 'clamp(40px, 6vw, 64px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
          20 días gratis.<br />
          Luego, <span style={{ ...v1Styles.serif, color: V1Blue }}>$2.500 al mes</span>... ¡Menos que un café!
        </h2>
        <p style={{ marginTop: 20, color: 'rgba(11,18,32,0.55)', fontSize: 17, lineHeight: 1.7, maxWidth: 540, margin: '20px auto 0' }}>
          Una inversión accesible para tener finanzas claras todo el mes. Cancela cuando quieras desde la app.
        </p>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, textAlign: 'left' }} className="v1-pricing-grid">
          <div style={{
            padding: 36, borderRadius: 24, border: '1px solid rgba(11,18,32,0.08)', background: V1Cloud,
          }}>
            <div style={{ ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em', color: 'rgba(11,18,32,0.4)' }}>PRUEBA</div>
            <div style={{ marginTop: 8, fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1 }}>Gratis</div>
            <div style={{ marginTop: 4, color: 'rgba(11,18,32,0.55)', fontSize: 14 }}>20 días completos</div>
            <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Acceso completo', 'Todos los bancos', 'Mapa de gastos', 'Sin restricciones'].map(f => (
                <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: V1Ink }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={V1Mint} strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
                  {f}
                </li>
              ))}
            </ul>
          </div>

          <div style={{
            padding: 36, borderRadius: 24, background: V1Ink, color: '#fff', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, background: 'radial-gradient(circle, rgba(33,113,224,0.4), transparent 70%)' }} />
            <div style={{ ...v1Styles.mono, fontSize: 11, letterSpacing: '0.15em', color: V1Sky, position: 'relative' }}>ENKE PRO</div>
            <div style={{ marginTop: 8, position: 'relative' }}>
              <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em' }}>$2.500</span>
              <span style={{ ...v1Styles.mono, fontSize: 13, color: 'rgba(255,255,255,0.5)', marginLeft: 8 }}>CLP/MES</span>
            </div>
            <div style={{ marginTop: 4, color: 'rgba(255,255,255,0.55)', fontSize: 14, position: 'relative' }}>Menos que un café · 1 vez al mes</div>
            <ul style={{ listStyle: 'none', padding: 0, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
              {['Sincronización en tiempo real', 'Mapa de gastos georeferenciado', 'Detección de recurrentes', 'Categorías de gastos inteligentes', 'Soporte prioritario'].map(f => (
                <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={V1Mint} strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
                  {f}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 28, position: 'relative' }}>
              <V1GoogleBtn fullWidth>Empezar prueba gratis</V1GoogleBtn>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ───
function V1FinalCta({ variant = 'A' }) {
  return (
    <section style={{ padding: 'clamp(70px, 9vw, 130px) 5vw', background: variant === 'A' ? V1Cloud : V1Warm, textAlign: 'center' }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <V1Pill>Empieza hoy</V1Pill>
        <h2 style={{ margin: '24px 0 0', fontSize: 'clamp(48px, 7vw, 80px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
          Toma el control<br />
          <span style={{ ...v1Styles.serif, color: V1Blue }}>sin esfuerzo.</span>
        </h2>
        <p style={{ marginTop: 24, color: 'rgba(11,18,32,0.55)', fontSize: 17, lineHeight: 1.7 }}>
          Conecta tu banco con Google en menos de un minuto y descubre exactamente en qué se va tu plata.
        </p>
        <div style={{ marginTop: 40, display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <V1GoogleBtn>Empezar con Google</V1GoogleBtn>
          <span style={{ ...v1Styles.mono, fontSize: 11, color: 'rgba(11,18,32,0.4)', letterSpacing: '0.12em' }}>
            20 DÍAS GRATIS · LUEGO $2.500 CLP/MES · CANCELA CUANDO QUIERAS
          </span>
        </div>
      </div>
    </section>
  );
}

function V1Footer() {
  return (
    <footer style={{
      background: V1Ink, color: '#fff', padding: '60px 5vw 40px',
      borderRadius: '32px 32px 0 0',
    }}>
      <div style={{ maxWidth: 1300, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48 }} className="v1-footer-grid">
        <div>
          <EnkeLogo kind="lockup" color="white" size={32} />
          <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.4)', fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
            Finanzas claras, sin esfuerzo. Hecho en Chile, para Chile.
          </p>
        </div>
        {[
          ['Producto', [['Cómo funciona', '#como-funciona'], ['Mapa de gastos', '#mapa'], ['Bancos', '#instalar'], ['Precio', '#precio']]],
          ['Empresa', [['Sobre nosotros', '#'], ['Blog', '#'], ['Contacto', '#']]],
          ['Legal', [['Privacidad', '/static/privacy.html'], ['Términos', '/static/terms.html'], ['Seguridad', '#']]],
        ].map(([title, links]) => (
          <div key={title}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 12 }}>{title}</div>
            {links.map(([l, h]) => (
              <div key={l} style={{ marginBottom: 8 }}>
                <a href={h} style={{ color: 'rgba(255,255,255,0.4)', textDecoration: 'none', fontSize: 13 }}>{l}</a>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
      }}>
        <div style={{ ...v1Styles.mono, fontSize: 11, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.12em' }}>
          © 2026 ENKE · HECHO EN CHILE
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, ...v1Styles.mono, fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: V1Mint, animation: 'v1blink 1.8s steps(2) infinite' }} />
          SISTEMA OPERATIVO
        </div>
      </div>
    </footer>
  );
}

const V1_GLOBAL_CSS = `
  html { scroll-behavior: smooth; }
  @keyframes v1blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
  @keyframes v1pin { 0% { opacity: 0; transform: translate(-50%, -150%) scale(0.5); } 60% { transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
  @keyframes v1ring { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }
  @keyframes v1fadeIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes v1float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
  @keyframes v1iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

  @media (max-width: 900px) {
    .v1-nav-links { display: none !important; }
    .v1-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
    .v1-banks-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .v1-pricing-grid { grid-template-columns: 1fr !important; }
    .v1b-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .v1a-hero-grid { grid-template-columns: 1fr !important; }
    .v1-features-grid { grid-template-columns: 1fr !important; }
    .v1b-hero-cards { min-height: 360px !important; }
    .v1-map-grid > div { grid-template-columns: 1fr !important; gap: 32px !important; }
    .v1-install-grid > div { grid-template-columns: 1fr !important; gap: 32px !important; }
    .v1-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  }
  @media (max-width: 600px) {
    .v1-stats-strip { grid-template-columns: 1fr 1fr !important; }
    .v1-banks-grid { grid-template-columns: 1fr 1fr !important; }
    .v1-footer-grid { grid-template-columns: 1fr !important; }
  }
`;

function LandingV1({ variant = 'A' }) {
  return (
    <div data-screen-label={`Landing V1-${variant}`} style={{
      fontFamily: "'Inter', system-ui, sans-serif",
      color: V1Ink, background: variant === 'A' ? V1Cloud : V1Warm,
      width: '100%', overflow: 'hidden', WebkitFontSmoothing: 'antialiased',
    }}>
      <style>{V1_GLOBAL_CSS}</style>
      {variant === 'A' ? <V1HeroA /> : <V1HeroB />}
      <V1Features />
      <V1Banks variant={variant} />
      <V1Map variant={variant} />
      <V1Install variant={variant} />
      <V1Pricing variant={variant} />
      <V1FinalCta variant={variant} />
      <V1Footer />
    </div>
  );
}

window.LandingV1 = LandingV1;
