---
import { slides } from "../data/empresa";

// Tipos de capa para posicionar distinto
type CapaTipo = "piso" | "implemento" | "sello" | "boton";

function clasificarCapa(src: string): CapaTipo {
  if (src.includes("piso_slide") || src.includes("pngwingcom")) return "piso";
  if (src.includes("descompactador") || src.includes("acoplado_tabnque") || src.includes("implemento") || src.includes("img-5961") || src.includes("industria")) return "implemento";
  if (src.includes("button") || src.includes("boton")) return "boton";
  return "sello";
}
---

<!-- ==================== HERO SLIDER ==================== -->
<div
  id="hero-slider"
  class="relative w-full h-[420px] sm:h-[560px] lg:h-[750px] overflow-hidden bg-[#acd0f4] isolate"
>
  {slides.map((slide, i) => {
    const pisos = slide.capas?.filter((c) => clasificarCapa(c.src) === "piso") || [];
    const implementos = slide.capas?.filter((c) => clasificarCapa(c.src) === "implemento") || [];
    const sellos = slide.capas?.filter((c) => clasificarCapa(c.src) === "sello") || [];
    const botones = slide.capas?.filter((c) => clasificarCapa(c.src) === "boton") || [];
    return (
      <div
        class:list={["hero-slide absolute inset-0 transition-opacity duration-1000", i === 0 ? "opacity-100 z-10" : "opacity-0 z-0"]}
        data-index={i}
      >
        {/* Fondo con ken-burns */}
        <div class="absolute inset-0 overflow-hidden">
          <img
            src={slide.fondo}
            alt=""
            class:list={["hero-bg w-full h-full object-cover ken-burns", i !== 0 && "hidden"]}
            data-index={i}
            loading={i === 0 ? "eager" : "lazy"}
            style={`object-position: ${slide.bgPosition || "center center"};`}
          />
        </div>

        {/* Overlay sutil — solo para legibilidad del texto, no tapa el cielo */}
        <div class="absolute inset-0 bg-gradient-to-b from-black/15 via-transparent to-black/10"></div>

        {/* Piso/tierra — franja ancha al pie */}
        {pisos.map((capa) => (
          <div class="absolute bottom-0 left-0 right-0 z-[2] flex justify-center pointer-events-none">
            <img src={capa.src} alt={capa.alt || ""} class="w-full max-w-none h-auto object-cover opacity-90" loading="lazy" />
          </div>
        ))}

        {/* Implemento — sobre el piso, centrado-abajo */}
        {implementos.map((capa) => (
          <div class="absolute bottom-[8%] left-1/2 -translate-x-1/2 z-[3] pointer-events-none">
            <img src={capa.src} alt={capa.alt || ""} class="h-[120px] sm:h-[200px] lg:h-[300px] w-auto max-w-[85%] object-contain drop-shadow-2xl" loading="lazy" />
          </div>
        ))}

        {/* Logo + título — centrados arriba */}
        <div class="absolute top-[14%] left-0 right-0 z-[4] flex flex-col items-center px-4 text-center">
          <img
            src="/images/logo_acepla_v3_fondo_claro_02.webp"
            alt="Acepla"
            class="h-[45px] sm:h-[70px] lg:h-[100px] w-auto mb-4 sm:mb-6 drop-shadow-2xl"
            loading="lazy"
          />
          <h2 class="hero-caption font-sans font-bold text-white text-2xl sm:text-3xl lg:text-[40px] leading-tight text-shadow-slider max-w-4xl px-4">
            {slide.titulo}
          </h2>
        </div>

        {/* Sellos — esquina inferior izquierda */}
        {sellos.length > 0 && (
          <div class="absolute bottom-[6%] left-4 sm:left-8 z-[5] flex flex-col gap-2 items-start">
            {sellos.map((capa) => (
              <img src={capa.src} alt={capa.alt || ""} class="h-[60px] sm:h-[80px] lg:h-[100px] w-auto drop-shadow-lg rotate-1" loading="lazy" />
            ))}
          </div>
        )}

        {/* Botones — esquina inferior derecha */}
        {botones.length > 0 && (
          <div class="absolute bottom-[6%] right-4 sm:right-8 z-[5] flex flex-col gap-2 items-end">
            {botones.map((capa) => (
              capa.link ? (
                <a href={capa.link} target="_blank" rel="noopener">
                  <img src={capa.src} alt={capa.alt || ""} class="h-[50px] sm:h-[60px] w-auto drop-shadow-lg hover:scale-105 transition-transform" loading="lazy" />
                </a>
              ) : (
                <img src={capa.src} alt={capa.alt || ""} class="h-[50px] sm:h-[60px] w-auto drop-shadow-lg" loading="lazy" />
              )
            ))}
          </div>
        )}
      </div>
    );
  })}

  {/* Bullets */}
  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 flex items-center gap-2">
    {slides.map((_, i) => (
      <button
        class:list={["hero-bullet h-2 rounded-full transition-all duration-300", i === 0 ? "w-8 bg-acepla-700" : "w-2 bg-white/60 hover:bg-white"]}
        data-index={i}
        aria-label={`Ir al slide ${i + 1}`}
      ></button>
    ))}
  </div>
</div>

<script>
  const slides = document.querySelectorAll<HTMLElement>(".hero-slide");
  const bullets = document.querySelectorAll<HTMLElement>(".hero-bullet");
  if (slides.length > 1) {
    let current = 0;
    let timer: ReturnType<typeof setTimeout>;

    function show(index: number) {
      slides.forEach((s, i) => {
        s.classList.toggle("opacity-100", i === index);
        s.classList.toggle("z-10", i === index);
        s.classList.toggle("opacity-0", i !== index);
        s.classList.toggle("z-0", i !== index);
      });
      bullets.forEach((b, i) => {
        b.classList.toggle("w-8", i === index);
        b.classList.toggle("bg-acepla-700", i === index);
        b.classList.toggle("w-2", i !== index);
        b.classList.toggle("bg-white/60", i !== index);
      });
      current = index;
    }

    function next() { show((current + 1) % slides.length); }

    function startTimer() {
      clearTimeout(timer);
      timer = setTimeout(() => { next(); startTimer(); }, 6000);
    }

    bullets.forEach((b, i) => {
      b.addEventListener("click", () => { show(i); startTimer(); });
    });

    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      startTimer();
    }
  }
</script>