import { Server, Code, Cpu, Terminal, FlaskConical, Link2 } from 'lucide-react';

const tools = [
  { icon: Server, text: 'REST API', color: 'text-cyan-400' },
  { icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' },
  { icon: Cpu, text: 'MCP Server', color: 'text-purple-400' },
  { icon: Terminal, text: 'CLI', color: 'text-green-400' },
  { icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' },
  { icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true },
];

export function IntegrationsSection() {
  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
        <p className="text-gray-400 mb-12 max-w-2xl mx-auto">
          Use what fits your workflow. All methods, same capabilities.
        </p>

        <div className="flex flex-wrap justify-center gap-4 mb-8">
          {tools.map((tool, i) => (
            <div
              key={i}
              className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
                tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
              }`}
            >
              <tool.icon className={`w-5 h-5 ${tool.color}`} />
              <span>{tool.text}</span>
            </div>
          ))}
        </div>

        <div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
          <p className="text-sm text-gray-400">
            <strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
            API. Generate images, build flows, browse your gallery, and explore all capabilities
            with ready-to-use code snippets.
          </p>
        </div>

        <p className="text-gray-500 text-sm mt-6">
          Perfect for Claude Code, Cursor, and any AI-powered workflow.
        </p>
      </div>
    </section>
  );
}