// Hero section with dashboard mockup
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

function AnimatedNumber({ to, duration = 1200, prefix = '', suffix = '', decimals = 0, trigger }) {
  const [val, setVal] = useStateHero(0);
  const startedRef = useRefHero(false);

  useEffectHero(() => {
    if (!trigger || startedRef.current) return;
    startedRef.current = true;
    const start = performance.now();
    const from = 0;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(from + (to - from) * eased);
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [trigger, to, duration]);

  const formatted = val.toLocaleString('es-ES', {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
  return <span>{prefix}{formatted}{suffix}</span>;
}

function DashboardMockup() {
  const [play, setPlay] = useStateHero(false);
  const ref = useRefHero(null);

  useEffectHero(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setPlay(true); });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  // Growth chart data (monthly net worth)
  const data = [42, 45, 48, 47, 52, 55, 58, 62, 66, 71, 75, 82];
  const max = Math.max(...data);
  const min = Math.min(...data);
  const w = 520;
  const h = 180;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / (max - min)) * (h - 20) - 10;
    return [x, y];
  });
  const path = pts.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const areaPath = `${path} L${w},${h} L0,${h} Z`;

  return (
    <div ref={ref} className="dashboard-mockup" style={{
      position: 'relative',
      width: '100%',
      maxWidth: 720,
      margin: '0 auto',
    }}>
      {/* Ambient glow */}
      <div style={{
        position: 'absolute',
        inset: '-10% -15% -5% -15%',
        background: 'radial-gradient(60% 50% at 50% 40%, var(--primary-100) 0%, transparent 70%)',
        filter: 'blur(30px)',
        zIndex: 0,
        pointerEvents: 'none',
      }} />

      {/* Main card */}
      <div style={{
        position: 'relative',
        zIndex: 1,
        background: 'white',
        borderRadius: 20,
        boxShadow: '0 30px 60px -20px rgba(17, 24, 39, 0.18), 0 12px 24px -8px rgba(17, 24, 39, 0.08), 0 0 0 1px rgba(17, 24, 39, 0.04)',
        overflow: 'hidden',
      }}>
        {/* Window chrome */}
        <div style={{
          height: 38,
          background: 'var(--ink-50)',
          borderBottom: '1px solid var(--ink-150)',
          display: 'flex',
          alignItems: 'center',
          padding: '0 14px',
          gap: 6,
        }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }} />
          <div style={{
            marginLeft: 16,
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            color: 'var(--ink-400)',
          }}>
            Tu plan financiero
          </div>
        </div>

        {/* Dashboard body */}
        <div style={{ padding: 24 }}>
          {/* Header row */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)', letterSpacing: '0.02em', marginBottom: 6 }}>
                Tu patrimonio proyectado
              </div>
              <div style={{
                fontFamily: 'var(--font-sans)',
                fontSize: 34,
                fontWeight: 500,
                letterSpacing: '-0.03em',
                lineHeight: 1,
                color: 'var(--ink-950)',
              }}>
                <AnimatedNumber to={287430} trigger={play} prefix="" suffix=" €" decimals={0} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
                <span style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                  background: 'var(--green-50)',
                  color: 'var(--green-700)',
                  padding: '3px 8px',
                  borderRadius: 999,
                  fontSize: 12,
                  fontWeight: 500,
                }}>
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 2l3 4H2l3-4z" fill="currentColor" /></svg>
                  +12,4% anual
                </span>
                <span style={{ fontSize: 12, color: 'var(--ink-500)' }}>a 20 años</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['1A', '5A', '10A', '20A'].map((r, i) => (
                <span key={r} style={{
                  fontSize: 12,
                  padding: '5px 10px',
                  borderRadius: 6,
                  fontWeight: 500,
                  background: i === 3 ? 'var(--ink-950)' : 'transparent',
                  color: i === 3 ? 'white' : 'var(--ink-600)',
                  border: i === 3 ? 'none' : '1px solid var(--ink-200)',
                }}>{r}</span>
              ))}
            </div>
          </div>

          {/* Chart */}
          <div style={{ position: 'relative', marginBottom: 18 }}>
            <svg viewBox={`0 0 ${w} ${h}`} width="100%" height="180" preserveAspectRatio="none" style={{ display: 'block' }}>
              <defs>
                <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--primary-600)" stopOpacity="0.22" />
                  <stop offset="100%" stopColor="var(--primary-600)" stopOpacity="0" />
                </linearGradient>
              </defs>
              {/* Grid */}
              {[0, 0.25, 0.5, 0.75, 1].map((f) => (
                <line key={f} x1="0" x2={w} y1={f * h} y2={f * h} stroke="var(--ink-150)" strokeDasharray="2 4" strokeWidth="1" />
              ))}
              {/* Area */}
              <path d={areaPath} fill="url(#areaGrad)" style={{
                opacity: play ? 1 : 0,
                transition: 'opacity 1.2s ease 0.3s',
              }} />
              {/* Line */}
              <path
                d={path}
                fill="none"
                stroke="var(--primary-600)"
                strokeWidth="2.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                style={{
                  strokeDasharray: 1400,
                  strokeDashoffset: play ? 0 : 1400,
                  transition: 'stroke-dashoffset 1.6s cubic-bezier(0.25, 0.1, 0.25, 1)',
                }}
              />
              {/* End dot */}
              <circle
                cx={pts[pts.length - 1][0]}
                cy={pts[pts.length - 1][1]}
                r="5"
                fill="var(--primary-600)"
                stroke="white"
                strokeWidth="2.5"
                style={{
                  opacity: play ? 1 : 0,
                  transition: 'opacity 0.4s ease 1.6s',
                }}
              />
            </svg>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              fontSize: 10,
              fontFamily: 'var(--font-mono)',
              color: 'var(--ink-400)',
              marginTop: 6,
            }}>
              <span>2026</span><span>2030</span><span>2035</span><span>2040</span><span>2046</span>
            </div>
          </div>

          {/* Allocation pills */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr 1fr',
            gap: 10,
            paddingTop: 16,
            borderTop: '1px solid var(--ink-150)',
          }}>
            {[
              { label: 'Renta variable', pct: 65, color: 'var(--primary-600)' },
              { label: 'Renta fija', pct: 25, color: 'var(--ink-700)' },
              { label: 'Alternativos', pct: 10, color: 'var(--green-500)' },
            ].map((a) => (
              <div key={a.label}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginBottom: 4 }}>{a.label}</div>
                <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink-900)', marginBottom: 6 }}>
                  {a.pct}%
                </div>
                <div style={{ height: 4, background: 'var(--ink-100)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{
                    height: '100%',
                    width: play ? `${a.pct}%` : 0,
                    background: a.color,
                    borderRadius: 999,
                    transition: 'width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.6s',
                  }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Floating notification card */}
      <div className="float-card-1" style={{
        position: 'absolute',
        top: '46%',
        left: '-7%',
        zIndex: 2,
        background: 'white',
        padding: '12px 14px',
        borderRadius: 14,
        boxShadow: '0 20px 40px -12px rgba(17,24,39,0.2), 0 0 0 1px rgba(17,24,39,0.04)',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        minWidth: 210,
        animation: play ? 'floatIn 0.9s 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both, floaty 5s ease-in-out 1.5s infinite' : 'none',
        opacity: play ? 1 : 0,
      }}>
        <div style={{
          width: 34, height: 34,
          borderRadius: 10,
          background: 'var(--green-50)',
          display: 'grid',
          placeItems: 'center',
          color: 'var(--green-600)',
          flexShrink: 0,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--ink-900)' }}>Sin conflicto de interés</div>
          <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>No vendemos productos</div>
        </div>
      </div>

      {/* Floating fee card */}
      <div className="float-card-2" style={{
        position: 'absolute',
        bottom: '26%',
        right: '-7%',
        zIndex: 2,
        background: 'white',
        padding: '14px 16px',
        borderRadius: 14,
        boxShadow: '0 20px 40px -12px rgba(17,24,39,0.2), 0 0 0 1px rgba(17,24,39,0.04)',
        minWidth: 180,
        animation: play ? 'floatIn 0.9s 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) both, floaty 6s ease-in-out 2s infinite' : 'none',
        opacity: play ? 1 : 0,
      }}>
        <div style={{ fontSize: 11, color: 'var(--ink-500)', marginBottom: 4 }}>Comisión media banco</div>
        <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--red-600)', letterSpacing: '-0.02em', textDecoration: 'line-through', textDecorationThickness: 1.5 }}>
          2,30% anual
        </div>
        <div style={{
          marginTop: 4,
          fontSize: 11,
          fontWeight: 500,
          color: 'var(--green-700)',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 4,
        }}>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5 8l3-4H2l3 4z" fill="currentColor" /></svg>
          Con Inversimply: 0,45%
        </div>
      </div>

      <style>{`
        @keyframes floatIn {
          from { opacity: 0; transform: translateY(20px) scale(0.95); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes floaty {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        @media (max-width: 720px) {
          .float-card-1 { left: 0 !important; top: 10% !important; transform: scale(0.85); }
          .float-card-2 { right: 0 !important; bottom: 6% !important; transform: scale(0.85); }
        }
      `}</style>
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="hero-section" style={{
      position: 'relative',
      padding: 'clamp(60px, 9vw, 110px) 0 clamp(60px, 8vw, 90px)',
      overflow: 'hidden',
    }}>
      {/* Background pattern */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: 0,
        background: 'radial-gradient(80% 50% at 50% 0%, var(--primary-50) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, var(--ink-200) 1px, transparent 0)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(80% 60% at 50% 30%, black, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(80% 60% at 50% 30%, black, transparent 70%)',
        opacity: 0.5,
        pointerEvents: 'none',
      }} />

      <div className="container-wide" style={{ position: 'relative' }}>
        {/* Top pill */}
        <div className="reveal in" style={{ textAlign: 'center', marginBottom: 28 }}>
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            padding: '6px 14px 6px 8px',
            background: 'white',
            border: '1px solid var(--ink-200)',
            borderRadius: 999,
            fontSize: 13,
            color: 'var(--ink-700)',
            boxShadow: 'var(--shadow-xs)',
          }}>
            <span style={{
              background: 'var(--primary-600)',
              color: 'white',
              fontSize: 10.5,
              fontWeight: 600,
              padding: '3px 8px',
              borderRadius: 999,
              letterSpacing: '0.04em',
            }}>NUEVO</span>
            Plan financiero personalizado en 30 minutos
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
              <path d="M3 6h6m-2-2l2 2-2 2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </div>

        {/* Headline */}
        <h1 style={{
          textAlign: 'center',
          fontSize: 'clamp(42px, 6.8vw, 88px)',
          lineHeight: 0.98,
          letterSpacing: '-0.04em',
          fontWeight: 500,
          margin: '0 auto 24px',
          maxWidth: 980,
          color: 'var(--ink-950)',
        }}>
          <span className="reveal in">Tu plan financiero,</span>{' '}
          <span className="reveal reveal-delay-1 in" style={{
            fontFamily: 'var(--font-serif)',
            fontStyle: 'italic',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            color: 'var(--primary-700)',
          }}>
            hecho a medida.
          </span>
          <br />
          <span className="reveal reveal-delay-2 in">Sin letra pequeña.</span>
        </h1>

        <p className="reveal reveal-delay-3 in" style={{
          textAlign: 'center',
          fontSize: 'clamp(17px, 1.8vw, 21px)',
          lineHeight: 1.45,
          color: 'var(--ink-600)',
          maxWidth: 620,
          margin: '0 auto 40px',
        }}>
          Te ayudamos a organizar tu dinero, ahorrar en comisiones y construir patrimonio. Sin conflictos de interés, porque no vendemos productos.
        </p>

        {/* CTAs */}
        <div className="reveal reveal-delay-4 in" style={{
          display: 'flex',
          gap: 14,
          justifyContent: 'center',
          flexWrap: 'wrap',
          marginBottom: 24,
        }}>
          <a href="#reservar" className="btn btn-primary btn-lg">
            Reserva tu sesión gratuita
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 7.5h9m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
          <a href="#proceso" className="btn btn-ghost btn-lg">
            Ver cómo funciona
          </a>
        </div>

        {/* Trust row */}
        <div className="reveal reveal-delay-5 in" style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          gap: 28,
          flexWrap: 'wrap',
          fontSize: 13.5,
          color: 'var(--ink-500)',
          marginBottom: 72,
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1l2 4.5L15 6l-3.5 3.3L12.5 14 8 11.8 3.5 14l1-4.7L1 6l5-.5L8 1z" fill="#FFB800" /></svg>
            <strong style={{ color: 'var(--ink-800)', fontWeight: 500 }}>4.9/5</strong>
            en Google (300+ reseñas)
          </span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-300)' }} />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="var(--green-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            Sin permanencia
          </span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--ink-300)' }} />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7l3 3 5-6" stroke="var(--green-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            Registrados en CNMV
          </span>
        </div>

        {/* Dashboard */}
        <div className="reveal reveal-delay-5 in">
          <DashboardMockup />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.AnimatedNumber = AnimatedNumber;