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

const BlogHero = () => {
  const [q, setQ] = useStateBH('');
  return (
    <section id="blog-hero" data-screen-label="01 Blog Hero" style={{
      position: 'relative', overflow: 'hidden',
      padding: '180px 5vw 80px',
    }}>
      <Light color="#EC008C" size={900} top="-200px" right="-100px" opacity={0.45} blur={70}/>
      <Light color="#A335E7" size={700} top="20%" left="-150px" opacity={0.25} blur={90}/>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto' }}>
        <Eyebrow>Recursos · Insights · Investigación</Eyebrow>
        <h1 style={{
          marginTop: 20, marginBottom: 24,
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(40px, 5.6vw, 84px)', lineHeight: 1.02,
          letterSpacing: '-0.03em', color: 'var(--fg)', maxWidth: 1100,
        }}>
          Lo que aprendemos hackeando<br/>también te sirve a vos<span style={{ color: 'var(--brotek-magenta)' }}>.</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 640, marginBottom: 36 }}>
          Guías de implementación de ISO 27001 y SOC 2, write-ups de pentesting, análisis
          de vulnerabilidades y todo lo que un CISO necesita saber antes de la próxima auditoría.
        </p>

        {/* Search bar */}
        <div style={{ maxWidth: 560, position: 'relative' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.10)',
            borderRadius: 999, padding: '14px 22px',
            backdropFilter: 'blur(12px)',
          }}>
            <Icon name="search" size={18} color="var(--fg-subtle)"/>
            <input
              type="text"
              value={q}
              onChange={(e) => {
                setQ(e.target.value);
                window.dispatchEvent(new CustomEvent('brotek-search', { detail: e.target.value }));
              }}
              placeholder="Buscar artículos, guías, frameworks…"
              style={{
                flex: 1, background: 'transparent', border: 0, outline: 'none',
                color: 'var(--fg)', fontFamily: 'var(--font-body)', fontSize: 15,
              }}
            />
            {q && (
              <button onClick={() => { setQ(''); window.dispatchEvent(new CustomEvent('brotek-search', { detail: '' })); }}
                style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--fg-subtle)', display: 'flex' }}>
                <Icon name="x" size={16}/>
              </button>
            )}
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.10em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>Trending</span>
            {['ISO 27001', 'SOC 2 Type II', 'Pentest API', 'DevSecOps'].map(t => (
              <button key={t} onClick={() => { setQ(t); window.dispatchEvent(new CustomEvent('brotek-search', { detail: t })); }}
                style={{
                  background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)',
                  borderRadius: 999, padding: '4px 12px', cursor: 'pointer',
                  color: 'var(--fg-muted)', fontSize: 12, fontFamily: 'var(--font-mono)',
                  letterSpacing: '.04em', transition: 'all .15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(236,0,140,.5)'; e.currentTarget.style.color = 'var(--fg)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,.08)'; e.currentTarget.style.color = 'var(--fg-muted)'; }}>
                {t}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.BlogHero = BlogHero;