Integrations 5

"use client"

import Link from "next/link"

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

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

const integrations: IntegrationItem[] = [
  { label: "GitHub", icon: Icons.GitHub, height: 78 },
  { label: "Gemini", icon: Icons.Gemini, height: 90 },
  { label: "OpenAI", icon: Icons.OpenAI, height: 76 },
  { label: "VS Code", icon: Icons.VisualStudioCode, height: 64 },
  { label: "Next.js", icon: Icons.Nextjs, height: 75 },
  { label: "React", icon: Icons.React, height: 84 },
  { label: "n8n", icon: Icons.N8n, height: 73 },
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="@container mx-auto flex w-full max-w-5xl flex-col items-center gap-6 px-4 pt-12 pb-4 sm:gap-10 sm:px-6 sm:pt-16 lg:pt-24"
    >
      <header className="flex max-w-xl flex-col items-center gap-4 text-center">
        <p className="rounded-lg bg-card px-3 py-1.5 text-sm font-medium shadow-elevated-sm">
          Integrations
        </p>
        <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
          Seamless integrations for a better workflow.
        </h1>
        <p className="text-base text-pretty text-muted-foreground">
          Connect your favorite tools and focus on what matters.
        </p>
        <FancyButton
          size="lg"
          render={<Link href="#integration-columns" role="link" />}
        >
          View all integrations
        </FancyButton>
      </header>
      <ul
        id="integration-columns"
        aria-label="Connected tools"
        className="grid aspect-2/1 w-full scroll-mt-8 grid-cols-7 items-end gap-[2%] mask-b-from-70% mask-b-to-95% px-1 @sm:aspect-5/2 @lg:aspect-3/1"
      >
        {integrations.map(({ label, icon: Icon, height }) => (
          <li
            key={label}
            className="group/col flex min-w-0 origin-bottom justify-center rounded-t-full bg-card pt-[35%] shadow-elevated-sm transition-transform duration-300 ease-out hover:-translate-y-1.5 hover:scale-y-105 motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-y-100"
            style={{ height: `${height}%` }}
          >
            <Icon
              className="h-auto w-3/5 max-w-9 shrink-0 self-start transition-transform duration-300 group-hover/col:scale-y-[0.95] motion-reduce:transition-none motion-reduce:group-hover/col:scale-y-100"
              aria-hidden="true"
            />
            <span className="sr-only">{label}</span>
          </li>
        ))}
      </ul>
    </section>
  )
}