// hero.jsx — 3 hero variants

function HeroCinematic() {
  return (
    <section className="hero">
      <AttackMap />
      <div className="hero-inner">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <span className="pill live"><span className="dot pulse" />Monitoreo activo · 24/7</span>
        </div>
        <h1 className="display h1 glow-text" style={{ textAlign: 'center', maxWidth: 1100, margin: '0 auto' }}>
          Tu WordPress<br/>
          <span style={{ color: 'var(--primary)' }}>no es un proyecto</span><br/>
          terminado.
        </h1>
        <p className="lead" style={{ margin: '36px auto 0', textAlign: 'center', fontSize: 19 }}>
          Es un sistema vivo. Cada día sin mantenimiento es una puerta abierta. WP Guardian se ocupa de la continuidad, seguridad y actualización de tu sitio — para que tú no tengas que hacerlo.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 44, flexWrap: 'wrap' }}>
          <a href="#contacto" className="btn btn-primary btn-lg">Diagnóstico gratuito <ArrowIcon /></a>
          <a href="#planes" className="btn btn-ghost btn-lg">Ver planes</a>
        </div>

        <div style={{ marginTop: 80, position: 'relative' }}>
          <div className="grid-4" style={{ gap: 18 }}>
            <HeroStat label="Sitios WordPress en el mundo" value="43%" sub="del total de la web" />
            <HeroStat label="Vulnerabilidades en plugins/themes" value="11,334" sub="reportadas en 2025" danger />
            <HeroStat label="Sitios infectados que son WordPress" value="96%" sub="según Sucuri" danger />
            <HeroStat label="Ataques bloqueados al año" value="trillones" sub="reporta Wordfence" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroStat({ label, value, sub, danger }) {
  return (
    <div style={{
      padding: '20px 22px',
      border: '1px solid var(--border)',
      borderRadius: 'var(--r-md)',
      background: 'rgba(15,29,51,0.5)',
      backdropFilter: 'blur(8px)'
    }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 10 }}>
        {label}
      </div>
      <div className="display" style={{ fontSize: 38, color: danger ? 'var(--danger)' : 'var(--text)', textShadow: danger ? '0 0 24px rgba(255,77,77,0.25)' : '0 0 24px rgba(30,156,255,0.25)' }}>
        {value}
      </div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 6 }}>{sub}</div>
    </div>
  );
}

function HeroConsole() {
  return (
    <section className="hero">
      <div className="hero-inner hero-split" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span className="eyebrow">Sistema activo · 24/7/365</span>
          <h1 className="display h1" style={{ marginTop: 22 }}>
            Mientras lees esto,<br/>
            <span style={{ color: 'var(--primary)' }}>tu web está</span><br/>
            siendo escaneada.
          </h1>
          <p className="lead" style={{ marginTop: 26 }}>
            Los ataques a WordPress son automáticos, masivos y constantes. No buscan tu empresa — buscan sitios vulnerables. Y los encuentran.
          </p>
          <p className="lead" style={{ marginTop: 14, color: 'var(--text)' }}>
            WP Guardian mantiene tu sitio operativo, protegido y al día, sin que tengas que ocuparte del proceso.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="#contacto" className="btn btn-primary btn-lg">Diagnóstico gratuito <ArrowIcon /></a>
            <a href="#planes" className="btn btn-ghost btn-lg">Ver planes</a>
          </div>
          <div style={{ display: 'flex', gap: 28, marginTop: 40, flexWrap: 'wrap' }}>
            <MiniStat label="Vulns 2025" value="11,334" />
            <MiniStat label="Aumento vs 2024" value="+42%" />
            <MiniStat label="En plugins" value="~95%" />
          </div>
        </div>
        <div>
          <ThreatTerminal height={400} />
        </div>
      </div>
    </section>
  );
}

function MiniStat({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-dim)', marginBottom: 6 }}>{label}</div>
      <div className="display" style={{ fontSize: 32 }}>{value}</div>
    </div>
  );
}

function HeroBigNumber() {
  return (
    <section className="hero" style={{ paddingBottom: 60 }}>
      <AttackMap />
      <div className="hero-inner">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, textAlign: 'center' }}>
          <span className="eyebrow center" style={{ justifyContent: 'center', marginBottom: 28 }}>
            <span className="mono">REPORTE PATCHSTACK · 2025</span>
          </span>
          <div className="stat-mega danger" style={{ textAlign: 'center' }}>
            <CountUp to={11334} duration={2400} />
          </div>
          <div className="display" style={{ fontSize: 28, marginTop: 16, color: 'var(--text-muted)' }}>
            nuevas vulnerabilidades en WordPress
          </div>
          <div className="mono" style={{ marginTop: 12, fontSize: 13, color: 'var(--text-dim)', letterSpacing: '0.06em' }}>
            +42% YoY · 4,124 requerían mitigación inmediata · 17% severidad alta
          </div>
        </div>

        <h1 className="display h2" style={{ textAlign: 'center', maxWidth: 1000, margin: '64px auto 0' }}>
          Tu sitio no necesita más features.<br/>
          <span style={{ color: 'var(--primary)' }}>Necesita continuidad.</span>
        </h1>
        <p className="lead" style={{ margin: '24px auto 0', textAlign: 'center' }}>
          WP Guardian es el sistema de mantenimiento, seguridad y actualización para WordPress que mantiene tu web operativa, protegida y al día — sin que tú tengas que tocarla.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#contacto" className="btn btn-primary btn-lg">Diagnóstico gratuito <ArrowIcon /></a>
          <a href="#planes" className="btn btn-ghost btn-lg">Ver planes</a>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === 'console') return <HeroConsole />;
  if (variant === 'bignumber') return <HeroBigNumber />;
  return <HeroCinematic />;
}

Object.assign(window, { Hero });