Integrations 3

"use client"

import { cn } from "cn"

import { Button } from "@/components/ui/button"
import { Icons } from "@/components/ui/icons"

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

const integrations: 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.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" },
  { icon: Icons.Shadcn, label: "shadcn/ui" },
  { icon: Icons.N8n, label: "n8n" },
  { icon: Icons.Cursor, label: "Cursor 2" },
]

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 gap-6 md:gap-12 lg:flex-row-reverse lg:gap-12">
        <header className="flex shrink-0 flex-col gap-4 lg:max-w-sm">
          <h1 className="text-center text-3xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-start">
            Tool Integrations
          </h1>
          <p className="text-center text-sm text-muted-foreground sm:text-base lg:text-start">
            Zero additional fees, unlimited potential - connect with your
            preferred tools and platforms effortlessly.
          </p>
          <Button
            variant="link"
            className="mt-auto self-center p-0 lg:self-start"
          >
            Access All Integrations
          </Button>
        </header>

        <ul className="grid w-full max-w-md list-none grid-cols-5 gap-2 self-center">
          {integrations.map((integration, index) => (
            <li key={integration.label}>
              <IntegrationIcon muted={index % 2 !== 0}>
                <integration.icon aria-hidden="true" />
              </IntegrationIcon>
              <span className="sr-only">{integration.label}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}

function IntegrationIcon({
  children,
  muted,
  className,
}: {
  children: React.ReactNode
  muted?: boolean
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex aspect-square w-full rounded-2xl transition-shadow duration-300 sm:rounded-4xl",
        muted
          ? null
          : "bg-card shadow-elevated-2xs hover:shadow-elevated-sm active:shadow-elevated-sm",
        className
      )}
    >
      <div className="m-auto size-2/5 *:size-full">{children}</div>
    </div>
  )
}