// Left-column text-density alternatives for the Hero. ALL variants keep the
// big in-hero logo and the two focus cards (client-agreed) — only the text
// stack under the logo changes. The original stays 1:1 with Magic Patterns.
(function () {
  const D = window.REA_DATA;

  const GridBg = () => (
    <div aria-hidden="true" className="absolute inset-0 opacity-[0.035] pointer-events-none"
      style={{ backgroundImage: 'linear-gradient(to right, #1D2235 1px, transparent 1px), linear-gradient(to bottom, #1D2235 1px, transparent 1px)', backgroundSize: '48px 48px' }} />
  );

  const Logo = () => (
    <img src={D.logo} alt="Rom Energy Armstrong" className="hidden lg:block h-14 w-auto mb-10" />
  );

  const Ctas = () => (
    <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>
  );

  // Two focus cards — identical to the original right rail (client-agreed).
  function FocusCards() {
    return (
      <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 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 whitespace-nowrap">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>
    );
  }

  const Shell = ({ children }) => (
    <section className="relative bg-background pt-16 pb-20 lg:pt-24 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">
            {children}
          </div>
          <FocusCards />
        </div>
      </div>
    </section>
  );

  /* ===== „Titlu + text" — 2 blocuri =====
     Logo + titlu + paragraf. Elimină eyebrow-ul (care semi-repeta titlul),
     ca să rămână o ierarhie curată: ce facem + dovada. */
  function HeroTitluText() {
    return (
      <Shell>
        <Logo />
        <h1 className="font-headings text-4xl lg:text-[3.75rem] font-bold text-primary leading-[1.05] tracking-tight 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>
        <Ctas />
      </Shell>
    );
  }

  /* ===== „Eyebrow + titlu" — 2 blocuri =====
     Logo + eyebrow scurt (etichetă reală, nu o frază) + titlu. Renunță la
     paragraf; cârligul din titlu poartă mesajul, iar dovada „30 de ani" intră
     ca o linie scurtă sub titlu (un singur rând, nu un bloc de text). */
  function HeroEyebrow() {
    return (
      <Shell>
        <Logo />
        <div className="flex items-center gap-3 mb-6">
          <span className="block w-px h-3.5 bg-accent"></span>
          <span className="text-xs font-bold tracking-[0.2em] text-accent uppercase">Abur · Aer · Apă caldă</span>
        </div>
        <h1 className="font-headings text-4xl lg:text-[3.75rem] font-bold text-primary leading-[1.05] tracking-tight 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-base font-semibold text-foreground/60 mb-10 leading-relaxed">
          30 de ani lângă rafinării, combinate chimice și fabrici de proces.
        </p>
        <Ctas />
      </Shell>
    );
  }

  Object.assign(window, { HeroTitluText, HeroEyebrow });
})();