Integrations 2

"use client"

import { cn } from "cn"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Icons } from "@/components/ui/icons"
import { ArrowRightIcon } from 'lucide-react'

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.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 gap-4 md:gap-8">
        <header className="flex flex-col items-center gap-2 text-center">
          <Badge
            variant="secondary"
            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">
            Your tools, unified
          </h1>
          <p className="text-sm text-muted-foreground sm:text-base">
            Connect effortlessly with industry-leading platforms. Zero
            configuration headaches, no unexpected costs.
          </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((group) => (
            <li key={group[0].label} className="min-w-0 flex-1">
              <ul className="flex list-none flex-col gap-1.5 sm:gap-3">
                {group.map((integration) => (
                  <li key={integration.label}>
                    <IntegrationIcon>
                      <integration.icon aria-hidden="true" />
                    </IntegrationIcon>
                    <span className="sr-only">{integration.label}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>

        <Button
          variant="link"
          className="group/arrow p-0 text-xs sm:text-sm md:text-base"
        >
          View all integrations
          <ArrowRightIcon  data-icon="inline-end" className="transition-transform duration-150 group-hover/arrow:translate-x-0.5 group-active/arrow:translate-x-0.5" />
        </Button>
      </div>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "group/icon flex aspect-square w-full rounded-xl bg-card shadow-elevated-2xs transition-shadow duration-300 hover:shadow-elevated-sm active:shadow-elevated-sm sm:rounded-2xl md:rounded-3xl lg:rounded-4xl",
        className
      )}
    >
      <div className="m-auto size-1/2 *:size-full *:transition-transform *:duration-300 group-hover/icon:*:scale-110 group-active/icon:*:scale-110">
        {children}
      </div>
    </div>
  )
}