// Homepage sections — ported 1:1 from the source TSX (Hero, PartnersMarquee,
// ProductsGrid, ServicesGrid, IndustriesSection, StatsBand, ContactSection,
// Footer). className strings are verbatim; lucide icons map to <Icon>.
(function () {
  const { useState, useEffect, useRef } = React;
  const D = window.REA_DATA;

  /* ------------------------------- HERO ------------------------------- */
  function Hero() {
    return (
      <section className="relative bg-background pt-10 pb-20 lg:pt-16 lg:pb-28 overflow-hidden">
        <GridBg />
        <div className="container mx-auto px-4 relative">
          <div className="grid lg:grid-cols-12 gap-12 lg:gap-10 lg:items-stretch">
            <div className="lg:col-span-7 flex flex-col items-start">
              <img src={D.logo} alt="Rom Energy Armstrong" className="hidden lg:block h-14 w-auto mb-10" />
              <div className="flex items-center gap-3 mb-8">
                <span className="block w-px h-3.5 bg-accent"></span>
                <span className="text-xs font-bold tracking-[0.2em] text-accent uppercase [text-wrap:balance]">
                  Soluții integrate pentru abur, aer și apă caldă
                </span>
              </div>
              <h1 className="font-headings text-4xl lg:text-[3.75rem] font-bold text-primary leading-[1.05] tracking-tight text-balance mb-6">
                Proiectăm, livrăm și menținem sistemele{' '}
                <span className="text-accent">care nu au voie să se oprească.</span>
              </h1>
              <p className="text-lg text-foreground/70 mb-10 max-w-2xl leading-relaxed">
                30 de ani experiență lângă rafinării, combinate chimice și fabrici de proces. Reprezentăm exclusiv în România furnizori de top din toată lumea.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                <button onClick={() => window.openQuoteModal && window.openQuoteModal()} className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 rounded-sm font-semibold text-base transition-colors flex items-center justify-center gap-2 group">
                  Cere ofertă tehnică
                  <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </button>
                <a href="#catalog" className="bg-transparent border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground px-8 py-4 rounded-sm font-semibold text-base transition-colors flex items-center justify-center">
                  Vezi produsele
                </a>
              </div>
            </div>
            <div className="lg:col-span-5 flex flex-col gap-5 relative">
              <a href="#" className="group relative flex flex-col bg-card border border-border rounded-sm overflow-hidden hover:border-accent transition-colors shadow-sm hover:shadow-md lg:flex-1">
                <div className="relative h-40 lg:h-44 overflow-hidden bg-muted flex-shrink-0">
                  <img src={D.heroCards.garnituri} alt="Atelier propriu de debitare garnituri industriale" className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
                  <div className="absolute bottom-3 left-3">
                    <span className="inline-block px-2.5 py-1 bg-accent text-accent-foreground text-xs font-bold tracking-[0.2em] uppercase rounded-sm">Atelier propriu</span>
                  </div>
                </div>
                <div className="p-4 flex flex-col flex-grow">
                  <h3 className="font-headings text-base font-bold text-primary mb-1.5 leading-tight group-hover:text-accent transition-colors">Debitare garnituri industriale</h3>
                  <p className="text-sm text-foreground/70 mb-3 flex-grow leading-snug">Garnituri spirometalice și plate, debitate în 24–72 h după desen.</p>
                  <div className="mt-auto flex items-center text-accent text-sm font-semibold">
                    <span>Detalii serviciu</span>
                    <Icon name="arrow-right" className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </a>
              <a href="#" className="group relative flex flex-col bg-card border border-border rounded-sm overflow-hidden hover:border-accent transition-colors shadow-sm hover:shadow-md lg:flex-1">
                <div className="relative h-40 lg:h-44 overflow-hidden bg-muted flex-shrink-0">
                  <img src={D.heroCards.baterii} alt="Baterii termice Armstrong Seria 6000" className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
                  <div className="absolute top-3 right-3"></div>
                  <div className="absolute bottom-3 left-3">
                    <span className="inline-block px-2.5 py-1 bg-primary text-primary-foreground text-xs font-bold tracking-[0.2em] uppercase rounded-sm">Soluție nouă</span>
                  </div>
                </div>
                <div className="p-4 flex flex-col flex-grow">
                  <h3 className="font-headings text-base font-bold text-primary mb-1.5 leading-tight group-hover:text-accent transition-colors">Baterii Armstrong Seria 6000</h3>
                  <p className="text-sm text-foreground/70 mb-3 flex-grow leading-snug">Construcție sudată, inox 304/316 sau oțel carbon, pentru medii corozive.</p>
                  <div className="mt-auto flex items-center text-accent text-sm font-semibold">
                    <span>Fișă tehnică</span>
                    <Icon name="arrow-right" className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* -------------------------- PARTNERS MARQUEE ------------------------ */
  function PartnersMarquee() {
    const set = (keyPrefix, hidden) => (
      <div className="flex items-center gap-16 md:gap-24 pr-16 md:pr-24" aria-hidden={hidden ? 'true' : undefined}>
        {D.partners.map((partner, index) => (
          <a key={`${keyPrefix}-${index}`} href="#" tabIndex={hidden ? -1 : undefined}
            className="flex items-center justify-center flex-shrink-0 opacity-90 hover:opacity-100 transition-opacity duration-200"
            title={partner.name} aria-label={hidden ? undefined : `Vezi pagina ${partner.name}`}>
            <img src={partner.logo} alt={`${partner.name} logo`} className={`${partner.logoHeightClass || 'h-10 md:h-12'} w-auto object-contain`} loading="lazy" />
          </a>
        ))}
      </div>
    );
    return (
      <section className="py-12 lg:py-16 bg-white overflow-hidden">
        <div className="container mx-auto px-4 mb-8">
          <Eyebrow as="h2" label="Parteneri" />
        </div>
        <div className="relative w-full overflow-hidden group">
          <div className="absolute left-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
          <div className="absolute right-0 top-0 bottom-0 w-16 md:w-32 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>
          <div className="flex w-max animate-marquee group-hover:[animation-play-state:paused]">
            {set('set1', false)}
            {set('set2', true)}
          </div>
        </div>
      </section>
    );
  }

  /* --------------------------- PRODUCTS GRID -------------------------- */
  function ProductsGrid() {
    return (
      <section id="catalog" className="py-16 lg:py-24 bg-muted/50 scroll-mt-20">
        <div className="container mx-auto px-4">
          <SectionHeader kicker="Catalog" title="Game de produse"
            description="15 categorii principale, peste 5.000 de poziții în stoc sau livrabile pe comandă, de la producători germani, italieni și britanici." />
          <CategoryCardGrid items={D.productCategories} />
        </div>
      </section>
    );
  }

  /* --------------------------- SERVICES GRID -------------------------- */
  function ServicesGrid() {
    return (
      <section className="py-16 lg:py-24 bg-background">
        <div className="container mx-auto px-4">
          <div className="mb-12 md:mb-16 max-w-3xl">
            <Eyebrow label="Servicii tehnice" className="mb-4" />
            <h2 className="font-headings text-3xl md:text-4xl font-bold text-primary mb-4">Dincolo de echipament</h2>
            <p className="text-lg text-foreground/70">Expertiză tehnică aplicată în industrie grea, energie și procese industriale critice.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {D.servicesFull.map((service) => (
              <a key={service.id} href={D.linkForItem(service.title)} className="group bg-card border border-border rounded-sm overflow-hidden hover:border-accent hover:shadow-md transition-all flex flex-col">
                <div className="relative h-40 overflow-hidden bg-muted">
                  <img src={service.image} alt={service.title} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" />
                </div>
                <div className="p-6 flex flex-col flex-grow">
                  <h3 className="font-headings text-lg font-bold text-primary leading-snug mb-3 group-hover:text-accent transition-colors">{service.title}</h3>
                  <p className="text-sm text-foreground/70 leading-relaxed mb-6">{service.description}</p>
                  <ul className="space-y-2.5 mt-auto pt-5 border-t border-border">
                    {service.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start">
                        <span className="w-1 h-1 rounded-full bg-accent mt-2 mr-3 flex-shrink-0"></span>
                        <span className="text-xs font-semibold text-foreground/70 leading-snug">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ------------------------ INDUSTRIES SECTION ------------------------ */
  function IndustriesSection() {
    return (
      <section className="py-16 lg:py-24 bg-muted/50">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-12 gap-12 lg:gap-16">
            <div className="lg:col-span-4 flex flex-col">
              <Eyebrow label="Industrii deservite" className="mb-4" />
              <h2 className="font-headings text-3xl md:text-4xl font-bold text-primary leading-tight mb-6">Acolo unde procesul nu suportă opriri.</h2>
              <p className="text-lg text-foreground/70 leading-relaxed mb-8">Lucrăm în sectoare în care fiecare oră de stagnare costă zeci de mii de euro. De la rafinării și combinate chimice până la stații de tratare a apelor uzate, adaptăm soluțiile la cerințele fiecărei industrii.</p>
            </div>
            <div className="lg:col-span-8">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-border border border-border rounded-sm overflow-hidden">
                {D.industries.map((industry) => (
                  <div key={industry.id} className="group relative flex items-center gap-4 bg-card p-5 hover:bg-muted/40 transition-colors cursor-default">
                    <div className="w-12 h-12 flex items-center justify-center bg-primary/5 rounded-sm flex-shrink-0">
                      <img src={`../../assets/industry-icons/${industry.slug}.svg`} alt="" aria-hidden="true" className="w-11 h-11 object-contain" loading="lazy" />
                    </div>
                    <div className="flex-grow min-w-0">
                      <div className="font-headings text-base font-bold text-primary leading-snug group-hover:text-accent transition-colors">{industry.name}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ----------------------------- STATS BAND --------------------------- */
  function splitNumeric(value) {
    const match = value.match(/^(\d+)(.*)$/);
    if (!match) return null;
    return { num: parseInt(match[1], 10), suffix: match[2] };
  }
  function CountUp({ target, suffix = '', duration = 2800, start }) {
    const [value, setValue] = useState(0);
    useEffect(() => {
      if (!start) return;
      const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (prefersReduced) { setValue(target); return; }
      let raf = 0; const startTime = performance.now();
      const tick = (now) => {
        const t = Math.min((now - startTime) / duration, 1);
        const eased = 1 - Math.pow(1 - t, 2);
        setValue(Math.round(target * eased));
        if (t < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [start, target, duration]);
    return <>{value}{suffix}</>;
  }
  function StatsBand() {
    const sectionRef = useRef(null);
    const [hasStarted, setHasStarted] = useState(false);
    useEffect(() => {
      if (hasStarted || !sectionRef.current) return;
      const observer = new IntersectionObserver((entries) => {
        if (entries.some((e) => e.isIntersecting)) { setHasStarted(true); observer.disconnect(); }
      }, { threshold: 0.3 });
      observer.observe(sectionRef.current);
      return () => observer.disconnect();
    }, [hasStarted]);
    return (
      <section ref={sectionRef} className="bg-primary py-12 lg:py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 divide-x-0 md:divide-x divide-primary-foreground/20">
            {D.statsBand.map((stat, index) => {
              const animatable = index < 2 ? splitNumeric(stat.value) : null;
              return (
                <div key={index} className="flex flex-col items-center text-center px-4">
                  <span className="font-headings text-4xl md:text-5xl font-bold text-accent mb-2 tabular-nums">
                    {animatable ? <CountUp target={animatable.num} suffix={animatable.suffix} start={hasStarted} /> : stat.value}
                  </span>
                  <span className="text-white/80 font-semibold text-xs uppercase tracking-[0.2em]">{stat.label}</span>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { Hero, PartnersMarquee, ProductsGrid, ServicesGrid, IndustriesSection, StatsBand });
})();