/* ============================================================
   FLOREA GRUP — Divisions overview + detail
   ============================================================ */
function Divisions() {
  const { L } = useL();
  const prod = FG.DIVISIONS.filter(d => L(d.cat) === "Producție" || d.cat.ro === "Producție" || d.cat.ro === "Prefabricate beton");
  return (
    <main>
      <PageHero crumb={L(FG.UI.nav_divisions)}
        title={L({ ro: "Nouă divizii integrate", en: "Nine integrated divisions" })}
        sub={L({ ro: "De la materia primă la lucrarea finită — producem, construim și operăm sub același acoperiș.",
                 en: "From raw material to finished work — we produce, build and operate under one roof." })} />
      <section className="section--tight">
        <div className="wrap">
          <div className="dcard-grid">
            {FG.DIVISIONS.map((d, i) => <DivisionCard key={d.id} d={d} i={i} />)}
          </div>
        </div>
      </section>
      <CTABand />
    </main>
  );
}

function DivisionDetail({ id }) {
  const { L } = useL();
  const list = FG.DIVISIONS;
  const idx = list.findIndex(d => d.id === id);
  const d = list[idx];
  if (!d) return <Stub name="Diviziune" />;
  const next = list[(idx + 1) % list.length];
  const prev = list[(idx - 1 + list.length) % list.length];
  const [lboxIdx, setLboxIdx] = useState(null);
  useEffect(() => {
    if (lboxIdx == null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLboxIdx(null);
      if (e.key === "ArrowLeft" && d.gallery) setLboxIdx(i => (i - 1 + d.gallery.length) % d.gallery.length);
      if (e.key === "ArrowRight" && d.gallery) setLboxIdx(i => (i + 1) % d.gallery.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lboxIdx, d.gallery]);

  // light per-division highlights
  const HL = {
    betoane: [["4", { ro: "fabrici de betoane", en: "concrete plants" }], ["2006", { ro: "prima stație", en: "first plant" }], ["DE", { ro: "tehnologie germană", en: "German technology" }]],
    petra: [["4", { ro: "fabrici naționale", en: "national factories" }], ["600+", { ro: "produse", en: "products" }], ["40M€", { ro: "investiții", en: "invested" }]],
    asfalt: [["2011", { ro: "stație proprie", en: "own plant" }], ["100%", { ro: "control calitate", en: "quality control" }]],
    agregate: [["1", { ro: "carieră proprie", en: "own quarry" }], ["✓", { ro: "spălate & sortate", en: "washed & sorted" }]],
    constructii: [["30", { ro: "ani experiență", en: "years experience" }], ["✓", { ro: "antreprenor general", en: "general contractor" }]],
    carburanti: [["11", { ro: "stații în Alba", en: "stations in Alba" }], ["1996", { ro: "anul fondării", en: "founding year" }]],
    hoteluri: [["3", { ro: "hoteluri", en: "hotels" }], ["4★", { ro: "premiate", en: "awarded" }], ["1", { ro: "parc acvatic", en: "water park" }]],
    utilaje: [["320+", { ro: "utilaje proprii", en: "owned machines" }], ["✓", { ro: "echipe specializate", en: "specialised crews" }]],
    laborator: [["9", { ro: "puncte de testare", en: "testing points" }], ["✓", { ro: "materii prime & produse", en: "raw & finished" }]],
  }[d.id] || [];

  return (
    <main>
      <section className="ddetail-hero">
        <div className="ddetail-hero__img">
          {d.heroImg
            ? <img src={d.heroImg} alt={L(d.name)} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            : <Ph label={d.ph} />}
        </div>
        <div className="ddetail-hero__scrim"></div>
        <div className="wrap ddetail-hero__inner">
          <Reveal className="crumb" style={{ color: "rgba(255,255,255,.8)" }}>
            <a href="#/divisions" style={{ color: "inherit" }}>{L(FG.UI.nav_divisions)}</a> <Ic.arrow style={{ width: 13 }} /> <span>{L(d.name)}</span>
          </Reveal>
          <span className="ddetail-hero__no">{d.no}</span>
          <h1 className="display" style={{ color: "#fff", fontSize: "clamp(2.6rem,6vw,5rem)" }}>{L(d.name)}</h1>
          <p className="ddetail-hero__cat">{L(d.cat)} — {L(d.tag)}</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap ddetail-body">
          <div>
            <Reveal><Eyebrow>{L({ ro: "Prezentare", en: "Overview" })}</Eyebrow></Reveal>
            <Reveal d="1"><p className="lead" style={{ marginTop: "1em" }}>{L(d.desc)}</p></Reveal>
            <Reveal d="2"><p style={{ marginTop: "1.2em", color: "var(--graphite)" }}>{L({
              ro: "Această diviziune este parte dintr-un lanț integrat: materiile prime, producția și execuția aparțin aceluiași grup. Rezultatul — calitate controlată la fiecare pas și termene respectate.",
              en: "This division is part of an integrated chain: raw materials, production and execution belong to the same group. The result — quality controlled at every step and deadlines met." })}</p></Reveal>
            <Reveal d="3" style={{ marginTop: "1.8em" }}>
              <a href="#/contact" className="btn btn--primary">{L({ ro: "Solicită o ofertă", en: "Request a quote" })} <Ic.arrow /></a>
            </Reveal>
          </div>
          <aside className="ddetail-facts">
            {HL.map(([n, lab], i) => (
              <Reveal key={i} d={i + 1} className="dfact">
                <span className="dfact__n">{n}</span>
                <span className="dfact__l">{L(lab)}</span>
              </Reveal>
            ))}
          </aside>
        </div>
      </section>

      {/* gallery */}
      <section className="section--tight" style={{ paddingTop: 0 }}>
        <div className="wrap ddetail-gallery">
          {d.gallery ? (
            d.gallery.map((url, i) => (
              <Reveal key={i} d={i % 3 ? String(i % 3) : ""} className={"gg" + (i % 3)} style={{ marginTop: i >= 3 ? "clamp(14px,1.6vw,22px)" : (i === 1 ? "3rem" : 0) }}>
                <img src={url} alt={L(d.name) + " " + (i + 1)} onClick={() => setLboxIdx(i)} />
              </Reveal>
            ))
          ) : (
            <>
              <Reveal className="gg0"><Ph label={d.ph + " — 1"} ratio="4/3" /></Reveal>
              <Reveal d="1" className="gg1" style={{ marginTop: "3rem" }}><Ph label={d.ph + " — 2"} ratio="4/3" /></Reveal>
              <Reveal d="2" className="gg2"><Ph label={d.ph + " — 3"} ratio="4/3" /></Reveal>
            </>
          )}
        </div>
      </section>

      {/* lightbox */}
      {lboxIdx != null && d.gallery && (
        <div className="lbox-overlay" onClick={() => setLboxIdx(null)} onMouseDown={(e) => e.target === e.currentTarget && setLboxIdx(null)}>
          <button className="lbox-close" onClick={() => setLboxIdx(null)} aria-label="Close"><Ic.close /></button>
          {d.gallery.length > 1 && (
            <>
              <button className="lbox-prev" onClick={(e) => { e.stopPropagation(); setLboxIdx(i => (i - 1 + d.gallery.length) % d.gallery.length); }} aria-label="Previous"><Ic.arrow style={{ transform: "rotate(180deg)" }} /></button>
              <button className="lbox-next" onClick={(e) => { e.stopPropagation(); setLboxIdx(i => (i + 1) % d.gallery.length); }} aria-label="Next"><Ic.arrow /></button>
            </>
          )}
          <img src={d.gallery[lboxIdx]} alt={L(d.name) + " " + (lboxIdx + 1)} onClick={(e) => e.stopPropagation()} />
          <span className="lbox-counter">{lboxIdx + 1} / {d.gallery.length}</span>
        </div>
      )}

      {/* prev / next */}
      <section className="ddetail-nav dark">
        <a href={"#/divisions/" + prev.id} className="ddetail-nav__item">
          <span className="muted"><Ic.arrow style={{ width: 15, transform: "rotate(180deg)" }} /> {L(FG.UI.back)}</span>
          <span className="h-md" style={{ color: "#fff" }}>{L(prev.name)}</span>
        </a>
        <a href={"#/divisions/" + next.id} className="ddetail-nav__item ddetail-nav__item--r">
          <span className="muted">{L({ ro: "Următoarea", en: "Next" })} <Ic.arrow style={{ width: 15 }} /></span>
          <span className="h-md" style={{ color: "#fff" }}>{L(next.name)}</span>
        </a>
      </section>
    </main>
  );
}

Object.assign(window, { Divisions, DivisionDetail });