/* ============================================================
   APIQO — Hero (dark)
   ============================================================ */

const Hero = ({ t, lang, setLang }) => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(x => x + 1), 1500);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true">
        <div className="orb orb-magenta" />
        <div className="orb orb-cyan" />
        <div className="orb orb-blue" />
        <div className="hero-grid" />
        <div className="hero-vignette" />
      </div>

      <Nav t={t} lang={lang} setLang={setLang} />

      <div className="container hero-inner">
        <div className="hero-left">
          <div className="pill pill-dark">
            <span className="dot" style={{ background: 'var(--brand-cyan)' }} />
            {t.hero.pill}
          </div>

          <h1 className="display hero-h1">
            <span>{t.hero.h1a}</span>
            <span className="hero-h1-grad"> {t.hero.h1b}</span><br/>
            <span>{t.hero.h1c}</span>
          </h1>

          <p className="hero-sub">{t.hero.sub}</p>

          <div className="hero-ctas">
            <button className="btn btn-dark"
              onClick={() => {
                document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
                window.trackEvent('Lead', { content_name: 'agenda_diagnostico_hero' });
              }}>
              {t.hero.ctaPrimary}
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <button className="btn btn-dark-ghost"
              onClick={() => {
                document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' });
                window.trackEvent('ViewContent', { content_name: 'ver_agentes_hero' });
              }}>
              <span style={{ width: 8, height: 8, borderRadius: 50, background: 'var(--brand-magenta)', display: 'inline-block', boxShadow: '0 0 12px var(--brand-magenta)' }} />
              {t.hero.ctaSecondary}
            </button>
          </div>

          <div className="hero-stats">
            {t.hero.stats.map((s, i) => (
              <div className="hero-stat" key={i}>
                <div className="hero-stat-k display">{s.k}</div>
                <div className="hero-stat-v">{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-right">
          <HeroAgentMonitor tick={tick} t={t} />
        </div>
      </div>

      <div className="hero-kicker container">
        <span className="eyebrow" style={{ color: 'var(--dark-ink-3)' }}>{t.hero.kicker}</span>
        <div className="logo-strip">
          {['Claude', 'n8n', 'Make', 'monday', 'MCP', 'Gemini', 'GPT'].map(n => (
            <div className="logo-chip" key={n}>{n}</div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Nav = ({ t, lang, setLang }) => (
  <nav className="nav">
    <div className="container nav-inner">
      <a href="#top" className="nav-brand">
        <ApiqoMark size={26} dark />
        <span className="display nav-wordmark">APIQO</span>
      </a>
      <div className="nav-links">
        <a href="#agents">{t.nav.agents}</a>
        <a href="#stack">{t.nav.stack}</a>
        <a href="#process">{t.nav.process}</a>
        <a href="#roi">{t.nav.roi}</a>
        <a href="#contact">{t.nav.contact}</a>
      </div>
      <div className="nav-right">
        <div className="lang-toggle">
          <button className={lang==='es'?'on':''} onClick={() => setLang('es')}>ES</button>
          <span>·</span>
          <button className={lang==='en'?'on':''} onClick={() => setLang('en')}>EN</button>
        </div>
        <a href="#contact" className="btn btn-dark" style={{ padding: '8px 14px', fontSize: 13 }}
          onClick={() => window.trackEvent('Contact', { content_name: 'hablar_humano_navbar' })}>{t.nav.cta}</a>
      </div>
    </div>
  </nav>
);

/* Apiqo mark — original abstract: three orbs + capsule, evoking the brand's "molecule + chip" idea */
const ApiqoMark = ({ size = 32, dark = false }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
    <defs>
      <linearGradient id="amg" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#CD3266" />
        <stop offset="55%" stopColor="#54AFBC" />
        <stop offset="100%" stopColor="#0439D9" />
      </linearGradient>
    </defs>
    <circle cx="10" cy="34" r="4" fill="#CD3266" />
    <circle cx="22" cy="34" r="6" fill="url(#amg)" />
    <rect x="32" y="12" width="14" height="34" rx="7" transform="rotate(20 39 29)" fill="url(#amg)" />
  </svg>
);

/* Live agent monitor — terminal-style trace */
const HeroAgentMonitor = ({ tick, t }) => {
  const lines = [
    { c: 'mute', s: '$ apiqo run --agent=cobranza --since=09:00' },
    { c: 'ok',   s: '✓ MCP · monday.read_board("Cuentas por cobrar")' },
    { c: 'ok',   s: '✓ tool · whatsapp.draft({ contact: "Mariana R." })' },
    { c: 'note', s: '   model · claude-sonnet-4 · 312 tk · 0.41s' },
    { c: 'ok',   s: '✓ tool · monday.update_card({ status: "Contactado" })' },
    { c: 'warn', s: '! escalate · saldo > USD 5,000 · pidiendo aprobación humana' },
    { c: 'ok',   s: '✓ slack.notify("@laura", "Aprobar nota crédito #4193")' },
    { c: 'mute', s: '— turno 09:00–10:00 · 14 cuentas procesadas · 2 escaladas' },
  ];
  const visible = Math.min(lines.length, 2 + (tick % (lines.length + 2)));

  return (
    <div className="monitor">
      <div className="monitor-head">
        <div className="monitor-dots">
          <span /><span /><span />
        </div>
        <div className="monitor-title mono">agent · cobranza-01 · live</div>
        <div className="monitor-status">
          <span className="dot" style={{ background: '#3DD68C', boxShadow: '0 0 8px #3DD68C' }} />
          <span className="mono">running</span>
        </div>
      </div>
      <div className="monitor-body mono">
        {lines.slice(0, visible).map((l, i) => (
          <div className={`mline mline-${l.c}`} key={i}>{l.s}</div>
        ))}
        <div className="mline mline-cursor"><span className="cursor">▍</span></div>
      </div>
      <div className="monitor-foot mono">
        <div><span className="dot" style={{ background: 'var(--brand-cyan)' }} /> tools 6</div>
        <div><span className="dot" style={{ background: 'var(--brand-magenta)' }} /> tokens 1,842</div>
        <div><span className="dot" style={{ background: 'var(--brand-blue)' }} /> latency 0.6s</div>
        <div className="ml-auto">$ 0.012 / run</div>
      </div>
    </div>
  );
};

window.Hero = Hero;
window.ApiqoMark = ApiqoMark;