/* ============================================================
   FLOREA GRUP — About + interactive timeline
   ============================================================ */
function PageHero({ crumb, title, sub, dark, img }) {
  const { L } = useL();
  return (
    <section className={"phero" + (dark ? " phero--dark" : "") + (img ? " phero--has-bg" : "")}
      style={img ? { backgroundImage: `url(${img})`, backgroundSize: "cover", backgroundPosition: "center" } : {}}>
      {img && <div className="phero__scrim"></div>}
      <div className="wrap">
        <Reveal className="crumb"><a href="#/" style={{ color: "inherit" }}>Florea Grup</a> <Ic.arrow style={{ width: 13 }} /> <span>{crumb}</span></Reveal>
        <Reveal d="1"><h1 className="display phero__title" style={{ fontSize: "clamp(2.4rem,5.5vw,4.6rem)" }}>{title}</h1></Reveal>
        {sub && <Reveal d="2"><p className="lead phero__sub" style={{ color: dark ? "rgba(255,255,255,.82)" : "var(--graphite)" }}>{sub}</p></Reveal>}
      </div>
    </section>
  );
}

function About() {
  const { L } = useL();
  const T = FG.TIMELINE;
  const [active, setActive] = useState(T.length - 1);
  const m = T[active];

  const VALUES = [
    { ro: ["Capital românesc", "Fondat în 1996 de frații Marcel și David Florea. Integral privat, 100% românesc."],
      en: ["Romanian capital", "Founded in 1996 by brothers Marcel and David Florea. Fully private, 100% Romanian."] },
    { ro: ["Integrare verticală", "Producem singuri betoane, prefabricate, asfalt și agregate — calitate garantată."],
      en: ["Vertical integration", "We produce our own concrete, precast, asphalt and aggregates — guaranteed quality."] },
    { ro: ["Expansiune organică", "Fiecare etapă a completat o afacere deja consolidată. Creștere chibzuită și îndrăzneață."],
      en: ["Organic expansion", "Each stage completed an already-consolidated business. Measured yet bold growth."] },
    { ro: ["Parteneriate durabile", "Clienți, angajați și parteneri alături de noi de trei decenii."],
      en: ["Lasting partnerships", "Clients, employees and partners alongside us for three decades."] },
  ];

  return (
    <main>
      <PageHero dark crumb={L(FG.UI.nav_about)}
        img="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/general/florea-grup-pano.webp"
        title={L({ ro: "De la o stație de carburanți la un lider național", en: "From a fuel station to a national leader" })}
        sub={L({ ro: "Florea Grup este un grup de companii cu capital integral privat românesc, activ în construcții, producția de materiale, infrastructură, energie, turism și transport.",
                 en: "Florea Grup is a group of companies with fully private Romanian capital, active in construction, materials production, infrastructure, energy, tourism and transport." })} />

      {/* Story */}
      <section className="section">
        <div className="wrap about-story">
          <Reveal>
            <p className="intro__statement">{L({ ro: "Doi frați. Un oraș. Treizeci de ani de construit, la propriu.", en: "Two brothers. One city. Thirty years of building — literally." })}</p>
          </Reveal>
          <div className="stack">
            <Reveal d="1"><p className="lead">{L({ ro: "Spiritul antreprenorial al fraților Marcel și David Florea a fost moștenit din familie. Era doar o chestiune de timp până să pornească propria afacere — iar asta s-a întâmplat în 1996, la Alba Iulia, cu o stație de carburanți.",
              en: "The entrepreneurial spirit of brothers Marcel and David Florea was inherited from family. It was only a matter of time before they started their own business — and that happened in 1996, in Alba Iulia, with a fuel station." })}</p></Reveal>
            <Reveal d="2"><p>{L({ ro: "De acolo, compania și-a extins treptat activitatea: producția de betoane în 2006, antreprenoriat în construcții civile și industriale, prefabricate din beton sub brandul Petra Pavaje, ospitalitate și energie. Astăzi, Florea Grup este recunoscut pentru una dintre cele mai rapide expansiuni din domeniul materialelor de construcții din România.",
              en: "From there, the company gradually expanded: concrete production in 2006, civil and industrial construction, precast concrete under the Petra Pavaje brand, hospitality and energy. Today, Florea Grup is recognised for one of the fastest expansions in Romania's construction-materials sector." })}</p></Reveal>
          </div>
        </div>
      </section>

      {/* Interactive timeline */}
      <section className="section--tight dark timeline-sec">
        <div className="wrap">
          <SectionHead light kicker={L({ ro: "Istoric", en: "History" })}
            title={L({ ro: "Treizeci de ani, pas cu pas", en: "Thirty years, step by step" })} />
          <div className="tl">
            <div className="tl__rail" role="tablist">
              {T.map((x, i) => (
                <button key={x.year} role="tab" aria-selected={i === active}
                  className={"tl__year" + (i === active ? " is-active" : "")}
                  onClick={() => setActive(i)}>{x.year}</button>
              ))}
            </div>
            <div className="tl__panel">
              <div className="tl__img">{m.img ? <img src={m.img} alt={m.year} /> : <Ph label={"Milestone — " + m.year} dark />}</div>
              <div className="tl__content">
                <span className="tl__bigyear">{m.year}</span>
                <h3 className="h-lg" style={{ color: "#fff", marginTop: ".2em" }}>{L(m.t)}</h3>
                <p className="lead" style={{ marginTop: ".8em", color: "rgba(255,255,255,.82)" }}>{L(m.d)}</p>
                <div className="tl__nav">
                  <button disabled={active === 0} onClick={() => setActive(a => Math.max(0, a - 1))} aria-label="prev"><Ic.arrow style={{ transform: "rotate(180deg)" }} /></button>
                  <span className="tnum">{active + 1} / {T.length}</span>
                  <button disabled={active === T.length - 1} onClick={() => setActive(a => Math.min(T.length - 1, a + 1))} aria-label="next"><Ic.arrow /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section">
        <div className="wrap">
          <SectionHead kicker={L({ ro: "Valori", en: "Values" })} title={L({ ro: "Ce ne ține împreună", en: "What holds us together" })} />
          <div className="values-grid">
            {VALUES.map((v, i) => {
              const val = L({ ro: v.ro, en: v.en });
              return (
                <Reveal key={i} d={(i % 4) + 1} className="value">
                  <span className="value__no">0{i + 1}</span>
                  <h3 className="h-md">{val[0]}</h3>
                  <p className="muted">{val[1]}</p>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* Leadership */}
      <section className="section--tight">
        <div className="wrap leaders">
          <Reveal className="leaders__img"><img src="https://pub-6cc072b59c054e65a839e3cc379e2b5b.r2.dev/general/floreagrup-30de-ani.webp" alt="Marcel & David Florea — founders" /></Reveal>
          <div className="leaders__text">
            <Reveal><Eyebrow>{L({ ro: "Fondatori", en: "Founders" })}</Eyebrow></Reveal>
            <Reveal d="1"><h2 className="h-lg" style={{ marginTop: ".4em" }}>Marcel & David Florea</h2></Reveal>
            <Reveal d="2"><p className="lead" style={{ marginTop: ".8em" }}>{L({ ro: "„Deciziile de dezvoltare au fost chibzuite și îndrăznețe în același timp. Dezvoltarea companiei a fost una organică, în care fiecare etapă a venit să completeze o afacere deja consolidată.”",
              en: "\u201cOur development decisions were measured and bold at the same time. The company's growth was organic — each stage came to complete an already-consolidated business.\u201d" })}</p></Reveal>
          </div>
        </div>
      </section>

      <CTABand />
    </main>
  );
}

Object.assign(window, { About, PageHero });