// El Rotador — automatic mode highlight
function Rotador() {
  const features = [
    { icon: '🎯', label: 'Eliges categoría + ciudad' },
    { icon: '🤖', label: 'Bot scrapea Google Maps cada día' },
    { icon: '🔍', label: 'Filtra por SEO bajo + email activo' },
    { icon: '✉️', label: 'Envía 10 emails con tu marca y web propuesta' },
    { icon: '📅', label: 'Recibes citas en tu calendario' },
  ];

  return (
    <section style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div style={{
          background: 'linear-gradient(135deg, var(--pl-accent-ink) 0%, #3b1d8b 60%, var(--pl-accent-deep) 100%)',
          borderRadius: 32,
          padding: '64px 56px',
          color: '#fff',
          position: 'relative',
          overflow: 'hidden',
          boxShadow: '0 30px 80px -30px rgba(60,24,140,.5)',
        }}>
          {/* decorative grid */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0)',
            backgroundSize: '24px 24px',
            opacity: .35,
            maskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%)',
            WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%)',
          }} />
          {/* glow */}
          <div style={{
            position: 'absolute', top: -150, right: -100, width: 400, height: 400, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(168, 85, 247, .3), transparent 60%)',
          }} />

          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 14px', borderRadius: 999,
                background: 'rgba(255,255,255,.12)',
                border: '1px solid rgba(255,255,255,.2)',
                fontSize: 12.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase',
                marginBottom: 22,
              }}>
                <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#fbbf24' }} />
                El Rotador · plan Premium
              </span>
              <h2 className="pl-display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', margin: '0 0 18px' }}>
                10 emails al día, <br />
                <em style={{ fontStyle: 'normal', background: 'linear-gradient(90deg, #fbbf24, #fde68a)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
                  sin que toques nada.
                </em>
              </h2>
              <p style={{ fontSize: 17, color: 'rgba(255,255,255,.78)', lineHeight: 1.55, margin: '0 0 24px', maxWidth: 480 }}>
                Le dices al bot: <i>"pintores brocha gorda"</i> + <i>Madrid</i>. Y se acabó.
                Cada día scrapea, detecta a los que <b style={{ color: '#fff' }}>más necesitan una web</b> y tienen email activo,
                y les manda una propuesta personalizada con tu marca.
              </p>
              <p style={{ fontSize: 17, color: '#fff', fontWeight: 600, margin: '0 0 28px', maxWidth: 480 }}>
                Tú solo apareces a las videollamadas que te van entrando solas en el calendario.
              </p>
              <a href="#planes" className="pl-btn pl-btn-accent">
                Quiero el Rotador <IconArrowRight size={15} stroke={2.5} />
              </a>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {features.map((f, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '14px 18px',
                  background: 'rgba(255,255,255,.07)',
                  border: '1px solid rgba(255,255,255,.12)',
                  borderRadius: 14,
                  backdropFilter: 'blur(10px)',
                }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: 'rgba(255,255,255,.12)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18,
                  }}>{f.icon}</span>
                  <span style={{ fontSize: 15, fontWeight: 600 }}>{f.label}</span>
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--pl-font-mono)', fontSize: 11, color: 'rgba(255,255,255,.5)', fontWeight: 700 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                </div>
              ))}
              {/* fake live activity */}
              <div style={{
                marginTop: 6, padding: '12px 14px',
                background: 'rgba(34,197,94,.10)',
                border: '1px solid rgba(34,197,94,.22)',
                borderRadius: 12,
                fontSize: 13, color: '#86efac', fontWeight: 600,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#22c55e' }} />
                Bot activo · 7 emails enviados hoy · 2 citas reservadas
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Rotador = Rotador;