"use client"

import Link from "next/link"
import { Icon } from "@iconify/react"
import { LandingReveal } from "@/components/landing/landing-reveal"
import { ProductSectionHeading } from "@/components/landing/product/product-section-heading"
import type { ProductIntegration } from "@/components/landing/product/product-data"

export function ProductIntegrations({
  integrations,
  accent,
}: {
  integrations: ProductIntegration[]
  accent: string
}) {
  return (
    <section id="integrations" className="scroll-mt-20 px-4 py-20 sm:px-6">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-12">
        <ProductSectionHeading
          eyebrow="Écosystème"
          title={
            <>
              Connecté aux apps{" "}
              <span className="landing-gradient-text">de la suite</span>
            </>
          }
          description="Ultimail s'intègre nativement aux autres applications UltiSuite — même identité, mêmes contacts, même stockage."
          accent={accent}
        />

        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {integrations.map((app, index) => {
            const card = (
              <div className="landing-glass landing-halo-card flex h-full flex-col gap-4 rounded-2xl p-6">
                <div className="flex items-center justify-between">
                  <span
                    className="flex size-12 items-center justify-center rounded-xl"
                    style={{ backgroundColor: `${app.accent}1a` }}
                  >
                    <img
                      src={app.icon}
                      alt=""
                      className="size-7 object-contain"
                      draggable={false}
                      aria-hidden
                    />
                  </span>
                  {app.href ? (
                    <Icon
                      icon="mdi:arrow-top-right"
                      className="size-4 text-[var(--landing-muted)] transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
                      aria-hidden
                    />
                  ) : null}
                </div>
                <div>
                  <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--landing-muted)]">
                    {app.tagline}
                  </p>
                  <h3 className="text-lg font-semibold tracking-tight">
                    {app.name}
                  </h3>
                </div>
                <p className="text-sm text-[var(--landing-muted)]">{app.description}</p>
              </div>
            )

            return (
              <LandingReveal as="li" key={app.name} delay={index * 0.08}>
                {app.href ? (
                  <Link
                    href={app.href}
                    className="group block h-full rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                  >
                    {card}
                  </Link>
                ) : (
                  card
                )}
              </LandingReveal>
            )
          })}
        </ul>
      </div>
    </section>
  )
}