// Six desktop mega menus — ported 1:1 from src/components/MegaMenu*.tsx.
// className strings verbatim; lucide icons map to <Icon>. Each renders inside
// the sticky <header>, absolutely positioned below it (top-full).
(function () {
  const { useState, useEffect, useMemo, useRef } = React;
  const D = window.REA_DATA;
  // Category icons: bespoke navy SVGs per product category (filename === slug),
  // resolved relative to the host page (pages/<x>/ or ui_kits/website/ → root /assets).
  const CAT_ICON = (slug) => `../../assets/category-icons/${slug}.svg`;
  const SHELL = "absolute left-0 right-0 top-full bg-background border-b border-border shadow-2xl z-50 min-h-[500px] max-h-[85vh] overflow-y-auto";

  /* ----------------------------- PRODUSE ----------------------------- */
  function MegaMenuProducts({ onClose }) {
    const [activeIndex, setActiveIndex] = useState(0);
    const [query, setQuery] = useState('');
    const searchInputRef = useRef(null);
    useEffect(() => { const t = setTimeout(() => searchInputRef.current && searchInputRef.current.focus(), 50); return () => clearTimeout(t); }, []);
    const cats = D.productCategories;
    const searchResults = useMemo(() => {
      const q = query.trim().toLowerCase();
      if (!q) return null;
      const results = [];
      cats.forEach((cat) => cat.items.forEach((item) => {
        if (item.toLowerCase().includes(q) || cat.title.toLowerCase().includes(q)) results.push({ category: cat, item });
      }));
      return results;
    }, [query]);
    const activeCategory = cats[activeIndex];
    const itemsPerCol = Math.ceil(activeCategory.items.length / 3);
    const columns = [activeCategory.items.slice(0, itemsPerCol), activeCategory.items.slice(itemsPerCol, itemsPerCol * 2), activeCategory.items.slice(itemsPerCol * 2)];
    return (
      <div className={SHELL}>
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between pt-8 pb-5">
            <h3 className="font-headings text-xl font-bold text-primary leading-tight">Catalog complet de echipamente industriale</h3>
          </div>
          <div className="flex items-center gap-4 pb-5 border-b border-border">
            <div className="flex-grow relative">
              <Icon name="search" className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
              <input ref={searchInputRef} type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Caută în catalog…"
                className="w-full bg-muted/60 border border-border rounded-sm pl-10 pr-10 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-colors" aria-label="Caută în catalogul de produse" />
              {query && (
                <button onClick={() => setQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors" aria-label="Șterge căutarea">
                  <Icon name="x" className="w-4 h-4" />
                </button>
              )}
            </div>
            <button onClick={onClose} className="p-2 text-muted-foreground hover:text-foreground transition-colors flex-shrink-0" aria-label="Închide meniul">
              <Icon name="x" className="w-5 h-5" />
            </button>
          </div>
          {searchResults === null ? (
            <div className="grid grid-cols-12 min-h-[460px] max-h-[70vh]">
              <nav className="col-span-4 lg:col-span-3 border-r border-border py-4 overflow-y-auto" aria-label="Categorii produse">
                <ul className="space-y-px">
                  {cats.map((cat, idx) => {
                    const isActive = idx === activeIndex;
                    return (
                      <li key={cat.slug}>
                        <button onClick={() => setActiveIndex(idx)}
                          className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors group ${isActive ? 'bg-muted text-primary' : 'text-foreground/75 hover:bg-muted/50 hover:text-primary'}`}
                          aria-current={isActive ? 'true' : undefined}>
                          <img src={CAT_ICON(cat.slug)} alt="" aria-hidden="true" className={`w-11 h-11 flex-shrink-0 object-contain transition-opacity ${isActive ? 'opacity-100' : 'opacity-85 group-hover:opacity-100'}`} loading="lazy" />
                          <span className="text-sm font-semibold flex-grow leading-tight">{cat.title}</span>
                          <Icon name="arrow-right" className={`w-3.5 h-3.5 flex-shrink-0 transition-all ${isActive ? 'text-accent opacity-100 translate-x-0' : 'opacity-0 -translate-x-1 group-hover:opacity-60 group-hover:translate-x-0'}`} />
                        </button>
                      </li>
                    );
                  })}
                </ul>
              </nav>
              <div className="col-span-8 lg:col-span-9 p-8 overflow-y-auto">
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-16 h-16 bg-primary/5 rounded-sm flex items-center justify-center">
                    <img src={CAT_ICON(activeCategory.slug)} alt="" aria-hidden="true" className="w-12 h-12 object-contain" />
                  </div>
                  <a href={activeCategory.href} onClick={onClose} className="group">
                    <h3 className="font-headings text-xl font-bold text-primary leading-tight group-hover:text-accent transition-colors">{activeCategory.title}</h3>
                  </a>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2 mb-6">
                  {columns.map((col, colIdx) => (
                    <ul key={colIdx} className="space-y-1.5">
                      {col.map((item) => (
                        <li key={item}>
                          <a href={D.linkForItem(item)} onClick={onClose} className="block py-1.5 text-sm text-foreground/70 hover:text-accent transition-colors leading-snug">{item}</a>
                        </li>
                      ))}
                    </ul>
                  ))}
                </div>
                <div className="mt-6 pt-4 border-t border-border flex justify-end">
                  <a href={activeCategory.href} onClick={onClose} className="inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors group">
                    {`Vezi toată gama ${activeCategory.title.toLowerCase()}`}
                    <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              </div>
            </div>
          ) : (
            <div className="py-6 max-h-[70vh] overflow-y-auto">
              {searchResults.length === 0 ? (
                <div className="text-center py-12">
                  <p className="text-sm text-muted-foreground">Niciun produs găsit pentru „<span className="text-foreground font-semibold">{query}</span>".</p>
                  <p className="text-xs text-muted-foreground mt-2">Încearcă alți termeni sau <a href="#" onClick={onClose} className="text-accent hover:underline">contactează-ne direct</a>.</p>
                </div>
              ) : (
                <>
                  <p className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase mb-4">{searchResults.length} rezultat{searchResults.length === 1 ? '' : 'e'} pentru „<span className="text-foreground">{query}</span>"</p>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-2">
                    {searchResults.map((r, idx) => (
                      <a key={idx} href={D.linkForItem(r.item)} onClick={onClose} className="block py-2 px-3 hover:bg-muted/50 rounded-sm transition-colors">
                        <div className="text-sm font-semibold text-foreground group-hover:text-accent">{r.item}</div>
                        <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase mt-0.5">{r.category.title}</div>
                      </a>
                    ))}
                  </div>
                </>
              )}
            </div>
          )}
        </div>
      </div>
    );
  }

  /* ---------------------------- SERVICII ----------------------------- */
  function MegaMenuServices({ onClose }) {
    return (
      <div className={SHELL}>
        <div className="container mx-auto px-4 py-8">
          <div className="mb-6">
            <h3 className="font-headings text-xl font-bold text-primary leading-tight">Servicii esențiale pentru performanța instalațiilor</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-border border border-border rounded-sm overflow-hidden">
            {D.services.map((service) => (
              <a key={service.slug} href={D.linkForItem(service.title)} onClick={onClose} className="group flex items-start gap-4 p-5 bg-card hover:bg-muted/40 transition-colors">
                <div className="w-28 h-20 rounded-sm overflow-hidden bg-muted flex-shrink-0">
                  <img src={service.image} alt={service.title} className="w-full h-full object-cover" loading="lazy" />
                </div>
                <div className="flex-grow min-w-0">
                  <h4 className="font-headings text-base font-bold text-primary leading-snug mb-1 group-hover:text-accent transition-colors">{service.title}</h4>
                  <p className="text-sm text-foreground/70 leading-snug">{service.description}</p>
                </div>
                <Icon name="arrow-right" className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-1 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-accent transition-all" />
              </a>
            ))}
          </div>
          <div className="mt-6 pt-4 border-t border-border flex justify-end">
            <a href="../servicii/index.html" onClick={onClose} className="inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors group">
              Vezi toate serviciile
              <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------------------- PARTENERI ---------------------------- */
  function MegaMenuPartners({ onClose }) {
    return (
      <div className={SHELL}>
        <div className="container mx-auto px-4 py-8">
          <div className="mb-6">
            <h3 className="font-headings text-xl font-bold text-primary leading-tight">Branduri industriale recunoscute la nivel internațional</h3>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-border border border-border rounded-sm overflow-hidden">
            {D.partners.slice(0, 9).map((partner) => (
              <a key={partner.name} href={partner.href || '../parteneri/index.html'} onClick={onClose} className="group flex flex-col p-5 bg-card hover:bg-muted/40 transition-colors">
                <div className="flex items-start justify-between gap-3 mb-4 min-h-[40px]">
                  <img src={partner.logo} alt={`${partner.name} logo`} className={`${partner.cardLogoHeightClass || 'h-10'} w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity`} loading="lazy" />
                  <span className="hidden md:inline-block text-[10px] font-bold tracking-[0.2em] text-muted-foreground uppercase flex-shrink-0 whitespace-nowrap pt-1">{partner.country}</span>
                </div>
                <p className="text-xs text-foreground/70 leading-snug group-hover:text-foreground transition-colors">{partner.specialty}</p>
              </a>
            ))}
          </div>
          <div className="mt-6 pt-4 border-t border-border flex justify-end">
            <a href="../parteneri/index.html" onClick={onClose} className="inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors group">
              Vezi toți partenerii
              <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    );
  }

  /* ----------------------------- DESPRE ------------------------------ */
  function MegaMenuAbout({ onClose }) {
    return (
      <div className={SHELL}>
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10">
            <div className="md:col-span-2 relative min-h-[320px] rounded-sm overflow-hidden">
              <img src={D.aboutImage} alt="Sediul Romenergy" className="absolute inset-0 w-full h-full object-cover" />
              <div className="absolute inset-0 bg-primary/15" aria-hidden="true" />
            </div>
            <div className="md:col-span-3 flex flex-col">
              <h3 className="font-headings text-xl font-bold text-primary leading-tight mb-4">Partener tehnic pentru industria românească din 1994</h3>
              <p className="text-sm text-foreground/70 leading-relaxed mb-6">Importăm și distribuim echipamente industriale pentru sisteme abur-condens, armături, instrumentație și pneumatică. Reprezentăm exclusiv 9 producători din Europa și SUA. Servim rafinării, combinate chimice, energie, farmaceutică și alte 7 industrii grele.</p>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-px bg-border border border-border rounded-sm overflow-hidden">
                {D.aboutStats.map((s) => (
                  <div key={s.label} className="bg-card p-4 flex flex-col">
                    <span className="font-headings text-2xl font-bold text-primary leading-none mb-2">{s.value}</span>
                    <span className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase leading-tight">{s.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="mt-6 pt-4 border-t border-border flex justify-end">
            <a href="../companie/index.html" onClick={onClose} className="inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors group">
              Vezi povestea completă
              <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    );
  }

  /* ----------------------------- CARIERE ----------------------------- */
  function MegaMenuCareers({ onClose }) {
    return (
      <div className={SHELL}>
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10">
            <div className="md:col-span-2 relative min-h-[380px] rounded-sm overflow-hidden">
              <img src={D.teamImage} alt="Echipa tehnică Rom Energy" className="absolute inset-0 w-full h-full object-cover" />
              <div className="absolute inset-0 bg-primary/10" aria-hidden="true" />
            </div>
            <div className="md:col-span-3 flex flex-col">
              <h3 className="font-headings text-xl font-bold text-primary leading-tight mb-3">Construim echipa pentru următorii 30 de ani</h3>
              <p className="text-sm text-foreground/70 leading-relaxed mb-5">Căutăm ingineri, vânzători tehnici și tehnicieni de atelier cu apetit pentru detaliul tehnic și proiecte reale în industria românească.</p>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-px bg-border border border-border rounded-sm overflow-hidden mb-6">
                {D.values.map((v) => (
                  <div key={v.title} className="bg-card p-4 flex flex-col">
                    <div className="flex items-center gap-2 mb-3">
                      <Icon name={v.icon} className="w-4 h-4 text-accent flex-shrink-0" strokeWidth={1.75} />
                      <span className="text-xs font-bold tracking-[0.2em] text-muted-foreground uppercase leading-tight">{v.title}</span>
                    </div>
                    <span className="font-headings text-3xl font-bold text-primary leading-none mb-1.5">{v.stat}</span>
                    <span className="text-xs text-foreground/70 leading-snug">{v.statLabel}</span>
                  </div>
                ))}
              </div>
              <div>
                <div className="flex items-baseline justify-between mb-3">
                  <h4 className="text-xs font-bold tracking-[0.2em] text-muted-foreground uppercase">Poziții deschise</h4>
                  <span className="text-xs font-semibold text-foreground/70">{D.openPositions.length} disponibile</span>
                </div>
                <ul className="border border-border rounded-sm divide-y divide-border overflow-hidden">
                  {D.openPositions.map((p) => (
                    <li key={p.title}>
                      <a href="#" onClick={onClose} className="group flex items-center gap-4 px-4 py-3 hover:bg-muted/40 transition-colors">
                        <div className="flex items-baseline gap-3 min-w-0 flex-grow">
                          <span className="font-headings text-sm font-bold text-primary group-hover:text-accent transition-colors truncate">{p.title}</span>
                          <span className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase whitespace-nowrap">{p.department}</span>
                        </div>
                        <span className="hidden sm:inline-flex items-center gap-1 text-xs text-foreground/70 flex-shrink-0 min-w-[8rem]">
                          <Icon name="map-pin" className="w-3 h-3 flex-shrink-0" strokeWidth={2} />
                          {p.location}
                        </span>
                        <Icon name="arrow-right" className="w-4 h-4 text-muted-foreground opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-accent transition-all flex-shrink-0" strokeWidth={2} />
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
          <div className="mt-6 pt-4 border-t border-border flex items-center justify-end gap-4">
            <a href="../cariere/index.html" onClick={onClose} className="inline-flex items-center px-3 py-1.5 border border-border text-sm font-semibold text-foreground/80 hover:text-primary hover:border-primary rounded-sm transition-colors">Trimite CV</a>
            <a href="../cariere/index.html" onClick={onClose} className="inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors group">
              Vezi toate pozițiile
              <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { MegaMenuProducts, MegaMenuServices, MegaMenuPartners, MegaMenuAbout, MegaMenuCareers });
})();
