Integrations 14

"use client"

import { cn } from "cn"

import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"
import { CheckIcon } from 'lucide-react'

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

const integrations: IntegrationItem[] = [
  {
    icon: Icons.Gemini,
    label: "Gemini",
    description:
      "Leverage Google's advanced AI model for intelligent assistance.",
  },
  {
    icon: Icons.OpenAI,
    label: "OpenAI",
    description: "Integrate GPT-powered capabilities for seamless automation.",
  },
  {
    icon: Icons.ClaudeAI,
    label: "Claude",
    description: "Use Anthropic's Claude for sophisticated AI interactions.",
  },
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="flex items-center justify-center px-4"
    >
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-8 lg:flex-row lg:gap-12">
        <header className="flex w-full flex-col items-start gap-6 text-start lg:max-w-lg">
          <Badge
            variant="outline"
            className="h-7 rounded-lg border-border sm:h-8 sm:text-sm"
          >
            Integrations
          </Badge>

          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Connect top AI models in one unified workflow
          </h1>
          <p className="text-sm text-muted-foreground sm:text-base">
            Easily integrate Gemini, OpenAI, and Claude - secure, fast, and
            centrally managed.
          </p>
          <ul className="flex flex-col items-start gap-2">
            {[
              "One-click AI connections",
              "Low-latency responses",
              "Enterprise-grade security",
            ].map((feature) => (
              <li key={feature} className="flex items-center gap-2">
                <CheckIcon  className="size-4 text-primary" aria-hidden="true" />
                <span className="text-sm">{feature}</span>
              </li>
            ))}
          </ul>
          <FancyButton size="lg" className="w-full md:w-auto">
            Explore all integrations
          </FancyButton>
        </header>

        <ul className="flex w-full min-w-0 list-none flex-col gap-3">
          {integrations.map((integration) => (
            <li
              key={integration.label}
              className="group relative size-full overflow-hidden rounded-3xl bg-card p-4 shadow-elevated-2xs transition-shadow duration-300 hover:shadow-elevated-sm active:shadow-elevated-sm md:p-6"
            >
              <div className="pointer-events-none absolute -right-6 -bottom-6 size-24 md:-right-10 md:-bottom-10 md:size-32">
                <integration.icon
                  aria-hidden="true"
                  className="size-full text-muted-foreground opacity-10 grayscale-100 transition-[opacity,filter] duration-300 group-hover:opacity-25 group-hover:grayscale-0"
                />
              </div>
              <div className="flex items-start gap-4">
                <IntegrationIcon>
                  <integration.icon aria-hidden="true" />
                </IntegrationIcon>
                <div className="flex flex-col gap-1">
                  <h2 className="flex items-center gap-2 text-lg font-semibold text-foreground">
                    {integration.label}
                  </h2>
                  <p className="max-w-xs text-sm text-muted-foreground">
                    {integration.description}
                  </p>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex size-12 shrink-0 items-center justify-center sm:size-14",
        className
      )}
    >
      <div className="*:size-7 sm:*:size-8">{children}</div>
    </div>
  )
}