"use client"

import { Icon } from "@iconify/react"
import { LandingReveal } from "@/components/landing/landing-reveal"
import { ProductSectionHeading } from "@/components/landing/product/product-section-heading"
import type { ProductInteropSection as ProductInteropSectionData } from "@/components/landing/product/product-data"
import { cn } from "@/lib/utils"

export function ProductInteropSection({
  section,
  accent,
}: {
  section: ProductInteropSectionData
  accent: string
}) {
  return (
    <section id="interoperabilite" className="scroll-mt-20 px-4 py-16 sm:px-6 sm:py-20">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-12">
        <ProductSectionHeading
          eyebrow={section.eyebrow}
          title={section.title}
          description={section.description}
          accent={accent}
        />

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {section.providers.map((provider, index) => (
            <LandingReveal key={provider.name} delay={index * 0.05}>
              <article className="landing-glass flex h-full flex-col gap-4 rounded-2xl p-5">
                <div className="flex items-center gap-3">
                  <span
                    className={cn(
                      "flex size-11 shrink-0 items-center justify-center rounded-xl",
                      provider.brandLogo
                        ? "bg-white shadow-sm ring-1 ring-[var(--landing-line)]"
                        : undefined
                    )}
                    style={
                      provider.brandLogo
                        ? undefined
                        : {
                            backgroundColor: `${provider.accent}14`,
                            color: provider.accent,
                          }
                    }
                  >
                    <Icon
                      icon={provider.icon}
                      className={provider.brandLogo ? "size-7" : "size-6"}
                      aria-hidden
                    />
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-semibold tracking-tight">{provider.name}</h3>
                    <p className="text-sm text-[var(--landing-muted)]">{provider.tagline}</p>
                  </div>
                </div>

                <div className="grid flex-1 grid-cols-1 gap-3 sm:grid-cols-2">
                  <div
                    className={cn(
                      "rounded-xl border border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-3.5"
                    )}
                  >
                    <p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--landing-muted)]">
                      <Icon icon="mdi:account-outline" className="size-3.5" aria-hidden />
                      Personnel
                    </p>
                    <p className="mt-2 text-sm leading-relaxed text-[var(--landing-fg)]">
                      {provider.personal}
                    </p>
                  </div>
                  <div
                    className={cn(
                      "rounded-xl border border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-3.5"
                    )}
                  >
                    <p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--landing-muted)]">
                      <Icon icon="mdi:domain" className="size-3.5" aria-hidden />
                      Entreprise
                    </p>
                    <p className="mt-2 text-sm leading-relaxed text-[var(--landing-fg)]">
                      {provider.enterprise}
                    </p>
                  </div>
                </div>
              </article>
            </LandingReveal>
          ))}
        </div>

        {section.features.length > 0 ? (
          <LandingReveal delay={0.1}>
            <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
              {section.features.map((feature) => (
                <li
                  key={feature.title}
                  className="landing-glass flex gap-3 rounded-xl p-4"
                >
                  <span
                    className="flex size-9 shrink-0 items-center justify-center rounded-lg"
                    style={{
                      backgroundColor: `${accent}14`,
                      color: accent,
                    }}
                  >
                    <Icon icon={feature.icon} className="size-4" aria-hidden />
                  </span>
                  <div className="min-w-0">
                    <h4 className="text-sm font-semibold tracking-tight">{feature.title}</h4>
                    <p className="mt-0.5 text-xs text-[var(--landing-muted)]">
                      {feature.description}
                    </p>
                  </div>
                </li>
              ))}
            </ul>
          </LandingReveal>
        ) : null}
      </div>
    </section>
  )
}