// pages/home-hero.jsx — Hero section + Problem section

const HERO_TABS = [
  {
    label: 'LangChain', lang: 'python',
    code: `from langchain_aegis import AegisPythonREPL

tool = AegisPythonREPL(
    capabilities={"filesystem": ["/tmp"], "network": False}
)
result = tool.run(
    "import hashlib; print(hashlib.sha256(b'vela').hexdigest())"
)
# → b1946ac92492d2347c6235b4d2611184 (from inside a Firecracker micro-VM)`,
  },
  {
    label: 'LlamaIndex', lang: 'python',
    code: `from llamaindex_aegis import AegisPythonTool
from llama_index.core.agent import ReActAgent

sandbox = AegisPythonTool(
    capabilities={"filesystem": ["/tmp"]}
)
agent = ReActAgent.from_tools([sandbox.as_llama_tool()])
response = agent.chat("Calculate the 100th Fibonacci number.")`,
  },
  {
    label: 'REST API', lang: 'bash',
    code: `curl -X POST https://api.getvela.io/execute \\
  -H "x-api-key: vela_live_xxxxx" \\
  -H "Content-Type: application/json" \\
  -d '{
    "language": "python",
    "code": "cHJpbnQoMioqMTI4KQ==",
    "webhook_url": "https://yourapp.io/hooks/vela",
    "labels": {"user": "alice", "task": "math"}
  }'
# → {"execution_id": "a1b2c3d4", "status": "queued"}`,
  },
];

const LOGOS = ['Anthropic', 'Replicate', 'Modal', 'Weights & Biases', 'Vercel', 'Fly.io'];

function HeroSection() {
  return (
    <section style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: 'clamp(100px, 12vh, 140px) 0 80px',
      position: 'relative', overflow: 'hidden',
    }} className="bg-grid bg-hero-glow">
      <div className="container" style={{ textAlign: 'center', maxWidth: '920px' }}>

        {/* Announcement pill */}
        <div style={{ animation: 'slideUp 0.5s ease-out', marginBottom: '2rem', display: 'flex', justifyContent: 'center' }}>
          <div className="announcement-pill">
            <span className="announcement-pill-badge">NEW</span>
            Vela v0.1 — now with LlamaIndex, CrewAI &amp; OpenAI adapters
            <IcoArrowRight size={13} style={{ opacity: 0.7 }} />
          </div>
        </div>

        {/* Headline */}
        <h1 style={{
          fontSize: 'clamp(2.5rem, 7vw, 4.75rem)', fontWeight: 800, lineHeight: 1.04,
          letterSpacing: '-0.035em', marginBottom: '1.5rem',
          animation: 'slideUp 0.6s ease-out 0.08s both',
        }}>
          <span className="text-gradient">Run untrusted code.</span>
          <br />
          <span className="text-gradient-brand">Stay in control.</span>
        </h1>

        {/* Subhead */}
        <p style={{
          fontSize: 'clamp(1rem, 2.2vw, 1.2rem)', color: 'var(--color-muted)',
          maxWidth: '540px', margin: '0 auto 2.5rem', lineHeight: 1.75,
          animation: 'slideUp 0.6s ease-out 0.18s both',
        }}>
          Secure execution runtime for AI agents and SaaS platforms.
          Firecracker micro-VMs. HMAC capability tokens. Full audit trail.
          Zero container overhead.
        </p>

        {/* CTAs */}
        <div style={{
          display: 'flex', gap: '0.875rem', justifyContent: 'center', flexWrap: 'wrap',
          marginBottom: '2.75rem', animation: 'slideUp 0.6s ease-out 0.28s both',
        }}>
          <Btn variant="primary" size="lg" to="/docs">Get started →</Btn>
          <Btn variant="secondary" size="lg" href="https://github.com/karnati-praveen/VELA">
            <IcoGithub size={16} /> View on GitHub
          </Btn>
        </div>

        {/* Social proof */}
        <div style={{ animation: 'slideUp 0.6s ease-out 0.38s both', marginBottom: '4rem' }}>
          <p style={{ fontSize: '0.7375rem', color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.875rem' }}>
            Trusted by teams at
          </p>
          <div className="logo-strip">
            {LOGOS.map(n => <span key={n} className="logo-item">{n}</span>)}
          </div>
        </div>

        {/* Code demo panel */}
        <div style={{ animation: 'slideUp 0.7s ease-out 0.48s both', maxWidth: '740px', margin: '0 auto', textAlign: 'left' }}>
          <TabbedCode tabs={HERO_TABS} />
        </div>
      </div>
    </section>
  );
}

const PAINS = [
  {
    title: 'Raw subprocess',
    text: 'Runs as you. If the model is jailbroken, so is your server. No audit trail, no isolation. One bad prompt from losing everything.',
  },
  {
    title: 'Docker containers',
    text: '1–3 second cold start per run. Not designed for per-request lifecycle. Overkill to manage. Still shares your host kernel.',
  },
  {
    title: 'Hosted sandboxes',
    text: 'Opaque pricing. Expensive at scale. You lose the audit log. Vendor lock-in with zero visibility into the execution environment.',
  },
];

function ProblemSection() {
  return (
    <section style={{ padding: '6rem 0', background: 'linear-gradient(180deg, var(--color-bg) 0%, rgba(6,6,12,1) 100%)' }}>
      <div className="container">
        <AnimEl style={{ textAlign: 'center', marginBottom: '3.5rem' }}>
          <h2 style={{ fontSize: 'clamp(1.5rem, 4vw, 2.25rem)', fontWeight: 700, lineHeight: 1.25, maxWidth: '660px', margin: '0 auto' }}>
            Every AI agent that runs code is one&nbsp;
            <code style={{ fontFamily: 'var(--font-mono)', color: 'var(--color-red)', background: 'rgba(239,68,68,0.08)', padding: '0.1em 0.45em', borderRadius: '4px', border: '1px solid rgba(239,68,68,0.15)', fontSize: '0.9em' }}>exec()</code>
            &nbsp;away from disaster.
          </h2>
        </AnimEl>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.25rem', marginBottom: '3rem' }}>
          {PAINS.map((p, i) => (
            <AnimEl key={p.title} delay={i + 1}>
              <div style={{
                background: 'var(--color-surface)',
                border: '1px solid rgba(239,68,68,0.12)',
                borderRadius: 'var(--radius-lg)', padding: '1.5rem',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.625rem' }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--color-red)', display: 'inline-block', flexShrink: 0 }} />
                  <span style={{ fontWeight: 600, fontSize: '0.9375rem' }}>{p.title}</span>
                </div>
                <p style={{ color: 'var(--color-muted)', fontSize: '0.875rem', lineHeight: 1.7 }}>{p.text}</p>
              </div>
            </AnimEl>
          ))}
        </div>

        <AnimEl style={{ textAlign: 'center' }}>
          <span style={{ color: 'var(--color-brand-400)', fontWeight: 600, fontSize: '1.0625rem' }}>
            → There's a better way.
          </span>
        </AnimEl>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection, ProblemSection });