// pages/blog.jsx

const POST = {
  slug: 'introducing-vela',
  title: 'Introducing Vela: Secure Code Execution for AI Agents',
  description: 'We built the execution layer AI agents deserve. Here\'s why, how, and what\'s next.',
  date: '2026-05-31',
  author: 'Praveen Karnati',
  authorRole: 'Founder',
  category: 'Product',
  readTime: '8 min',
  content: [
    {
      type: 'p',
      text: 'For the past year I\'ve been building AI agents that write and run code. And for the past year, I\'ve been terrified about what would happen if one of those agents got jailbroken.',
    },
    {
      type: 'p',
      text: 'The threat model is real: an attacker crafts a prompt that convinces your AI agent to run malicious code. If that code runs in a subprocess on your server — as most implementations do — you\'ve just handed over the keys to your infrastructure.',
    },
    {
      type: 'h2', text: 'The problem with existing approaches',
    },
    {
      type: 'p',
      text: 'The obvious solution is containerization. But Docker containers were designed for long-running services, not ephemeral per-request sandboxes. Cold start overhead of 1–3 seconds per execution adds up fast. And containers still share the host kernel — a kernel exploit in the container is an exploit on your server.',
    },
    {
      type: 'p',
      text: 'Hosted sandboxes like e2b or Modal solve some of this, but you lose observability. The audit log — who ran what, when, with what result — is owned by the vendor. For security-conscious teams, that\'s a dealbreaker.',
    },
    {
      type: 'h2', text: 'Enter Firecracker',
    },
    {
      type: 'p',
      text: 'Firecracker is AWS\'s open-source micro-VM monitor, built for Lambda and Fargate. It provides genuine hardware-level isolation via KVM, with ~150ms cold starts and sub-millisecond overhead for pre-warmed pools. It\'s the right primitive for per-request code execution.',
    },
    {
      type: 'p',
      text: 'Vela wraps Firecracker with a Rust daemon, capability token system, policy engine, and full telemetry stack. The result: sandboxed code execution with a p50 latency that\'s production-viable, an audit trail that\'s yours, and a security model you can actually reason about.',
    },
    {
      type: 'h2', text: 'Capability tokens',
    },
    {
      type: 'p',
      text: 'One of the design decisions I\'m most proud of is the capability token system. Rather than a single API key that grants unlimited access, each caller gets an HMAC-SHA256 signed token that declares exactly what it\'s allowed to do: which filesystem paths, whether network is permitted, memory limits, timeouts, expiry.',
    },
    {
      type: 'p',
      text: 'The daemon verifies the signature cryptographically before executing anything. No valid token, no execution. This means you can give different tokens to different agents, revoke them independently, and have a cryptographic record of what each caller was authorized to do.',
    },
    {
      type: 'h2', text: 'What\'s next',
    },
    {
      type: 'p',
      text: 'Vela v0.1 ships today with LangChain, LlamaIndex, CrewAI, and OpenAI adapters. The cloud API is in private beta. Self-hosting is production-ready today — just cargo install vela-engine and pip install vela-agent.',
    },
    {
      type: 'p',
      text: 'Coming next: a cloud-managed tier with multi-region support, a web UI for the audit log, and JavaScript/TypeScript SDK. We\'re also working on snapshot-based fast boot for cold start under 50ms.',
    },
  ],
};

function BlogCard({ post, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-lg)',
        padding: '1.75rem',
        cursor: 'pointer',
        transition: 'border-color 0.15s, transform 0.15s, box-shadow 0.15s',
      }}
      onMouseEnter={e => {
        e.currentTarget.style.borderColor = 'rgba(99,102,241,0.35)';
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.3)';
      }}
      onMouseLeave={e => {
        e.currentTarget.style.borderColor = 'var(--color-border)';
        e.currentTarget.style.transform = 'translateY(0)';
        e.currentTarget.style.boxShadow = 'none';
      }}
    >
      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
        <span className="badge badge-brand">{post.category}</span>
        <span className="badge badge-muted">{post.readTime} read</span>
      </div>
      <h2 style={{ fontWeight: 700, fontSize: '1.1875rem', lineHeight: 1.35, marginBottom: '0.75rem' }}>{post.title}</h2>
      <p style={{ color: 'var(--color-muted)', fontSize: '0.9rem', lineHeight: 1.7, marginBottom: '1.25rem' }}>{post.description}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700))', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <span style={{ color: '#fff', fontWeight: 700, fontSize: '0.75rem' }}>PK</span>
        </div>
        <div>
          <div style={{ fontSize: '0.8125rem', fontWeight: 600 }}>{post.author}</div>
          <div style={{ fontSize: '0.75rem', color: 'var(--color-muted)' }}>{post.date} · {post.authorRole}</div>
        </div>
      </div>
    </div>
  );
}

function PostContent({ post }) {
  return (
    <div style={{ maxWidth: '680px', margin: '0 auto', padding: '2rem 1.5rem 6rem' }}>
      <button onClick={() => navigate('/blog')}
        style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--color-muted)', background: 'none', border: 'none', cursor: 'pointer', fontSize: '0.875rem', marginBottom: '2.5rem', padding: 0 }}
        onMouseEnter={e => e.currentTarget.style.color = 'var(--color-text)'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--color-muted)'}
      >
        ← Back to blog
      </button>

      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
        <span className="badge badge-brand">{post.category}</span>
        <span className="badge badge-muted">{post.readTime} read</span>
      </div>

      <h1 style={{ fontSize: 'clamp(1.75rem, 4vw, 2.5rem)', fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.15, marginBottom: '1.25rem' }}>{post.title}</h1>
      <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', marginBottom: '1.75rem', lineHeight: 1.7 }}>{post.description}</p>

      <div style={{ display: 'flex', alignItems: 'center', gap: '0.875rem', paddingBottom: '2rem', borderBottom: '1px solid var(--color-border)', marginBottom: '2.5rem' }}>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ color: '#fff', fontWeight: 700, fontSize: '0.875rem' }}>PK</span>
        </div>
        <div>
          <div style={{ fontWeight: 600, fontSize: '0.9375rem' }}>{post.author}</div>
          <div style={{ color: 'var(--color-muted)', fontSize: '0.8125rem' }}>{post.date} · {post.authorRole}</div>
        </div>
      </div>

      <div className="prose">
        {post.content.map((block, i) => {
          if (block.type === 'h2') return <h2 key={i}>{block.text}</h2>;
          if (block.type === 'p') return <p key={i}>{block.text}</p>;
          return null;
        })}
      </div>
    </div>
  );
}

const POSTS = [POST];

function BlogPage() {
  const route = usePathRoute();
  const slug = route.startsWith('/blog/') ? route.slice(6) : null;
  const activePost = slug ? POSTS.find(p => p.slug === slug) : null;

  if (activePost) {
    useSEO(activePost.title + ' — Vela Blog', activePost.description);
    return (
      <div style={{ paddingTop: '64px', minHeight: '100vh', background: 'var(--color-bg)' }}>
        <PostContent post={activePost} />
      </div>
    );
  }

  useSEO("Blog — Vela Runtime", "Latest updates and engineering deep-dives from Vela.");
  return (
    <div style={{ paddingTop: '64px', minHeight: '100vh', background: 'var(--color-bg)' }}>
      <div style={{ padding: '5rem 0 3rem', textAlign: 'center' }} className="bg-hero-glow">
        <div className="container">
          <AnimEl>
            <h1 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 800, letterSpacing: '-0.03em', marginBottom: '0.75rem' }}>Vela Blog</h1>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem' }}>
              Engineering insights, product updates, and security deep-dives.
            </p>
          </AnimEl>
        </div>
      </div>

      <div className="container" style={{ maxWidth: '860px', padding: '3rem 1.5rem 6rem' }}>
        {POSTS.map((post, i) => (
          <AnimEl key={post.slug} delay={i + 1}>
            <BlogCard post={post} onClick={() => navigate('/blog/' + post.slug)} />
          </AnimEl>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { BlogPage });

