// pages/about.jsx

const VALUES = [
  { n: '01', title: 'Security is not optional', desc: 'Vela fails closed by default, everywhere. Sensible defaults over flexible footguns. If it can be exploited, it should be locked by default.' },
  { n: '02', title: 'Open by default', desc: 'MIT licensed. Read the code. Audit it. Run it yourself. The security story only works if you can verify it independently.' },
  { n: '03', title: 'Developer experience matters', desc: 'One import, five minutes to running. That\'s the bar. Security tooling has a reputation for being painful — we\'re fixing that.' },
  { n: '04', title: 'Honest about tradeoffs', desc: 'We document what Vela does not do as clearly as what it does. Read the security page. It tells you what we can\'t protect against.' },
];

function AboutPage() {
  useSEO("About — Vela Runtime", "Learn more about the Vela project and team.");
  return (
    <div style={{ paddingTop: '64px', minHeight: '100vh', background: 'var(--color-bg)' }}>
      {/* Hero */}
      <div style={{ padding: '5rem 0 4rem', textAlign: 'center' }} className="bg-hero-glow">
        <div className="container" style={{ maxWidth: '680px' }}>
          <AnimEl>
            <span className="badge badge-brand" style={{ marginBottom: '1.5rem' }}>About</span>
            <h1 style={{ fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.15, marginBottom: '1.25rem' }}>
              We're building the execution layer the AI era deserves.
            </h1>
          </AnimEl>
        </div>
      </div>

      <div className="container" style={{ maxWidth: '760px', padding: '2rem 1.5rem 6rem' }}>

        {/* Story */}
        <AnimEl style={{ marginBottom: '5rem' }}>
          <div style={{ borderLeft: '3px solid var(--color-brand-500)', paddingLeft: '2rem' }}>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', lineHeight: 1.85, marginBottom: '1.25rem' }}>
              Vela started as a weekend project after I got burned deploying an AI coding agent that ran user-submitted Python on the host machine. One jailbroken prompt later, the server was exfiltrating environment variables.
            </p>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', lineHeight: 1.85, marginBottom: '1.25rem' }}>
              I looked for a solution. There wasn't one that was simultaneously fast enough for production, auditable enough for security teams, and simple enough to integrate in an afternoon.
            </p>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', lineHeight: 1.85 }}>
              So I built it. Vela is the execution layer I wish had existed — open source, MIT licensed, and designed from the ground up for the AI agent use case.
            </p>
          </div>
        </AnimEl>

        {/* Values */}
        <AnimEl style={{ marginBottom: '5rem' }}>
          <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '2rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.75rem' }}>What we believe</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
            {VALUES.map((v, i) => (
              <AnimEl key={v.n} delay={i + 1} style={{ display: 'flex', gap: '1.5rem' }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: '0.75rem', fontWeight: 700,
                  color: 'var(--color-brand-400)', background: 'rgba(99,102,241,0.08)',
                  border: '1px solid rgba(99,102,241,0.2)',
                  width: 36, height: 36, borderRadius: 'var(--radius-full)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>{v.n}</span>
                <div>
                  <h3 style={{ fontWeight: 600, fontSize: '1.0625rem', marginBottom: '0.375rem' }}>{v.title}</h3>
                  <p style={{ color: 'var(--color-muted)', fontSize: '0.9375rem', lineHeight: 1.7, margin: 0 }}>{v.desc}</p>
                </div>
              </AnimEl>
            ))}
          </div>
        </AnimEl>

        {/* Founder */}
        <AnimEl style={{ marginBottom: '5rem' }}>
          <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '2rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.75rem' }}>The team</h2>
          <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', padding: '1.75rem' }}>
            <div style={{ width: 64, height: 64, borderRadius: 'var(--radius-full)', 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: '1.25rem', fontFamily: 'var(--font-mono)' }}>PK</span>
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: '1.0625rem', marginBottom: '0.25rem' }}>Praveen Karnati</div>
              <div style={{ color: 'var(--color-brand-400)', fontSize: '0.875rem', marginBottom: '0.75rem' }}>Founder</div>
              <p style={{ color: 'var(--color-muted)', fontSize: '0.9rem', lineHeight: 1.7, margin: 0 }}>
                Former infrastructure engineer. Spent years building systems that run untrusted code. Built Vela after one too many "how did that exec() get through?" incidents. Believes Rust is the right tool for execution runtimes and that security tooling shouldn't make developers miserable.
              </p>
            </div>
          </div>
        </AnimEl>

        {/* Open source */}
        <AnimEl>
          <div style={{ background: 'rgba(99,102,241,0.05)', border: '1px solid rgba(99,102,241,0.2)', borderRadius: 'var(--radius-lg)', padding: '2rem', textAlign: 'center' }}>
            <h2 style={{ fontWeight: 700, fontSize: '1.25rem', marginBottom: '0.75rem' }}>Vela is built in the open.</h2>
            <p style={{ color: 'var(--color-muted)', fontSize: '0.9375rem', marginBottom: '1.75rem' }}>
              MIT licensed. Read the code. Audit it. Contribute to it.
            </p>
            <div style={{ display: 'flex', gap: '0.875rem', justifyContent: 'center', flexWrap: 'wrap' }}>
              <Btn variant="primary" size="md" href="https://github.com/karnati-praveen/VELA">
                <IcoGithub size={15} /> GitHub
              </Btn>
              <Btn variant="secondary" size="md" href="https://github.com/karnati-praveen/VELA/discussions">
                Discussions
              </Btn>
              <Btn variant="secondary" size="md" href="https://github.com/karnati-praveen/VELA/blob/main/CONTRIBUTING.md">
                Contributing guide
              </Btn>
            </div>
          </div>
        </AnimEl>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage });