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

const RESOURCES = [
  {
    type: 'Toolkit', icon: 'shield', color: '#A335E7',
    title: 'Toolkit ISO 27001: material esencial para tu SGSI',
    desc: 'Plantillas listas para adaptar — alcance, estructura, política de comité y hoja de ruta completa para certificar.',
    cta: 'Descargar toolkit',
    href: 'blog/toolkit-iso-27001-sgsi.html',
  },
  {
    type: 'Webinar', icon: 'cpu', color: '#3551E7',
    title: 'ISO 27001 vs SOC 2: Guía Estratégica para CTOs',
    desc: 'David Arcia (Align) y Karen Collante (Brotek) desglosan qué estándar elegir según tu mercado (EE.UU. vs Global) y etapa.',
    cta: 'Ver webinar',
    href: 'blog/iso-27001-vs-soc2-webinar.html',
  },
  {
    type: 'Webinar', icon: 'message', color: '#FB881D',
    title: 'ISO 27001 y Fundamentos de Ciberseguridad',
    desc: 'Webinar de 45 min: desmitificamos la norma, gestión de riesgos real y cómo certificar siendo PyME o startup en AR/CL/UY.',
    cta: 'Ver webinar',
    href: 'blog/iso-27001-fundamentos-webinar.html',
  },
];

const BlogResources = () => (
  <section id="recursos" data-screen-label="03 Resources" style={{ padding: '80px 5vw 100px', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 48 }}>
        <Eyebrow color="#FF5DB7">Recursos descargables</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1.05,
          letterSpacing: '-0.025em', color: 'var(--fg)', margin: '16px 0 12px',
        }}>
          Material que tu equipo<br/>puede usar mañana mismo<span style={{color:'var(--brotek-magenta)'}}>.</span>
        </h2>
        <p style={{ fontSize: 16, color: 'var(--fg-muted)', maxWidth: 580, lineHeight: 1.55 }}>
          Frameworks, plantillas y scripts curados por nuestro equipo de GRC y Red Team.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {RESOURCES.map(r => (
          <a key={r.title} href={r.href || '#'}
            style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
            <GlassCard radius={24} style={{ padding: 32, position: 'relative', overflow: 'hidden', height: '100%' }}>
              <div style={{
                width: 48, height: 48, borderRadius: 14,
                background: `${r.color}22`, border: `1px solid ${r.color}55`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: r.color, marginBottom: 24,
              }}><Icon name={r.icon} size={20}/></div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.10em',
                textTransform: 'uppercase', color: r.color, marginBottom: 10,
              }}>{r.type}</div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--fg)',
                marginBottom: 12, letterSpacing: '-0.015em', lineHeight: 1.25,
              }}>{r.title}</h3>
              <p style={{ color: 'var(--fg-muted)', fontSize: 14, lineHeight: 1.55, marginBottom: 24 }}>{r.desc}</p>
              <span style={{
                background: 'transparent', border: 0,
                color: 'var(--fg)', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
                display: 'flex', alignItems: 'center', gap: 8, padding: 0,
              }}>
                {r.cta} <Icon name="arrow-right" size={14}/>
              </span>
            </GlassCard>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const BlogNewsletter = () => {
  const [email, setEmail] = useStateBR('');
  const [sent, setSent] = useStateBR(false);
  const [sending, setSending] = useStateBR(false);
  const [errMsg, setErrMsg] = useStateBR('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSending(true); setErrMsg('');
    try {
      const { ok, data } = await window.brotekFetch('/api/newsletter.php', {
        body: { email, source: 'blog', website: '' },
      });
      if (!ok) {
        setErrMsg((data && data.message) || 'No pudimos suscribirte. Probá de nuevo.');
        setSending(false); return;
      }
      setSent(true); setSending(false);
      setTimeout(() => { setSent(false); setEmail(''); }, 4000);
    } catch (_) {
      setErrMsg('Error de red. Intentá de nuevo en unos minutos.');
      setSending(false);
    }
  };

  return (
    <section id="newsletter" data-screen-label="04 Newsletter" style={{ padding: '40px 5vw 120px', position: 'relative' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', position: 'relative', overflow: 'hidden',
        borderRadius: 48, padding: '72px 64px',
        background: 'radial-gradient(circle at 80% 20%, rgba(163,53,231,.40) 0%, rgba(53,81,231,.20) 30%, transparent 60%), radial-gradient(circle at 10% 90%, rgba(236,0,140,.30) 0%, transparent 50%), #1A1A1A',
        border: '1px solid rgba(255,255,255,.10)',
      }}>
        <div style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow color="#C480F2">Newsletter mensual</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 'clamp(28px, 3.6vw, 48px)', lineHeight: 1.05,
              letterSpacing: '-0.025em', color: 'var(--fg)', margin: '18px 0 18px',
            }}>
              Una vez al mes.<br/>Cero spam<span style={{color:'var(--brotek-magenta)'}}>.</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 28, maxWidth: 480 }}>
              Resumen curado de las CVEs que importan, lecciones de los pentests que cerramos
              y novedades de ISO 27001 / SOC 2 que afectan a tu auditoría.
            </p>

            <form onSubmit={submit} style={{ display: 'flex', gap: 10, maxWidth: 460, flexWrap: 'wrap' }}>
              <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="tu@empresa.com"
                style={{
                  flex: 1, minWidth: 220,
                  background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.14)',
                  borderRadius: 999, padding: '14px 22px', color: 'var(--fg)',
                  fontFamily: 'var(--font-body)', fontSize: 14, outline: 'none',
                }}/>
              <Btn variant="primary" size="lg" icon={sent ? 'check' : 'arrow-up-right'} onClick={submit}>
                {sent ? '¡Gracias por suscribirte!' : sending ? 'Enviando…' : 'Suscribirme'}
              </Btn>
            </form>
            {errMsg && (
              <p style={{ marginTop: 12, fontSize: 13, color: '#FF6B6B', maxWidth: 460 }}>{errMsg}</p>
            )}

            <div style={{ marginTop: 24, display: 'flex', gap: 24, flexWrap: 'wrap', fontSize: 12, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)', letterSpacing: '.06em', textTransform: 'uppercase' }}>
              <span>· 2.4K suscriptores</span>
              <span>· 1 email/mes</span>
              <span>· Unsubscribe en 1 click</span>
            </div>
          </div>

          {/* Decorative stickers */}
          <div style={{ position: 'relative', height: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ position: 'absolute', top: 30, left: 20 }}>
              <Sticker color="#A335E7" label="Newsletter" sublabel="MONTHLY·26" rotate={-8} size={130}/>
            </div>
            <div style={{ position: 'absolute', bottom: 20, right: 20 }}>
              <Sticker color="#EC008C" label="Insights" sublabel="WEEKLY·CVE" rotate={10} size={120}/>
            </div>
            <div style={{
              width: 200, height: 200, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(163,53,231,.5), transparent 70%)',
              filter: 'blur(40px)',
            }}/>
          </div>
        </div>
      </div>
    </section>
  );
};

window.BlogResources = BlogResources;
window.BlogNewsletter = BlogNewsletter;