/* global React, Light, Btn, Eyebrow, Sticker */
const { useState, useEffect } = React;

const ROTATING_WORDS = [
{ word: 'Ethical Hacking', color: '#EC4D2A' },
{ word: 'Offensive Security', color: '#EC008C' },
{ word: 'Defensive Team', color: '#3551E7' },
{ word: 'DevSecOps', color: '#A335E7' },
{ word: 'Prevención de Riesgos', color: '#FB881D' },
{ word: 'GRC', color: '#35E7C7' }];


const Hero = ({ heroVariant = 'rotating-words', showStickers = true, ctaCopy = 'Agendar diagnóstico de ciberseguridad' } = {}) => {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (heroVariant !== 'rotating-words') return;
    const t = setInterval(() => setIdx((i) => (i + 1) % ROTATING_WORDS.length), 2400);
    return () => clearInterval(t);
  }, [heroVariant]);

  const current = ROTATING_WORDS[idx];
  const isRotating = heroVariant === 'rotating-words';

  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      position: 'relative', overflow: 'hidden',
      minHeight: '100vh', padding: '160px 5vw 80px',
      display: 'flex', alignItems: 'center'
    }}>
      {/* Lights */}
      <Light color="#EC008C" size={1100} top="-200px" right="-200px" opacity={0.55} blur={60} />
      <Light color="#A335E7" size={700} bottom="-200px" left="10%" opacity={0.35} blur={80} />
      <Light color="#3551E7" size={500} top="40%" left="-150px" opacity={0.20} blur={100} />

      {/* Concentric ring decoration */}
      <div aria-hidden style={{
        position: 'absolute', right: '-200px', top: '50%', transform: 'translateY(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        border: '1px solid rgba(255,255,255,.06)', zIndex: 1
      }}>
        <div style={{ position: 'absolute', inset: 80, borderRadius: '50%', border: '1px solid rgba(255,255,255,.05)' }}>
          <div style={{ position: 'absolute', inset: 80, borderRadius: '50%', border: '1px solid rgba(255,255,255,.04)' }} />
        </div>
      </div>

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto', width: '100%',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', alignItems: 'center', gap: 48 }}>
        <div>
          <Eyebrow>Ciberseguridad · Ethical Hacking · DevSecOps · GRC</Eyebrow>
          <h1 style={{
            marginTop: 24, marginBottom: 28,
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(40px, 5.6vw, 84px)', lineHeight: 1.02,
            letterSpacing: '-0.03em', color: 'var(--fg)'
          }}>
            {isRotating ?
            <><span style={{ color: 'var(--brotek-magenta)' }}>Brotek.</span>  Ciberseguridad y{' '}
                <span style={{
                color: current.color, transition: 'color .5s ease',
                textShadow: `0 0 40px ${current.color}88`
              }}>{current.word}</span>
                <br />para empresas en Argentina<span style={{ color: 'var(--brotek-magenta)' }}>.</span></> :

            <><span style={{ color: 'var(--brotek-magenta)' }}>Brotek</span> · Ethical Hacking, DevSecOps y <span style={{
                background: 'linear-gradient(120deg, var(--brotek-magenta), #A335E7)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
              }}>Prevención de Riesgos</span> en Argentina<span style={{ color: 'var(--brotek-magenta)' }}>.</span></>
            }
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 580, marginBottom: 36 }}>
            Somos una empresa argentina especializada en <strong style={{ color: 'var(--fg)' }}>Offensive Security, Defensive Team, DevSecOps, Threat Inteligence y GRC</strong>.
            Acompañamos a fintechs, bancos y SaaS en la prevención de riesgos y certificaciones ISO 27001, ISO 42001, SOC 1 y 2.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Btn variant="primary" size="lg" icon="arrow-up-right" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">{ctaCopy}</Btn>
            <Btn variant="ghost" size="lg" icon="arrow-right" onClick={() => {const t = document.querySelector('#solucion');if (t) window.scrollTo({ top: t.offsetTop - 70, behavior: 'smooth' });}}>Ver soluciones</Btn>
          </div>

          {/* Trust line */}
          <div style={{ marginTop: 56, display: 'flex', alignItems: 'center', gap: 16, opacity: .85 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em',
              textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>Certificamos para</span>
            <div style={{ display: 'flex', gap: 18 }}>
              {['ISO 27001', 'SOC 2', 'PCI DSS', 'NIST CSF'].map((c) =>
              <span key={c} style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 500,
                color: 'var(--fg)', padding: '5px 12px', borderRadius: 999,
                border: '1px solid rgba(255,255,255,.12)' }}>{c}</span>
              )}
            </div>
          </div>
        </div>

        {/* Right composition */}
        <div style={{ position: 'relative', height: 480, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {showStickers ?
          <>
              <div style={{ position: 'absolute', top: 30, left: 30 }}>
                <Sticker color="#EC4D2A" label="Red Team" sublabel="OFFENSIVE·01" rotate={-12} />
              </div>
              <div style={{ position: 'absolute', top: 80, right: 0 }}>
                <Sticker color="#3551E7" label="Blue Team" sublabel="DEFENSIVE·02" rotate={9} />
              </div>
              <div style={{ position: 'absolute', bottom: 100, left: 60 }}>
                <Sticker color="#35E747" label="Endpoint" sublabel="PROTECT·03" rotate={6} size={120} />
              </div>
              <div style={{ position: 'absolute', bottom: 30, right: 40 }}>
                <Sticker color="#A335E7" label="DevSecOps" sublabel="PIPELINE·04" rotate={-6} size={130} />
              </div>
              <div style={{
              width: 220, height: 220, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(236,0,140,.6), transparent 70%)',
              filter: 'blur(40px)'
            }} />
            </> :

          <div style={{
            width: 360, height: 360, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(236,0,140,.5), rgba(163,53,231,.2) 50%, transparent 75%)',
            filter: 'blur(30px)'
          }} />
          }
        </div>
      </div>
    </section>);

};

window.Hero = Hero;