Integrations 7

"use client"

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

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

const integrations: IntegrationItem[] = [
  { label: "OpenAI", icon: Icons.OpenAI },
  { label: "VS Code", icon: Icons.VisualStudioCode },
  { label: "Gemini", icon: Icons.Gemini },
  { label: "Cursor", icon: Icons.Cursor },
  { label: "Replit", icon: Icons.Replit },
  { label: "GitHub", icon: Icons.GitHub },
]

const vertices = Array.from({ length: 6 }, (_, index) => ({
  x: Math.cos((index * Math.PI) / 3) * 90,
  y: Math.sin((index * Math.PI) / 3) * 90,
}))
const corners = vertices.map((vertex, index) => {
  const previous = vertices[(index + 5) % 6]
  const next = vertices[(index + 1) % 6]
  return {
    x: vertex.x,
    y: vertex.y,
    entryX: vertex.x + (previous.x - vertex.x) / 9,
    entryY: vertex.y + (previous.y - vertex.y) / 9,
    exitX: vertex.x + (next.x - vertex.x) / 9,
    exitY: vertex.y + (next.y - vertex.y) / 9,
  }
})
const hexagon =
  corners
    .map(
      (corner, index) =>
        `${index === 0 ? "M" : "L"}${corner.entryX.toFixed(3)} ${corner.entryY.toFixed(3)}Q${corner.x.toFixed(3)} ${corner.y.toFixed(3)} ${corner.exitX.toFixed(3)} ${corner.exitY.toFixed(3)}`
    )
    .join(" ") + "Z"
const centerDistance = 90 * Math.sqrt(3) + 16

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-10 @3xl:grid-cols-2 @3xl:gap-16">
        <header className="order-2 flex max-w-md flex-col items-start gap-5 @3xl:col-start-2 @3xl:row-start-1">
          <p className="text-xs font-medium tracking-widest text-muted-foreground uppercase">
            Integrations
          </p>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Everything
            <br />
            connected.
          </h1>
          <p className="text-base text-pretty text-muted-foreground">
            One home for the tools that power your ideas. A connected system,
            with room for every part of your process.
          </p>
        </header>
        <div className="min-w-0 @3xl:col-start-1 @3xl:row-start-1">
          <svg viewBox="0 0 600 600" className="w-full" aria-hidden="true">
            {[
              ...integrations.map((tool, index) => ({
                ...tool,
                x:
                  300 +
                  Math.cos(((index * 60 - 90) * Math.PI) / 180) *
                    centerDistance,
                y:
                  300 +
                  Math.sin(((index * 60 - 90) * Math.PI) / 180) *
                    centerDistance,
              })),
              { label: "diarmuradi", icon: Icons.Logo, x: 300, y: 300 },
            ].map(({ label, icon: Icon, x, y }) => (
              <g
                key={label}
                data-slot="hexagon-tile"
                transform={`translate(${x.toFixed(3)} ${y.toFixed(3)})`}
              >
                <path
                  d={hexagon}
                  className="fill-none stroke-border/50"
                  strokeWidth={1}
                />
                <foreignObject x={-32} y={-32} width={64} height={64}>
                  <div className="flex size-full items-center justify-center">
                    <Icon className="h-auto w-full" />
                  </div>
                </foreignObject>
              </g>
            ))}
          </svg>
          <p className="sr-only">
            {integrations.map((tool) => tool.label).join(", ")}, connected
            through diarmuradi.
          </p>
        </div>
      </div>
    </section>
  )
}