const HERO = {
  studio: {
    pill: 'Open-source engine · self-hosted · MIT',
    eyebrow: 'AUTOARCHITECT STUDIO · :18802 · MIT',
    title: <>Describe it.<br/><Italic style={{ color: 'var(--accent-2)' }}>Watch it build</Italic>.</>,
    sub1: 'A real backend, cross-app workflows and an AI agent team — built, verified and deployed, not a prototype. Any domain, no templates.',
    sub2: '',
    trust: [
      { icon: 'server', text: 'Self-hosted' },
      { icon: 'branch', text: 'MIT License' },
      { icon: 'cpu', text: 'BYO LLM' },
      { icon: 'shield', text: 'Runs in your infra' },
    ],
  },
  business: {
    pill: 'Autonomous Business OS',
    eyebrow: 'AUTOARCHITECT BUSINESS · :18804',
    // Deliberately rhymes with Studio's "Describe it. Watch it build." — same
    // engine, one level up. "Run" is the differentiator: everyone else stops at
    // build. One promise, stated once; the sections below each advance it
    // rather than restating it.
    title: <>Describe a business.<br/><Italic style={{ color: 'var(--accent-2)' }}>Watch it run</Italic>.</>,
    sub1: 'One prompt founds the whole company — the apps, the AI team that operates them, the cross-app workflows and the customer-facing roles. Then the team runs it, and brings you the calls worth making.',
    sub2: '',
    trust: [
      { icon: 'sparkle', text: 'An AI team, not one bot' },
      { icon: 'cpu', text: 'Real apps + user roles' },
      { icon: 'shield', text: 'You approve the big calls' },
      { icon: 'branch', text: 'Open-core engine' },
    ],
  },
};

const Hero = ({ mode = 'studio', variant = 'orchestration' }) => {
  const h = HERO[mode] || HERO.studio;
  return (
    <section style={{
      position: 'relative',
      paddingTop: 56,
      paddingBottom: 40,
      overflow: 'hidden',
    }}>
      {/* Background: blueprint grid + radial accent glow */}
      <HeroBackdrop />

      <Container wide style={{ position: 'relative', zIndex: 2 }}>
        {/* Open-source top bar */}
        <div className="hero-pill-bar" style={{
          display: 'flex', justifyContent: 'center',
          marginBottom: 28,
        }}>
          <a href="https://github.com/syedia/autoarchitect" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '5px 12px 5px 6px',
            fontSize: 11.5, color: 'var(--fg-2)',
            background: 'var(--bg-1)',
            border: '1px solid var(--line-2)',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            letterSpacing: '0.04em',
          }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '2px 8px', borderRadius: 999,
              background: 'var(--accent-soft)',
              color: 'var(--accent-2)',
              border: '1px solid var(--line-3)',
              fontWeight: 600,
            }}>
              <I.sparkle size={10} />
              Early access
            </span>
            <span>{h.pill}</span>
          </a>
        </div>

        {/* Centered copy — the setup act; the full-width run frame below is the star. */}
        <div style={{ textAlign: 'center', maxWidth: 920, margin: '0 auto', paddingTop: 8 }}>
          <div>
            <h1 className="hero-title" style={{
              margin: '0 auto',
              maxWidth: 880,
              fontSize: 'clamp(52px, 6.2vw, 84px)',
              lineHeight: 0.98,
              letterSpacing: '-0.04em',
              fontWeight: 600,
              color: 'var(--fg-1)',
              textWrap: 'balance',
            }}>
              {h.title}
            </h1>

            <p style={{
              margin: '24px auto 0',
              maxWidth: 600,
              fontSize: 17.5,
              lineHeight: 1.55,
              color: 'var(--fg-2)',
              textWrap: 'pretty',
            }}>
              {h.sub1}
            </p>

            {/* Studio → no hero CTAs (Star on GitHub lives top-right; the repo
                landing covers architecture). Business → single signup CTA
                (Sign in is already top-right). */}
            {mode === 'business' && (
              <div style={{
                marginTop: 30,
                display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
              }} className="hero-ctas">
                <a href="http://localhost:18804/login?signup=1" style={{ textDecoration: 'none' }}>
                  <PrimaryBtn size="lg" icon={<I.sparkle size={16} />}>Request access</PrimaryBtn>
                </a>
              </div>
            )}

            {/* Trust row */}
            <div style={{
              margin: '40px auto 0',
              maxWidth: 760,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 0,
              borderTop: '1px solid var(--line-1)',
              borderBottom: '1px solid var(--line-1)',
              paddingTop: 14, paddingBottom: 14,
            }} className="hero-trust">
              {h.trust.map((t, i) => {
                const Icn = I[t.icon];
                return (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    borderLeft: i === 0 ? 'none' : '1px solid var(--line-1)',
                    paddingLeft: i === 0 ? 0 : 16,
                    paddingRight: i === h.trust.length - 1 ? 0 : 16,
                    fontSize: 11.5,
                    fontFamily: 'var(--font-mono)',
                    color: 'var(--fg-2)',
                    letterSpacing: '0.04em',
                    whiteSpace: 'nowrap',
                  }}>
                    <Icn size={13} style={{ color: 'var(--accent-2)', flexShrink: 0 }} />
                    <span>{t.text}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

          {/* THE STAR: the recorded run, then a synced carousel of the built app's
              screens — the strip below highlights whatever's showing in the frame. */}
          <HeroShowcase mode={mode} />

      </Container>
    </section>
  );
};

// A REAL generated app inside a browser chrome — the hero proof (replaces the
// abstract orbit). Studio → a real app; Business → a real business app.
const HeroAppFrame = ({ mode = 'studio' }) => {
  const shot = mode === 'business' ? 'forkly-marketing' : 'zaiglam-storefront';
  const label = mode === 'business' ? 'forkly.app — generated business' : 'zaiglam.shop — generated app';
  return (
    <div className="hero-diagram-frame" style={{
      border: '1px solid var(--line-2)', borderRadius: 14, overflow: 'hidden',
      background: 'var(--bg-1)', boxShadow: '0 30px 80px rgba(0,0,0,0.45)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)' }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#ff5f57' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#febc2e' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28c840' }} />
        <span className="mono-label" style={{ marginLeft: 10, fontSize: 11, color: 'var(--fg-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
        <span className="mono-label" style={{ marginLeft: 'auto', fontSize: 9.5, color: 'var(--accent-2)', border: '1px solid var(--line-2)', borderRadius: 999, padding: '2px 8px' }}>REAL · GENERATED</span>
      </div>
      <img src={`/screenshots/generated/${shot}.png`} alt="A real generated app" loading="eager"
        style={{ width: '100%', display: 'block', objectFit: 'cover', objectPosition: 'top', maxHeight: 460 }} />
    </div>
  );
};

// A looping CINEMATIC of a real pipeline RUN — the point is to show that this is
// a PLATFORM that GENERATES apps/businesses, not a single finished app. Prompt →
// the AI team → stages progress → the real generated app materializes → loops.
const RUN = {
  studio: {
    chip: 'STUDIO · GENERATING',
    prompt: 'a client tracker for my studio — projects, invoices, a portal',
    team: ['A', 'pm', 'db', 'ui', '✓'],
    stages: ['Understanding the prompt', 'Composing the app graph', 'Forging Vite + React + a real backend', 'Verified — deploying preview'],
    out: 'zaiglam-storefront', outLabel: 'app · live',
  },
  business: {
    chip: 'BUSINESS · GENERATING',
    prompt: 'A premium skincare brand for travelers — refillable, sold direct',
    team: ['A', 'ops', 'mkt', 'sales', 'sup'],
    stages: ['Planning the business + guardrails', 'Composing 5 apps + the AI team', 'Forging apps, workflows & roles', 'Verified — the company is live'],
    out: 'forkly-marketing', outLabel: 'business · live',
  },
};

const HeroRun = ({ mode = 'studio' }) => {
  const r = RUN[mode] || RUN.studio;
  return (
    <div className="hero-diagram-frame" style={{ border: '1px solid var(--line-2)', borderRadius: 14, overflow: 'hidden', background: 'var(--bg-1)', boxShadow: '0 30px 80px rgba(0,0,0,0.45)' }}>
      {/* browser/console chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)' }}>
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#ff5f57' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#febc2e' }} />
        <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28c840' }} />
        <span className="mono-label" style={{ marginLeft: 10, fontSize: 10.5, color: 'var(--fg-3)' }}>autoarchitect · run</span>
        <span className="mono-label" style={{ marginLeft: 'auto', fontSize: 9.5, color: 'var(--accent-2)', border: '1px solid var(--line-2)', borderRadius: 999, padding: '2px 8px' }}>{r.chip}</span>
      </div>
      {/* run body — stages log; the real generated app materializes over it at the end */}
      <div style={{ position: 'relative', minHeight: 372, padding: 18, fontFamily: 'var(--font-mono)' }}>
        {/* the prompt (the input) */}
        <div style={{ fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.5, borderLeft: '2px solid var(--accent)', paddingLeft: 10, marginBottom: 14 }}>
          <span style={{ color: 'var(--accent-2)' }}>▸ </span>{r.prompt}
        </div>
        {/* the AI team spins up */}
        <div className="flex items-center gap-1.5" style={{ marginBottom: 16 }}>
          {r.team.map((t, i) => (
            <span key={i} className="run-agent" style={{ width: 26, height: 26, borderRadius: 8, background: i === 0 ? 'var(--accent)' : 'var(--bg-3)', color: i === 0 ? '#08101f' : 'var(--fg-2)', border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', fontSize: 10.5, fontWeight: 700, animationDelay: (i * 0.25) + 's' }}>{t}</span>
          ))}
          <span style={{ fontSize: 10.5, color: 'var(--fg-3)', marginLeft: 6 }}>the AI team</span>
        </div>
        {/* stages log — staggered reveal */}
        <div style={{ display: 'grid', gap: 9 }}>
          {r.stages.map((s, i) => (
            <div key={i} className={'run-line l' + i} style={{ fontSize: 12, color: i === r.stages.length - 1 ? 'var(--accent-2)' : 'var(--fg-2)' }}>
              <span style={{ color: i === r.stages.length - 1 ? 'var(--accent-2)' : 'var(--fg-4)' }}>{i === r.stages.length - 1 ? '✓ ' : '▸ '}</span>{s}
            </div>
          ))}
        </div>
        {/* progress */}
        <div className="run-bar" style={{ marginTop: 16, height: 3, background: 'var(--line-1)', borderRadius: 999, overflow: 'hidden' }}>
          <i style={{ display: 'block', height: '100%', background: 'var(--accent)' }} />
        </div>
        {/* the REAL generated output materializes over the log, then loops */}
        <div className="run-out" style={{ position: 'absolute', inset: 14, top: 52, borderRadius: 10, overflow: 'hidden', border: '1px solid var(--line-2)', background: 'var(--bg-2)' }}>
          <img src={`/screenshots/generated/${r.out}.png`} alt="generated" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
          <span className="mono-label" style={{ position: 'absolute', top: 10, right: 10, background: 'rgba(6,8,12,0.78)', color: 'var(--accent-2)', fontSize: 9.5, padding: '3px 9px', borderRadius: 999, border: '1px solid var(--line-2)' }}>{r.outLabel}</span>
        </div>
      </div>
    </div>
  );
};

// The ACTUAL pipeline run, recorded from the live cinematic player and sped up
// (prompt → agent team → PRD → system model → forge → deploy). Loops, muted,
// autoplays — the hero proof that this is a PLATFORM that generates apps.
// A tour of THE STUDIO itself (the product), not just the app it outputs.
// Slide 0 is the build run (video); the rest are real Studio surfaces. The
// strip below stays in sync — every slide is clickable + highlightable.
const SLIDES = {
  studio: [
    { img: 'studio-pipeline',   label: 'Pipeline', video: true },
    { img: 'studio-preview',    label: 'Live preview' },
    { img: 'studio-workflows',  label: 'Workflows' },
    { img: 'studio-connectors', label: 'Connectors' },
    { img: 'studio-responsive', label: 'Responsive' },
    { img: 'studio-design',     label: 'Design' },
    { img: 'studio-code',       label: 'Code' },
    { img: 'studio-ship',       label: 'Ship' },
  ],
  // The paid side tours the COMPANY, not one app: its founding film (which
  // drills into an app's own build partway through), then the surfaces that
  // run it day to day. Every frame captured from :18804 — see
  // tools/capture-business-run.mjs and tools/capture-business-shots.mjs.
  business: [
    { img: 'business-pipeline',       label: 'The founding', video: true },
    { img: 'business-showcase-page',  label: 'Showcase' },
    { img: 'business-agents',         label: 'AI team' },
    { img: 'business-runtime',        label: 'Runtime' },
    { img: 'business-channels',       label: 'Channels' },
    { img: 'business-tests',          label: 'Tests' },
    { img: 'business-portfolio',      label: 'Portfolio' },
  ],
};

// Each mode plays its OWN recorded run — the Studio's app build, or the
// business founding that builds a company of apps.
const RUN_VIDEO = { studio: '/hero-run.mp4', business: '/hero-business.mp4' };
const PRODUCT = { studio: 'AutoArchitect Studio', business: 'AutoArchitect Business' };
const RUN_TITLE = { studio: 'the build run', business: 'the founding — a company being built' };
const CAPTION = {
  studio: 'Meet the Studio — the build run, then every surface it ships: live preview, workflows, connectors, responsive, design, code and ship. Pick any below, or click to enlarge.',
  business: 'Watch a company get founded — and partway through, the film drops into one app\u2019s own build without leaving the founding. Then the surfaces that run it: showcase, AI team, runtime, channels, tests and the portfolio.',
};

const HeroShowcase = ({ mode = 'studio' }) => {
  const vref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const HERO_SLIDES = SLIDES[mode] || SLIDES.studio;
  const cur = HERO_SLIDES[idx] || HERO_SLIDES[0];
  const isVideo = !!cur.video;
  const product = PRODUCT[mode] || PRODUCT.studio;
  // switching Studio <-> Business restarts the tour on that mode's run
  React.useEffect(() => { setIdx(0); }, [mode]);

  // Play the run when we land on slide 0; pause it whenever we leave.
  React.useEffect(() => {
    const v = vref.current;
    if (!v) return undefined;
    if (isVideo) { v.currentTime = 0; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
    else { v.pause(); }
    return undefined;
  }, [idx, isVideo]);

  // Auto-advance: static slides dwell ~4.2s; the run advances on onEnded, with
  // a long fallback if autoplay is blocked. Re-armed each idx so a manual pick
  // resets the timer.
  React.useEffect(() => {
    const t = setTimeout(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), isVideo ? 30000 : 4200);
    return () => clearTimeout(t);
  }, [idx, isVideo]);

  const pick = (i) => setIdx(i);

  return (
    <>
      <div style={{ maxWidth: 1200, margin: '40px auto 0', position: 'relative' }}>
        <div className="hero-diagram-frame" style={{ border: '1px solid var(--line-3)', borderRadius: 14, overflow: 'hidden', background: 'var(--bg-1)', boxShadow: '0 40px 120px rgba(0,0,0,0.55)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: '1px solid var(--line-1)', background: 'var(--bg-2)' }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#ff5f57' }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#febc2e' }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28c840' }} />
            <span className="mono-label" style={{ marginLeft: 10, fontSize: 10.5, color: 'var(--fg-3)' }}>
              {isVideo ? `${product} · ${RUN_TITLE[mode] || RUN_TITLE.studio}` : `${product} · ${cur.label}`}
            </span>
            <span className="mono-label" style={{
              marginLeft: 'auto', fontSize: 9.5, borderRadius: 999, padding: '2px 8px',
              color: isVideo ? 'var(--accent-2)' : '#34d17a',
              border: `1px solid ${isVideo ? 'var(--line-2)' : 'rgba(52,209,122,0.4)'}`,
              transition: 'color 220ms, border-color 220ms',
            }}>{isVideo
              ? (mode === 'business' ? 'BUSINESS · FOUNDING' : 'STUDIO · BUILDING')
              : (mode === 'business' ? '✓ LIVE · business running' : '✓ SHIPPED · app live')}</span>
          </div>
          <div style={{ position: 'relative', aspectRatio: '16 / 9', overflow: 'hidden', background: '#0a0a0f' }}>
            <video ref={vref} key={mode} src={RUN_VIDEO[mode] || RUN_VIDEO.studio}
              poster={`/screenshots/generated/${HERO_SLIDES[0].img}.png`}
              muted playsInline preload="auto" onEnded={() => setIdx((i) => (i + 1) % HERO_SLIDES.length)}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: isVideo ? 'block' : 'none', background: '#0a0a0f' }} />
            {!isVideo && (
              <img key={cur.img} src={`/screenshots/generated/${cur.img}.png`} alt={`${product} — ${cur.label}`}
                title="Click to enlarge"
                onClick={() => window.openLightbox(`/screenshots/generated/${cur.img}.png`, `${product} · ${cur.label}`)}
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block', cursor: 'zoom-in', animation: 'lb-fade 350ms ease-out' }} />
            )}
          </div>
        </div>
      </div>

      <p style={{ textAlign: 'center', margin: '20px auto 0', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)', maxWidth: 800, lineHeight: 1.5 }}>
        {CAPTION[mode] || CAPTION.studio}
      </p>

      {/* Synced strip — every slide clickable; the active one is highlighted. */}
      <div className="hero-thumbs" style={{
        display: 'grid', gridTemplateColumns: `repeat(${HERO_SLIDES.length}, 1fr)`, gap: 10,
        maxWidth: 1200, margin: '20px auto 0',
      }}>
        {HERO_SLIDES.map((s, i) => {
          const active = i === idx;
          return (
            <button key={s.img} type="button" title={`Show ${s.label}`} onClick={() => pick(i)}
              style={{
                textAlign: 'left', font: 'inherit', color: 'inherit', padding: 0,
                border: `1px solid ${active ? 'var(--accent)' : 'var(--line-2)'}`,
                boxShadow: active ? '0 0 0 1px var(--accent), 0 10px 30px rgba(0,0,0,0.4)' : 'none',
                borderRadius: 10, overflow: 'hidden', background: 'var(--bg-1)', cursor: 'pointer',
                opacity: active ? 1 : 0.6,
                transition: 'opacity 200ms, border-color 200ms, box-shadow 200ms',
              }}>
              <div style={{ aspectRatio: '16 / 10', overflow: 'hidden', position: 'relative' }}>
                <img src={`/screenshots/generated/${s.img}.png`} alt={`${product} — ${s.label}`} loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                {s.video && (
                  <span aria-hidden style={{
                    position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: 'rgba(0,0,0,0.25)',
                  }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 26, height: 26, borderRadius: 999, background: 'rgba(0,0,0,0.6)', border: '1px solid var(--line-3)' }}>
                      <I.play size={12} style={{ color: '#fff' }} />
                    </span>
                  </span>
                )}
              </div>
              <div className="mono-label" style={{ fontSize: 10, color: active ? 'var(--accent-2)' : 'var(--fg-3)', padding: '7px 10px', letterSpacing: '0.06em' }}>{s.label}</div>
            </button>
          );
        })}
      </div>
    </>
  );
};

const HeroBackdrop = () => (
  <>
    {/* Grid paper */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage:
        'linear-gradient(var(--line-1) 1px, transparent 1px),' +
        'linear-gradient(90deg, var(--line-1) 1px, transparent 1px)',
      backgroundSize: '48px 48px',
      opacity: 0.5,
      maskImage: 'radial-gradient(ellipse 85% 75% at 50% 42%, black 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(ellipse 85% 75% at 50% 42%, black 30%, transparent 80%)',
      pointerEvents: 'none',
    }} />
    {/* Accent glow — centered behind the product frame so it reads as lit/floating */}
    <div style={{
      position: 'absolute',
      top: '42%', left: '50%', transform: 'translateX(-50%)',
      width: 1100, height: 700,
      background: 'radial-gradient(ellipse at center, var(--accent-soft), transparent 62%)',
      pointerEvents: 'none',
      filter: 'blur(50px)',
    }} />
    <div style={{
      position: 'absolute',
      bottom: -200, left: -100,
      width: 600, height: 600,
      background: 'radial-gradient(circle, rgba(96,165,250,0.06), transparent 60%)',
      pointerEvents: 'none',
      filter: 'blur(40px)',
    }} />
  </>
);

/* Frame around the orchestration diagram with HUD-style corner annotations */
const HeroDiagramFrame = () => (
  <div className="force-dark-panel hero-diagram-frame" style={{
    position: 'relative',
    background: 'linear-gradient(180deg, rgba(139,92,246,0.05), rgba(139,92,246,0))',
    border: '1px solid var(--line-2)',
    borderRadius: 16,
    padding: 16,
    overflow: 'hidden',          /* iPhone fix — clip any SVG overflow */
    minWidth: 0,                  /* allow shrinking inside grid cells */
    boxShadow: '0 40px 80px -20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02)',
  }}>
    {/* HUD bar top */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      paddingBottom: 12,
      borderBottom: '1px dashed var(--line-2)',
      marginBottom: 8,
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      color: 'var(--fg-3)',
      letterSpacing: '0.1em',
    }}>
      {/* Studio sub-brand mark — single source of truth in marks.jsx */}
      <window.StudioMark size={14} withWordmark idKey="hero" style={{ marginRight: 4 }} />

      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span style={{ color: 'var(--accent-2)' }}>PREVIEW</span>
      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span>ARCHITECT</span>
      <span style={{ color: 'var(--fg-4)' }}>·</span>
      <span>{window.SITE_STATS.toolPaletteCount}+ TOOLS</span>
      <span style={{ marginLeft: 'auto', color: 'var(--fg-4)' }}>
        runs locally in your Studio
      </span>
    </div>

    <OrchestrationDiagram />

    {/* HUD bar bottom: live stats */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 0,
      borderTop: '1px dashed var(--line-2)',
      paddingTop: 12,
      marginTop: 4,
      fontFamily: 'var(--font-mono)',
      fontSize: 11,
    }}>
      {[
        ['TOKENS/s', '12.4k', 'var(--accent-2)'],
        ['PLAN DEPTH', '07', 'var(--fg-1)'],
        ['LATENCY', '143ms', 'var(--fg-1)'],
        ['COST', '$0.03', 'var(--ok)'],
      ].map(([k, v, c], i) => (
        <div key={k} style={{
          flex: 1,
          display: 'flex', flexDirection: 'column', gap: 2,
          borderLeft: i === 0 ? 'none' : '1px solid var(--line-1)',
          paddingLeft: i === 0 ? 0 : 14,
        }}>
          <span style={{ color: 'var(--fg-4)', fontSize: 9.5, letterSpacing: '0.14em' }}>{k}</span>
          <span style={{ color: c, fontWeight: 500 }}>{v}</span>
        </div>
      ))}
    </div>
  </div>
);

/* Scrolling ticker of companies using it */
const HeroTicker = () => {
  const logos = [
    { name: 'VERSA', letter: 'V' },
    { name: 'LINEWORKS', letter: 'L' },
    { name: 'HYPER.IO', letter: 'H' },
    { name: 'NORTHSTAR', letter: 'N' },
    { name: 'PARALLAX', letter: 'P' },
    { name: 'MONOREPO', letter: 'M' },
    { name: 'KERNEL', letter: 'K' },
    { name: 'OCTAGON', letter: 'O' },
    { name: 'SYNTAX', letter: 'S' },
    { name: 'ATRIUM', letter: 'A' },
  ];

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 18,
      alignItems: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 10.5,
        color: 'var(--fg-3)',
        letterSpacing: '0.28em',
        textTransform: 'uppercase',
      }} className="ticker-label">
        ↓ DEPLOYED BY ENGINEERING TEAMS AT ↓
      </div>
      <div style={{
        width: '100%',
        overflow: 'hidden',
        position: 'relative',
        maskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, black 10%, black 90%, transparent)',
      }}>
        <div style={{
          display: 'flex',
          gap: 48,
          animation: 'ticker 34s linear infinite',
          width: 'max-content',
        }}>
          {[...logos, ...logos].map((l, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              color: 'var(--fg-3)',
              fontFamily: 'var(--font-mono)',
              fontSize: 14,
              fontWeight: 500,
              letterSpacing: '0.14em',
              whiteSpace: 'nowrap',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 5,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--bg-2)',
                border: '1px solid var(--line-2)',
                color: 'var(--fg-1)',
                fontSize: 11, fontWeight: 700,
              }}>{l.letter}</span>
              {l.name}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Hero = Hero;