/* KayaCore — hero with live "agent run" console visual */
function AgentConsole({ vertical }) {
  const v = vertical || { name: 'your team', icon: 'sparkles' };
  const rows = (vertical && vertical.console) || [
    { t: 'Reading new email — routing to the right place', s: 'done' },
    { t: 'Drafting the reply for review', s: 'done' },
    { t: 'Updating the project + next steps', s: 'run' },
    { t: 'Flagging 1 thing for a human', s: 'wait' },
  ];
  const dot = { done: 'var(--success)', run: 'var(--accent)', wait: 'var(--warning)' };
  const reduce = kcReducedMotion();

  // stream rows in one at a time; replay when the vertical changes
  const [shown, setShown] = React.useState(reduce ? rows.length : 0);
  React.useEffect(() => {
    if (reduce) { setShown(rows.length); return; }
    setShown(0);
    const timers = rows.map((_, i) => setTimeout(() => setShown(i + 1), 420 + i * 680));
    return () => timers.forEach(clearTimeout);
  }, [v.name]);

  return (
    <div style={{
      background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 130%)',
      border: '1px solid var(--border)', borderRadius: 18, padding: 18,
      boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: -1, left: 18, right: 18, height: 1, background: 'linear-gradient(90deg, transparent, var(--accent-border), transparent)' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <IconChip name={v.icon} size={34} active />
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--fg)' }}>Agent · {v.name}</div>
          <div className="kc-mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>working · live</div>
        </div>
        <span style={{ marginLeft: 'auto' }}><Badge tone="ok"><span className="kc-livedot" style={{ width: 6, height: 6, borderRadius: 9, background: 'currentColor', display: 'inline-block' }} />Live</Badge></span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: rows.length * 50 }}>
        {rows.map((r, i) => {
          const visible = i < shown;
          const isActive = visible && i === shown - 1 && r.s !== 'done';
          return (
            <div key={i} className={'kc-consolerow' + (isActive ? ' kc-runrow' : '')} style={{
              display: 'flex', alignItems: 'center', gap: 11, padding: '11px 13px',
              background: 'var(--bg)', border: '1px solid var(--border-soft)', borderRadius: 11,
              opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(8px)',
              transition: 'transform .4s var(--ease-out)',
            }}>
              <span className={isActive ? 'kc-rundot' : ''} style={{ width: 8, height: 8, borderRadius: 9, background: dot[r.s], flex: 'none' }} />
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: r.s === 'done' ? 'var(--fg-subtle)' : 'var(--fg)' }}>{r.t}</span>
              {r.s === 'done' && visible && <KcIcon name="check" size={15} style={{ marginLeft: 'auto', color: 'var(--success)' }} />}
              {isActive && (
                <span className="kc-typing" style={{ marginLeft: 'auto', display: 'inline-flex', gap: 3 }} aria-hidden="true">
                  <span style={{ width: 4, height: 4, borderRadius: 9, background: 'var(--accent)' }} />
                  <span style={{ width: 4, height: 4, borderRadius: 9, background: 'var(--accent)' }} />
                  <span style={{ width: 4, height: 4, borderRadius: 9, background: 'var(--accent)' }} />
                </span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Hero({ vertical, verticals, onPick }) {
  const { navigate, goSection } = useRouter();
  const general = {
    eyebrow: 'Custom AI agents · fully managed',
    headline: 'An AI employee that<br />actually works.',
    sub: 'You don’t build it, host it, or babysit it — we do. We design a custom agent around your business and run it end-to-end: live in under 48 hours, driving real outcomes — more revenue, more capacity, fewer things slipping through the cracks.',
  };
  const content = vertical
    ? { eyebrow: vertical.eyebrow, headline: vertical.headline, sub: vertical.sub }
    : general;
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="78% -8%" size="720px 420px" color="var(--glow-violet)" />
      <Bloom at="6% 120%" size="420px 300px" color="var(--glow-violet-soft)" />
      <NodeGrid fade="70% 10%" opacity={0.05} />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '64px 28px 72px', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }} className="kc-herogrid">
        <div className="kc-reveal">
          <span style={{ display: 'inline-flex' }}><Badge tone="accent"><KcIcon name="sparkles" size={13} />{content.eyebrow}</Badge></span>
          <h1 className="kc-display" style={{ marginTop: 18, marginBottom: 0 }} dangerouslySetInnerHTML={{ __html: content.headline }} />
          <p className="kc-lead" style={{ marginTop: 18, maxWidth: '46ch', fontSize: 19 }} dangerouslySetInnerHTML={{ __html: content.sub }} />
          <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrowRight" onClick={() => navigate('/contact')}>Book a demo</Button>
            <Button variant="secondary" size="lg" icon="play" onClick={() => goSection('solve')}>See it work</Button>
          </div>
          <div style={{ display: 'flex', gap: 22, marginTop: 30, flexWrap: 'wrap', alignItems: 'center' }}>
            {['First agent in under 48 hours', 'Built around your business', 'We own the outcome'].map((t, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)', letterSpacing: '0.02em' }}>
                <KcIcon name="check" size={14} style={{ color: 'var(--success)' }} />{t}
              </span>
            ))}
          </div>
        </div>
        <div className="kc-reveal" style={{ animationDelay: '120ms' }}>
          <AgentConsole vertical={vertical} />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero, AgentConsole });