Integrations 6

"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>>
}

const integrations: IntegrationItem[] = [
  { icon: Icons.Cursor, label: "Cursor" },
  { icon: Icons.GitHub, label: "GitHub" },
  { icon: Icons.Gemini, label: "Gemini" },
  { icon: Icons.Anthropic, label: "Anthropic" },
  { icon: Icons.OpenAI, label: "OpenAI" },
]

const segmentPath =
  "M 291.916 7.000 Q 309.921 7.000 308.990 25.000 A 310 310 0 0 1 264.673 161.395 Q 254.846 176.504 240.280 165.921 L 154.485 103.587 Q 139.911 92.999 149.096 77.423 A 168 168 0 0 0 166.129 25.000 Q 167.854 7.000 185.868 7.000 Z"

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-4 py-12 sm:px-6 sm:py-16 lg:py-24"
    >
      <header className="flex max-w-xl flex-col items-center gap-4 text-center">
        <p className="text-sm font-medium text-muted-foreground">
          Integrations
        </p>
        <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
          Everything works better together.
        </h1>
        <p className="text-base text-pretty text-muted-foreground">
          Connect your favorite tools and give every part of your workflow a
          place.
        </p>
        <FancyButton
          size="lg"
          render={<Link href="#integration-arc" role="link" />}
        >
          Explore integrations
        </FancyButton>
      </header>
      <div id="integration-arc" className="w-full max-w-3xl scroll-mt-8">
        <svg viewBox="0 0 680 412" className="w-full" aria-hidden="true">
          <g transform="translate(340 84)">
            {integrations.map(({ icon: Icon, label }, index) => {
              const angle = ((index + 0.5) * Math.PI) / integrations.length
              return (
                <g key={label}>
                  <path
                    d={segmentPath}
                    transform={`rotate(${(index * 180) / integrations.length})`}
                    className="fill-none stroke-border/50"
                    vectorEffect="non-scaling-stroke"
                  />
                  <foreignObject
                    x={Math.cos(angle) * 239 - 32}
                    y={Math.sin(angle) * 239 - 32}
                    width={64}
                    height={64}
                  >
                    <div className="flex size-full items-center justify-center">
                      <Icon className="size-full" aria-hidden="true" />
                    </div>
                  </foreignObject>
                </g>
              )
            })}
          </g>
          <foreignObject
            x={256}
            y={0}
            width={168}
            height={168}
            overflow="visible"
          >
            <div className="flex size-full items-center justify-center rounded-full border border-border/50">
              <Icons.Logo className="h-auto w-24 text-primary" />
            </div>
          </foreignObject>
        </svg>
        <p className="sr-only">
          {integrations
            .toReversed()
            .map((tool) => tool.label)
            .join(", ")}
        </p>
      </div>
    </section>
  )
}