// Marketing landing page — desktop web, 1280×900 viewport
function LandingPage({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);
  const [hover, setHover] = React.useState(null);

  // Live ticker — pretend telemetry from the global fleet
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((x) => x + 1), 1500);
    return () => clearInterval(id);
  }, []);

  const stats = [
    { k: 'connected.robots', v: (12847 + (tick % 7)).toLocaleString(), l: 'live' },
    { k: 'skills.installed', v: '2.1M', l: '+142/h' },
    { k: 'contributors', v: '4,902', l: 'github' },
    { k: 'uptime', v: '99.97%', l: '90d' },
  ];

  return (
    <div style={{
      width: 1280, minHeight: 900, background: t.bg0, color: t.t0,
      fontFamily: OR.font.sans, position: 'relative', overflow: 'hidden',
      ['--accent']: accent,
    }}>
      <ORStyles/>

      {/* Top nav */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 50,
        borderBottom: `1px solid ${t.line}`, background: `${t.bg0}EE`,
        backdropFilter: 'blur(12px)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 32px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
            <ORWordmark color={t.t0} accent={accent}/>
            <div style={{ display: 'flex', gap: 22, fontSize: 13, color: t.t1 }}>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Platform</a>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Skills</a>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Robots</a>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Docs</a>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Community</a>
              <a style={{ color: t.t1, textDecoration: 'none' }}>Pricing</a>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontFamily: OR.font.mono, color: t.t2, padding: '6px 10px', border: `1px solid ${t.line}`, borderRadius: 4 }}>
              <Icon d={Icons.github} size={13}/> 38.2k
            </div>
            <button style={btnGhost(t)}>Sign in</button>
            <button style={btnPrimary(t)}>Install <Icon d={Icons.arrowR} size={13} sw={2}/></button>
          </div>
        </div>
      </div>

      {/* Hero */}
      <div style={{ position: 'relative', padding: '64px 32px 32px', borderBottom: `1px solid ${t.line}` }}>
        {/* background grid */}
        <div className="or-grid" style={{ position: 'absolute', inset: 0, opacity: 0.6, maskImage: 'radial-gradient(ellipse at top, black 30%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at top, black 30%, transparent 70%)' }}/>
        {/* accent glow */}
        <div style={{ position: 'absolute', top: -200, right: -100, width: 600, height: 600, borderRadius: '50%', background: `radial-gradient(circle, ${t.accentGlow}, transparent 60%)`, pointerEvents: 'none' }}/>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 48 }}>
          {/* Left: copy */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px 5px 6px', border: `1px solid ${t.line}`, borderRadius: 99, fontSize: 11, fontFamily: OR.font.mono, color: t.t1, marginBottom: 28 }}>
              <span style={{ padding: '2px 7px', borderRadius: 99, background: t.accentSoft, color: accent, fontWeight: 600 }}>v0.9</span>
              Now with multi-robot orchestration
              <Icon d={Icons.arrowR} size={11}/>
            </div>

            <h1 style={{
              fontFamily: OR.font.display, fontSize: 76, lineHeight: 0.95,
              fontWeight: 500, letterSpacing: '-0.04em', margin: 0,
              textWrap: 'balance',
            }}>
              The open<span style={{ color: accent }}>·</span>source<br/>
              operating layer<br/>
              for <em style={{ fontStyle: 'italic', fontFamily: 'Georgia, serif', fontWeight: 400 }}>your</em> robots.
            </h1>

            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: t.t1, maxWidth: 520 }}>
              Connect any robot — humanoid, arm, drone, vacuum — and run skills, automations,
              and teleoperation from one app. No vendor lock-in. Local-first. Hackable to the metal.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 32, alignItems: 'center' }}>
              <button style={{ ...btnPrimary(t), padding: '12px 18px', fontSize: 14 }}>
                Install openrobot <Icon d={Icons.arrowR} size={14} sw={2}/>
              </button>
              <button style={{ ...btnGhost(t), padding: '12px 18px', fontSize: 14, fontFamily: OR.font.mono }}>
                <Icon d={Icons.terminal} size={14}/> curl -sSf openrobot.app/install | sh
              </button>
            </div>

            <div style={{ display: 'flex', gap: 24, marginTop: 36, fontSize: 12, color: t.t2, fontFamily: OR.font.mono }}>
              <span>MIT licensed</span>
              <span>·</span>
              <span>Linux / macOS / iOS / Android</span>
              <span>·</span>
              <span>ROS 2 native</span>
            </div>
          </div>

          {/* Right: terminal-style demo */}
          <div style={{ position: 'relative' }}>
            <div style={{
              background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12,
              overflow: 'hidden', boxShadow: `0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px ${t.line}`,
            }}>
              {/* tab bar */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: `1px solid ${t.line}`, background: t.bg2 }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: t.bg4 }}/>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: t.bg4 }}/>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: t.bg4 }}/>
                </div>
                <div style={{ fontFamily: OR.font.mono, fontSize: 11, color: t.t2 }}>~/openrobot · live</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: OR.font.mono, fontSize: 11, color: t.ok }}>
                  <Pip color={t.ok} pulse size={6}/> connected
                </div>
              </div>

              {/* terminal */}
              <div style={{ padding: 18, fontFamily: OR.font.mono, fontSize: 12, lineHeight: 1.7, color: t.t1, height: 360, position: 'relative', overflow: 'hidden' }}>
                <Line t={t} prompt><span style={{ color: accent }}>or</span> connect ada-01 --type humanoid</Line>
                <Line t={t} muted>↳ scanning network… handshake → /dev/usb0 → online</Line>
                <Line t={t} ok>✓ Ada-01 connected (Unitree H1, fw 2.4.1)</Line>
                <div style={{ height: 8 }}/>
                <Line t={t} prompt><span style={{ color: accent }}>or</span> install skill cleanup-kitchen</Line>
                <Line t={t} muted>fetching from registry.openrobot.app…</Line>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, marginLeft: 14, color: t.t2, fontSize: 11, marginTop: 4 }}>
                  <span>cleanup-kitchen-2.1.0</span><span style={{ color: t.ok }}>2.4 MB · ✓</span>
                  <span>vision-yolo-v8</span><span style={{ color: t.ok }}>14.1 MB · ✓</span>
                  <span>grasp-planner</span><span style={{ color: t.ok }}>8.9 MB · ✓</span>
                </div>
                <Line t={t} ok>✓ Installed in 4.2s · 3 deps</Line>
                <div style={{ height: 8 }}/>
                <Line t={t} prompt><span style={{ color: accent }}>or</span> run cleanup-kitchen --until clean</Line>
                <Line t={t} muted>↳ planning… 14 objects detected → 3 zones</Line>
                <div style={{ marginLeft: 14, marginTop: 4, color: t.t1 }}>
                  <span style={{ color: accent }}>▎</span> picking up coffee_mug → dishwasher
                  <div style={{ height: 6, background: t.bg3, borderRadius: 99, marginTop: 6, overflow: 'hidden' }}>
                    <div style={{ width: `${30 + ((tick * 7) % 60)}%`, height: '100%', background: accent, transition: 'width 1s' }}/>
                  </div>
                </div>
                {/* fake cursor */}
                <div style={{ marginTop: 14, color: accent }}>
                  <span style={{ color: accent }}>or</span> <span style={{ color: t.t0 }}>_</span><span style={{ display: 'inline-block', width: 8, height: 14, background: accent, marginLeft: 1, animation: 'orBlink 1.2s steps(2) infinite', verticalAlign: 'text-bottom' }}/>
                </div>

                {/* fade */}
                <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, transparent 70%, ${t.bg1} 100%)`, pointerEvents: 'none' }}/>
              </div>
            </div>

            {/* Floating chip */}
            <div style={{
              position: 'absolute', bottom: -16, left: -16,
              background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 8,
              padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: '0 12px 30px rgba(0,0,0,0.4)',
            }}>
              <div style={{ width: 32, height: 32, borderRadius: 6, background: t.accentSoft, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={Icons.bolt} size={16} stroke={accent}/>
              </div>
              <div>
                <div style={{ fontSize: 11, color: t.t2, fontFamily: OR.font.mono }}>LATENCY</div>
                <div style={{ fontSize: 14, color: t.t0, fontFamily: OR.font.mono, fontWeight: 600 }}>14ms <span style={{ color: t.ok, fontSize: 10 }}>p99</span></div>
              </div>
            </div>
          </div>
        </div>

        {/* Live stats strip */}
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid ${t.line}`, paddingTop: 24 }}>
          {stats.map((s, i) => (
            <div key={s.k} style={{ paddingLeft: i === 0 ? 0 : 24, borderLeft: i === 0 ? 'none' : `1px solid ${t.line}` }}>
              <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{s.k}</div>
              <div style={{ fontSize: 28, fontWeight: 500, marginTop: 6, fontFamily: OR.font.display, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontSize: 11, color: t.t2, marginTop: 2, fontFamily: OR.font.mono, display: 'flex', alignItems: 'center', gap: 6 }}>
                {s.l === 'live' && <Pip color={t.ok} pulse size={6}/>}
                {s.l}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Section: Works with everything */}
      <div style={{ padding: '80px 32px', borderBottom: `1px solid ${t.line}`, position: 'relative' }}>
        <SectionLabel t={t} num="01" label="UNIVERSAL"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <h2 style={h2(t)}>One app.<br/>Every robot.</h2>
            <p style={{ ...pBody(t), maxWidth: 440 }}>
              openrobot speaks ROS 2, MQTT, gRPC and a dozen vendor APIs. Plug in
              your hardware — humanoid, arm, drone, sensor — and we expose a
              consistent interface. Local-first, with optional cloud relay.
            </p>
            <div style={{ display: 'flex', gap: 6, marginTop: 24, flexWrap: 'wrap' }}>
              {['ROS 2', 'MQTT', 'WebRTC', 'gRPC', 'Zenoh', 'OPC-UA', 'CAN bus', 'Modbus', 'USB-CDC'].map(p => (
                <span key={p} style={{ fontFamily: OR.font.mono, fontSize: 11, padding: '4px 9px', border: `1px solid ${t.line}`, borderRadius: 4, color: t.t1 }}>{p}</span>
              ))}
            </div>
          </div>

          {/* Robot grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: t.line, border: `1px solid ${t.line}`, borderRadius: 8, overflow: 'hidden' }}>
            {[
              { kind: 'humanoid', name: 'Unitree H1', tag: 'humanoid', n: 1247 },
              { kind: 'quadruped', name: 'Spot · Go2', tag: 'quadruped', n: 3804 },
              { kind: 'arm', name: 'UR5e · xArm', tag: 'manipulator', n: 5102 },
              { kind: 'drone', name: 'PX4 · ArduPilot', tag: 'aerial', n: 2980 },
              { kind: 'rover', name: 'Roomba · iRobot', tag: 'mobile', n: 8401 },
              { kind: 'humanoid', name: '+ 240 more', tag: 'community', n: null },
            ].map((r, i) => (
              <div key={i} style={{ background: t.bg1, padding: 24, position: 'relative', minHeight: 160 }}>
                <RobotGlyph kind={r.kind} size={56} color={t.t1} accent={accent}/>
                <div style={{ marginTop: 12 }}>
                  <div style={{ fontSize: 13, color: t.t0, fontWeight: 500 }}>{r.name}</div>
                  <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{r.tag}</div>
                </div>
                {r.n && (
                  <div style={{ position: 'absolute', top: 16, right: 16, fontFamily: OR.font.mono, fontSize: 10, color: t.t2 }}>
                    {r.n.toLocaleString()} <span style={{ color: t.t3 }}>online</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Section: Skills marketplace */}
      <div style={{ padding: '80px 32px', borderBottom: `1px solid ${t.line}`, background: t.bg1 }}>
        <SectionLabel t={t} num="02" label="SKILLS"/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'flex-start' }}>
          <div>
            <h2 style={h2(t)}>Install a skill,<br/>not a script.</h2>
            <p style={{ ...pBody(t), maxWidth: 440 }}>
              The openrobot registry hosts <strong style={{ color: t.t0 }}>2,400+ open skills</strong> —
              from "fetch me a beer" to autonomous warehouse picking. One command. Sandboxed.
              Versioned. Composable.
            </p>
            <button style={{ ...btnGhost(t), marginTop: 20, padding: '10px 14px' }}>
              Browse registry <Icon d={Icons.arrowR} size={13}/>
            </button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              { i: '🍳', n: 'cook-breakfast', a: '@robomeals', d: 'Plans + executes simple meals using your kitchen.', dl: '142k', stars: 4.8 },
              { i: '🧹', n: 'tidy-room', a: '@openrobot', d: 'Picks up clutter, returns to known locations.', dl: '89k', stars: 4.7 },
              { i: '📦', n: 'bin-picking', a: '@graspr', d: 'Industrial-grade bin picking with vision.', dl: '24k', stars: 4.9 },
              { i: '🐕', n: 'walk-the-dog', a: '@quadlab', d: 'Quadruped dog-walker with leash compliance.', dl: '7.1k', stars: 4.6 },
            ].map((s, i) => (
              <div key={i} style={{ padding: 16, background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 6, background: t.bg3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>{s.i}</div>
                  <span style={{ fontFamily: OR.font.mono, fontSize: 10, color: t.t2 }}>★ {s.stars}</span>
                </div>
                <div style={{ fontFamily: OR.font.mono, fontSize: 13, color: t.t0, fontWeight: 500 }}>{s.n}</div>
                <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, marginTop: 2 }}>{s.a}</div>
                <div style={{ fontSize: 12, color: t.t1, marginTop: 8, lineHeight: 1.4 }}>{s.d}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontFamily: OR.font.mono, fontSize: 10, color: t.t2 }}>
                  <span><Icon d={Icons.download} size={10}/> {s.dl}</span>
                  <button style={{ background: t.bg3, color: t.t0, border: 'none', padding: '4px 10px', borderRadius: 4, fontFamily: OR.font.mono, fontSize: 10, cursor: 'pointer' }}>install</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Section: Three pillars */}
      <div style={{ padding: '80px 32px', borderBottom: `1px solid ${t.line}` }}>
        <SectionLabel t={t} num="03" label="ARCHITECTURE"/>
        <h2 style={{ ...h2(t), marginBottom: 40 }}>Built like infrastructure,<br/>shaped like an app.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            {
              icon: Icons.shield, title: 'Local-first',
              copy: 'Your robots never need the cloud. The runtime lives on your network. We sync only what you choose.',
              meta: '< 8ms control loop',
            },
            {
              icon: Icons.layers, title: 'Composable',
              copy: 'Skills are sandboxed WASM modules. Stack them, fork them, override them. No magic, all dataflow.',
              meta: '2,400+ modules',
            },
            {
              icon: Icons.flask, title: 'Observable',
              copy: 'Every joint angle, every tensor, every decision is logged and replayable. Built for debugging.',
              meta: 'Time-travel debugger',
            },
          ].map((p, i) => (
            <div key={i} style={{
              padding: 24, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 10,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: 0, left: 0, fontSize: 80, fontFamily: OR.font.display, fontWeight: 600, color: t.bg2, lineHeight: 1, transform: 'translate(-8px, -16px)' }}>
                0{i + 1}
              </div>
              <div style={{ position: 'relative' }}>
                <Icon d={p.icon} size={20} stroke={accent}/>
                <div style={{ fontSize: 22, fontWeight: 500, marginTop: 16, fontFamily: OR.font.display, letterSpacing: '-0.01em' }}>{p.title}</div>
                <p style={{ fontSize: 13, color: t.t1, marginTop: 8, lineHeight: 1.55 }}>{p.copy}</p>
                <div style={{ marginTop: 20, paddingTop: 12, borderTop: `1px solid ${t.line}`, fontFamily: OR.font.mono, fontSize: 11, color: accent }}>
                  → {p.meta}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer CTA */}
      <div style={{ padding: '80px 32px 64px', background: t.bg1, position: 'relative', overflow: 'hidden' }}>
        <div className="or-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}/>
        <div style={{ position: 'absolute', bottom: -300, left: '50%', transform: 'translateX(-50%)', width: 800, height: 600, borderRadius: '50%', background: `radial-gradient(circle, ${t.accentGlow}, transparent 60%)` }}/>
        <div style={{ position: 'relative', textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <h2 style={{ fontFamily: OR.font.display, fontSize: 60, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.04em', margin: 0 }}>
            Your robots. Your code.<br/>
            <span style={{ color: accent }}>Your operating layer.</span>
          </h2>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
            <button style={{ ...btnPrimary(t), padding: '14px 22px', fontSize: 14 }}>
              Get started — free <Icon d={Icons.arrowR} size={14} sw={2}/>
            </button>
            <button style={{ ...btnGhost(t), padding: '14px 22px', fontSize: 14 }}>
              <Icon d={Icons.github} size={14}/> Star on GitHub
            </button>
          </div>
        </div>

        {/* footer meta */}
        <div style={{ position: 'relative', marginTop: 80, paddingTop: 24, borderTop: `1px solid ${t.line}`, display: 'flex', justifyContent: 'space-between', fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>
          <span>© 2026 openrobot collective · MIT</span>
          <span>v0.9.4-rc1 · made by humans + their robots</span>
        </div>
      </div>
    </div>
  );
}

function Line({ children, t, prompt, ok, muted }) {
  const c = ok ? t.ok : muted ? t.t2 : t.t1;
  return (
    <div style={{ color: c }}>
      {prompt && <span style={{ color: t.t3, marginRight: 8 }}>$</span>}
      {children}
    </div>
  );
}

function SectionLabel({ t, num, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
      <span style={{ fontFamily: OR.font.mono, fontSize: 11, color: t.t2 }}>§ {num}</span>
      <span style={{ height: 1, width: 40, background: t.line }}/>
      <span style={{ fontFamily: OR.font.mono, fontSize: 11, color: t.t2, letterSpacing: '0.12em' }}>{label}</span>
    </div>
  );
}

const h2 = (t) => ({
  fontFamily: OR.font.display, fontSize: 48, lineHeight: 1, fontWeight: 500,
  letterSpacing: '-0.03em', margin: 0, color: t.t0,
});
const pBody = (t) => ({ marginTop: 16, fontSize: 15, lineHeight: 1.55, color: t.t1 });
const btnPrimary = (t) => ({
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '8px 14px', fontSize: 13, fontWeight: 500, fontFamily: OR.font.sans,
  background: t.t0, color: t.bg0, border: 'none', borderRadius: 6, cursor: 'pointer',
  letterSpacing: '-0.01em',
});
const btnGhost = (t) => ({
  display: 'inline-flex', alignItems: 'center', gap: 8,
  padding: '8px 14px', fontSize: 13, fontWeight: 500, fontFamily: OR.font.sans,
  background: 'transparent', color: t.t0,
  border: `1px solid ${t.line}`, borderRadius: 6, cursor: 'pointer',
});

window.LandingPage = LandingPage;