// Testimonials + metrics — clearly labelled as "early access / beta"
function Testimonials() {
  const quotes = [
    {
      name: 'Aitor Cienfuegos',
      role: 'SEO freelance · Bilbao',
      img: '👨🏻‍💻',
      quote: 'En 4 días cerré 2 webs a 1.400€. La auditoría + la web ya hecha les rompe la cabeza, no saben decir que no.',
      stat: '2 webs / 4 días',
      pill: 'Beta',
    },
    {
      name: 'Marina Soldevila',
      role: 'Agencia · Barcelona',
      img: '👩🏽‍💼',
      quote: 'Solía gastar 200€ en Ads para conseguir 8 leads basura. Ahora con el Rotador me entran 3 citas reales a la semana.',
      stat: '−87% CPL',
      pill: 'Beta',
    },
    {
      name: 'Jorge Núñez',
      role: 'Rank & Rent · Sevilla',
      img: '🧑🏻‍🚀',
      quote: 'Esto es lo más cerca a "comprar un cliente con un botón" que he visto. Hace falta meter cabeza, pero el tiempo que ahorra es brutal.',
      stat: '12 h/semana',
      pill: 'Beta',
    },
    {
      name: 'Lucía Romero',
      role: 'Venta de leads · Murcia',
      img: '👩🏼‍🎤',
      quote: 'El plan Premium se paga solo con el primer cliente que cierras. Yo cerré dos el primer mes. Las cuentas salen.',
      stat: '2× el plan',
      pill: 'Beta',
    },
    {
      name: 'Pablo Domingo',
      role: 'Consultor SEO · Valencia',
      img: '🧑🏼‍🏫',
      quote: 'No me creo lo bien que abren los emails. La clave es el mockup de su propia web adjunto.',
      stat: 'OR 42%',
      pill: 'Beta',
    },
  ];

  return (
    <section id="prueba" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Voces del programa beta</span>
          <h2 className="pl-display">
            Los primeros 30 ya están cerrando <span className="pl-accent-grad">clientes con esto.</span>
          </h2>
          <p>Reseñas de la cohort beta cerrada (mayo 2026). Programa abierto al público con el lanzamiento.</p>
        </div>

        {/* Metric strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: 'var(--pl-surface)',
          borderRadius: 22,
          border: '1px solid var(--pl-border)',
          boxShadow: 'var(--pl-shadow)',
          marginBottom: 36,
          overflow: 'hidden',
        }}>
          <Metric n="38" suffix="" l="Beta-testers activos" />
          <Metric n="2.140" suffix="" l="Leads generados / mes" sep />
          <Metric n="34" suffix="%" l="Open rate medio" sep highlight />
          <Metric n="1 de 9" suffix="" l="Cerró cliente la 1ª semana" sep />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {/* Featured big quote */}
          <div style={{
            gridColumn: 'span 2',
            background: 'linear-gradient(135deg, #faf7ff 0%, #fff 100%)',
            border: '1px solid var(--pl-border-strong)',
            borderRadius: 24,
            padding: 36,
            position: 'relative', overflow: 'hidden',
          }}>
            <span style={{
              position: 'absolute', top: 14, right: 22,
              fontFamily: 'var(--pl-font-display)', fontSize: 120,
              color: 'var(--pl-accent)', opacity: .12, lineHeight: 1,
            }}>"</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              {[1,2,3,4,5].map(i => <IconStar key={i} size={16} color="#fbbf24" stroke={0} style={{ fill: '#fbbf24' }} />)}
              <span style={{ fontSize: 12, color: 'var(--pl-ink-mute)', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase' }}>5.0 · BETA</span>
            </div>
            <p style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 600, fontSize: 26, lineHeight: 1.3, letterSpacing: '-.01em', margin: '0 0 22px', maxWidth: 640 }}>
              "Mandé 14 emails el primer día. Tuve 4 respuestas. Cerré una cita por <span style={{ color: 'var(--pl-accent)' }}>360€/mes recurrente</span>. Antes hacía esto en 3 semanas. <span className="pl-uline">Es ridículo lo rápido que es.</span>"
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 40 }}>{quotes[0].img}</span>
              <div>
                <div style={{ fontWeight: 700 }}>{quotes[0].name}</div>
                <div style={{ fontSize: 13, color: 'var(--pl-ink-3)' }}>{quotes[0].role}</div>
              </div>
            </div>
          </div>

          {quotes.slice(1, 3).map((q, i) => <QuoteCard key={i} q={q} />)}
          {quotes.slice(3).map((q, i) => <QuoteCard key={i+3} q={q} />)}
        </div>
      </div>
    </section>
  );
}

function Metric({ n, suffix, l, sep, highlight }) {
  return (
    <div style={{
      padding: '26px 28px',
      borderLeft: sep ? '1px solid var(--pl-border)' : 'none',
      background: highlight ? 'rgba(124,58,237,.04)' : 'transparent',
    }}>
      <div style={{
        fontFamily: 'var(--pl-font-display)', fontWeight: 700,
        fontSize: 38, letterSpacing: '-.02em', color: highlight ? 'var(--pl-accent)' : 'var(--pl-ink)',
        display: 'flex', alignItems: 'baseline', gap: 2,
      }}>
        {n}<span style={{ fontSize: 24 }}>{suffix}</span>
      </div>
      <div style={{ fontSize: 13, color: 'var(--pl-ink-3)', fontWeight: 600 }}>{l}</div>
    </div>
  );
}

function QuoteCard({ q }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--pl-border)',
      borderRadius: 20, padding: 22,
      display: 'flex', flexDirection: 'column', gap: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'inline-flex', gap: 2 }}>
          {[1,2,3,4,5].map(i => <IconStar key={i} size={13} color="#fbbf24" stroke={0} style={{ fill: '#fbbf24' }} />)}
        </div>
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: '.08em',
          padding: '3px 7px', borderRadius: 5,
          background: 'rgba(124,58,237,.10)', color: 'var(--pl-accent-deep)',
        }}>{q.pill}</span>
      </div>
      <p style={{ margin: 0, fontSize: 14.5, color: 'var(--pl-ink)', lineHeight: 1.55, flex: 1 }}>"{q.quote}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: '1px solid var(--pl-border)' }}>
        <span style={{ fontSize: 26 }}>{q.img}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 13.5 }}>{q.name}</div>
          <div style={{ fontSize: 12, color: 'var(--pl-ink-3)' }}>{q.role}</div>
        </div>
        <span style={{
          fontFamily: 'var(--pl-font-mono)', fontSize: 11, fontWeight: 700,
          color: 'var(--pl-accent-deep)',
          background: 'rgba(124,58,237,.08)', padding: '4px 8px', borderRadius: 6,
        }}>{q.stat}</span>
      </div>
    </div>
  );
}

window.Testimonials = Testimonials;