/* ============================================================
   FLOREA GRUP — Home page
   ============================================================ */
function Home() {
  const { L } = useL();
  const H = FG.HERO;
  const title = L(H.title);

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero__bg">
          <video autoPlay muted loop playsInline preload="auto">
            <source src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/video/florea-grup-drumuri.mp4" type="video/mp4" />
          </video>
        </div>
        <div className="hero__scrim"></div>
        <div className="hero__inner">
          <div className="wrap">
            <div className="reveal in">
              <span className="hero__kicker">{L(H.kicker)}</span>
            </div>
            <h1 className="display hero__title reveal in" data-d="1">
              {title[0]} <em>{title[1]}</em> {title[2]}
            </h1>
            <p className="hero__sub reveal in" data-d="2">{L(H.sub)}</p>
            <div className="hero__cta reveal in" data-d="3">
              <a href="#/divisions" className="btn btn--primary">{L(FG.UI.cta_explore)} <Ic.arrow /></a>
              <a href="#/about" className="btn btn--ghost">{L({ ro: "Povestea noastră", en: "Our story" })}</a>
            </div>
          </div>
          <div className="wrap" style={{ marginTop: "clamp(40px,7vh,90px)" }}>
            <div className="hero__ribbon">
              {FG.STATS.slice(0, 4).map((s, i) => (
                <div key={i}>
                  <div className="n"><Counter value={s.value} suffix={s.suffix} immediate /></div>
                  <div className="l">{L(s.label)}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <a href="#/about" className="hero__scroll">{L({ ro: "Derulează", en: "Scroll" })}<Ic.arrowDown /></a>
      </section>

      {/* INTRO / POSITIONING */}
      <section className="section intro">
        <div className="wrap intro__grid">
          <Reveal><Eyebrow>{L({ ro: "Grupul", en: "The group" })}</Eyebrow></Reveal>
          <div>
            <Reveal d="1">
              <p className="intro__statement">
                {L({ ro: "Un grup integrat, cu capital 100% românesc — activ în ", en: "An integrated group, fully Romanian-owned — active across " })}
                <strong>{L({ ro: "construcții, producția de materiale, infrastructură, energie, turism și transport", en: "construction, materials production, infrastructure, energy, tourism and transport" })}</strong>.
              </p>
            </Reveal>
            <Reveal d="2">
              <p className="lead intro__body">
                {L({ ro: "Florea Grup este una dintre puținele companii din România care își produce singură principalele materii prime — betoane, prefabricate, asfalt și agregate. Acest control complet ne permite să garantăm calitatea fiecărei lucrări și respectarea termenelor.",
                     en: "Florea Grup is one of the few companies in Romania that produces its own core raw materials — concrete, precast, asphalt and aggregates. This complete control lets us guarantee the quality of every work and meet every deadline." })}
              </p>
            </Reveal>
            <Reveal d="3"><a href="#/about" className="tlink" style={{ marginTop: "1.6em" }}>{L({ ro: "Despre Florea Grup", en: "About Florea Grup" })} <Ic.arrow /></a></Reveal>
          </div>
        </div>
      </section>

      {/* DIVISIONS */}
      <section className="section section--tight divisions" id="divisions">
        <div className="wrap">
          <div className="divisions__head">
            <SectionHead kicker={L({ ro: "Producție & Servicii", en: "Production & Services" })}
              title={L({ ro: "Nouă divizii, un singur grup", en: "Nine divisions, one group" })} />
            <Reveal d="2" className="divisions__headcta">
              <a href="#/divisions" className="tlink">{L(FG.UI.view_all)} <Ic.arrow /></a>
            </Reveal>
          </div>
          <div className="dcard-grid">
            {FG.DIVISIONS.map((d, i) => <DivisionCard key={d.id} d={d} i={i} />)}
          </div>
        </div>
      </section>

      {/* STATS BAND */}
      <section className="section statsband dark">
        <div className="statsband__bg">
          <video autoPlay muted loop playsInline preload="auto">
            <source src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/video/florea-grup-pavaje.mp4" type="video/mp4" />
          </video>
        </div>
        <div className="statsband__scrim"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <Reveal><Eyebrow>{L({ ro: "Florea Grup în cifre", en: "Florea Grup in numbers" })}</Eyebrow></Reveal>
          <div className="statsband__grid">
            {FG.STATS.map((s, i) => (
              <Reveal key={i} d={(i % 3) + 1} className="statbig">
                <div className="statbig__n"><Counter value={s.value} suffix={s.suffix} /></div>
                <div className="statbig__l">{L(s.label)}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECTS TEASER */}
      <section className="section projects-teaser">
        <div className="wrap">
          <div className="divisions__head">
            <SectionHead kicker={L(FG.UI.nav_projects)}
              title={L({ ro: "Proiecte care construiesc România", en: "Projects that build Romania" })} />
            <Reveal d="2" className="divisions__headcta"><a href="#/projects" className="tlink">{L(FG.UI.view_all)} <Ic.arrow /></a></Reveal>
          </div>
          <div className="pteaser-grid">
            {FG.PROJECTS.slice(0, 3).map((p, i) => <ProjectCard key={i} p={p} i={i} big={i === 0} />)}
          </div>
        </div>
      </section>

      {/* SUSTAINABILITY STRIP */}
      <section className="sustain-strip">
        <div className="sustain-strip__bg">
          <video autoPlay muted loop playsInline preload="auto">
            <source src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/video/florea-grup-puieti.mp4" type="video/mp4" />
          </video>
        </div>
        <div className="wrap sustain-strip__inner">
          <Reveal><Eyebrow>{L(FG.UI.nav_sustain)}</Eyebrow></Reveal>
          <Reveal d="1"><h2 className="h-xl" style={{ color: "#fff", maxWidth: "16ch", marginTop: ".4em" }}>
            {L({ ro: "42.000 de puieți. Un parc fotovoltaic. O flotă electrică.", en: "42,000 saplings. A photovoltaic park. An electric fleet." })}</h2></Reveal>
          <Reveal d="2"><p className="lead" style={{ color: "rgba(255,255,255,.82)", maxWidth: "52ch", marginTop: "1em" }}>
            {L({ ro: "Reducem amprenta de carbon a fiecărei activități — de la energie verde în fabrici la încărcare electrică la punctele de lucru.",
                 en: "We cut the carbon footprint of every activity — from green energy in factories to EV charging at our sites." })}</p></Reveal>
          <Reveal d="3"><a href="#/sustainability" className="btn btn--light" style={{ marginTop: "1.8em" }}>{L({ ro: "Angajamentul nostru", en: "Our commitment" })} <Ic.arrow /></a></Reveal>
        </div>
      </section>

      {/* NEWS TEASER */}
      <section className="section news-teaser">
        <div className="wrap">
          <div className="divisions__head">
            <SectionHead kicker={L({ ro: "Noutăți & Media", en: "News & Media" })}
              title={L({ ro: "Ultimele din grup", en: "Latest from the group" })} />
            <Reveal d="2" className="divisions__headcta"><a href="#/news" className="tlink">{L(FG.UI.view_all)} <Ic.arrow /></a></Reveal>
          </div>
          <div className="nteaser-grid">
            {FG.NEWS.slice(0, 3).map((n, i) => <NewsCard key={i} n={n} i={i} />)}
          </div>
        </div>
      </section>

      <CTABand />
    </main>
  );
}

/* shared CTA band reused on multiple pages */
function CTABand() {
  const { L } = useL();
  return (
    <section className="ctaband">
      <div className="wrap ctaband__inner">
        <Reveal><h2 className="h-xl" style={{ color: "#fff", maxWidth: "18ch" }}>
          {L({ ro: "Construim parteneriate pe termen lung", en: "We build long-term partnerships" })}</h2></Reveal>
        <Reveal d="1" className="ctaband__actions">
          <a href="#/contact" className="btn btn--light">{L(FG.UI.cta_contact)} <Ic.arrow /></a>
          <a href="#/careers" className="btn btn--ghost">{L({ ro: "Cariere", en: "Careers" })}</a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home, CTABand });