// pages/home.jsx — Home page with 3 hero variations + intro + highlights + rooms preview + neighbourhood + cta

function HomePage() {
  const { t, lang, tweaks, navigate, currency } = useApp();
  const heroStyle = tweaks.hero || "editorial";

  return (
    <div className="page-enter">
      {heroStyle === "fullbleed" && <HeroFullBleed />}
      {heroStyle === "editorial" && <HeroEditorial />}
      {heroStyle === "split" && <HeroSplit />}

      <SectionIntro />
      <SectionHighlights />
      <SectionRoomsPreview />
      <SectionNeighbourhood />
      <SectionPress />
      <SectionCTA />
    </div>
  );
}

// ─── Hero variation 1: Editorial — large serif on cream over image strip ──
function HeroEditorial() {
  const { t, lang, navigate } = useApp();
  return (
    <section style={{ paddingTop: 140, paddingBottom: 0, position: "relative" }}>
      <div className="container">
        <div className="eyebrow fade-up" style={{ marginBottom: 28 }}>{t.hero.eyebrow}</div>
        <h1 className="display fade-up delay-1" style={{ maxWidth: "16ch", marginBottom: 28 }}>
          {t.hero.title_a}{" "}<em>{t.hero.title_b}</em>
          {t.hero.title_c && <><br />{t.hero.title_c}</>}
        </h1>
        <div className="fade-up delay-2" style={{ display: "flex", gap: 16, marginBottom: 60, flexWrap: "wrap" }}>
          <button className="btn" onClick={() => navigate("reservation")}>{t.hero.cta}</button>
          <button className="btn btn-ghost" onClick={() => navigate("rooms")}>{t.hero.ctaAlt}</button>
        </div>
      </div>

      <div className="container fade-up delay-3" style={{ marginBottom: 0 }}>
        <Photo src="images/krakow/old-town-street.jpg" alt={lang === "pl" ? "Stare Miasto, Kraków" : "Old Town, Kraków"} ratio="16/9" />
      </div>

      <div className="container" style={{ paddingTop: 32, paddingBottom: 32, display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--line)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)" }}>
          <span style={{ color: "var(--accent)", letterSpacing: 0 }}>{t.hero.since}</span>
          <span style={{ width: 28, height: 1, background: "var(--line-2)" }}></span>
          <span>{t.hero.sinceLabel}</span>
        </div>
        <a href={t.hero.googleUrl} target="_blank" rel="noopener"
          style={{ display: "inline-flex", alignItems: "center", gap: 24, fontSize: 12, color: "var(--ink-3)", textDecoration: "none" }}>
          <span style={{ display: "flex", gap: 2, color: "var(--accent)" }}>
            <Ic.star /><Ic.star /><Ic.star /><Ic.star /><Ic.star />
          </span>
          <span style={{ letterSpacing: "0.12em", textTransform: "uppercase" }}>
            {t.hero.googleReviews}
          </span>
        </a>
      </div>
    </section>
  );
}

// ─── Hero variation 2: Full-bleed image with overlay ──────────────────────
function HeroFullBleed() {
  const { t, navigate } = useApp();
  return (
    <section style={{ position: "relative", height: "100vh", minHeight: 720, overflow: "hidden" }}>
      <Photo src="images/krakow/wawel-dusk.jpg" alt="Wawel o zmierzchu" ratio="auto" style={{ position: "absolute", inset: 0 }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(15,12,10,.45) 0%, rgba(15,12,10,.25) 40%, rgba(15,12,10,.7) 100%)",
        zIndex: 1
      }} />
      <div className="container" style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", color: "#FAF7F2" }}>
        <div className="eyebrow fade-up" style={{ color: "#C7A77A", marginBottom: 28 }}>{t.hero.eyebrow}</div>
        <h1 className="display fade-up delay-1" style={{ color: "#FAF7F2", maxWidth: "16ch", marginBottom: 28 }}>
          {t.hero.title_a}{" "}<em style={{ color: "#C7A77A" }}>{t.hero.title_b}</em>
          {t.hero.title_c && <><br />{t.hero.title_c}</>}
        </h1>
        <p className="lead fade-up delay-2" style={{ color: "rgba(250,247,242,.85)", maxWidth: "48ch", marginBottom: 36 }}>{t.hero.sub}</p>
        <div className="fade-up delay-3" style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          <button className="btn" style={{ background: "#C7A77A", color: "#15120E" }} onClick={() => navigate("reservation")}>{t.hero.cta}</button>
          <button className="btn btn-ghost" style={{ borderColor: "rgba(250,247,242,.5)", color: "#FAF7F2" }} onClick={() => navigate("rooms")}>{t.hero.ctaAlt}</button>
        </div>
      </div>
      <div className="scroll-cue" style={{ color: "rgba(250,247,242,.7)" }}>
        <span>{useApp().t.common.scroll}</span>
        <span style={{ width: 1, height: 36, background: "rgba(250,247,242,.5)" }} />
      </div>
      <div style={{ position: "absolute", bottom: 40, left: 0, right: 0, zIndex: 2 }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", color: "rgba(250,247,242,.8)" }}>
          <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase" }}>{t.hero.since} · {t.hero.sinceLabel}</span>
          <a href={t.hero.googleUrl} target="_blank" rel="noopener"
            style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 10, color: "inherit", textDecoration: "none" }}>
            <span style={{ display: "flex", gap: 2, color: "#C7A77A" }}><Ic.star /><Ic.star /><Ic.star /><Ic.star /><Ic.star /></span>
            {t.hero.googleReviews}
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Hero variation 3: Split — image left, large copy right ────────────────
function HeroSplit() {
  const { t, lang, navigate } = useApp();
  return (
    <section style={{ paddingTop: 100, paddingBottom: 0 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "calc(100vh - 100px)" }}>
        <Photo src={roomImg(3)} alt={lang === "pl" ? "Pokój Komfortowy" : "Comfort Room"} ratio="auto" style={{ height: "100%", minHeight: 600 }} />
        <div style={{ padding: "80px 60px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="eyebrow fade-up" style={{ marginBottom: 28 }}>{t.hero.eyebrow}</div>
          <h1 className="display fade-up delay-1" style={{ fontSize: "clamp(40px, 5vw, 76px)", marginBottom: 28, maxWidth: "12ch" }}>
            {t.hero.title_a}{" "}<em>{t.hero.title_b}</em>{t.hero.title_c && <>{" "}{t.hero.title_c}</>}
          </h1>
          <p className="lead fade-up delay-2" style={{ marginBottom: 36 }}>{t.hero.sub}</p>
          <div className="fade-up delay-3" style={{ display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 48 }}>
            <button className="btn" onClick={() => navigate("reservation")}>{t.hero.cta}</button>
            <button className="btn btn-ghost" onClick={() => navigate("rooms")}>{t.hero.ctaAlt}</button>
          </div>
          <div className="fade-up delay-4" style={{ display: "flex", alignItems: "center", gap: 16, fontSize: 12, color: "var(--ink-3)" }}>
            <span style={{ color: "var(--accent)", letterSpacing: "0.18em", textTransform: "uppercase" }}>{t.hero.since}</span>
            <span style={{ width: 28, height: 1, background: "var(--line-2)" }} />
            <span style={{ letterSpacing: "0.12em", textTransform: "uppercase" }}>{t.hero.sinceLabel}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Intro — "About" ───────────────────────────────────────────────────────
function SectionIntro() {
  const { t, lang } = useApp();
  return (
    <section className="section" data-section="intro">
      <div className="container">
        <div className="split-2">
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}>{t.intro.eyebrow}</div>
            <h2 className="h2" style={{ marginBottom: 32, maxWidth: "14ch" }}>
              {t.intro.title_a}<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.intro.title_b}</em>
            </h2>
            <p className="lead" style={{ marginBottom: 40 }}>{t.intro.body}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, maxWidth: 420 }}>
              {t.intro.pts.map(([num, lbl], i) => (
                <div key={i}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 1, color: "var(--accent)", marginBottom: 6 }}>{num}</div>
                  <div className="uppercase" style={{ color: "var(--ink-2)" }}>{lbl}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <Photo src={roomImg(1)} alt={lang === "pl" ? "Pokój Standard II" : "Standard Room II"} ratio="3/4" />
            <Photo src={roomImg(2)} alt={lang === "pl" ? "Pokój Komfortowy I" : "Comfort Room I"} ratio="3/4" style={{ marginTop: 60 }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Highlights — 3 columns ────────────────────────────────────────────────
function SectionHighlights() {
  const { t } = useApp();
  return (
    <section className="section" style={{ background: "var(--bg-2)" }} data-section="highlights">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center" }}>{t.highlights.eyebrow}</div>
          <h2 className="h2" style={{ maxWidth: "20ch", margin: "0 auto" }}>{t.highlights.title}</h2>
        </div>
        <div className="grid-3">
          {t.highlights.items.map((it, i) => {
            const photos = ["images/hostel/kitchen.jpg", "images/rooms/comfort-2/04.jpg", "images/krakow/rynek-aerial.jpg"];
            const alts = ["Wspólna kuchnia", "Prywatna łazienka", "Rynek Główny, Kraków"];
            return (
            <div key={i} style={{ background: "var(--paper)", padding: 40 }}>
              <Photo src={photos[i]} alt={alts[i]} ratio="4/3" style={{ marginBottom: 32 }} />
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                <span style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22 }}>0{i + 1}</span>
                <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
              </div>
              <h3 className="h3" style={{ marginBottom: 12 }}>{it.title}</h3>
              <p className="muted" style={{ fontSize: 14 }}>{it.body}</p>
            </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Rooms preview ─────────────────────────────────────────────────────────
function SectionRoomsPreview() {
  const { t, navigate, currency } = useApp();
  return (
    <section className="section" data-section="rooms">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 60, gap: 40, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{t.rooms.eyebrow}</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>
          <p className="lead" style={{ maxWidth: "40ch" }}>{t.rooms.body}</p>
        </div>
        <div className="grid-2">
          {t.rooms.cards.map((c, i) => (
            <RoomCard key={i} card={c} idx={i} onView={() => navigate("room-detail", { roomIdx: i })} onBook={() => navigate("reservation", { roomIdx: i })} />
          ))}
        </div>
      </div>
    </section>
  );
}

function RoomCard({ card, idx, onView, onBook }) {
  const { t, currency } = useApp();
  return (
    <article style={{ background: "var(--paper)", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative" }}>
        <Photo src={roomImg(idx)} alt={card.name} ratio="4/3" />
        <div style={{ position: "absolute", top: 20, left: 20, background: "var(--bg)", padding: "8px 14px", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--ink-2)" }}>
          {card.tag}
        </div>
        <div style={{ position: "absolute", bottom: 0, right: 0, background: "var(--ink)", color: "var(--bg)", padding: "12px 18px", display: "flex", alignItems: "baseline", gap: 6 }}>
          <span style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", opacity: 0.6 }}>{t.common.from}</span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500 }}>{formatPrice(card.priceFrom, currency)}</span>
          <span style={{ fontSize: 11, opacity: 0.6 }}>{t.common.perNight}</span>
        </div>
      </div>
      <div style={{ padding: 32, flex: 1, display: "flex", flexDirection: "column" }}>
        <h3 className="h3" style={{ marginBottom: 14 }}>{card.name}</h3>
        <p className="muted" style={{ fontSize: 14, marginBottom: 28, flex: 1 }}>{card.desc}</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 32, padding: "20px 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: 10, fontSize: 12, color: "var(--ink-2)" }}>
                <I color="var(--accent)" />
                <span>{m}</span>
              </div>
            );
          })}
        </div>
        <div style={{ display: "flex", gap: 16 }}>
          <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={onBook}>{t.common.bookNow}</button>
          <button className="btn btn-ghost" onClick={onView}>{t.common.view} <Ic.arrow /></button>
        </div>
      </div>
    </article>
  );
}

// ─── Neighbourhood ─────────────────────────────────────────────────────────
function SectionNeighbourhood() {
  const { t, lang } = useApp();
  const places = lang === "pl"
    ? [
        ["Brama Floriańska", "600 m", "Średniowieczna brama, początek Drogi Królewskiej"],
        ["Rynek Główny", "900 m", "Sukiennice, Kościół Mariacki, kawiarnie"],
        ["Galeria Krakowska", "900 m", "Centrum handlowe przy dworcu"],
        ["Kraków Główny", "1 km", "Dworzec PKP i autobusowy"],
        ["Kościół Mariacki", "1,1 km", "Hejnał z wieży, ołtarz Wita Stwosza"],
        ["Wawel", "1,9 km", "Zamek królewski i katedra"],
      ]
    : [
        ["Florian Gate", "600 m", "Medieval gate, start of the Royal Route"],
        ["Main Market Square", "900 m", "Cloth Hall, St. Mary's Basilica, cafés"],
        ["Galeria Krakowska", "900 m", "Shopping centre by the station"],
        ["Kraków Główny", "1 km", "Main train and bus station"],
        ["St. Mary's Basilica", "1.1 km", "Hejnał from the tower, Veit Stoss altar"],
        ["Wawel Castle", "1.9 km", "Royal castle and cathedral"],
      ];
  return (
    <section className="section" style={{ background: "var(--ink)", color: "var(--bg)" }} data-section="neighbourhood">
      <div className="container">
        <div style={{ marginBottom: 60 }}>
          <div className="eyebrow" style={{ marginBottom: 24, color: "var(--accent)" }}>
            {lang === "pl" ? "Sąsiedztwo" : "The neighbourhood"}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end" }}>
            <h2 className="h2" style={{ color: "var(--bg)" }}>
              {lang === "pl"
                ? <>Stare miasto<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>tuż za drzwiami.</em></>
                : <>The old town,<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>just outside the door.</em></>}
            </h2>
            <p style={{ color: "rgba(250,247,242,.75)", fontSize: 16, lineHeight: 1.6, maxWidth: "40ch" }}>
              {lang === "pl"
                ? "Chętnie podpowiemy, gdzie zjeść, napić się dobrej kawy i odsapnąć od tłumu turystów — wystarczy zapytać."
                : "We're happy to point you to where to eat, grab good coffee and escape the tourist crowds — just ask."}
            </p>
          </div>
        </div>
        <div className="grid-3" style={{ gap: 0 }}>
          {places.map(([name, dist, desc], i) => (
            <div key={i} style={{ padding: 32, borderTop: "1px solid rgba(255,255,255,.1)", borderRight: (i + 1) % 3 ? "1px solid rgba(255,255,255,.1)" : "none", borderBottom: i >= places.length - 3 ? "1px solid rgba(255,255,255,.1)" : "none" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--bg)" }}>{name}</h3>
                <span style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.16em", textTransform: "uppercase" }}>{dist}</span>
              </div>
              <p style={{ color: "rgba(250,247,242,.6)", fontSize: 13 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Press / reviews strip ─────────────────────────────────────────────────
function SectionPress() {
  const { lang } = useApp();
  const items = lang === "pl"
    ? [
        ["Booking.com", "9,4 / 10", "Świetne udogodnienia"],
        ["Lokalizacja", "9,7 / 10", "Stare Miasto, centrum Krakowa"],
        ["Czystość", "9,5 / 10", "Oceniana przez gości"],
        ["Stosunek jakości do ceny", "9,3 / 10", "Według ocen gości"],
      ]
    : [
        ["Booking.com", "9.4 / 10", "Excellent facilities"],
        ["Location", "9.7 / 10", "Old Town, central Kraków"],
        ["Cleanliness", "9.5 / 10", "Rated by guests"],
        ["Value for money", "9.3 / 10", "According to guest reviews"],
      ];
  return (
    <section className="section-sm" data-section="press">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {items.map(([who, quote, when], i) => (
            <div key={i} style={{ padding: "20px 24px", borderLeft: i ? "1px solid var(--line)" : "none" }}>
              <div className="uppercase" style={{ color: "var(--accent)", marginBottom: 12 }}>{who}</div>
              <p className="serif-quote" style={{ fontSize: 18, lineHeight: 1.3, marginBottom: 12 }}>{quote}</p>
              <div className="caption">{when}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ───────────────────────────────────────────────────────────────────
function SectionCTA() {
  const { t, lang, navigate } = useApp();
  return (
    <section className="section" data-section="cta">
      <div className="container">
        <div style={{ position: "relative", padding: "100px 60px", overflow: "hidden", background: "var(--bg-2)" }}>
          <Photo src="images/krakow/wawel-vistula.jpg" alt="Wawel znad Wisły" ratio="auto" style={{ position: "absolute", inset: 0, opacity: 0.35 }} />
          <div style={{ position: "relative", textAlign: "center" }}>
            <Divider />
            <h2 className="h2" style={{ maxWidth: "20ch", margin: "0 auto 28px" }}>
              {lang === "pl"
                ? <>Zarezerwuj pobyt<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>bezpośrednio u nas.</em></>
                : <>Book directly,<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>save more.</em></>}
            </h2>
            <p className="lead" style={{ margin: "0 auto 36px", textAlign: "center" }}>
              {lang === "pl"
                ? "Bez prowizji pośrednika. Najlepsza cena i możliwość wystawienia faktury — tylko bezpośrednio u nas."
                : "No middleman fees. Best rate and company invoice on request — only when you book direct."}
            </p>
            <button className="btn" onClick={() => navigate("reservation")}>{t.common.bookNow} <Ic.arrow /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });