/* ============================================================
   FLOREA GRUP — Hospitality
   ============================================================ */
function Hospitality() {
  const { L } = useL();
  return (
    <main>
      <PageHero crumb={L(FG.UI.nav_hospitality)}
        title={L({ ro: "Ospitalitate de referință în Alba Iulia", en: "Benchmark hospitality in Alba Iulia" })}
        sub={L({ ro: "Două hoteluri premiate, restaurante, săli de conferință și un parc acvatic — un pachet complet pentru turiști și localnici.",
                 en: "Two awarded hotels, restaurants, conference halls and a water park — a complete package for tourists and locals." })} />
      <section className="section--tight">
        <div className="wrap hotels">
          {FG.HOTELS.map((h, i) => (
            <Reveal key={h.id} d={(i % 3) + 1} className={"hotel" + (i % 2 ? " hotel--rev" : "")}>
              <div className="hotel__img">{h.img ? <img src={h.img} alt={L(h.name)} /> : <Ph label={h.ph} />}</div>
              <div className="hotel__body">
                <div className="hotel__stars">{Array.from({ length: h.stars }).map((_, k) => <Ic.star key={k} style={{ width: 16 }} />)}</div>
                <h2 className="h-lg">{L(h.name)}</h2>
                <p className="hotel__loc">{L(h.loc)}</p>
                <p className="lead" style={{ marginTop: ".6em" }}>{L(h.desc)}</p>
                {h.link
                  ? <a href={"https://" + h.link} target="_blank" rel="noreferrer" className="btn btn--primary" style={{ marginTop: "1.4em" }}>{L({ ro: "Rezervă acum", en: "Book now" })} <Ic.ext /></a>
                  : <span className="tlink" style={{ marginTop: "1.4em" }}>{L({ ro: "Detalii în curând", en: "Details soon" })}</span>}
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section--tight dark">
        <div className="wrap center">
          <Reveal><Eyebrow plain>{L({ ro: "Recunoaștere", en: "Recognition" })}</Eyebrow></Reveal>
          <Reveal d="1"><h2 className="h-xl" style={{ color: "#fff", maxWidth: "20ch", margin: ".5em auto 0" }}>{L({ ro: "Premiate la Top Hotel Awards & eTravel Awards", en: "Awarded at Top Hotel Awards & eTravel Awards" })}</h2></Reveal>
          <Reveal d="2"><p className="lead" style={{ color: "rgba(255,255,255,.8)", maxWidth: "56ch", margin: "1em auto 0" }}>{L({ ro: "Hotelurile noastre au fost prima alegere pentru mulți turiști și etalon pentru calitate și ospitalitate în România.", en: "Our hotels have been the first choice for many tourists and a benchmark for quality and hospitality in Romania." })}</p></Reveal>
        </div>
      </section>
      <CTABand />
    </main>
  );
}
Object.assign(window, { Hospitality });