"use client"

import type { Service } from "@/lib/brochure-data"
import { clientsByService, services } from "@/lib/brochure-data"
import { cn } from "@/lib/utils"
import { ServiceSymbol } from "./slide-symbols"

export function ServiceSlide({
  service,
  position,
  total,
}: {
  service: Service
  position: number
  total: number
}) {
  const Icon = service.icon
  const clients = clientsByService[service.id] ?? []

  return (
    <div className="bg-noise relative h-full w-full">
      {/* Constellation network */}
      <div className="bg-network absolute inset-0" aria-hidden="true" />

      {/* Top accent line */}
      <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 mx-auto flex h-full w-full max-w-7xl items-center px-6 pt-16 pb-6 md:py-24 md:px-12 lg:px-16">
        <div className="grid w-full items-center gap-6 md:grid-cols-12 md:gap-8 lg:gap-12">
          {/* ── Left column: 7 cols — number + title + description ── */}
          <div className="relative md:col-span-7">
            {/* Breadcrumb */}
            <div className="animate-fade-in-up mb-3 flex items-center gap-3 md:mb-8">
              <span className="grid size-10 place-items-center rounded-md border border-border bg-card/60">
                <Icon className="size-5 text-primary" />
              </span>
              <span className="font-mono text-[13px] uppercase tracking-[0.18em] text-foreground/60">
                {service.index} — servicio — {String(position).padStart(2, "0")} / {String(total).padStart(2, "0")}
              </span>
            </div>

            {/* Giant faded service number + cooperative symbol */}
            <div className="pointer-events-none absolute -left-2 -top-6 select-none md:-left-6 md:-top-8">
              <ServiceSymbol serviceId={service.id} className="absolute left-[15%] top-[5%] size-[12rem] text-foreground/[0.08] sm:size-[16rem] lg:size-[20rem]" />
              <span
                className="relative font-heading text-[10rem] font-black leading-none tracking-tighter text-primary/[0.06] sm:text-[14rem] lg:text-[18rem]"
                aria-hidden="true"
              >
                {service.index}
              </span>
            </div>

            {/* Tagline */}
            <p className="animate-fade-in-up anim-delay-1 relative mb-2 font-mono text-xs font-medium uppercase tracking-[0.15em] text-primary">
              {service.tagline}
            </p>

            {/* Title */}
            <h2 className="animate-fade-in-up anim-delay-2 relative max-w-lg text-balance font-heading text-3xl font-bold leading-[1.05] tracking-tight text-foreground sm:text-4xl md:text-5xl lg:text-6xl">
              {service.title}
            </h2>

            {/* Description */}
            <p className="animate-fade-in-up anim-delay-3 relative mt-4 max-w-md text-sm leading-relaxed text-foreground/75 md:text-base md:mt-6">
              {service.description}
            </p>

            {/* ── Client logos — desktop only (mobile hides to keep bento grid visible) ── */}
            {clients.length > 0 && (
              <div className="animate-fade-in-up anim-delay-4 relative mt-8 hidden md:block">
                <span className="mb-4 block font-mono text-[11px] uppercase tracking-[0.2em] text-foreground/40">
                  {service.id === "desarrollo"
                    ? "Construyeron con nosotros"
                    : service.id === "hosting" || service.id === "odoo"
                    ? "Usan nuestras apps"
                    : "Nos eligen"}
                </span>

                {service.id === "diseno" && (
                  <div className="mb-8 flex w-max items-center gap-6">
                    <span className="font-mono text-[18px] font-bold uppercase tracking-[0.2em] text-foreground/80">
                      Grupo
                    </span>
                    <img 
                      src="/logos/ayudin.png" 
                      alt="Ayudín" 
                      className="h-14 w-auto object-contain grayscale opacity-55 transition-all duration-300 hover:grayscale-0 hover:opacity-100 hover:scale-105" 
                    />
                  </div>
                )}

                <div className={cn("grid gap-3", clients.length <= 2 ? "grid-cols-2" : "grid-cols-3 lg:grid-cols-4")}>
                  {clients.map((client) => {
                    const inner = (
                      <div className={cn(
                        "group flex flex-col items-center gap-2 rounded-xl border border-border/50 bg-card/50 px-3 py-4 backdrop-blur-sm transition-all duration-300",
                        client.url
                          ? "cursor-pointer hover:border-primary/40 hover:bg-card/80 hover:shadow-[0_0_16px_-4px_hsl(var(--primary)/0.25)] active:border-primary/40 active:bg-card/80"
                          : "opacity-80",
                      )}>
                        <div className="flex w-full items-center justify-center h-20 lg:h-24">
                          {client.logo ? (
                            <img
                              src={client.logo}
                              alt={`Logo de ${client.name}`}
                              className={cn(
                                "object-contain max-w-full max-h-full grayscale opacity-55 transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 group-active:grayscale-0 group-active:opacity-100",
                                ["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-md bg-white/95 p-1.5"
                              )}
                            />
                          ) : (
                            <span className="font-heading text-base font-bold text-foreground/50 transition-colors group-hover:text-foreground/90 group-active:text-foreground/90">
                              {client.name}
                            </span>
                          )}
                        </div>
                        {client.logo && (
                          <span className="text-center font-mono text-[10px] leading-tight text-foreground/40 transition-colors group-hover:text-foreground/70 group-active:text-foreground/70">
                            {client.name}
                          </span>
                        )}
                      </div>
                    )
                    return client.url ? (
                      <a key={client.name} href={client.url} target="_blank" rel="noopener noreferrer">
                        {inner}
                      </a>
                    ) : (
                      <div key={client.name}>{inner}</div>
                    )
                  })}
                </div>
              </div>
            )}
          </div>

          {/* ── Right column: 5 cols — Bento Box features ── */}
          <div className="animate-fade-in-up anim-delay-4 md:col-span-5">
            {/* Unified graphic background wrapper */}
            <div className="relative overflow-hidden rounded-xl border border-border bg-border">
              
              {/* Bento grid: gap-px creates 1px separator lines */}
              <div className="grid grid-cols-2 gap-px md:grid-rows-[1fr_1fr]">
                {service.features.map((feature, i) => {
                  const posClass = [
                    "bottom-0 right-0 translate-x-1/2 translate-y-1/2", // 0: Top Left
                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2", // 1: Top Right
                    "top-0 right-0 translate-x-1/2 -translate-y-1/2",   // 2: Bottom Left
                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",   // 3: Bottom Right
                  ][i]

                  return (
                    <div
                      key={feature}
                      className="group relative flex flex-col justify-between overflow-hidden gap-4 bg-background p-4 transition-colors hover:bg-card/80 md:gap-6 md:p-6"
                    >
                      {/* Icon piece perfectly aligned to the center of the 2x2 grid */}
                      <Icon 
                        className={cn(
                          "pointer-events-none absolute z-0 size-[16rem] text-foreground transition-all duration-500 md:size-[22rem]",
                          "opacity-10 group-hover:opacity-30",
                          posClass
                        )}
                      />

                      <span className="relative z-20 font-mono text-[13px] font-bold uppercase tracking-[0.2em] text-primary">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <p className="relative z-20 text-base font-semibold leading-snug text-foreground">
                        {feature}
                      </p>
                    </div>
                  )
                })}
              </div>
            </div>

            {/* Counter */}
            <div className="mt-4 text-right">
              <span className="font-mono text-[13px] uppercase tracking-[0.15em] text-foreground/60">
                {String(position).padStart(2, "0")} / {String(total).padStart(2, "0")} servicios
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom accent line */}
      <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>
  )
}