// HERO — 3 variantes seleccionables vía Tweaks
// Datos compartidos
const WEBINAR = {
  fecha: new Date('2026-06-15T20:00:00-05:00'),
  fechaLabel: '15 · JUNIO · 2026',
  hora: '8:00 PM (MX)',
  titulo: 'EMPRENDE',
  tituloAcento: 'IMPERFECTO',
  subtitulo: 'Lanza tu negocio desde cero',
  promesa: 'Un entrenamiento gratuito para quienes han dudado demasiado tiempo en empezar.',
  duracion: '3 días · en vivo',
};

// Countdown hook
function useCountdown(target) {
  const [now, setNow] = React.useState(() => Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);
  const seconds = Math.floor((diff % 60000) / 1000);
  return { days, hours, minutes, seconds };
}

function Countdown({ compact = false }) {
  const c = useCountdown(WEBINAR.fecha);
  const items = [
    { v: c.days, l: 'Días' },
    { v: c.hours, l: 'Horas' },
    { v: c.minutes, l: 'Min' },
    { v: c.seconds, l: 'Seg' },
  ];
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: compact ? 8 : 14,
      maxWidth: compact ? 420 : 520,
    }}>
      {items.map((it, i) => (
        <div key={i} style={{
          position: 'relative',
          padding: compact ? '14px 8px' : '20px 12px',
          background: 'rgba(15, 8, 32, 0.7)',
          border: '1px solid rgba(168, 85, 247, 0.25)',
          borderRadius: 12,
          textAlign: 'center',
          backdropFilter: 'blur(8px)',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: compact ? 30 : 44,
            fontWeight: 600,
            lineHeight: 1,
            background: 'linear-gradient(180deg, #f5f3ff 0%, #ec4899 130%)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
            fontVariantNumeric: 'tabular-nums',
          }}>
            {String(it.v).padStart(2, '0')}
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', marginTop: 6, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            {it.l}
          </div>
        </div>
      ))}
    </div>
  );
}

// =============== NAV (compartida) ===============
function TopNav() {
  return (
    <div className="container" style={{ paddingTop: 28, paddingBottom: 12, position: 'relative', zIndex: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'linear-gradient(135deg, #ec4899, #a855f7)',
            display: 'grid', placeItems: 'center',
            boxShadow: '0 0 30px rgba(236, 72, 153, 0.4)',
          }}>
            <span className="mono" style={{ fontWeight: 700, fontSize: 16, color: 'white' }}>DB</span>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>DANTE.J.BAEZ</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>Emprende Imperfecto</div>
          </div>
        </div>
        <div className="mono" style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--ink-dim)' }}>
          <span className="pulse-dot"></span>
          <span style={{ letterSpacing: '0.18em' }}>EN VIVO · {WEBINAR.fechaLabel}</span>
        </div>
      </div>
    </div>
  );
}

// =============== HERO 01 — Terminal / Code ===============
function HeroTerminal() {
  return (
    <section style={{ position: 'relative', padding: '40px 0 100px' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 56, alignItems: 'center' }}>
          {/* Left: copy */}
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,1fr)', gap: 48, alignItems: 'center' }} className="hero-grid">
            <div>
              <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 14px', border: '1px solid var(--line)', borderRadius: 999, fontSize: 11, color: 'var(--ink-dim)', letterSpacing: '0.18em' }}>
                <span style={{ color: 'var(--magenta)' }}>●</span> WEBINAR GRATUITO · 3 DÍAS
              </div>

              <h1 style={{
                fontSize: 'clamp(54px, 8.5vw, 124px)',
                fontWeight: 700,
                marginTop: 28,
                letterSpacing: '-0.04em',
                lineHeight: 0.92,
              }}>
                <span style={{ color: 'var(--ink)' }}>EMPRENDE</span><br/>
                <span className="grad-text" style={{ fontStyle: 'italic', fontWeight: 600 }}>IMPERFECTO</span>
                <span className="cursor" style={{ height: '0.9em', verticalAlign: '-0.08em' }}></span>
              </h1>

              <p style={{ marginTop: 28, fontSize: 19, lineHeight: 1.5, color: 'var(--ink-dim)', maxWidth: 540 }}>
                Para los que han dudado demasiado tiempo en lanzar su primer proyecto. <span style={{ color: 'var(--ink)' }}>3 días en vivo</span> para dejar de planearlo y empezar a hacerlo.
              </p>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36 }}>
                <a href="#registro" className="btn-primary">
                  Aparta mi lugar gratis
                  <span style={{ fontSize: 18 }}>→</span>
                </a>
                <a href="#programa" className="btn-ghost">
                  Ver el programa
                </a>
              </div>

              <div style={{ marginTop: 44 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em', marginBottom: 14 }}>
                  // EMPIEZA EN
                </div>
                <Countdown />
              </div>
            </div>

            {/* Right: terminal panel */}
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'relative',
                background: 'linear-gradient(180deg, rgba(20, 10, 38, 0.85), rgba(8, 4, 15, 0.85))',
                border: '1px solid var(--line)',
                borderRadius: 18,
                padding: 24,
                backdropFilter: 'blur(12px)',
                boxShadow: '0 40px 100px -20px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255,255,255,0.04)',
              }}>
                <span className="corner tl"></span>
                <span className="corner tr"></span>
                <span className="corner bl"></span>
                <span className="corner br"></span>

                <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-mute)', borderBottom: '1px solid var(--line)', paddingBottom: 12, marginBottom: 18, letterSpacing: '0.1em' }}>
                  <span>~/dante/proyecto_01.sh</span>
                  <span style={{ color: 'var(--magenta)' }}>● REC</span>
                </div>

                <TerminalLog />

                <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <Metric label="Asistentes" value="2,767" trend="+312" />
                  <Metric label="Países" value="14" trend="LATAM" />
                </div>
              </div>

              {/* Floating tag */}
              <div style={{
                position: 'absolute', top: -18, right: -18,
                background: 'var(--bg-elev)',
                border: '1px solid var(--line-strong)',
                borderRadius: 10,
                padding: '10px 14px',
                animation: 'float-slow 6s ease-in-out infinite',
                boxShadow: '0 10px 30px rgba(236, 72, 153, 0.2)',
              }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>COSTO</div>
                <div style={{ fontSize: 22, fontWeight: 700, marginTop: 2 }}><span className="grad-text">$0</span></div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function TerminalLog() {
  const lines = [
    { p: '$', t: 'iniciar entrenamiento', c: 'var(--magenta)' },
    { p: '>', t: 'cargando módulo[1] :: claridad', c: 'var(--ink-dim)' },
    { p: '>', t: 'cargando módulo[2] :: validación', c: 'var(--ink-dim)' },
    { p: '>', t: 'cargando módulo[3] :: lanzamiento', c: 'var(--ink-dim)' },
    { p: '✓', t: 'sistema listo · tú decides cuándo empezar', c: 'var(--violet)' },
  ];
  return (
    <div className="mono" style={{ fontSize: 13, lineHeight: 1.8 }}>
      {lines.map((l, i) => (
        <div key={i} style={{ display: 'flex', gap: 12 }}>
          <span style={{ color: l.c, minWidth: 14 }}>{l.p}</span>
          <span style={{ color: l.c === 'var(--ink-dim)' ? 'var(--ink-dim)' : 'var(--ink)' }}>{l.t}</span>
        </div>
      ))}
      <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
        <span style={{ color: 'var(--magenta)', minWidth: 14 }}>$</span>
        <span className="cursor" style={{ height: '1.1em' }}></span>
      </div>
    </div>
  );
}

function Metric({ label, value, trend }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
        <span style={{ fontSize: 24, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>{value}</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--magenta)' }}>{trend}</span>
      </div>
    </div>
  );
}

// =============== HERO 02 — Holograma central / Editorial ===============
function HeroHologram() {
  return (
    <section style={{ position: 'relative', padding: '60px 0 100px' }}>
      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>

        <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 14px', border: '1px solid var(--line)', borderRadius: 999, fontSize: 11, color: 'var(--ink-dim)', letterSpacing: '0.18em' }}>
          <span style={{ color: 'var(--magenta)' }}>●</span> WEBINAR GRATUITO · {WEBINAR.fechaLabel}
        </div>

        <h1 style={{
          fontSize: 'clamp(70px, 13vw, 200px)',
          fontWeight: 700,
          marginTop: 32,
          letterSpacing: '-0.05em',
          lineHeight: 0.86,
        }}>
          <span style={{ display: 'block', color: 'var(--ink)' }}>EMPRENDE</span>
          <span style={{
            display: 'block',
            fontStyle: 'italic',
            fontWeight: 500,
            background: 'linear-gradient(180deg, #ec4899 0%, #a855f7 50%, transparent 100%)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
          }}>IMPERFECTO</span>
        </h1>

        {/* Holographic orb */}
        <div style={{ position: 'relative', height: 0, marginTop: -40 }}>
          <div style={{
            position: 'absolute', left: '50%', top: -120, transform: 'translateX(-50%)',
            width: 280, height: 280, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(236, 72, 153, 0.45), rgba(168, 85, 247, 0.25) 40%, transparent 70%)',
            filter: 'blur(40px)', zIndex: -1,
          }}></div>
        </div>

        <p style={{ marginTop: 36, fontSize: 20, lineHeight: 1.5, color: 'var(--ink-dim)', maxWidth: 640, margin: '36px auto 0', textWrap: 'pretty' }}>
          Un entrenamiento de <span style={{ color: 'var(--ink)' }}>3 días en vivo</span> para los que han dudado demasiado tiempo en lanzar su primer proyecto. <span className="grad-text" style={{ fontWeight: 600 }}>Empezar imperfecto vence al esperar a estar listo.</span>
        </p>

        <div style={{ marginTop: 40 }}>
          <Countdown />
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36, justifyContent: 'center' }}>
          <a href="#registro" className="btn-primary">
            Aparta mi lugar gratis
            <span style={{ fontSize: 18 }}>→</span>
          </a>
          <a href="#programa" className="btn-ghost">Ver el programa</a>
        </div>

        {/* Bottom coord strip */}
        <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 720, margin: '70px auto 0', fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em', borderTop: '1px solid var(--line)', paddingTop: 18 }}>
          <span>LAT 19.4326° N</span>
          <span style={{ color: 'var(--magenta)' }}>// BROADCAST :: ES_MX</span>
          <span>LON 99.1332° W</span>
        </div>

      </div>
    </section>
  );
}

// =============== HERO 03 — Split bio / portrait ===============
function HeroSplit() {
  return (
    <section style={{ position: 'relative', padding: '40px 0 80px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,0.85fr)', gap: 56, alignItems: 'stretch' }} className="hero-grid">

          <div>
            <div className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 14px', border: '1px solid var(--line)', borderRadius: 999, fontSize: 11, color: 'var(--ink-dim)', letterSpacing: '0.18em' }}>
              <span style={{ color: 'var(--magenta)' }}>●</span> CON DANTE J. BÁEZ
            </div>

            <h1 style={{
              fontSize: 'clamp(56px, 9vw, 130px)',
              fontWeight: 700,
              marginTop: 28,
              letterSpacing: '-0.04em',
              lineHeight: 0.9,
            }}>
              <span>Si tu sueño</span><br/>
              <span className="grad-text" style={{ fontStyle: 'italic' }}>te lleva esperando</span><br/>
              <span>demasiado…</span>
            </h1>

            <p style={{ marginTop: 28, fontSize: 19, lineHeight: 1.55, color: 'var(--ink-dim)', maxWidth: 560 }}>
              <span className="mono" style={{ color: 'var(--magenta)', fontSize: 14 }}>// </span>
              Yo pasé 5 años encerrado pensando que iba a morir ahí. Empecé desde menos cero. Si pude yo, puedes tú. En 3 días te enseño cómo lanzar tu primer proyecto sin estar listo.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36 }}>
              <a href="#registro" className="btn-primary">
                Reservar mi lugar
                <span style={{ fontSize: 18 }}>→</span>
              </a>
              <a href="#bio" className="btn-ghost">Conoce mi historia</a>
            </div>

            <div style={{ marginTop: 44 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em', marginBottom: 14 }}>
                // FALTAN
              </div>
              <Countdown />
            </div>
          </div>

          {/* Portrait placeholder w/ hologram framing */}
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'relative',
              borderRadius: 18,
              overflow: 'hidden',
              minHeight: 520,
              height: '100%',
              border: '1px solid var(--line)',
              background: `
                repeating-linear-gradient(45deg, rgba(168, 85, 247, 0.06) 0 2px, transparent 2px 16px),
                linear-gradient(180deg, rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.18) 50%, rgba(8, 4, 15, 0.6))
              `,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              padding: 24,
            }}>
              <span className="corner tl"></span>
              <span className="corner tr"></span>
              <span className="corner bl"></span>
              <span className="corner br"></span>

              <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink)', letterSpacing: '0.18em' }}>
                <span>ID :: DJB-2026</span>
                <span style={{ color: 'var(--magenta)' }}>● LIVE</span>
              </div>

              <div style={{ textAlign: 'center', flex: 1, display: 'grid', placeItems: 'center' }}>
                <div style={{
                  width: 220, height: 220, borderRadius: '50%',
                  background: 'radial-gradient(circle, rgba(20,10,38,0.6), transparent 70%)',
                  border: '1px dashed var(--line-strong)',
                  display: 'grid', placeItems: 'center',
                }}>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--ink-dim)', textAlign: 'center', letterSpacing: '0.1em' }}>
                    [ retrato ]<br/>
                    <span style={{ color: 'var(--ink-mute)', fontSize: 10 }}>arrastra tu foto aquí</span>
                  </div>
                </div>
              </div>

              <div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>// PONENTE</div>
                <div style={{ fontSize: 28, fontWeight: 700, marginTop: 6, letterSpacing: '-0.02em' }}>Dante J. Báez</div>
                <div style={{ fontSize: 13, color: 'var(--ink-dim)', marginTop: 4 }}>Emprendedor · de la cárcel al negocio</div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { TopNav, HeroTerminal, HeroHologram, HeroSplit, Countdown, WEBINAR });