---
import Base from "../layouts/Base.astro";
import HeroSlider from "../components/HeroSlider.astro";
import Counters from "../components/Counters.astro";
import ProductCarousel from "../components/ProductCarousel.astro";
import CtaSection from "../components/CtaSection.astro";
import HomeRedesign from "../components/HomeRedesign.astro";
import Icon from "../components/Icon.astro";
import { empresa } from "../data/empresa";
import { REDESIGN_MODE } from "../data/config";
---

<Base>
  {REDESIGN_MODE ? (
    <HomeRedesign />
  ) : (
    <>
      {/* 1. TOP BAR + 2. HEADER están en el Layout */}

      {/* 3. HERO SLIDER */}
      <HeroSlider />

      {/* 4. Espaciador (sección vacía del original) */}
      <div class="h-5"></div>

      {/* 5. Título empresa + contador 43 AÑOS (2 columnas) */}
      <section class="container-x py-3 mt-5">
        <div class="grid grid-cols-1 md:grid-cols-12 items-center gap-6">
          <div class="md:col-span-7 text-center md:text-right">
            <h2 class="text-[#707070] text-[30px] sm:text-[38px] leading-tight">
              ACEPLA <span class="text-acepla-700">NUEVA MAQUINARIA</span> S.A.
            </h2>
          </div>
          <div class="md:col-span-5 flex justify-center md:justify-start">
            <div class="border border-[#e3e3e3] rounded-[7px] px-8 py-5 flex items-center gap-2">
              <span class="text-acepla-700 text-[39px] font-bold leading-none">43</span>
              <span class="text-acepla-700 font-display font-semibold text-lg">AÑOS</span>
            </div>
          </div>
        </div>
      </section>

      {/* 6. Historia de la empresa */}
      <section class="container-x py-6">
        <p class="italic text-[#777] text-center max-w-4xl mx-auto leading-relaxed">
          {empresa.historia}
        </p>
      </section>

      {/* 7. Foto aérea + pestañas Visión/Misión/Valores (2 columnas) */}
      <section class="container-x pt-4 pb-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          {/* Foto aérea */}
          <div class="flex justify-center animate-fade-up">
            <img
              src="/images/acepla_aerea__1024x510.jpeg"
              alt="Vista aérea de la planta de Acepla en Armstrong"
              class="rounded-lg shadow-lg w-full max-w-md"
              loading="lazy"
            />
          </div>

          {/* Pestañas */}
          <div class="animate-fade-in">
            <div class="flex gap-2 mb-5 border-b border-line" role="tablist">
              <button data-tab="vision" class="vmv-tab active flex items-center gap-2 px-5 py-2.5 font-display font-semibold text-sm uppercase tracking-wide border-b-2 border-acepla-700 text-acepla-700 -mb-px">
                <Icon name="eye" size={16} /> Visión
              </button>
              <button data-tab="mision" class="vmv-tab flex items-center gap-2 px-5 py-2.5 font-display font-semibold text-sm uppercase tracking-wide border-b-2 border-transparent text-ink-soft hover:text-acepla-700 -mb-px">
                <Icon name="gallery" size={16} /> Misión
              </button>
              <button data-tab="valores" class="vmv-tab flex items-center gap-2 px-5 py-2.5 font-display font-semibold text-sm uppercase tracking-wide border-b-2 border-transparent text-ink-soft hover:text-acepla-700 -mb-px">
                <Icon name="way" size={16} /> Valores
              </button>
            </div>

            <div data-panel="vision" class="vmv-panel">
              <p class="text-ink-soft leading-relaxed">{empresa.vision}</p>
            </div>
            <div data-panel="mision" class="vmv-panel hidden">
              <h4 class="text-acepla-700 mb-2 text-[22px]">{empresa.headlinesMision[0]}</h4>
              <p class="text-ink-soft leading-relaxed">{empresa.mision}</p>
            </div>
            <div data-panel="valores" class="vmv-panel hidden">
              <p class="text-ink-soft leading-relaxed">{empresa.valores}</p>
            </div>
          </div>
        </div>
      </section>

      {/* 8. ¿Por qué elegirnos? (fondo oscuro) */}
      <section class="bg-stripes py-[50px]">
        <div class="container-x text-center max-w-4xl">
          <h3 class="text-[#f3b9b9] mb-5 text-[27px]">¿Por qué elegirnos?</h3>
          <p class="text-[#f5f1f1] leading-relaxed text-[16px]">
            Somos una empresa con presencia en el mercado Nacional y una amplia trayectoria, trabajamos diariamente para que nuestros clientes nos tengan presente cuando desean expandirse, modernizar sus implementos y para requerir servicios especializados. Si Ud. aún no es cliente de Acepla, sepa que será integrado a este ámbito y filosofía de trabajo.
          </p>
        </div>
      </section>

      {/* 9. Contadores animados (fondo oscuro) */}
      <Counters />

      {/* 10. Carrusel de productos */}
      <ProductCarousel />

      {/* 11. Sección CTA (fondo rojo) */}
      <CtaSection />

      {/* 12-13. FOOTER está en el Layout */}
    </>
  )}
</Base>

{!REDESIGN_MODE && (
  <script>
    // Tabs Visión/Misión/Valores (solo modo clásico)
    const tabs = document.querySelectorAll<HTMLButtonElement>(".vmv-tab");
    const panels = document.querySelectorAll<HTMLElement>(".vmv-panel");
    tabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        const target = tab.dataset.tab;
        tabs.forEach((t) => {
          const active = t === tab;
          t.classList.toggle("border-acepla-700", active);
          t.classList.toggle("text-acepla-700", active);
          t.classList.toggle("border-transparent", !active);
          t.classList.toggle("text-ink-soft", !active);
        });
        panels.forEach((p) => p.classList.toggle("hidden", p.dataset.panel !== target));
      });
    });
  </script>
)}