"use client"

import { clientsByService } from "@/lib/brochure-data"
import { cn } from "@/lib/utils"

const CATEGORIES: { id: string; label: string }[] = [
  { id: "desarrollo", label: "Desarrollo" },
  { id: "odoo", label: "Odoo ERP" },
  { id: "diseno", label: "Diseño" },
  { id: "staffing", label: "Staffing IT" },
  { id: "sectoriales", label: "Soluciones Sectoriales" },
  { id: "municipios", label: "Municipios" },
]

export function ClientsSlide() {
  const sections = CATEGORIES.map((cat) => ({
    label: cat.label,
    clients: clientsByService[cat.id] ?? [],
  })).filter((s) => s.clients.length > 0)

  return (
    <div className="bg-noise relative flex min-h-screen w-full flex-col overflow-y-auto">
      <div className="bg-network absolute inset-0 pointer-events-none" aria-hidden="true" />
      <div className="absolute left-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-primary/30 to-transparent" aria-hidden="true" />

      <div className="relative z-10 w-full px-5 pb-12 pt-20">
        {/* Heading */}
        <div className="mb-6">
          <span className="mb-1.5 block font-mono text-[10px] uppercase tracking-[0.25em] text-primary">
            Nuestros clientes
          </span>
          <h2 className="font-heading text-2xl font-extrabold leading-tight tracking-tight text-foreground">
            Nos eligen
          </h2>
        </div>

        {/* Sections by category */}
        <div className="space-y-6">
          {sections.map((section) => (
            <div key={section.label}>
              {/* Category label + rule */}
              <div className="mb-2.5 flex items-center gap-2">
                <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-foreground/40">
                  {section.label}
                </span>
                <div className="h-px flex-1 bg-border/30" />
              </div>

              {/* Client cards — 3 per row on mobile */}
              <div className={cn("grid w-full gap-2", section.clients.length === 1 ? "grid-cols-2" : "grid-cols-3")}>
                {section.clients.map((client) => {
                  const card = (
                    <div className="flex flex-col items-center gap-1.5 rounded-lg border border-border/40 bg-card/40 px-1.5 py-3 backdrop-blur-sm transition-colors duration-200">
                      {/* Logo always in color */}
                      <div className="flex w-full items-center justify-center h-10">
                        {client.logo ? (
                          <img
                            src={client.logo}
                            alt={`Logo de ${client.name}`}
                            className={cn(
                              "object-contain max-w-full max-h-full opacity-90",
                              ["Poett", "Trenet", "Selton", "Sintra", "Uranga", "Chatelco", "NCA", "Randstad", "Molino Indelma", "TeraSync", "Municipalidad de Armstrong", "Concejo de Armstrong", "Comuna de Zenón Pereyra"].includes(client.name) && "rounded-sm bg-white/95 p-1"
                            )}
                          />
                        ) : (
                          <span className="text-center font-heading text-[9px] font-bold leading-tight text-foreground/65">
                            {client.name}
                          </span>
                        )}
                      </div>
                      {/* Name below logo */}
                      {client.logo && (
                        <span className="text-center font-mono text-[7px] leading-tight text-foreground/35">
                          {client.name}
                        </span>
                      )}
                    </div>
                  )

                  return client.url ? (
                    <a key={client.name} href={client.url} target="_blank" rel="noopener noreferrer">
                      {card}
                    </a>
                  ) : (
                    <div key={client.name}>{card}</div>
                  )
                })}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-border/30 via-border to-border/30" aria-hidden="true" />
    </div>
  )
}