/* global React, Eyebrow, GlassCard, Icon, Btn */
const { useState: useStateInd } = React;

const INDUSTRIES = [
  {
    key: 'fintech',
    label: 'Fintech',
    color: '#EC008C',
    headline: 'Cumplimiento financiero sin frenar el roadmap.',
    pain: 'Auditorías de bancos partner, regulación BCRA, PCI DSS y SOC 2 a la vez — todo bloqueando integraciones.',
    solution: 'Implementamos ISO 27001 + SOC 2 Type II en paralelo. Ariana mantiene la evidencia lista para auditoría continua.',
    bullets: ['PCI DSS para procesadores', 'SOC 2 Type II para B2B', 'Pentesting de APIs y onboarding', 'DevSecOps en pipelines de pago'],
    metric: { n: '4 meses', l: 'al primer reporte SOC 2' },
  },
  {
    key: 'saas',
    label: 'SaaS B2B',
    color: '#A335E7',
    headline: 'Cierra el deal enterprise sin pedir prórroga.',
    pain: 'El comprador exige SOC 2 / ISO 27001 antes de firmar. Sin certificación, el deal se cae o se demora trimestres.',
    solution: 'Acelerá la primera certificación con Ariana — y mantenela viva con monitoreo continuo, no proyectos anuales.',
    bullets: ['SOC 2 Type I + II', 'ISO 27001 internacional', 'Trust Center público', 'Cuestionarios de seguridad automatizados'],
    metric: { n: '6×', l: 'más rápido vs. consultoría manual' },
  },
  {
    key: 'health',
    label: 'HealthTech',
    color: '#35E747',
    headline: 'Datos sensibles, cero margen de error.',
    pain: 'Datos clínicos, integraciones con obras sociales y cumplimiento de privacidad. Una brecha = pérdida de licencia.',
    solution: 'Marco ISO 27001 + HIPAA-ready, pentesting de apps clínicas y hardening de infraestructura cloud.',
    bullets: ['ISO 27001 + HIPAA mapping', 'Pentest de apps móviles clínicas', 'Cifrado y key management', 'Awareness para personal médico'],
    metric: { n: '0', l: 'incidentes reportables en 2025' },
  },
  {
    key: 'retail',
    label: 'Retail / E-commerce',
    color: '#3551E7',
    headline: 'Protegé el carrito, no rompas la conversión.',
    pain: 'Fraude transaccional, scraping de precios, integraciones con pasarelas y compliance PCI sin frenar la operación.',
    solution: 'Pentesting de checkout, hardening de infra, monitoreo de fraude y certificación PCI DSS guiada.',
    bullets: ['PCI DSS Self-Assessment', 'Pentest pre-Hot Sale', 'WAF + Bot mitigation', 'Awareness de equipo de soporte'],
    metric: { n: '99.98%', l: 'uptime durante eventos pico' },
  },
];

const Industries = () => {
  const [active, setActive] = useStateInd('fintech');
  const ind = INDUSTRIES.find(i => i.key === active);

  return (
    <section id="casos" data-screen-label="06 Casos por industria" style={{ padding: '120px 5vw', position: 'relative', overflow: 'hidden' }}>
      {/* subtle light tied to active industry */}
      <div style={{
        position: 'absolute', top: '20%', right: '-200px', width: 700, height: 700,
        borderRadius: '50%', pointerEvents: 'none',
        background: `radial-gradient(circle, ${ind.color} 0%, transparent 60%)`,
        opacity: 0.18, filter: 'blur(100px)', transition: 'background .6s ease',
      }}></div>

      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
          <div>
            <Eyebrow>Casos de uso por industria</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(32px, 4vw, 56px)', lineHeight: 1.05,
              letterSpacing: '-0.025em', color: 'var(--fg)', margin: '18px 0 0',
            }}>
              Cada vertical tiene su<br/>propio mapa de riesgo<span style={{ color: 'var(--brotek-magenta)' }}>.</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.6 }}>
            Trabajamos con fintechs, SaaS, healthtech y retail. Mismo equipo, distintos
            playbooks — porque tu auditor pregunta cosas distintas según tu industria.
          </p>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32, borderBottom: '1px solid rgba(255,255,255,.06)', paddingBottom: 0 }}>
          {INDUSTRIES.map(i => {
            const sel = i.key === active;
            return (
              <button key={i.key} onClick={() => setActive(i.key)} style={{
                background: 'transparent', border: 0, cursor: 'pointer',
                padding: '14px 22px', position: 'relative',
                fontFamily: 'var(--font-display)', fontWeight: sel ? 600 : 500, fontSize: 15,
                color: sel ? 'var(--fg)' : 'var(--fg-muted)',
                transition: 'color .2s',
              }}>
                {i.label}
                <span style={{
                  position: 'absolute', left: 0, right: 0, bottom: -1, height: 2,
                  background: sel ? i.color : 'transparent',
                  boxShadow: sel ? `0 0 12px ${i.color}` : 'none',
                  transition: 'all .25s',
                }}></span>
              </button>
            );
          })}
        </div>

        <GlassCard radius={32} hover={false} style={{ padding: 48, position: 'relative', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'start' }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase', color: ind.color, marginBottom: 14,
              }}>{ind.label}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 'clamp(24px, 2.6vw, 36px)', lineHeight: 1.1,
                letterSpacing: '-0.02em', color: 'var(--fg)', marginBottom: 24,
              }}>{ind.headline}</h3>

              <div style={{ marginBottom: 20 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.10em', textTransform: 'uppercase', color: '#EC4D2A', marginBottom: 8 }}>El dolor</div>
                <p style={{ fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{ind.pain}</p>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.10em', textTransform: 'uppercase', color: '#35E747', marginBottom: 8 }}>Cómo lo resolvemos</div>
                <p style={{ fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.6 }}>{ind.solution}</p>
              </div>
            </div>

            <div>
              <div style={{
                background: 'rgba(15,15,15,.5)', border: '1px solid rgba(255,255,255,.08)',
                borderRadius: 20, padding: 28, marginBottom: 20,
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 56, color: ind.color, lineHeight: 1, letterSpacing: '-0.04em',
                  textShadow: `0 0 30px ${ind.color}55`,
                }}>{ind.metric.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, marginTop: 10, letterSpacing: '.10em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>{ind.metric.l}</div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {ind.bullets.map(b => (
                  <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: 18, height: 18, borderRadius: '50%',
                      background: `${ind.color}22`, border: `1px solid ${ind.color}66`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    }}>
                      <Icon name="check" size={10} color={ind.color} strokeWidth={3}/>
                    </div>
                    <span style={{ fontSize: 14, color: 'var(--fg)' }}>{b}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </GlassCard>
      </div>
    </section>
  );
};

window.Industries = Industries;