Integrations Grid

import { Badge, Button } from "@cooud-ui/ui";
import {
  Check,
  CreditCard,
  Figma,
  FileText,
  Github,
  MessageSquare,
  Slack,
  SquareKanban,
  Triangle,
} from "lucide-react";

const INTEGRATIONS = [
  {
    icon: Slack,
    name: "Slack",
    description: "Route alerts and approvals into any channel.",
    connected: true,
  },
  {
    icon: Github,
    name: "GitHub",
    description: "Sync issues, PRs, and deploy statuses.",
    connected: true,
  },
  {
    icon: Figma,
    name: "Figma",
    description: "Embed live design files next to specs.",
    connected: false,
  },
  {
    icon: SquareKanban,
    name: "Linear",
    description: "Create issues from feedback in one click.",
    connected: false,
  },
  {
    icon: FileText,
    name: "Notion",
    description: "Publish docs and changelogs automatically.",
    connected: false,
  },
  {
    icon: CreditCard,
    name: "Stripe",
    description: "Reconcile invoices and payout events.",
    connected: true,
  },
  {
    icon: Triangle,
    name: "Vercel",
    description: "Preview every branch before it ships.",
    connected: false,
  },
  {
    icon: MessageSquare,
    name: "Discord",
    description: "Keep your community in the release loop.",
    connected: false,
  },
] as const;

export function IntegrationsGridBlock() {
  return (
    <section aria-labelledby="integrations-heading" className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="secondary">Integrations</Badge>
        <h2
          id="integrations-heading"
          className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg"
        >
          Plays well with your stack
        </h2>
        <p className="mt-4 text-balance text-fg-secondary">
          Connect the tools your team already lives in — two clicks, no glue code, revocable
          anytime.
        </p>
      </div>

      <ul className="mx-auto mt-14 grid max-w-5xl list-none gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {INTEGRATIONS.map((integration) => (
          <li
            key={integration.name}
            className="group flex flex-col gap-4 rounded-2xl border border-border bg-surface-raised p-5 transition-colors hover:border-border-strong hover:bg-surface-overlay"
          >
            <div className="flex items-start justify-between gap-3">
              <span className="grid size-11 shrink-0 place-items-center rounded-xl border border-border bg-surface-inset text-fg-secondary transition-colors group-hover:text-primary">
                <integration.icon aria-hidden="true" className="size-5" />
              </span>
              {integration.connected ? (
                <Badge variant="success">
                  <Check aria-hidden="true" />
                  Connected
                </Badge>
              ) : (
                <Button variant="outline" size="sm">
                  Connect<span className="sr-only"> {integration.name}</span>
                </Button>
              )}
            </div>
            <div className="flex flex-col gap-1">
              <h3 className="font-medium text-fg text-sm">{integration.name}</h3>
              <p className="text-fg-tertiary text-sm">{integration.description}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}