Integrations 4

"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>>
  x: number
  y: number
  rotation: number
}

const integrations: IntegrationItem[] = [
  { label: "OpenAI", icon: Icons.OpenAI, x: 28, y: 20, rotation: 14 },
  { label: "React", icon: Icons.React, x: 60, y: 19, rotation: 12 },
  { label: "Next.js", icon: Icons.Nextjs, x: 86, y: 37, rotation: 16 },
  { label: "GitHub", icon: Icons.GitHub, x: 49, y: 49, rotation: 9 },
  {
    label: "VS Code",
    icon: Icons.VisualStudioCode,
    x: 17,
    y: 60,
    rotation: -12,
  },
  { label: "n8n", icon: Icons.N8n, x: 77, y: 72, rotation: 14 },
  { label: "Gemini", icon: Icons.Gemini, x: 45, y: 81, rotation: -9 },
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="@container mx-auto w-full max-w-6xl px-6 py-16 lg:py-24"
    >
      <div className="grid items-center gap-12 @3xl:grid-cols-2 @3xl:gap-8">
        <header className="flex max-w-md flex-col items-start gap-5">
          <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">
            Tools that
            <br />
            work together.
          </h1>
          <p className="max-w-sm text-base text-pretty text-muted-foreground">
            Connect, automate, and keep everything in sync. Your favorite tools,
            all in one workflow.
          </p>
          <FancyButton
            size="lg"
            render={<Link href="#floating-integrations" role="link" />}
          >
            View all integrations
          </FancyButton>
        </header>
        <ul
          id="floating-integrations"
          aria-label="Connected tools"
          className="relative mx-auto aspect-6/5 w-full max-w-xl"
        >
          {integrations.map(({ label, icon: Icon, x, y, rotation }) => (
            <li
              key={label}
              className="absolute flex aspect-square w-[23%] items-center justify-center rounded-3xl bg-card shadow-elevated-sm"
              style={{
                left: `${x}%`,
                top: `${y}%`,
                transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
              }}
            >
              <Icon className="size-2/5" aria-hidden="true" />
              <span className="sr-only">{label}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}