/* ============================================================
   FLOREA GRUP — Sustainability
   ============================================================ */
function Sustainability() {
  const { L } = useL();
  const PILLARS = [
    { ic: "leaf", t: { ro: "Reîmpădurire", en: "Reforestation" }, d: { ro: "Peste 42.000 de puieți plantați în județul Alba, în cadrul programului nostru anual de plantare.", en: "Over 42,000 saplings planted in Alba county through our annual planting programme." } },
    { ic: "leaf", t: { ro: "Energie verde", en: "Green energy" }, d: { ro: "Parc fotovoltaic propriu la fabrica Roman, cu o capacitate de 469 MWh/an și o reducere de 148t CO₂ anual.", en: "An in-house photovoltaic park at the Roman factory, with 469 MWh/year capacity and a 148t CO₂ annual reduction." } },
    { ic: "leaf", t: { ro: "Flotă electrică", en: "Electric fleet" }, d: { ro: "Peste 60 de autoturisme integral electrice și stații de încărcare la hoteluri, fabrici și stații de carburanți.", en: "Over 60 fully electric cars and charging stations at hotels, factories and fuel stations." } },
    { ic: "leaf", t: { ro: "Producție eficientă", en: "Efficient production" }, d: { ro: "Fabrici complet automatizate, cu eficiență energetică ridicată și amprentă de carbon redusă a produselor.", en: "Fully automated factories with high energy efficiency and a reduced product carbon footprint." } },
  ];
  return (
    <main>
      <div className="sustain-band">
        <div className="sustain-band__bg">
          <video autoPlay muted loop playsInline preload="auto">
            <source src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/video/florea-petra-pavaje.mp4" type="video/mp4" />
          </video>
        </div>
        <section className="phero phero--dark sustain-hero">
          <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
            <Reveal className="crumb"><a href="#/" style={{ color: "inherit" }}>Florea Grup</a> <Ic.arrow style={{ width: 13 }} /> <span>{L(FG.UI.nav_sustain)}</span></Reveal>
            <Reveal d="1"><h1 className="display phero__title" style={{ fontSize: "clamp(2.4rem,5.5vw,4.6rem)" }}>{L({ ro: "Construim responsabil pentru generațiile următoare", en: "Building responsibly for the next generations" })}</h1></Reveal>
            <Reveal d="2"><p className="lead phero__sub" style={{ color: "rgba(255,255,255,.85)" }}>{L({ ro: "De peste trei decenii, investim în reducerea impactului asupra mediului — energie verde, mobilitate electrică și reîmpădurire.", en: "For over three decades, we have invested in reducing our environmental impact — green energy, electric mobility and reforestation." })}</p></Reveal>
          </div>
        </section>

        {/* metrics */}
        <section className="section--tight statsband" style={{ paddingTop: "clamp(48px,6vw,80px)" }}>
          <div className="wrap">
            <div className="statsband__grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginTop: 0 }}>
              {FG.SUSTAIN.map((s, i) => (
                <Reveal key={i} d={(i % 4) + 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>
      </div>

      <section className="section">
        <div className="wrap">
          <SectionHead kicker={L({ ro: "Angajamentul nostru", en: "Our commitment" })} title={L({ ro: "Patru direcții, un singur scop", en: "Four directions, one purpose" })} />
          <div className="values-grid">
            {PILLARS.map((p, i) => (
              <Reveal key={i} d={(i % 4) + 1} className="pillar">
                <span className="pillar__ic"><Ic.leaf /></span>
                <h3 className="h-md">{L(p.t)}</h3>
                <p className="muted">{L(p.d)}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section--tight" style={{ paddingTop: 0 }}>
        <div className="wrap split">
          <Reveal className="split__img"><img src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/general/strejniciu-1-web.webp" alt="Comunitate" style={{ width: "100%", borderRadius: "var(--radius)" }} /></Reveal>
          <div className="split__text">
            <Reveal><Eyebrow>{L({ ro: "Comunitate", en: "Community" })}</Eyebrow></Reveal>
            <Reveal d="1"><h2 className="h-lg" style={{ marginTop: ".4em" }}>{L({ ro: "Alături de comunitățile în care lucrăm", en: "Alongside the communities where we work" })}</h2></Reveal>
            <Reveal d="2"><p className="lead" style={{ marginTop: ".8em" }}>{L({ ro: "De peste trei decenii, Florea Grup susține inițiative de responsabilitate socială și de mediu în Alba Iulia și în întreaga țară — pentru că dezvoltarea reală înseamnă și grija față de oameni și locuri.",
              en: "For over three decades, Florea Grup has supported social and environmental responsibility initiatives in Alba Iulia and across the country — because real development also means caring for people and places." })}</p></Reveal>
          </div>
        </div>
      </section>
      <CTABand />
    </main>
  );
}
Object.assign(window, { Sustainability });