import Image from 'next/image'

const agents = [
  { name: 'Claude Code', icon: '/agents/anthropics.png', url: 'https://docs.anthropic.com/en/docs/claude-code' },
  { name: 'Codex', icon: '/agents/openai.png', url: 'https://github.com/openai/codex' },
  { name: 'Cursor', icon: '/agents/getcursor.png', url: 'https://cursor.com' },
  { name: 'Aider', icon: '/agents/aider-ai.png', url: 'https://aider.chat' },
  { name: 'Goose', icon: '/agents/block.png', url: 'https://github.com/block/goose' },
  { name: 'Amp', icon: '/agents/sourcegraph.png', url: 'https://ampcode.com' },
  { name: 'Gemini CLI', icon: '/agents/google-gemini.png', url: 'https://github.com/google-gemini/gemini-cli' },
  { name: 'Cline', icon: '/agents/cline.png', url: 'https://cline.bot' },
  { name: 'OpenCode', icon: '/agents/nicepkg.png', url: 'https://opencode.ai/' },
  { name: 'Copilot', icon: '/agents/github.png', url: 'https://github.com/features/copilot' },
]

export function Agents() {
  return (
    <section className="py-24 px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl mb-12">
          <span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
            Compatibility
          </span>
          <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
            Works with every agent.
          </h2>
          <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
            Greywall sits under the agent process. If the tool runs locally, it can run inside the same filesystem and network boundaries without agent-specific setup.
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3">
          {agents.map((agent) => (
            <a
              key={agent.name}
              href={agent.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
            >
              <Image
                src={agent.icon}
                alt={agent.name}
                width={28}
                height={28}
                className="rounded-md shrink-0 bg-muted"
              />
              <span className="text-sm font-sans font-medium text-foreground group-hover:text-primary truncate transition-colors">
                {agent.name}
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  )
}
