Integrations 17

"use client"

import { useId } from "react"

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

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

const integrations: IntegrationItem[] = [
  { label: "GitHub", icon: Icons.GitHub, x: 84, y: 241, lean: 0.3 },
  { label: "OpenAI", icon: Icons.OpenAI, x: 232, y: 241, lean: -0.3 },
  { label: "Gemini", icon: Icons.Gemini, x: 528, y: 241, lean: 0.3 },
  {
    label: "VS Code",
    icon: Icons.VisualStudioCode,
    x: 676,
    y: 241,
    lean: -0.3,
  },
]

const panels = [
  "M10 105L158 149V377L10 333Z",
  "M158 149L306 105V333L158 377Z",
  "M306 105H454V333H306Z",
  "M454 105L602 149V377L454 333Z",
  "M602 149L750 105V333L602 377Z",
]

const iconSize = 52

export function Integration() {
  const id = useId().replace(/:/g, "")
  const half = iconSize / 2

  return (
    <section
      aria-label="Integrations"
      className="mx-auto flex w-full max-w-5xl flex-col items-center gap-12 px-6 py-16 lg:py-24"
    >
      <header className="order-2 flex max-w-xl flex-col items-center gap-5 text-center">
        <p className="text-sm font-medium text-muted-foreground">
          A broader perspective
        </p>
        <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
          Unfold your
          <br />
          next idea.
        </h1>
        <p className="max-w-sm text-pretty text-muted-foreground">
          Keep the tools you love in the picture. Everything opens up when your
          workflow comes together.
        </p>
      </header>
      <svg
        data-slot="integration-graphic"
        viewBox="0 72 760 330"
        className="w-full max-w-3xl"
        role="img"
        aria-label={`Connected tools: ${integrations.map((tool) => tool.label).join(", ")}.`}
      >
        <defs>
          <linearGradient id={id}>
            <stop stopColor="var(--card)" />
            <stop offset="1" stopColor="var(--muted)" />
          </linearGradient>
        </defs>
        <g transform="translate(0 10)">
          {panels.map((path) => (
            <path
              key={path}
              d={path}
              className="fill-none stroke-border/50"
              vectorEffect="non-scaling-stroke"
            />
          ))}
        </g>
        {panels.map((path, index) => (
          <path
            key={path}
            d={path}
            fill={index % 2 === 0 ? `url(#${id})` : "var(--card)"}
            className="stroke-border/50"
            vectorEffect="non-scaling-stroke"
          />
        ))}
        {integrations.map(({ label, icon: Icon, x, y, lean }) => (
          <g key={label} transform={`matrix(1 ${lean} 0 1 ${x} ${y})`}>
            <foreignObject
              x={-half}
              y={-half}
              width={iconSize}
              height={iconSize}
              overflow="visible"
            >
              <div className="flex size-full items-center justify-center text-foreground">
                <Icon className="size-10" aria-hidden="true" />
              </div>
            </foreignObject>
          </g>
        ))}
        <foreignObject x={340} y={189} width={80} height={60}>
          <div className="flex size-full items-center justify-center">
            <Icons.Logo
              className="h-auto w-16 text-primary"
              aria-hidden="true"
            />
          </div>
        </foreignObject>
        <path
          d="M342 119H418M342 319H418"
          className="stroke-primary/40"
          strokeLinecap="round"
          vectorEffect="non-scaling-stroke"
        />
      </svg>
    </section>
  )
}