Integrations 1

"use client"

import { cn } from "cn"

import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

type IntegrationItem = {
  label: string
  icon: React.ComponentType<React.HTMLAttributes<SVGElement>>
}

const columns: IntegrationItem[][] = [
  [{ icon: Icons.Cursor, label: "Cursor" }],
  [
    { icon: Icons.Gemini, label: "Gemini" },
    { icon: Icons.VisualStudioCode, label: "VS Code" },
  ],
  [
    { icon: Icons.Grok, label: "Grok" },
    { icon: Icons.MicrosoftCopilot, label: "Copilot" },
    { icon: Icons.OpenAI, label: "OpenAI" },
  ],
  [
    { icon: Icons.Shadcn, label: "shadcn/ui" },
    { icon: Icons.N8n, label: "n8n" },
  ],
  [
    { icon: Icons.Replit, label: "Replit" },
    { icon: Icons.DeepSeek, label: "DeepSeek" },
    { icon: Icons.Ollama, label: "Ollama" },
  ],
  [
    { icon: Icons.Windsurf, label: "Windsurf" },
    { icon: Icons.Anthropic, label: "Anthropic" },
  ],
  [{ icon: Icons.HumeAI, label: "Hume AI" }],
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="flex items-center justify-center px-4"
    >
      <div className="flex w-full max-w-5xl flex-col items-center gap-8">
        <header className="flex flex-col items-center gap-2 text-center">
          <Badge variant="default" className="h-7 rounded-lg sm:h-8 sm:text-sm">
            Integrations
          </Badge>

          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Connect with the tools you love
          </h1>
          <p className="max-w-lg text-sm text-muted-foreground sm:text-base">
            Drop in your favorite AI tools and editors without touching a config
            file.
          </p>
        </header>

        <ul
          aria-label="Connected tools"
          className="flex w-full max-w-2xl list-none items-center justify-center gap-1.5 sm:gap-3"
        >
          {columns.map((column) => (
            <li key={column[0].label} className="min-w-0 flex-1">
              <ul className="flex list-none flex-col gap-1.5 sm:gap-3">
                {column.map((item) => (
                  <li key={item.label}>
                    <IntegrationIcon>
                      <item.icon aria-hidden="true" />
                    </IntegrationIcon>
                    <span className="sr-only">{item.label}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>

        <FancyButton size="lg">View all integrations</FancyButton>
      </div>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex aspect-square w-full items-center justify-center rounded-full bg-card shadow-elevated-2xs transition-shadow duration-300 hover:shadow-elevated-sm",
        className
      )}
    >
      <div className="flex size-1/2 items-center justify-center *:size-full">
        {children}
      </div>
    </div>
  )
}