// Results, Social Proof & Logos
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

function ResultsSection() {
  const ref = useRefR(null);
  const [play, setPlay] = useStateR(false);

  useEffectR(() => {
    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();
  }, []);

  const stats = [
    { num: 327, suffix: '', label: 'planes financieros creados', sub: 'en 2025' },
    { num: 4.9, suffix: '/5', label: 'puntuación media', sub: 'Google reviews', decimals: 1 },
    { num: 1.85, prefix: '', suffix: ' %', label: 'ahorro medio en comisiones', sub: 'vs. producto bancario equivalente', decimals: 2 },
    { num: 94, suffix: ' %', label: 'clientes renuevan', sub: 'al cabo del primer año' },
  ];

  return (
    <section id="resultados" ref={ref} className="section" style={{ background: 'var(--ink-950)', color: 'white', position: 'relative', overflow: 'hidden' }}>
      {/* Glow */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: 0,
        background: 'radial-gradient(50% 40% at 50% 0%, rgba(59,109,245,0.3) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(80% 100% at 50% 50%, black, transparent)',
        WebkitMaskImage: 'radial-gradient(80% 100% at 50% 50%, black, transparent)',
      }} />

      <div className="container-wide" style={{ position: 'relative' }}>
        <div className="section-header reveal" style={{ marginBottom: 72 }}>
          <div className="eyebrow" style={{ color: 'var(--primary-300)', marginBottom: 20 }}>
            <span style={{
              content: '',
              width: 6, height: 6,
              borderRadius: '50%',
              background: 'var(--primary-400)',
              boxShadow: '0 0 0 3px rgba(96,144,250,0.2)',
              display: 'inline-block',
              marginRight: 2,
            }}></span>
            Resultados
          </div>
          <h2 className="section-title" style={{ color: 'white' }}>
            Ya lo han hecho <em style={{ color: 'var(--primary-300)' }}>más de 300 personas</em><br />
            este mes.
          </h2>
          <p className="section-sub" style={{ color: 'var(--ink-300)' }}>
            No prometemos rentabilidades. Lo que sí prometemos: claridad, menos comisiones y un plan que puedas entender.
          </p>
        </div>

        {/* Stats */}
        <div className="stats-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1,
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 20,
          overflow: 'hidden',
          marginBottom: 80,
        }}>
          {stats.map((s, i) => (
            <div key={i} className={`reveal reveal-delay-${i + 1}`} style={{
              padding: '36px 28px',
              background: 'var(--ink-950)',
            }}>
              <div style={{
                fontSize: 'clamp(36px, 4.5vw, 56px)',
                fontWeight: 500,
                letterSpacing: '-0.035em',
                lineHeight: 1,
                color: 'white',
                marginBottom: 12,
              }}>
                {s.prefix || ''}<AnimatedNumber to={s.num} trigger={play} decimals={s.decimals || 0} />{s.suffix || ''}
              </div>
              <div style={{
                fontSize: 14,
                color: 'var(--ink-300)',
                marginBottom: 4,
                lineHeight: 1.4,
              }}>
                {s.label}
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 11,
                color: 'var(--ink-500)',
              }}>
                {s.sub}
              </div>
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <Testimonials />
      </div>

      <style>{`
        @media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function Testimonials() {
  const testimonials = [
    {
      name: 'Carlos M.',
      role: 'Ingeniero, 42 años',
      initials: 'CM',
      rating: 5,
      text: 'Tenía el dinero aparcado en la cuenta del BBVA desde hacía 3 años. En una sesión me enseñaron dónde estaba perdiendo dinero real. El plan fue claro y lo pude ejecutar yo mismo.',
    },
    {
      name: 'Marta L.',
      role: 'Autónoma, 35 años',
      initials: 'ML',
      rating: 5,
      text: 'Me daba pánico hablar de inversiones. El asesor tuvo paciencia infinita y no intentó venderme nada. Salí con un plan a 20 años y entendiendo cada decisión.',
    },
    {
      name: 'Javier R.',
      role: 'Funcionario, 51 años',
      initials: 'JR',
      rating: 5,
      text: 'Llevaba años oyendo que tenía que "hacer algo" con mi plan de pensiones. Me hicieron el cálculo real y cambié de producto. Me ahorro unos 800 € al año en comisiones.',
    },
  ];

  return (
    <div className="testimonials-grid" style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 20,
    }}>
      {testimonials.map((t, i) => (
        <div key={i} className={`reveal reveal-delay-${i + 1}`} style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 18,
          padding: 28,
          backdropFilter: 'blur(10px)',
        }}>
          <div style={{ display: 'flex', gap: 2, marginBottom: 16 }}>
            {Array.from({ length: t.rating }).map((_, i) => (
              <svg key={i} 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>
            ))}
          </div>
          <p style={{
            fontSize: 15.5,
            lineHeight: 1.55,
            color: 'var(--ink-100)',
            margin: '0 0 24px',
          }}>
            "{t.text}"
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            <div style={{
              width: 36, height: 36,
              borderRadius: '50%',
              background: 'linear-gradient(135deg, var(--primary-400), var(--primary-700))',
              display: 'grid',
              placeItems: 'center',
              fontSize: 12,
              fontWeight: 500,
              color: 'white',
              letterSpacing: '0.02em',
            }}>{t.initials}</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'white' }}>{t.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-400)' }}>{t.role}</div>
            </div>
          </div>
        </div>
      ))}

      <style>{`
        @media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
}

function LogosSection() {
  const logos = [
    { name: 'El Referente', style: { fontFamily: 'serif', fontWeight: 600, fontStyle: 'italic' } },
    { name: '20minutos', style: { fontWeight: 700, color: '#0075C9' } },
    { name: 'Finect', style: { fontWeight: 600, letterSpacing: '-0.02em' } },
    { name: 'Emprendedores', style: { fontWeight: 700, color: '#E31E24' } },
    { name: 'El Economista', style: { fontFamily: 'serif', fontWeight: 500 } },
    { name: 'Cinco Días', style: { fontFamily: 'serif', fontWeight: 600 } },
  ];

  return (
    <section className="section-compact" style={{ background: 'white', borderTop: '1px solid var(--ink-150)' }}>
      <div className="container-wide">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 12,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            color: 'var(--ink-500)',
          }}>
            Nos han visto en
          </div>
        </div>
        <div className="reveal reveal-delay-1" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 40,
          alignItems: 'center',
          justifyItems: 'center',
          opacity: 0.7,
        }}>
          {logos.map((l, i) => (
            <div key={i} style={{
              fontSize: 18,
              color: 'var(--ink-700)',
              ...l.style,
              transition: 'opacity 0.2s ease',
              filter: 'grayscale(1)',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.filter = 'none'; }}
              onMouseLeave={(e) => { e.currentTarget.style.filter = 'grayscale(1)'; }}
            >
              {l.name}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .section-compact .container-wide > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

window.ResultsSection = ResultsSection;
window.LogosSection = LogosSection;