Integrations 10

"use client"

import { cn } from "cn"
import { motion } from "motion/react"

import { Button } from "@/components/ui/button"
import { useReducedMotion } from "@/hooks/use-reduced-motion"
import { Icons } from "@/components/ui/icons"

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

const integrations: IntegrationItem[] = [
  {
    icon: Icons.MicrosoftCopilot,
    label: "Copilot",
    description: "AI assistant for developer productivity",
  },
  {
    icon: Icons.DeepSeek,
    label: "DeepSeek",
    description: "Enterprise search powered by AI",
  },
  {
    icon: Icons.Replit,
    label: "Replit",
    description: "Collaborative coding environment",
  },
  {
    icon: Icons.OpenAI,
    label: "OpenAI",
    description: "GPT-powered capabilities",
  },
  {
    icon: Icons.Gemini,
    label: "Gemini",
    description: "Google's advanced AI model",
  },
  {
    icon: Icons.ClaudeAI,
    label: "Claude",
    description: "Anthropic's conversational assistant",
  },
]

export function Integration() {
  const reduceMotion = useReducedMotion()

  return (
    <section
      aria-label="Integrations"
      className="flex w-full max-w-5xl flex-col gap-8 px-4 md:items-center md:gap-12"
    >
      <header className="flex flex-col items-center gap-2 text-center">
        <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
          Smarter tools for better teamwork
        </h1>
        <p className="max-w-md text-sm text-muted-foreground sm:text-base">
          Explore tools that connect your apps, streamline work, and keep teams
          in sync.
        </p>
      </header>

      <ul className="grid w-full list-none grid-cols-1 gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
        {integrations.map((integration) => (
          <motion.li
            key={integration.label}
            initial={false}
            animate="rest"
            whileHover={reduceMotion ? "rest" : "hover"}
            className="flex items-start gap-4 rounded-3xl bg-muted p-6 transition-colors duration-200 hover:bg-muted/80 motion-reduce:transition-none sm:flex-col xl:p-8"
          >
            <IntegrationIcon reduceMotion={reduceMotion}>
              <integration.icon aria-hidden="true" />
            </IntegrationIcon>
            <div className="flex flex-col gap-1.5">
              <h2 className="text-base font-semibold text-foreground">
                {integration.label}
              </h2>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {integration.description}
              </p>
            </div>
          </motion.li>
        ))}
      </ul>

      <Button variant="link" className="self-center p-0 text-foreground">
        Browse integration library
      </Button>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
  reduceMotion,
}: {
  children: React.ReactNode
  className?: string
  reduceMotion: boolean
}) {
  return (
    <motion.div
      variants={{ rest: { y: 0 }, hover: { y: -8 } }}
      transition={{ duration: reduceMotion ? 0 : 0.3 }}
      className={cn(
        "flex size-12 shrink-0 items-center justify-center rounded-2xl bg-card shadow-elevated-2xs md:size-14",
        className
      )}
    >
      <div className="*:size-7 md:*:size-8">{children}</div>
    </motion.div>
  )
}