/* global React, Eyebrow, GlassCard, Icon, Btn, Sticker, Light */

const SERVICES = [
  { color: '#EC4D2A', label: 'Offensive Security', sub: 'Red Team', desc: 'Pentesting interno/externo, ethical hacking y escaneos de vulnerabilidades — pensados como lo haría un atacante.', icon: 'eye', accent: 'red' },
  { color: '#3551E7', label: 'Defensive Team', sub: 'Blue Team', desc: 'Reglas de monitoreo, plan de respuesta a incidentes, playbooks y configuración de infraestructura.', icon: 'shield', accent: 'blue' },
  { color: '#A335E7', label: 'DevSecOps', sub: 'Pipeline', desc: 'Implementación de SAST/DAST, code review continuo y capacitación en desarrollo seguro.', icon: 'code', accent: 'violet' },
  { color: '#FB881D', label: 'Security Awareness', sub: 'Concientización', desc: 'Plataforma e-learning, charlas, campañas de phishing simulado y material para tu equipo.', icon: 'users', accent: 'orange' },
  { color: '#35E7C7', label: 'Infra Security', sub: 'Hardening', desc: 'Mantenimiento de parches, hardening de servidores y monitoreo de redes — sin que vos lo gestiones.', icon: 'cpu', accent: 'cyan' },
  { color: '#35E747', label: 'Endpoint Protect', sub: 'EDR / XDR', desc: 'Selección, despliegue y configuración del EDR/XDR adecuado para tu empresa.', icon: 'lock', accent: 'green' },
];

const Solution = () => (
  <section id="solucion" data-screen-label="03 Solution + Ariana" style={{ padding: '120px 5vw', position: 'relative', overflow: 'hidden' }}>
    <Light color="#EC008C" size={900} top="-300px" left="40%" opacity={0.18} blur={120}/>

    <div style={{ position: 'relative', zIndex: 1, maxWidth: 1280, margin: '0 auto' }}>

      {/* Ariana hero panel — wrapper div carries the anchor id so smooth-scroll finds a real DOM node */}
      <div id="ariana" style={{ scrollMarginTop: 90 }}>
      <GlassCard radius={48} hover={false} style={{ padding: '56px 64px', marginBottom: 80, position: 'relative', overflow: 'hidden' }}>
        <Light color="#A335E7" size={500} top="-100px" right="-100px" opacity={0.45} blur={80}/>
        <Light color="#EC008C" size={400} bottom="-100px" left="20%" opacity={0.35} blur={80}/>
        <div style={{ position:'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow color="#C480F2">Plataforma propia · Compliance Automation</Eyebrow>
            <h2 style={{
              fontFamily:'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1.0,
              letterSpacing:'-0.03em', color:'var(--fg)', margin: '20px 0 20px',
            }}>
              Conocé <span style={{
                background: 'linear-gradient(120deg, #EC008C, #A335E7)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              }}>Ariana</span>
              <span style={{color:'var(--brotek-magenta)'}}>.</span>
            </h2>
            <p style={{ fontSize: 18, color: 'var(--fg-muted)', lineHeight: 1.55, marginBottom: 28, maxWidth: 540 }}>
              Automatiza la implementación y mantenimiento de ISO 27001 y SOC 2.
              Mapea controles, recolecta evidencia, monitorea desvíos y prepara la auditoría —
              en semanas, no en trimestres.
            </p>
            <div style={{ display:'flex', gap: 28, marginBottom: 32 }}>
              {[
                { n: '6×', l: 'más rápido al certificado' },
                { n: '120+', l: 'controles automatizados' },
                { n: '24/7', l: 'monitoreo de cumplimiento' },
              ].map(s => (
                <div key={s.l}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight: 700, fontSize: 32,
                    color: 'var(--fg)', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.n}</div>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize: 11, marginTop: 6,
                    letterSpacing: '.08em', textTransform:'uppercase', color:'var(--fg-subtle)' }}>{s.l}</div>
                </div>
              ))}
            </div>
            <div style={{ display:'flex', gap: 12 }}>
              <Btn variant="primary" icon="arrow-up-right" href="https://oferta.arianaapp.com/#Contacto">Ver demo de Ariana</Btn>
              <Btn variant="glass" icon="arrow-right" href="https://oferta.arianaapp.com/">Cómo funciona</Btn>
            </div>
          </div>

          {/* Mock dashboard */}
          <div style={{
            background: 'rgba(15,15,15,.6)', border:'1px solid rgba(255,255,255,.10)',
            borderRadius: 20, padding: 20, fontFamily: 'var(--font-mono)', fontSize: 12,
          }}>
            <div style={{ display:'flex', gap: 6, marginBottom: 16 }}>
              <div style={{width:10,height:10,borderRadius:'50%',background:'#EC4D2A'}}/>
              <div style={{width:10,height:10,borderRadius:'50%',background:'#FB881D'}}/>
              <div style={{width:10,height:10,borderRadius:'50%',background:'#35E747'}}/>
              <div style={{ marginLeft:'auto', color:'var(--fg-subtle)', fontSize:10}}>ariana · iso27001 · 14 days left</div>
            </div>
            {[
              { name: 'A.5 Information Security Policies', pct: 100, col:'#35E747' },
              { name: 'A.6 Organization of Information Sec', pct: 88, col:'#35E747' },
              { name: 'A.8 Asset Management', pct: 64, col:'#FB881D' },
              { name: 'A.9 Access Control', pct: 92, col:'#35E747' },
              { name: 'A.12 Operations Security', pct: 47, col:'#EC4D2A' },
              { name: 'A.14 System Development', pct: 71, col:'#FB881D' },
            ].map(c => (
              <div key={c.name} style={{ marginBottom: 12 }}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 4, color:'var(--fg)' }}>
                  <span style={{fontSize: 11}}>{c.name}</span>
                  <span style={{color: c.col, fontSize: 11}}>{c.pct}%</span>
                </div>
                <div style={{ height: 4, borderRadius: 999, background: 'rgba(255,255,255,.06)', overflow:'hidden' }}>
                  <div style={{ height: '100%', width: `${c.pct}%`, background: c.col, borderRadius: 999 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </GlassCard>
      </div>

      {/* Service grid */}
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <Eyebrow>Seguridad 360°</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.05,
          letterSpacing: '-0.025em', color: 'var(--fg)', margin: '18px 0 14px',
        }}>
          Desde un análisis de código<br/>hasta un virtual CISO<span style={{color:'var(--brotek-magenta)'}}>.</span>
        </h2>
        <p style={{ fontSize: 17, color: 'var(--fg-muted)', maxWidth: 600, lineHeight: 1.55 }}>
          Una gama de soluciones modulares para que armes tu pack según el tamaño de tu empresa.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {SERVICES.map(s => (
          <GlassCard key={s.label} glow={s.accent} radius={24} style={{ padding: 28, position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', top: 18, right: 18 }}>
              <Sticker color={s.color} label={s.sub} sublabel="BTK·SVC" size={88} rotate={8}/>
            </div>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: `${s.color}22`, border: `1px solid ${s.color}55`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: s.color, marginBottom: 24,
            }}><Icon name={s.icon} size={20}/></div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight: 500, fontSize: 11,
              letterSpacing: '.18em', textTransform:'uppercase', color: s.color, marginBottom: 8 }}>
              {s.label}
            </div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color:'var(--fg)',
              marginBottom: 14, letterSpacing: '-0.015em',
            }}>{s.sub}</h3>
            <p style={{ color: 'var(--fg-muted)', fontSize: 14, lineHeight: 1.55 }}>{s.desc}</p>
          </GlassCard>
        ))}
      </div>
    </div>
  </section>
);

window.Solution = Solution;