'use client';

const integrations = [
  'Daytona',
  'E2B',
  'AI SDK',
  'Anthropic',
  'OpenAI',
  'Docker',
  'Fly.io',
  'AWS Nitro',
  'Postgres',
  'ClickHouse',
  'Rivet',
];

export function Integrations() {
  return (
    <section id="integrations" className="py-24 bg-zinc-900/20 border-t border-white/5 relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-6 text-center">
        <h2 className="text-3xl font-bold text-white mb-6">Works with your stack</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {integrations.map((item) => (
            <div
              key={item}
              className="h-16 flex items-center justify-center rounded-xl border border-white/5 bg-zinc-900/50 text-zinc-300 font-mono text-sm hover:border-accent/40 hover:text-accent transition-all cursor-default"
            >
              {item}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}