// pages/home-bottom.jsx — Code Demo + Testimonials + OpenSource + CTA

const DEMO_TABS = [
  {
    label: 'Install', lang: 'bash',
    code: `# Rust daemon + CLI
cargo install vela-engine

# Python client
pip install vela-agent`,
  },
  {
    label: 'Generate token', lang: 'bash',
    code: `export VELA_TOKEN_SECRET="$(openssl rand -hex 32)"

vela aegis-generate-token \\
  --allow-file /tmp \\
  --allow-network false \\
  --max-memory-mb 128 \\
  --max-timeout-ms 10000 \\
  --expires-in-seconds 86400 \\
  > /tmp/my-token.json`,
  },
  {
    label: 'Start daemon', lang: 'bash',
    code: `# With Firecracker (production)
vela daemon \\
  --rootfs /opt/vela/rootfs.ext4 \\
  --kernel /opt/vela/vmlinux.bin \\
  --pool-size 4 \\
  --telemetry-log /var/log/vela/telemetry.jsonl

# No KVM? Use --no-vm for dev:
vela daemon --no-vm`,
  },
  {
    label: 'Run code', lang: 'python',
    code: `from aegis_agent import DaemonClient

client = DaemonClient(
    socket_path="/tmp/velad.sock",
    token_file="/tmp/my-token.json",
)

result = client.execute(["python3", "-c",
    "print(sum(range(1_000_000)))"])

print(result.stdout)       # 499999500000
print(result.return_code)  # 0`,
  },
];

function CodeDemoSection() {
  return (
    <section style={{ padding: '7rem 0', background: 'var(--color-surface)' }}>
      <div className="container" style={{ maxWidth: '860px' }}>
        <AnimEl style={{ marginBottom: '3rem' }}>
          <SectionHeader
            eyebrow="Quickstart"
            title="From zero to sandboxed<br/>in 60 seconds"
            sub="Five commands. One Python import. You're running inside a Firecracker micro-VM."
          />
        </AnimEl>

        <AnimEl delay={1}>
          <TabbedCode tabs={DEMO_TABS} />
        </AnimEl>

        <AnimEl delay={2} style={{ textAlign: 'center', marginTop: '2rem' }}>
          <Btn variant="ghost" size="md" to="/docs" style={{ gap: '0.375rem' }}>
            <IcoBookOpen size={15} /> Read the full docs →
          </Btn>
        </AnimEl>
      </div>
    </section>
  );
}

const TESTIMONIALS = [
  {
    quote: "Finally a sane answer to 'where does AI-generated code run?'. Vela gave us audit logs, rate limits, and Firecracker isolation in a single open-source package.",
    name: 'Arjun Mehta',
    role: 'Staff Engineer, NovaMind AI',
  },
  {
    quote: "We replaced a 300-line Docker orchestration script with a single AegisPythonREPL call. The LangChain adapter is truly plug-and-play.",
    name: 'Sarah Chen',
    role: 'ML Platform Lead, DataWeave',
  },
  {
    quote: "The policy engine is underrated. We blocked a whole class of prompt injection attacks by adding three lines to our YAML deny list.",
    name: 'Marcus Okonkwo',
    role: 'Security Architect, FinGuard',
  },
];

function TestimonialsSection() {
  return (
    <section style={{ padding: '7rem 0', background: 'var(--color-bg)' }}>
      <div className="container">
        <AnimEl style={{ marginBottom: '3.5rem' }}>
          <SectionHeader
            eyebrow="Community"
            title="What developers are saying"
          />
        </AnimEl>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.25rem' }}>
          {TESTIMONIALS.map(({ quote, name, role }, i) => (
            <AnimEl key={name} delay={i + 1}>
              <div style={{
                background: 'var(--color-surface)',
                border: '1px solid var(--color-border)',
                borderRadius: 'var(--radius-lg)', padding: '1.75rem',
                display: 'flex', flexDirection: 'column', gap: '1rem',
                height: '100%', boxSizing: 'border-box',
              }}>
                {/* Stars */}
                <div style={{ display: 'flex', gap: '3px' }}>
                  {[...Array(5)].map((_, i) => (
                    <IcoStar key={i} size={13} style={{ color: 'var(--color-amber)', fill: 'var(--color-amber)' }} />
                  ))}
                </div>
                <p style={{ color: 'var(--color-text)', fontSize: '0.9375rem', lineHeight: 1.75, margin: 0, flex: 1 }}>
                  "{quote}"
                </p>
                <div>
                  <div style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--color-brand-400)' }}>{name}</div>
                  <div style={{ fontSize: '0.8125rem', color: 'var(--color-muted)' }}>{role}</div>
                </div>
              </div>
            </AnimEl>
          ))}
        </div>
      </div>
    </section>
  );
}

function OpenSourceSection() {
  return (
    <section style={{ padding: '5rem 0', background: 'var(--color-surface)' }}>
      <div className="container">
        <AnimEl>
          <div style={{
            background: 'rgba(99,102,241,0.05)',
            border: '1px solid rgba(99,102,241,0.18)',
            borderRadius: 'var(--radius-xl)', padding: 'clamp(2rem, 5vw, 3.5rem)',
            textAlign: 'center',
          }}>
            <span className="badge badge-brand" style={{ marginBottom: '1.25rem' }}>100% open source · MIT License</span>
            <h2 style={{ fontSize: 'clamp(1.5rem, 4vw, 2.25rem)', fontWeight: 700, marginBottom: '0.875rem' }}>
              Vela is free forever for self-hosting.
            </h2>
            <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', maxWidth: '480px', margin: '0 auto 2.25rem', lineHeight: 1.7 }}>
              Read the code. Audit it. Contribute to it. Use it in commercial products without restrictions.
            </p>

            <div style={{ display: 'flex', gap: '0.875rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '2rem' }}>
              <Btn variant="primary" size="lg" href="https://github.com/karnati-praveen/VELA">
                <IcoGithub size={16} /> View on GitHub →
              </Btn>
              <Btn variant="secondary" size="lg" to="/docs">Read the docs</Btn>
            </div>

            <div style={{ display: 'flex', gap: '2.5rem', justifyContent: 'center', flexWrap: 'wrap' }}>
              {[
                { label: 'License', value: 'MIT' },
                { label: 'Version', value: 'v0.1.0' },
                { label: 'Frameworks', value: '6+' },
                { label: 'Contributors', value: 'Open' },
              ].map(({ label, value }) => (
                <div key={label} style={{ textAlign: 'center' }}>
                  <div style={{ fontWeight: 700, fontSize: '1.375rem', color: 'var(--color-text)', fontFamily: 'var(--font-mono)' }}>{value}</div>
                  <div style={{ fontSize: '0.8125rem', color: 'var(--color-muted)', marginTop: '0.2rem' }}>{label}</div>
                </div>
              ))}
            </div>
          </div>
        </AnimEl>
      </div>
    </section>
  );
}

function CTASection() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');

  const submit = (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus('loading');
    setTimeout(() => setStatus('success'), 1200);
  };

  return (
    <section style={{ padding: '7rem 0' }} className="bg-section-glow">
      <div className="container" style={{ textAlign: 'center', maxWidth: '640px' }}>
        <AnimEl>
          <h2 style={{ fontSize: 'clamp(1.75rem, 5vw, 2.75rem)', fontWeight: 800, letterSpacing: '-0.025em', marginBottom: '1rem' }}>
            Run code safely.<br />Starting today.
          </h2>
          <p style={{ color: 'var(--color-muted)', fontSize: '1.0625rem', lineHeight: 1.7, marginBottom: '2.5rem' }}>
            Self-host in 5 minutes with the open-source version.
            Or join the cloud waitlist for managed infrastructure.
          </p>

          <div style={{ display: 'flex', gap: '0.875rem', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '2.5rem' }}>
            <Btn variant="primary" size="xl" to="/docs">Get started →</Btn>
            <Btn variant="secondary" size="xl" href="https://github.com/karnati-praveen/VELA">
              <IcoGithub size={17} /> View on GitHub
            </Btn>
          </div>

          {/* Waitlist form */}
          <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: '2.5rem' }}>
            <p style={{ color: 'var(--color-muted)', fontSize: '0.875rem', marginBottom: '1rem' }}>
              Join the cloud waitlist — get early access when it launches.
            </p>
            {status === 'success' ? (
              <p style={{ color: 'var(--color-green)', fontSize: '0.9375rem', fontWeight: 500 }}>
                ✅ You're on the list! We'll email you when cloud is ready.
              </p>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', gap: '0.625rem', maxWidth: '400px', margin: '0 auto', flexWrap: 'wrap', justifyContent: 'center' }}>
                <input
                  type="email" placeholder="your@email.com" required
                  value={email} onChange={e => setEmail(e.target.value)}
                  style={{
                    flex: '1 1 200px', minWidth: 0,
                    background: 'var(--color-surface)', border: '1px solid var(--color-border)',
                    borderRadius: 'var(--radius-md)', padding: '0.625rem 1rem',
                    fontSize: '0.9rem', color: 'var(--color-text)', fontFamily: 'var(--font-sans)',
                    outline: 'none',
                  }}
                  onFocus={e => e.target.style.borderColor = 'var(--color-brand-500)'}
                  onBlur={e => e.target.style.borderColor = 'var(--color-border)'}
                />
                <Btn variant="primary" size="md" type="submit" disabled={status === 'loading'}>
                  {status === 'loading' ? 'Joining…' : 'Join waitlist →'}
                </Btn>
              </form>
            )}
          </div>
        </AnimEl>
      </div>
    </section>
  );
}

Object.assign(window, { CodeDemoSection, TestimonialsSection, OpenSourceSection, CTASection });