---
import Counters from "./Counters.astro";
import ProductCarousel from "./ProductCarousel.astro";
import Icon from "./Icon.astro";
import { empresa } from "../data/empresa";
---

{/* ============ HERO — campo agrícola al atardecer, texto centrado ============ */}
<section class="rd-hero relative text-white overflow-hidden min-h-[520px] flex items-center">
  {/* Foto de campo panorámica */}
  <div class="absolute inset-0">
    <img src="/images/campo_hero.jpg" alt="" class="w-full h-full object-cover" loading="eager" />
  </div>
  {/* Oscurecido para legibilidad — uniforme, no muddly */}
  <div class="absolute inset-0 bg-black/55"></div>

  <div class="container-x relative py-20 lg:py-28 text-center">
    <span class="rd-eyebrow text-acepla-400 justify-center">42 años · Armstrong, Santa Fe</span>
    <h1 class="text-[32px] sm:text-5xl lg:text-6xl font-black mt-5 mb-6 leading-[1.05] max-w-3xl mx-auto">
      Maquinaria agrícola <span class="text-acepla-500">argentina</span> de primera calidad
    </h1>
    <p class="text-base sm:text-lg text-white/85 max-w-xl mx-auto mb-9 leading-relaxed">
      Fabricamos implementos que acompañan al productor hace más de cuatro décadas. Calidad garantizada, compromiso post-venta y presencia en todo el país.
    </p>
    <div class="flex flex-wrap justify-center gap-3 sm:gap-4">
      <a href="/productos" class="btn-primary">Ver productos</a>
      <a href="/contacto" class="btn-light">Contactarnos</a>
    </div>
  </div>

  {/* Banda de eslogan */}
  <div class="absolute bottom-0 left-0 right-0 bg-acepla-700">
    <div class="container-x py-2.5 flex flex-wrap items-center justify-center gap-x-6 gap-y-1 text-[11px] sm:text-sm font-display font-semibold text-white/95 uppercase tracking-wider">
      <span>Calidad garantizada</span>
      <span class="opacity-50">●</span>
      <span>Compromiso post-venta</span>
      <span class="opacity-50">●</span>
      <span>Estamos en todo el país</span>
    </div>
  </div>
</section>

{/* ============ HISTORIA — split con foto ============ */}
<section class="py-20 relative overflow-hidden">
  <span class="rd-section-num" style="top:20px;left:-20px;">01</span>
  <div class="container-x relative grid lg:grid-cols-2 gap-12 items-center">
    <div class="rd-reveal order-2 lg:order-1">
      <span class="rd-eyebrow">Nuestra historia</span>
      <h2 class="text-3xl lg:text-4xl font-black mt-4 mb-5">De cajas de luz a maquinaria agrícola de punta</h2>
      {empresa.historia.split(".").filter(s => s.trim()).slice(0,2).map((frase) => (
        <p class="text-ink-soft leading-relaxed mb-4">{frase.trim()}.</p>
      ))}
      <div class="flex flex-wrap gap-x-8 gap-y-5 mt-8">
        <div class="min-w-[110px]">
          <div class="rd-counter-num text-3xl sm:text-4xl">43</div>
          <p class="text-xs uppercase tracking-wide text-ink-soft mt-1">Años de trayectoria</p>
        </div>
        <div class="min-w-[110px]">
          <div class="rd-counter-num text-3xl sm:text-4xl">8700<span class="text-acepla-700">+</span></div>
          <p class="text-xs uppercase tracking-wide text-ink-soft mt-1">Máquinas vendidas</p>
        </div>
        <div class="min-w-[110px]">
          <div class="rd-counter-num text-3xl sm:text-4xl">9500<span class="text-acepla-700">+</span></div>
          <p class="text-xs uppercase tracking-wide text-ink-soft mt-1">Clientes</p>
        </div>
      </div>
    </div>
    <div class="rd-reveal order-1 lg:order-2">
      <div class="relative rounded-2xl overflow-hidden shadow-2xl">
        <img src="/images/acepla_aerea__1024x510.jpeg" alt="Planta Acepla" class="w-full" loading="lazy" />
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
          <p class="text-white font-display font-semibold">Planta industrial · Armstrong</p>
        </div>
      </div>
    </div>
  </div>
</section>

{/* ============ VISIÓN / MISIÓN / VALORES — banda roja ============ */}
<section class="rd-diagonal">
  <div class="container-x relative grid md:grid-cols-3 gap-8 text-center">
    {[
      { icon: "eye", title: "Visión", text: empresa.vision },
      { icon: "gallery", title: "Misión", text: empresa.mision },
      { icon: "way", title: "Valores", text: empresa.valores },
    ].map((item) => (
      <div class="rd-reveal">
        <div class="rd-feature-icon mx-auto mb-4 !bg-white/15 !text-white">
          <Icon name={item.icon} size={26} />
        </div>
        <h3 class="text-xl font-black mb-2">{item.title}</h3>
        <p class="text-sm text-white/80 leading-relaxed">{item.text}</p>
      </div>
    ))}
  </div>
</section>

{/* ============ CONTADORES ============ */}
<section class="bg-[#2e2e2e] py-16">
  <div class="container-x">
    <Counters />
  </div>
</section>

{/* ============ PRODUCTOS ============ */}
<div class="rd">
  <ProductCarousel />
</div>

{/* ============ CTA FINAL ============ */}
<section class="bg-gradient-to-br from-[#1a1a1a] to-[#2e2e2e] text-white py-20">
  <div class="container-x text-center max-w-3xl mx-auto rd-reveal">
    <span class="rd-eyebrow !text-acepla-500 justify-center">¿Por qué elegirnos?</span>
    <h2 class="text-3xl lg:text-4xl font-black mt-4 mb-5">Una alianza para crecer</h2>
    <p class="text-white/70 leading-relaxed mb-8">
      Somos una empresa con presencia en el mercado Nacional y una amplia trayectoria. Si Ud. aún no es cliente de Acepla, será integrado a este ámbito y filosofía de trabajo.
    </p>
    <a href="/contacto" class="btn-primary">Hablemos</a>
  </div>
</section>