// pages/rooms.jsx — Rooms & Suites listing

function RoomsPage() {
  const { t, lang, navigate, currency } = useApp();
  return (
    <div className="page-enter">
      <section className="page-hero" style={{ position: "relative", overflow: "hidden", padding: "240px 0 120px" }}>
        <Photo src="images/krakow/wawel-cathedral.jpg" alt="Katedra wawelska" ratio="auto" style={{ position: "absolute", inset: 0 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,12,10,.4), rgba(15,12,10,.7))" }} />
        <div className="container" style={{ position: "relative", textAlign: "center", color: "#FAF7F2" }}>
          <div className="eyebrow" style={{ marginBottom: 24, color: "#C7A77A", justifyContent: "center" }}>{t.rooms.eyebrow}</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(56px, 8vw, 104px)", fontWeight: 400, color: "#FAF7F2", letterSpacing: "0.01em", lineHeight: 1 }}>
            {lang === "pl" ? "Nasze" : "Our"} <em style={{ fontStyle: "italic", color: "#C7A77A" }}>{lang === "pl" ? "pokoje" : "rooms"}</em>
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split-2" style={{ alignItems: "start", marginBottom: 80 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{lang === "pl" ? "Kolekcja Długa" : "The Długa collection"}</div>
              <h2 className="h2" style={{ maxWidth: "16ch" }}>
                {t.rooms.title_a}<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.rooms.title_b}</em>
              </h2>
            </div>
            <div>
              <p className="lead" style={{ marginBottom: 28 }}>{t.rooms.body}</p>
              <p className="muted" style={{ fontSize: 14, maxWidth: "52ch" }}>
                {lang === "pl"
                  ? "W części wspólnej znajduje się w pełni wyposażona kuchnia: płyta indukcyjna, mikrofalówka, lodówka, ekspres do kawy, toster i czajnik."
                  : "The common area features a fully equipped kitchen: induction hob, microwave, fridge, espresso machine, toaster and kettle."}
              </p>
            </div>
          </div>

          <div className="grid-4" style={{ marginBottom: 100, gap: 32 }}>
            {[
              [Ic.bed, lang === "pl" ? "Prywatna łazienka" : "Private bathroom"],
              [Ic.coffee, lang === "pl" ? "Wspólna kuchnia" : "Shared kitchen"],
              [Ic.wifi, lang === "pl" ? "Bezpłatne Wi-Fi" : "Free Wi-Fi"],
              [Ic.pin, lang === "pl" ? "900 m do Rynku Głównego" : "900 m to the Market Square"],
            ].map(([I, label], i) => (
              <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
                <I color="var(--accent)" />
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.4, paddingTop: 2 }}>{label}</div>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 100 }}>
            {t.rooms.cards.map((c, i) => (
              <RoomRow key={i} card={c} idx={i} reverse={i % 2 === 1}
                onView={() => navigate("room-detail", { roomIdx: i })}
                onBook={() => navigate("reservation", { roomIdx: i })}
              />
            ))}
          </div>
        </div>
      </section>

      <SectionCTA />
    </div>
  );
}

function RoomRow({ card, idx, reverse, onView, onBook }) {
  const { t, currency, lang } = useApp();
  return (
    <article style={{ display: "grid", gridTemplateColumns: reverse ? "1fr 1.2fr" : "1.2fr 1fr", gap: 60, alignItems: "center" }}>
      <div style={{ order: reverse ? 2 : 1, position: "relative" }}>
        <Photo src={roomImg(idx)} alt={card.name} ratio="4/3" />
        <div style={{ position: "absolute", bottom: 0, left: 0, background: "var(--ink)", color: "var(--bg)", padding: "16px 24px", display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.6 }}>{t.common.from}</span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 500 }}>{formatPrice(card.priceFrom, currency)}</span>
          <span style={{ fontSize: 12, opacity: 0.6 }}>{t.common.perNight}</span>
        </div>
        <div style={{ position: "absolute", top: 0, right: 0, background: "var(--bg)", padding: "10px 16px", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-2)" }}>
          0{idx + 1} / 0{t.rooms.cards.length}
        </div>
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>{card.tag}</div>
        <h3 className="h2" style={{ fontSize: "clamp(32px, 3.4vw, 48px)", marginBottom: 20 }}>{card.name}</h3>
        <p className="lead" style={{ marginBottom: 32 }}>{card.desc}</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 36, padding: "24px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          {card.meta.map((m, i) => {
            const icons = [Ic.ruler, Ic.bed, Ic.user, Ic.window];
            const I = icons[i] || Ic.bed;
            return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13, color: "var(--ink-2)" }}>
                <I color="var(--accent)" />
                <span>{m}</span>
              </div>
            );
          })}
        </div>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          <button className="btn" onClick={onBook}>{t.common.bookNow}</button>
          <button className="btn btn-line" onClick={onView}>{t.common.view} {card.name} <Ic.arrow /></button>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { RoomsPage });