Integrations 18

"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[] = [
  { label: "GitHub", icon: Icons.GitHub },
  { label: "Next.js", icon: Icons.Nextjs },
  { label: "React", icon: Icons.React },
  { label: "OpenAI", icon: Icons.OpenAI },
  { label: "diarmuradi", icon: Icons.Logo },
  { label: "Gemini", icon: Icons.Gemini },
  { label: "Cursor", icon: Icons.Cursor },
  { label: "Tailwind CSS", icon: Icons.Tailwind },
  { label: "Replit", icon: Icons.Replit },
]

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="flex max-w-md flex-col items-start gap-5">
          <p className="text-sm font-medium text-muted-foreground">
            Integrations
          </p>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Build on the tools you believe in.
          </h1>
          <p className="text-base text-pretty text-muted-foreground">
            A thoughtful home for your whole stack. Every connection brings your
            next idea a little closer.
          </p>
          <FancyButton
            size="lg"
            render={<Link href="#integration-landscape" role="link" />}
          >
            Find your foundation
          </FancyButton>
        </header>

        <div id="integration-landscape">
          <svg viewBox="0 42 720 408" className="w-full" aria-hidden="true">
            {integrations
              .map((tile, index) => {
                const u = ((index % 3) - 1) * 152
                const v = (Math.floor(index / 3) - 1) * 152
                return {
                  ...tile,
                  x: 360 + (u + v) * 0.78,
                  y: 246 + (v - u) * 0.42,
                }
              })
              .sort((a, b) => a.y - b.y)
              .map(({ label, icon: Icon, x, y }) => (
                <g
                  key={label}
                  data-slot="isometric-tile"
                  transform={`translate(${x} ${y})`}
                >
                  <g transform="matrix(0.78 -0.42 0.78 0.42 0 10)">
                    <rect
                      x={-64}
                      y={-64}
                      width={128}
                      height={128}
                      rx={22}
                      fill="none"
                      className="stroke-border/50"
                      vectorEffect="non-scaling-stroke"
                    />
                  </g>
                  <g transform="matrix(0.78 -0.42 0.78 0.42 0 0)">
                    <foreignObject
                      x={-64}
                      y={-64}
                      width={128}
                      height={128}
                      overflow="visible"
                    >
                      <div className="flex size-full items-center justify-center rounded-3xl bg-card text-foreground shadow-elevated-sm">
                        <Icon className="h-auto w-16" aria-hidden="true" />
                      </div>
                    </foreignObject>
                  </g>
                </g>
              ))}
          </svg>
          <p className="sr-only">
            {integrations.map((tile) => tile.label).join(", ")}
          </p>
        </div>
      </div>
    </section>
  )
}