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

const FinalCTA = () => (
  <section id="contacto" data-screen-label="09 Final CTA" style={{ padding: '40px 5vw 120px', position:'relative' }}>
    <div style={{
      maxWidth: 1280, margin:'0 auto', position:'relative', overflow:'hidden',
      borderRadius: 48, padding: '96px 64px',
      background: 'radial-gradient(circle at 80% 20%, rgba(236,0,140,.45) 0%, rgba(163,53,231,.25) 30%, transparent 60%), radial-gradient(circle at 10% 90%, rgba(53,81,231,.30) 0%, transparent 50%), #1A1A1A',
      border: '1px solid rgba(255,255,255,.10)',
    }}>
      <div style={{ position:'relative', zIndex: 2, maxWidth: 720 }}>
        <Eyebrow color="#FF5DB7">Diagnóstico gratuito</Eyebrow>
        <h2 style={{
          fontFamily:'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(36px, 5vw, 72px)', lineHeight: 1.0,
          letterSpacing:'-0.03em', color:'var(--fg)', margin: '20px 0 20px',
        }}>
          Hablemos de tu seguridad<br/>antes de que sea urgente<span style={{color:'var(--brotek-magenta)'}}>.</span>
        </h2>
        <p style={{ fontSize: 19, color:'var(--fg-muted)', lineHeight: 1.55, marginBottom: 36, maxWidth: 580 }}>
          30 minutos. Sin compromiso. Salís con un mapa concreto de tus riesgos
          y un plan de certificación priorizado para tu empresa.
        </p>

        <div style={{ display:'flex', gap: 14, flexWrap:'wrap' }}>
          <Btn variant="primary" size="lg" icon="calendar" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar diagnóstico de ciberseguridad</Btn>
          <Btn variant="glass" size="lg" icon="message" onClick={() => window.open('https://wa.me/5491124502586', '_blank')}>Escribinos por WhatsApp</Btn>
        </div>

        <div style={{ marginTop: 48, display:'flex', gap: 32, flexWrap:'wrap' }}>
          {[
            ['Sin retainer', 'Pagás solo lo que usás'],
            ['Equipo argentino', 'Atención en tu zona horaria'],
            ['10+ años', 'Especialistas en compliance'],
          ].map(([t, s]) => (
            <div key={t} style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <div style={{
                width: 22, height: 22, borderRadius:'50%',
                background:'var(--brotek-magenta)',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}><Icon name="check" size={12} color="#fff" strokeWidth={3}/></div>
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight: 600, fontSize: 14, color:'var(--fg)' }}>{t}</div>
                <div style={{ fontSize: 12, color:'var(--fg-subtle)' }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

window.FinalCTA = FinalCTA;