Integrations 16

"use client"

import { cn } from "cn"

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

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

const integrations: IntegrationItem[] = [
  {
    icon: Icons.MicrosoftCopilot,
    label: "Copilot",
    description: "AI assistant for developer productivity",
    detailedDescription:
      "Boost your coding speed with intelligent code suggestions and completions in real-time.",
  },
  {
    icon: Icons.DeepSeek,
    label: "DeepSeek",
    description: "Enterprise search powered by AI",
    detailedDescription:
      "Unlock deep insights from your integrations with advanced semantic search capabilities.",
  },
  {
    icon: Icons.Replit,
    label: "Replit",
    description: "Collaborative coding environment",
    detailedDescription:
      "Code together in real-time with built-in deployment and instant feedback.",
  },
  {
    icon: Icons.OpenAI,
    label: "OpenAI",
    description: "GPT-powered capabilities",
    detailedDescription:
      "Integrate the power of GPT models for intelligent text generation and analysis.",
  },
  {
    icon: Icons.Gemini,
    label: "Gemini",
    description: "Google's advanced AI model",
    detailedDescription:
      "Leverage Google's cutting-edge AI for multimodal understanding and responses.",
  },
  {
    icon: Icons.ClaudeAI,
    label: "Claude",
    description: "Anthropic's conversational assistant",
    detailedDescription:
      "Get accurate, nuanced responses with Anthropic's constitutional AI approach.",
  },
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="flex w-full flex-col items-center justify-center gap-8 px-4 md:gap-12"
    >
      <header className="flex w-full max-w-5xl flex-col items-start justify-between gap-4 md:flex-row md:items-center md:gap-8">
        <div className="flex flex-col items-start gap-2 md:gap-4">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Smarter tools for better teamwork
          </h1>
          <p className="text-sm text-muted-foreground sm:text-base">
            No extra costs, no limits - just powerful integrations that grow
            with your marketing goals.
          </p>
        </div>
      </header>

      <ul className="grid w-full max-w-5xl list-none grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {integrations.map((integration) => (
          <li
            key={integration.label}
            className="group relative flex min-h-48 flex-col items-start justify-between gap-4 overflow-hidden rounded-3xl bg-muted p-6 md:rounded-4xl"
          >
            <div className="pointer-events-none absolute -right-10 -bottom-10 size-28 translate-x-15 translate-y-15 transition-transform duration-300 ease-out group-hover:translate-x-0 group-hover:translate-y-0 group-active:translate-x-0 group-active:translate-y-0">
              <integration.icon
                aria-hidden="true"
                className="size-full text-muted-foreground opacity-10 grayscale-100"
              />
            </div>

            <div className="flex w-full gap-4">
              <IntegrationIcon>
                <integration.icon aria-hidden="true" />
              </IntegrationIcon>
              <div className="flex flex-col gap-1">
                <h2 className="text-sm font-semibold text-foreground sm:text-base">
                  {integration.label}
                </h2>
                <p className="text-sm text-muted-foreground sm:text-base">
                  {integration.description}
                </p>
              </div>
            </div>

            <p className="relative z-10 text-sm text-muted-foreground sm:text-base">
              {integration.detailedDescription}
            </p>
          </li>
        ))}
      </ul>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex size-11 shrink-0 items-center justify-center rounded-xl bg-card p-1.5 shadow-elevated-2xs transition-shadow duration-300 group-hover:shadow-elevated-sm group-active:shadow-elevated-sm sm:size-12",
        className
      )}
    >
      <div className="*:size-5 sm:*:size-6">{children}</div>
    </div>
  )
}