// Página de presentación pública. Se muestra cuando el usuario no está autenticado
// y todavía no clickeó "Empezar" o "Iniciar sesión". Versión mínima: hero + features + CTA.

// ─── Hooks de animación ──────────────────────────────────────────────────

// Detecta cuando el elemento entra al viewport. Útil para fade-in al scrollear.
function useInView(threshold = 0.15) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        obs.disconnect(); // solo dispara una vez
      }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, inView];
}

// Anima un número desde 0 hasta target con easing ease-out. Empieza cuando start=true.
function useCounter(target, durationMs = 1500, start = false) {
  const [value, setValue] = React.useState(0);
  React.useEffect(() => {
    if (!start) return;
    const startTime = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - startTime) / durationMs);
      const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
      setValue(target * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, durationMs, start]);
  return value;
}

// Wrapper que hace fade-in + slide-up cuando el elemento entra al viewport.
function FadeInUp({ children, delay = 0, style = {}, ...rest }) {
  const [ref, inView] = useInView();
  return (
    <div
      ref={ref}
      {...rest}
      style={{
        ...style,
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(30px)',
        transition: `opacity 0.6s ease-out ${delay}ms, transform 0.6s ease-out ${delay}ms`,
      }}
    >
      {children}
    </div>
  );
}

function LandingNav({ onLoginClick, onSignupClick }) {
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 28px', maxWidth: 1200, margin: '0 auto',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="32" height="32" viewBox="0 0 70 70" aria-hidden>
          <circle cx="35" cy="35" r="27" fill="none" stroke="#00c275" strokeWidth="3" />
          <path d="M23 43 L35 27 L47 35" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M41 27 L47 27 L47 33" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div style={{ fontFamily: 'Space Grotesk, Inter, sans-serif', fontWeight: 700, fontSize: 20, letterSpacing: -0.5 }}>
          tracker<span style={{ color: '#00c275' }}>pro</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button
          onClick={onLoginClick}
          style={{
            padding: '8px 16px', fontSize: 14, fontWeight: 500,
            color: 'var(--text-dim)', background: 'transparent',
            borderRadius: 9,
          }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-dim)'}
        >
          Iniciar sesión
        </button>
        <button
          onClick={onSignupClick}
          style={{
            padding: '8px 16px', fontSize: 14, fontWeight: 600,
            color: '#fff', background: 'var(--accent)',
            borderRadius: 9, border: 'none',
          }}
        >
          Empezar gratis
        </button>
      </div>
    </nav>
  );
}

function LandingHero({ onSignupClick }) {
  return (
    <section style={{
      padding: '60px 28px 40px',
      maxWidth: 1100, margin: '0 auto',
      textAlign: 'center',
    }}>
      <FadeInUp style={{
        display: 'inline-block', padding: '6px 14px', borderRadius: 999,
        background: 'rgba(0, 194, 117, 0.1)', border: '1px solid rgba(0, 194, 117, 0.25)',
        color: 'var(--accent)', fontSize: 12, fontWeight: 600, marginBottom: 22,
        letterSpacing: 0.3,
        animation: 'pulseRing 2.5s ease-in-out infinite',
      }}>
        🌱 Beta · Empezando juntos
      </FadeInUp>

      <FadeInUp delay={100}>
        <h1 style={{
          fontFamily: 'Space Grotesk, Inter, sans-serif',
          fontSize: 'clamp(36px, 6vw, 64px)',
          fontWeight: 700, letterSpacing: -1.5,
          lineHeight: 1.05, margin: '0 0 18px',
        }}>
          Trackeá tu portafolio<br/>
          <span style={{ color: 'var(--accent)' }}>en tiempo real</span>.
        </h1>
      </FadeInUp>

      <FadeInUp delay={200}>
        <p style={{
          fontSize: 18, color: 'var(--text-dim)',
          maxWidth: 560, margin: '0 auto 32px',
          lineHeight: 1.6,
        }}>
          Cripto, acciones y ETFs en una sola pantalla.
          Precios en vivo, conversión MEP automática para CEDEARs,
          y P&L claro sin ruido.
        </p>
      </FadeInUp>

      <FadeInUp delay={300} style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 50 }}>
        <button
          onClick={onSignupClick}
          style={{
            padding: '14px 28px', fontSize: 15, fontWeight: 700,
            color: '#fff', background: 'var(--accent)',
            borderRadius: 11, border: 'none',
            boxShadow: '0 8px 24px rgba(0, 194, 117, 0.25)',
            transition: 'transform 0.15s, box-shadow 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0, 194, 117, 0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0, 194, 117, 0.25)'; }}
        >
          Empezar gratis →
        </button>
        <a
          href="#features"
          style={{
            padding: '14px 24px', fontSize: 15, fontWeight: 600,
            color: 'var(--text)', background: 'var(--panel)',
            border: '1px solid var(--border)', borderRadius: 11,
            textDecoration: 'none', display: 'inline-block',
          }}
        >
          Ver cómo funciona
        </a>
      </FadeInUp>

      {/* Screenshot mockup del dashboard — flota suavemente */}
      <FadeInUp delay={400} style={{ animation: 'float 6s ease-in-out infinite' }}>
        <DashboardMockup animateBalance />
      </FadeInUp>
    </section>
  );
}

function DashboardMockup({ animateBalance = false }) {
  // Mockup visual del dashboard sin datos reales — los SVGs y números son ilustrativos
  const [ref, inView] = useInView();
  const balanceTarget = 24517.83;
  const balance = useCounter(balanceTarget, 1800, animateBalance && inView);
  const balanceText = (animateBalance ? balance : balanceTarget).toLocaleString('en-US', {
    minimumFractionDigits: 2, maximumFractionDigits: 2,
  });
  return (
    <div ref={ref} className="mockup" style={{
      maxWidth: 920, margin: '0 auto',
      background: 'var(--panel)', border: '1px solid var(--border)',
      borderRadius: 18, boxShadow: '0 30px 80px rgba(0, 194, 117, 0.12), 0 0 0 1px rgba(0, 194, 117, 0.08)',
      padding: 24, textAlign: 'left',
      overflow: 'hidden',
    }}>
      {/* Header */}
      <div className="mockup-header" style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 14 }}>
        <div style={{ flex: '1 1 auto', minWidth: 0 }}>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 4 }}>Total: <span style={{ color: 'var(--text)', fontWeight: 600 }}>portafolio principal</span></div>
          <div className="mockup-balance" style={{ fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif', color: 'var(--accent)', letterSpacing: -1, fontVariantNumeric: 'tabular-nums' }}>
            ${balanceText}
          </div>
          <div style={{ fontSize: 13, color: 'var(--green)', fontWeight: 600, marginTop: 4 }}>
            ↗ +$432.17 · +1.79% hoy
          </div>
        </div>
        <div className="mockup-benefit" style={{
          background: 'linear-gradient(135deg, rgba(167,139,250,0.25), rgba(124,58,237,0.1))',
          border: '1px solid rgba(167,139,250,0.3)',
          borderRadius: 12, padding: '12px 16px',
          fontSize: 12, flexShrink: 0,
        }}>
          <div style={{ color: 'var(--text-dim)', fontSize: 11 }}>Beneficio histórico</div>
          <div style={{ color: 'var(--green)', fontWeight: 700, fontSize: 14 }}>+$3,891.04</div>
          <div style={{ color: 'var(--green)', fontSize: 11 }}>+18.85%</div>
        </div>
      </div>

      <div className="mockup-charts" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        {/* Mini gráfico de línea */}
        <div style={{ background: 'var(--panel-2)', borderRadius: 12, padding: 16, border: '1px solid var(--border)' }}>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 8, fontWeight: 600 }}>Historia · 30D</div>
          <svg viewBox="0 0 200 80" width="100%" height="80" style={{ display: 'block' }} preserveAspectRatio="none">
            <defs>
              <linearGradient id="mockGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--green)" stopOpacity="0.4" />
                <stop offset="100%" stopColor="var(--green)" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M0 60 Q 30 50, 50 55 T 100 30 T 150 35 T 200 15 L 200 80 L 0 80 Z" fill="url(#mockGrad)" />
            <path d="M0 60 Q 30 50, 50 55 T 100 30 T 150 35 T 200 15" stroke="var(--green)" strokeWidth="2.5" fill="none" vectorEffect="non-scaling-stroke" />
          </svg>
        </div>

        {/* Mini donut */}
        <div style={{ background: 'var(--panel-2)', borderRadius: 12, padding: 16, border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 14 }}>
          <svg viewBox="0 0 80 80" width="70" height="70" style={{ flexShrink: 0 }}>
            <circle cx="40" cy="40" r="30" fill="none" stroke="var(--border)" strokeWidth="10" />
            <circle cx="40" cy="40" r="30" fill="none" stroke="#f7931a" strokeWidth="10" strokeDasharray="120 188" transform="rotate(-90 40 40)" />
            <circle cx="40" cy="40" r="30" fill="none" stroke="#a78bfa" strokeWidth="10" strokeDasharray="35 188" strokeDashoffset="-120" transform="rotate(-90 40 40)" />
            <circle cx="40" cy="40" r="30" fill="none" stroke="#06b6d4" strokeWidth="10" strokeDasharray="20 188" strokeDashoffset="-155" transform="rotate(-90 40 40)" />
          </svg>
          <div style={{ fontSize: 11, lineHeight: 1.6, flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: '#f7931a', borderRadius: '50%', flexShrink: 0 }}/>BTC <span style={{ color: 'var(--text-dim)', marginLeft: 'auto' }}>62%</span></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: '#a78bfa', borderRadius: '50%', flexShrink: 0 }}/>NVDA <span style={{ color: 'var(--text-dim)', marginLeft: 'auto' }}>18%</span></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: '#06b6d4', borderRadius: '50%', flexShrink: 0 }}/>VUAA <span style={{ color: 'var(--text-dim)', marginLeft: 'auto' }}>11%</span></div>
          </div>
        </div>
      </div>

      {/* Mini tabla */}
      <div style={{ background: 'var(--panel-2)', borderRadius: 12, padding: '12px 16px', border: '1px solid var(--border)', fontSize: 12 }}>
        {[
          { ticker: 'BTC', name: 'Bitcoin', price: '$77,516', pnl: '+$432.18', color: '#f7931a' },
          { ticker: 'NVDA', name: 'Nvidia Corp', price: '$208.27', pnl: '+$78.45', color: '#a78bfa' },
          { ticker: 'VUAA.L', name: 'Vanguard S&P 500', price: '$137.62', pnl: '-$12.04', color: '#06b6d4' },
        ].map((row, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: i > 0 ? '1px solid var(--border)' : 'none' }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: row.color, display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>
              {row.ticker.slice(0, 2)}
            </div>
            <div style={{ fontWeight: 600, flexShrink: 0 }}>{row.ticker}</div>
            <div className="mockup-name" style={{ color: 'var(--text-dim)', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0, flex: 1 }}>{row.name}</div>
            <div style={{ marginLeft: 'auto', fontWeight: 600, flexShrink: 0 }}>{row.price}</div>
            <div style={{ color: row.pnl.startsWith('+') ? 'var(--green)' : 'var(--red)', fontWeight: 600, textAlign: 'right', flexShrink: 0 }}>{row.pnl}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Mockups adicionales para la sección de showcase ─────────────────────

function MobileMockup() {
  return (
    <div style={{
      width: 230, height: 460, margin: '0 auto',
      background: '#0a0a0a', borderRadius: 28, padding: 8,
      boxShadow: '0 30px 60px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.04)',
    }}>
      <div style={{
        background: 'var(--bg)', borderRadius: 22, height: '100%',
        overflow: 'hidden', display: 'flex', flexDirection: 'column',
      }}>
        {/* Topbar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '12px 14px', borderBottom: '1px solid var(--border)', gap: 6,
        }}>
          <svg width="18" height="18" viewBox="0 0 70 70" aria-hidden>
            <circle cx="35" cy="35" r="27" fill="none" stroke="#00c275" strokeWidth="3" />
            <path d="M23 43 L35 27 L47 35" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M41 27 L47 27 L47 33" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif' }}>
            tracker<span style={{ color: '#00c275' }}>pro</span>
          </span>
        </div>
        {/* Header */}
        <div style={{ padding: '14px 16px', textAlign: 'center' }}>
          <div style={{ height: 3, width: 50, margin: '0 auto 8px', background: 'var(--panel-2)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: '60%', height: '100%', background: 'var(--accent)' }} />
          </div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', marginBottom: 2 }}>
            Total: <span style={{ color: 'var(--text)', fontWeight: 600 }}>jubilación</span>
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif', color: 'var(--accent)', letterSpacing: -0.8 }}>
            $1,847.21
          </div>
          <div style={{ fontSize: 10.5, color: 'var(--green)', fontWeight: 600 }}>↗ +$24.18 · +1.32%</div>
        </div>
        {/* Card de activo expandida */}
        <div style={{ padding: '0 12px 12px', flex: 1 }}>
          <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border-strong)', borderRadius: 10, padding: 10, fontSize: 11 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 22, height: 22, borderRadius: '50%', background: '#06b6d4', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>VU</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700 }}>VUAA.L</div>
                <div style={{ color: 'var(--text-dim)', fontSize: 9.5 }}>Vanguard S&P 500</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontWeight: 700, fontSize: 12 }}>$893.47</div>
                <div style={{ color: 'var(--green)', fontSize: 10 }}>+$45.30</div>
              </div>
            </div>
            <div style={{ borderTop: '1px solid var(--border)', marginTop: 8, paddingTop: 8 }}>
              <div style={{ fontSize: 9, color: 'var(--text-faint)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 3 }}>CANTIDAD</div>
              <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 4 }}>6.49 VUAA.L</div>
              <div style={{ height: 4, background: 'var(--panel)', borderRadius: 2, overflow: 'hidden', marginBottom: 4 }}>
                <div style={{ width: '49%', height: '100%', background: 'linear-gradient(90deg, var(--accent), var(--accent-soft))' }} />
              </div>
              <div style={{ fontSize: 9, color: 'var(--text-faint)' }}>6 enteras · faltan 0.51 VUAA.L</div>
            </div>
          </div>

          <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 10, padding: 10, fontSize: 11, marginTop: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: '#a78bfa', display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9, fontWeight: 700 }}>CN</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700 }}>CNDX.L</div>
              <div style={{ color: 'var(--text-dim)', fontSize: 9.5 }}>iShares Nasdaq 100</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontWeight: 700, fontSize: 12 }}>$953.74</div>
              <div style={{ color: 'var(--red)', fontSize: 10 }}>-$8.30</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function AddModalMockup() {
  return (
    <div style={{
      maxWidth: 320, margin: '0 auto',
      background: 'var(--panel)', border: '1px solid var(--border)',
      borderRadius: 14, padding: 16,
      boxShadow: '0 20px 50px rgba(0,0,0,0.4)',
      fontSize: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <h4 style={{ margin: 0, fontSize: 14, fontWeight: 700 }}>Agregar posición</h4>
        <span style={{ color: 'var(--text-faint)', fontSize: 14 }}>×</span>
      </div>
      {/* Search con resultado seleccionado */}
      <div style={{
        background: 'var(--panel-2)', border: '1px solid var(--accent)',
        borderRadius: 9, padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 6,
        marginBottom: 8,
      }}>
        <svg width="11" height="11" viewBox="0 0 20 20" fill="none" style={{ color: 'var(--text-faint)' }}>
          <circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.6" />
          <path d="M13 13l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
        <span style={{ flex: 1, color: 'var(--text-dim)' }}>NVDA</span>
        <span style={{ background: 'var(--purple)', color: '#fff', fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 4 }}>Acción</span>
        <span style={{ fontWeight: 700, fontSize: 11 }}>NVDA</span>
      </div>
      {/* Live price banner */}
      <div style={{
        background: 'var(--panel-2)', border: '1px solid var(--border)',
        borderRadius: 9, padding: '7px 10px', display: 'flex', alignItems: 'center', gap: 8,
        marginBottom: 10,
      }}>
        <div>
          <div style={{ fontSize: 9, color: 'var(--text-dim)' }}>Precio actual</div>
          <div style={{ fontSize: 14, fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif' }}>$208.27</div>
        </div>
        <div style={{ background: 'rgba(16,185,129,0.12)', color: 'var(--green)', fontSize: 10, fontWeight: 600, padding: '2px 6px', borderRadius: 4 }}>+2.85%</div>
      </div>
      {/* Monto field */}
      <div style={{ marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ fontSize: 10, color: 'var(--text-dim)', fontWeight: 600 }}>Monto invertido</span>
        <span style={{ display: 'inline-flex', padding: 1, borderRadius: 4, background: 'var(--panel-2)', border: '1px solid var(--border)' }}>
          <span style={{ padding: '0 5px', fontSize: 8, fontWeight: 700, color: 'var(--text-faint)' }}>USD</span>
          <span style={{ padding: '0 5px', fontSize: 8, fontWeight: 700, color: 'var(--text)', background: 'var(--panel)', borderRadius: 3 }}>ARS</span>
        </span>
      </div>
      <div style={{
        background: 'var(--panel-2)', border: '1px solid var(--border)',
        borderRadius: 7, padding: '7px 10px', fontWeight: 600, marginBottom: 6,
      }}>
        100,000
      </div>
      {/* Preview */}
      <div style={{ fontSize: 10, color: 'var(--text-faint)', lineHeight: 1.5 }}>
        ≈ <span style={{ color: 'var(--accent)', fontWeight: 700 }}>0.333 NVDA</span>
        <div style={{ color: 'var(--text-dim)', marginTop: 2 }}>
          $69.38 USD a MEP $1,441.40 · 33.3% de 1 NVDA
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
        <div style={{ flex: 1, padding: '7px 0', textAlign: 'center', fontSize: 11, color: 'var(--text-dim)', fontWeight: 600 }}>Cancelar</div>
        <div style={{ flex: 1, padding: '7px 0', textAlign: 'center', fontSize: 11, color: '#fff', fontWeight: 700, background: 'var(--accent)', borderRadius: 7 }}>Agregar</div>
      </div>
    </div>
  );
}

function SidebarMockup() {
  const portfolios = [
    { name: 'inversiones', value: '$6,015', color: 'linear-gradient(135deg, #a78bfa, #7c3aed)', active: true },
    { name: 'jubilación',  value: '$1,847', color: 'linear-gradient(135deg, #f59e5f, #e07a3a)', active: false },
    { name: 'fondo emergencia', value: '$2,400', color: 'linear-gradient(135deg, #55d98a, #2ba85e)', active: false },
  ];
  return (
    <div style={{
      maxWidth: 240, margin: '0 auto',
      background: 'var(--bg)', border: '1px solid var(--border)',
      borderRadius: 12, padding: '14px 12px',
      boxShadow: '0 20px 50px rgba(0,0,0,0.4)',
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
        <svg width="24" height="24" viewBox="0 0 70 70" aria-hidden>
          <circle cx="35" cy="35" r="27" fill="none" stroke="#00c275" strokeWidth="3" />
          <path d="M23 43 L35 27 L47 35" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M41 27 L47 27 L47 33" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <div style={{ fontFamily: 'Space Grotesk, Inter, sans-serif', fontWeight: 700, fontSize: 14 }}>
          tracker<span style={{ color: '#00c275' }}>pro</span>
        </div>
      </div>

      <div style={{ fontSize: 10, color: 'var(--text-dim)', fontWeight: 500, marginBottom: 8 }}>
        Mis portafolios
      </div>

      {portfolios.map((p, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '8px 10px', borderRadius: 9, marginBottom: 4,
          background: p.active ? 'var(--panel)' : 'transparent',
          border: `1px solid ${p.active ? 'var(--border)' : 'transparent'}`,
        }}>
          <div>
            <div style={{ fontSize: 11.5, fontWeight: 500 }}>{p.name}</div>
            <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>{p.value}</div>
          </div>
          <div style={{
            width: 22, height: 22, borderRadius: '50%', background: p.color,
            boxShadow: p.active ? '0 0 0 2px rgba(167,139,250,0.18)' : 'none',
            display: 'grid', placeItems: 'center',
          }}>
            <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: 12, fontWeight: 700, lineHeight: 1 }}>+</span>
          </div>
        </div>
      ))}

      <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 500, padding: '8px 10px', marginTop: 4 }}>
        + Crear portafolio
      </div>
    </div>
  );
}

function ShowcaseCard({ title, description, children }) {
  return (
    <div style={{
      background: 'var(--panel-2)', border: '1px solid var(--border)',
      borderRadius: 16, padding: '32px 20px 24px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
      transition: 'border-color 0.15s, transform 0.15s',
    }}
    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(0, 194, 117, 0.3)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.transform = 'none'; }}
    >
      {children}
      <div style={{ textAlign: 'center', maxWidth: 280 }}>
        <h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 6px' }}>{title}</h3>
        <p style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.5, margin: 0 }}>{description}</p>
      </div>
    </div>
  );
}

function LandingShowcase() {
  return (
    <section style={{
      padding: '40px 28px',
      maxWidth: 1100, margin: '0 auto',
    }}>
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <h2 style={{
          fontFamily: 'Space Grotesk, Inter, sans-serif',
          fontSize: 32, fontWeight: 700, letterSpacing: -1,
          margin: '0 0 10px',
        }}>
          Pensado para tu día a día.
        </h2>
        <p style={{ color: 'var(--text-dim)', fontSize: 15, margin: 0 }}>
          Mirá cómo se ve trabajando con tus números reales.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
        <FadeInUp delay={0}>
          <ShowcaseCard
            title="Diseñado para mobile"
            description="Cards expandibles, controles centrados, todo a tap de distancia. La app funciona donde la usás."
          >
            <MobileMockup />
          </ShowcaseCard>
        </FadeInUp>

        <FadeInUp delay={150}>
          <ShowcaseCard
            title="Carga inteligente"
            description="Buscá por ticker o nombre. Cargá en pesos y te lo convertimos a USD vía MEP. Te calculamos la fracción de acción exacta."
          >
            <AddModalMockup />
          </ShowcaseCard>
        </FadeInUp>

        <FadeInUp delay={300}>
          <ShowcaseCard
            title="Múltiples portafolios"
            description="Separá inversiones, jubilación, fondo de emergencia. Cada uno con su balance, evolución y P&L independientes."
          >
            <SidebarMockup />
          </ShowcaseCard>
        </FadeInUp>
      </div>
    </section>
  );
}

// ─── Mini-visualizaciones para FeatureCards ─────────────────────────────

function PricesViz({ color }) {
  const rows = [
    { t: 'BTC', p: '$77,516', c: '+2.85%', up: true, live: true },
    { t: 'NVDA', p: '$208.27', c: '+0.41%', up: true },
    { t: 'ETH', p: '$4,012',  c: '-1.20%', up: false },
  ];
  return (
    <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 9, padding: '8px 10px', fontSize: 11 }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
          <span style={{ fontWeight: 700, width: 32 }}>{r.t}</span>
          <span style={{ flex: 1, fontVariantNumeric: 'tabular-nums', color: 'var(--text-dim)' }}>{r.p}</span>
          <span style={{ fontSize: 10, fontWeight: 600, color: r.up ? 'var(--green)' : 'var(--red)' }}>{r.c}</span>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: r.live ? color : 'transparent',
            animation: r.live ? 'livePulse 1.4s ease-in-out infinite' : 'none',
            flexShrink: 0,
          }} />
        </div>
      ))}
    </div>
  );
}

function MEPConversionViz({ color }) {
  return (
    <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 9, padding: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.5, marginBottom: 2 }}>ARS</div>
          <div style={{ fontSize: 16, fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif', fontVariantNumeric: 'tabular-nums' }}>$100K</div>
        </div>
        <div style={{
          width: 28, height: 28, borderRadius: '50%',
          background: color, color: '#fff',
          display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 700,
          flexShrink: 0,
        }}>→</div>
        <div style={{ flex: 1, textAlign: 'center' }}>
          <div style={{ fontSize: 9, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.5, marginBottom: 2 }}>USD</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: color, fontFamily: 'Space Grotesk, Inter, sans-serif', fontVariantNumeric: 'tabular-nums' }}>$69.38</div>
        </div>
      </div>
      <div style={{ marginTop: 6, paddingTop: 6, borderTop: '1px solid var(--border)', textAlign: 'center', fontSize: 10, color: 'var(--text-faint)' }}>
        MEP $1,441.40 · auto
      </div>
    </div>
  );
}

function PortfoliosViz({ color }) {
  const portfolios = [
    { name: 'inversiones', value: '$6,015', col: '#a78bfa', selected: true },
    { name: 'jubilación', value: '$1,847', col: '#f59e5f' },
    { name: 'emergencia', value: '$2,400', col: '#10b981' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      {portfolios.map((p, i) => (
        <div key={i} style={{
          background: 'var(--panel-2)',
          border: `1px solid ${p.selected ? color : 'var(--border)'}`,
          borderRadius: 8, padding: '7px 10px',
          display: 'flex', alignItems: 'center', gap: 8, fontSize: 11,
          boxShadow: p.selected ? `0 0 0 1px ${color}33` : 'none',
        }}>
          <div style={{ width: 18, height: 18, borderRadius: '50%', background: p.col, flexShrink: 0 }} />
          <span style={{ fontWeight: 600, flex: 1 }}>{p.name}</span>
          <span style={{ color: 'var(--text-dim)', fontVariantNumeric: 'tabular-nums' }}>{p.value}</span>
        </div>
      ))}
    </div>
  );
}

function HistoryViz({ color }) {
  return (
    <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 9, padding: 10, position: 'relative' }}>
      <svg viewBox="0 0 200 70" width="100%" height="70" style={{ display: 'block' }} preserveAspectRatio="none">
        <defs>
          <linearGradient id="histVizGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.4" />
            <stop offset="100%" stopColor={color} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d="M0 55 Q 25 50, 40 48 T 80 38 T 120 30 T 160 22 T 200 12 L 200 70 L 0 70 Z" fill="url(#histVizGrad)" />
        <path
          d="M0 55 Q 25 50, 40 48 T 80 38 T 120 30 T 160 22 T 200 12"
          stroke={color} strokeWidth="2.5" fill="none"
          vectorEffect="non-scaling-stroke" strokeLinecap="round"
        />
        <circle cx="200" cy="12" r="3.5" fill={color} stroke="var(--panel-2)" strokeWidth="1.5" />
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--text-faint)', marginTop: 4 }}>
        <span>30D</span>
        <span style={{ color, fontWeight: 700 }}>+18.5%</span>
      </div>
    </div>
  );
}

function AllocationViz({ color }) {
  const segments = [
    { color: '#f7931a', dash: 95 },     // BTC
    { color: '#a78bfa', dash: 28 },     // NVDA
    { color, dash: 18 },                 // tercero (color del card)
    { color: '#ffe600', dash: 14 },     // MELI
  ];
  let off = 0;
  return (
    <div style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 9, padding: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg viewBox="0 0 80 80" width="64" height="64" style={{ flexShrink: 0 }}>
        <circle cx="40" cy="40" r="28" fill="none" stroke="var(--border)" strokeWidth="10" />
        {segments.map((s, i) => {
          const dasharray = `${s.dash} ${188 - s.dash}`;
          const dashoffset = -off;
          off += s.dash;
          return (
            <circle key={i} cx="40" cy="40" r="28" fill="none"
              stroke={s.color} strokeWidth="10"
              strokeDasharray={dasharray} strokeDashoffset={dashoffset}
              transform="rotate(-90 40 40)" />
          );
        })}
      </svg>
      <div style={{ fontSize: 10.5, lineHeight: 1.5, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, background: '#f7931a', borderRadius: '50%' }} /> BTC <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>62%</span></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, background: '#a78bfa', borderRadius: '50%' }} /> NVDA <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>18%</span></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, background: color, borderRadius: '50%' }} /> VUAA <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>11%</span></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, background: '#ffe600', borderRadius: '50%' }} /> MELI <span style={{ marginLeft: 'auto', color: 'var(--text-dim)' }}>9%</span></div>
      </div>
    </div>
  );
}

function AmountViz({ color }) {
  return (
    <div>
      <div style={{
        background: 'var(--panel-2)', border: '1px solid var(--border)',
        borderRadius: 7, padding: '7px 10px', fontSize: 12,
        fontWeight: 600, fontVariantNumeric: 'tabular-nums',
        marginBottom: 6,
      }}>
        100,000 <span style={{ color: 'var(--text-faint)', fontWeight: 400, fontSize: 10 }}>ARS</span>
      </div>
      <div style={{ fontSize: 11, color: 'var(--text-faint)', lineHeight: 1.5 }}>
        ≈ <span style={{ color: color, fontWeight: 700, fontFamily: 'Space Grotesk, Inter, sans-serif' }}>0.333 NVDA</span>
      </div>
      <div style={{ height: 4, background: 'var(--panel-2)', borderRadius: 2, overflow: 'hidden', marginTop: 4 }}>
        <div style={{ width: '33.3%', height: '100%', background: color, borderRadius: 2 }} />
      </div>
      <div style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 3 }}>33.3% de 1 acción</div>
    </div>
  );
}

function FeatureCard({ visual, title, description, accent }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: 'var(--panel)',
        border: `1px solid ${hovered ? accent + '66' : 'var(--border)'}`,
        borderRadius: 14, padding: 20,
        transition: 'border-color 0.2s, transform 0.2s, box-shadow 0.2s',
        transform: hovered ? 'translateY(-3px)' : 'none',
        boxShadow: hovered ? `0 12px 32px ${accent}22` : 'none',
        position: 'relative', overflow: 'hidden',
        height: '100%',
      }}>
      {/* Stripe de color en el borde superior */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: accent, opacity: hovered ? 1 : 0.7,
        transition: 'opacity 0.2s',
      }} />
      <div style={{ marginBottom: 14, marginTop: 6 }}>
        {visual}
      </div>
      <h3 style={{ fontSize: 16, fontWeight: 600, margin: '0 0 8px' }}>{title}</h3>
      <p style={{ fontSize: 13.5, color: 'var(--text-dim)', lineHeight: 1.5, margin: 0 }}>{description}</p>
    </div>
  );
}

function LandingFeatures() {
  return (
    <section id="features" style={{
      padding: '60px 28px',
      maxWidth: 1100, margin: '0 auto',
    }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <h2 style={{
          fontFamily: 'Space Grotesk, Inter, sans-serif',
          fontSize: 32, fontWeight: 700, letterSpacing: -1,
          margin: '0 0 10px',
        }}>
          Todo lo que necesitás, nada más.
        </h2>
        <p style={{ color: 'var(--text-dim)', fontSize: 15, margin: 0 }}>
          Las funcionalidades core de un tracker serio, sin features que no usás.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
        <FadeInUp delay={0}>
          <FeatureCard
            visual={<PricesViz color="#10b981" />}
            accent="#10b981"
            title="Precios en vivo"
            description="Actualización cada 30s desde CoinGecko (cripto) y Yahoo Finance (acciones/ETFs). Sin delay."
          />
        </FadeInUp>
        <FadeInUp delay={80}>
          <FeatureCard
            visual={<MEPConversionViz color="#f7931a" />}
            accent="#f7931a"
            title="CEDEARs con conversión MEP"
            description="Cargás en pesos, te lo convierte automático a USD usando el MEP del momento. ADBED, NVDAD, MSFTD, todos los populares."
          />
        </FadeInUp>
        <FadeInUp delay={160}>
          <FeatureCard
            visual={<PortfoliosViz color="#a78bfa" />}
            accent="#a78bfa"
            title="Múltiples portafolios"
            description="Separá inversiones, jubilación, fondo de emergencia. Cada uno con su balance, evolución y P&L propios."
          />
        </FadeInUp>
        <FadeInUp delay={240}>
          <FeatureCard
            visual={<HistoryViz color="#06b6d4" />}
            accent="#06b6d4"
            title="Histórico real"
            description="Gráfico de evolución que respeta cuándo compraste cada activo. Sin proyecciones falsas del pasado."
          />
        </FadeInUp>
        <FadeInUp delay={320}>
          <FeatureCard
            visual={<AllocationViz color="#ec4899" />}
            accent="#ec4899"
            title="Asignación inteligente"
            description="Donut interactivo con colores de marca (BTC naranja, MELI amarillo, etc.). Hover para ver % y monto."
          />
        </FadeInUp>
        <FadeInUp delay={400}>
          <FeatureCard
            visual={<AmountViz color="#f59e0b" />}
            accent="#f59e0b"
            title="Carga por monto"
            description="¿Pusiste $100,000 ARS en NVDA? Te calcula la fracción de acción exacta. Más natural que ingresar cantidades."
          />
        </FadeInUp>
      </div>
    </section>
  );
}

function LandingFounder() {
  const links = [
    {
      label: 'Instagram',
      href: 'https://instagram.com/Lau_ferreyra01',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>,
    },
    {
      label: 'GitHub',
      href: 'https://github.com/Islauuti-sys',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.6 2 12.2c0 4.5 2.9 8.3 6.8 9.6.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1.1 1.5 1.1.9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1 .8-.2 1.7-.3 2.5-.3.9 0 1.7.1 2.5.3 1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.5 5 .4.3.7.9.7 1.9v2.7c0 .3.2.6.7.5 4-1.3 6.8-5.1 6.8-9.6C22 6.6 17.5 2 12 2z"/></svg>,
    },
    {
      label: 'Email',
      href: 'mailto:islauuti@gmail.com',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
    },
  ];

  return (
    <section style={{
      padding: '40px 28px',
      maxWidth: 900, margin: '0 auto',
    }}>
      <FadeInUp>
        <div className="founder-card" style={{
          background: 'var(--panel)', border: '1px solid var(--border)',
          borderRadius: 18, padding: 32,
          display: 'flex', alignItems: 'center', gap: 28,
          boxShadow: '0 20px 60px rgba(0, 194, 117, 0.06)',
        }}>
          {/* Foto */}
          <div style={{ flexShrink: 0 }}>
            <img
              src="assets/creador.jpeg"
              alt="Lautaro Ferreyra"
              style={{
                width: 140, height: 140, borderRadius: '50%',
                objectFit: 'cover',
                border: '3px solid var(--accent)',
                boxShadow: '0 8px 24px rgba(0, 194, 117, 0.25)',
              }}
            />
          </div>

          {/* Texto */}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>
              Sobre el creador
            </div>
            <h2 style={{
              fontFamily: 'Space Grotesk, Inter, sans-serif',
              fontSize: 22, fontWeight: 700, letterSpacing: -0.5,
              margin: '0 0 12px',
            }}>
              Lautaro Ferreyra
            </h2>
            <p style={{ fontSize: 14, color: 'var(--text-dim)', lineHeight: 1.6, margin: '0 0 18px' }}>
              Soy Lautaro Ferreyra, fundador de trackerpro. Construí esta app para resolver el problema
              que tenía como inversor en Argentina: ningún tracker existente manejaba bien CEDEARs,
              conversión MEP y portafolios múltiples en un solo lugar. Hoy la uso todos los días —
              y espero que vos también.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {links.map((l, i) => (
                <a
                  key={i}
                  href={l.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 7,
                    padding: '8px 14px', borderRadius: 9,
                    background: 'var(--panel-2)',
                    border: '1px solid var(--border)',
                    color: 'var(--text-dim)',
                    textDecoration: 'none', fontSize: 13, fontWeight: 500,
                    transition: 'all 0.15s',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-dim)'; e.currentTarget.style.borderColor = 'var(--border)'; }}
                >
                  {l.icon}
                  {l.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </FadeInUp>
    </section>
  );
}

function LandingFooterCTA({ onSignupClick }) {
  return (
    <section style={{
      padding: '60px 28px 80px',
      maxWidth: 800, margin: '0 auto',
      textAlign: 'center',
    }}>
      <FadeInUp style={{
        background: 'linear-gradient(135deg, rgba(0, 194, 117, 0.12), rgba(0, 194, 117, 0.04))',
        border: '1px solid rgba(0, 194, 117, 0.25)',
        borderRadius: 20, padding: '40px 28px',
      }}>
        <h2 style={{
          fontFamily: 'Space Grotesk, Inter, sans-serif',
          fontSize: 28, fontWeight: 700, letterSpacing: -0.8,
          margin: '0 0 12px',
        }}>
          Empezá a trackear tu portafolio en segundos.
        </h2>
        <p style={{ color: 'var(--text-dim)', fontSize: 15, margin: '0 0 24px' }}>
          Sin tarjeta de crédito. Sin compromiso. Cancelás cuando quieras.
        </p>
        <button
          onClick={onSignupClick}
          style={{
            padding: '14px 32px', fontSize: 15, fontWeight: 700,
            color: '#fff', background: 'var(--accent)',
            borderRadius: 11, border: 'none',
            boxShadow: '0 8px 24px rgba(0, 194, 117, 0.25)',
            transition: 'transform 0.15s, box-shadow 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0, 194, 117, 0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0, 194, 117, 0.25)'; }}
        >
          Crear mi cuenta gratis
        </button>
      </FadeInUp>
    </section>
  );
}

function LandingFooter() {
  return (
    <footer style={{
      padding: '24px 28px 40px',
      maxWidth: 1100, margin: '0 auto',
      borderTop: '1px solid var(--border)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexWrap: 'wrap', gap: 12,
      fontSize: 12, color: 'var(--text-faint)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <svg width="20" height="20" viewBox="0 0 70 70" aria-hidden>
          <circle cx="35" cy="35" r="27" fill="none" stroke="#00c275" strokeWidth="3" />
          <path d="M23 43 L35 27 L47 35" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M41 27 L47 27 L47 33" stroke="#00c275" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span>© {new Date().getFullYear()} trackerpro · Beta</span>
      </div>
      <div>Hecho en Argentina 🇦🇷</div>
    </footer>
  );
}

function LandingPage({ onLogin, onSignup }) {
  return (
    <div style={{ minHeight: '100vh', background: 'var(--bg)', color: 'var(--text)' }}>
      <LandingNav onLoginClick={onLogin} onSignupClick={onSignup} />
      <LandingHero onSignupClick={onSignup} />
      <LandingFeatures />
      <LandingShowcase />
      <LandingFounder />
      <LandingFooterCTA onSignupClick={onSignup} />
      <LandingFooter />
    </div>
  );
}

Object.assign(window, { LandingPage });