/* global React, Eyebrow, GlassCard, Icon */

const PAINS = [
  {
    icon: 'alert', glow: 'red', title: 'Brechas de seguridad costosas',
    body: 'Una sola vulnerabilidad explotada puede frenar tu operación, comprometer datos de clientes y disparar multas regulatorias. El costo promedio supera los USD 4.5M.',
    stat: '4.5M', statLabel: 'costo medio por brecha',
  },
  {
    icon: 'lock', glow: 'magenta', title: 'Contratos bloqueados sin certificación',
    body: 'Sin ISO 27001 ni SOC 2, no entrás a procesos de venta enterprise ni cierres internacionales. Tus competidores certificados ganan los acuerdos por defecto.',
    stat: '78%', statLabel: 'de RFPs exigen ISO/SOC',
  },
  {
    icon: 'trending', glow: 'violet', title: 'Compliance manual que no escala',
    body: 'Hojas de cálculo, evidencia dispersa y auditorías que devoran trimestres. Cada renovación es un proyecto desde cero — y tu equipo lo paga en horas extra.',
    stat: '6+', statLabel: 'meses sin automatización',
  },
];

const PainPoints = () => (
  <section id="problema" data-screen-label="02 Pain Points" style={{ padding: '120px 5vw', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 64, maxWidth: 720 }}>
        <Eyebrow color="#FF5DB7">El problema</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(32px, 4vw, 56px)', lineHeight: 1.05,
          letterSpacing: '-0.025em', color: 'var(--fg)', margin: '20px 0 16px',
        }}>
          Lo que está en juego cuando<br/>la seguridad llega tarde<span style={{color:'var(--brotek-magenta)'}}>.</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--fg-muted)', maxWidth: 600, lineHeight: 1.55 }}>
          Tres riesgos que ya viste en otros equipos. Tres razones por las que las
          fintechs y SaaS que crecen rápido eligen blindarse antes — no después.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {PAINS.map((p, i) => (
          <GlassCard key={i} glow={p.glow} radius={28}>
            <div style={{
              width: 52, height: 52, borderRadius: 14,
              background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.10)',
              display:'flex', alignItems:'center', justifyContent:'center', marginBottom: 24,
              color: 'var(--fg)',
            }}>
              <Icon name={p.icon} size={22}/>
            </div>
            <h3 style={{
              fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 22,
              color:'var(--fg)', marginBottom: 14, lineHeight: 1.2,
              letterSpacing:'-0.015em',
            }}>{p.title}</h3>
            <p style={{ color:'var(--fg-muted)', fontSize: 15, lineHeight: 1.55, marginBottom: 28 }}>
              {p.body}
            </p>
            <div style={{ paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)',
              display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{
                fontFamily:'var(--font-display)', fontWeight: 700, fontSize: 32,
                color: p.glow === 'red' ? '#EC4D2A' : p.glow === 'magenta' ? '#EC008C' : '#A335E7',
                letterSpacing:'-0.03em',
              }}>{p.stat}</span>
              <span style={{ fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--fg-subtle)',
                letterSpacing:'.08em', textTransform:'uppercase' }}>{p.statLabel}</span>
            </div>
          </GlassCard>
        ))}
      </div>
    </div>
  </section>
);

window.PainPoints = PainPoints;