// LUXOMES — Location pages (Redesign 2026). City page + per-apartment deep
// pages (/standorte/<city>/<aptId>) share one component; the deep pages keep
// their own URLs, titles and schema (seo.jsx) exactly as before.

const LOC_TX = {
  de: { ourStay: "Unser Standort", in: "Serviced Apartments in", cats: "Kategorien", maxGuests: "max. Gäste", largest: "größtes Apt.", aboutHeading: "Über diesen Standort", homeAway: "Dein Zuhause auf Zeit.", whatToExpect: "Was Dich erwartet", reachable: "Erreichbarkeit", connected: "Bestens angebunden.", google: "Auf Google ansehen", apartmentsHere: "Apartments an diesem Standort", chooseCat: "Wähle Deine Kategorie", rooms: "Zimmer", guests: "Gäste", baths: "Bad", size: "Größe", beds: "Schlafsituation", price: "Preis", checkAvail: "Verfügbarkeit prüfen", bookNow: "Jetzt buchen", enquire: "Anfragen", askQuestion: "Frage stellen", shared: "Gemeinschaftsbereiche", otherCities: "Weitere Standorte", gallery: "Galerie", ready: "Bereit zu buchen?", comeTo: "Komm nach", ctaText: "Kontaktloser Self-Check-in, persönlicher Support per WhatsApp und Apartments, in denen Du Dich sofort zuhause fühlst.", backToCity: "Alle Apartments in",
    amen: ["Highspeed WiFi", "Smart-TV", "Voll ausgestattete Küche", "Self check-in", "Waschmaschine", "Arbeitsbereich", "Bettwäsche & Handtücher", "Reinigungsservice"],
    catLead: (c, n) => `Wir bieten in ${c} ${n} unterschiedliche Kategorien, wähle das Apartment, das zu Deinem Aufenthalt passt.` },
  en: { ourStay: "Our location", in: "Serviced apartments in", cats: "categories", maxGuests: "max guests", largest: "largest apt.", aboutHeading: "About this location", homeAway: "your home away from home.", whatToExpect: "What to expect", reachable: "Connections", connected: "Excellently connected.", google: "View on Google", apartmentsHere: "Apartments at this location", chooseCat: "Pick your category", rooms: "rooms", guests: "guests", baths: "bath", size: "size", beds: "Beds", price: "Price", checkAvail: "Check availability", bookNow: "Book now", enquire: "Enquire", askQuestion: "Ask a question", shared: "Shared areas", otherCities: "Other locations", gallery: "Gallery", ready: "Ready to book?", comeTo: "Come to", ctaText: "Contactless self-check-in, personal support via WhatsApp, and apartments where you'll feel at home from minute one.", backToCity: "All apartments in",
    amen: ["Highspeed WiFi", "Smart TV", "Fully equipped kitchen", "Self check-in", "Washer", "Workspace", "Linens & towels", "Cleaning service"],
    catLead: (c, n) => `In ${c} we offer ${n} distinct categories, pick the apartment that fits your stay.` },
};

function LocationDetailPage({ locationKey, aptId, lang, setPage }) {
  const t = LOC_TX[lang] || LOC_TX.de;
  const L = LOCATIONS.find(l => l.key === locationKey) || LOCATIONS[1];
  const aptIndex = aptId ? Math.max(0, L.categories.findIndex(c => c.id === aptId)) : 0;
  const [hero, setHero] = useState(0);
  const [cat, setCat] = useState(aptIndex);
  const [catImg, setCatImg] = useState(0);
  useEffect(() => { setHero(0); setCat(aptIndex); setCatImg(0); }, [locationKey, aptId]);

  const c = L.categories[Math.min(cat, L.categories.length - 1)];
  const off2 = !!L.offPlatform;
  const nav = (e, p) => { e.preventDefault(); setPage(p); };
  const pickCity = key => setPage("location-" + key);
  const pickCat = i => {
    if (aptId) { setPage("location-" + L.key + ":" + L.categories[i].id); }
    else { setCat(i); setCatImg(0); }
  };
  const bookBtn = off2
    ? <a href="/contact" onClick={e => nav(e, "contact")} className="btn btn-green">{t.enquire} →</a>
    : <a href="https://luxomes.holidayfuture.com/" target="_blank" rel="noreferrer" className="btn btn-green">{t.checkAvail} →</a>;
  const commonLayout = i => i === 0 ? ["span 2", "span 2"] : i === 5 ? ["span 2", "auto"] : ["auto", "auto"];
  const statCell = { textAlign: "center" };
  const statBorder = { ...statCell, borderLeft: "1px solid rgba(255,255,255,.14)" };

  return (
    <main>
      {/* CITY SWITCH */}
      <div style={{ position: "sticky", top: 63, zIndex: 40, background: "rgba(247,244,238,.9)", backdropFilter: "blur(12px)", borderBottom: "1px solid rgba(30,35,31,.06)" }}>
        <div className="wrap" style={{ padding: "10px clamp(20px,4vw,48px)", display: "flex", gap: 6, overflowX: "auto" }}>
          {LOCATIONS.map(l => (
            <button key={l.key} className={"pill-switch" + (l.key === L.key ? " act" : "")} onClick={() => pickCity(l.key)}>{l.short}</button>
          ))}
        </div>
      </div>

      {/* HERO */}
      <section style={{ padding: "clamp(48px,6vw,80px) clamp(20px,4vw,48px) 0" }}>
        <div className="wrap">
          <div className="eyebrow">{t.ourStay} · {L.region[lang]}</div>
          {aptId ? (
            <>
              <h1 className="serif" style={{ fontSize: "clamp(38px,5.6vw,84px)", lineHeight: .98, letterSpacing: "-.025em", margin: "18px 0 0", maxWidth: "18ch" }}>
                {c.title[lang]} <span style={{ color: "#5F7458" }}>· {L.city}</span>
              </h1>
              <div style={{ marginTop: 18 }}>
                <a href={"/standorte/" + L.key} onClick={e => nav(e, "location-" + L.key)} className="link-u">← {t.backToCity} {L.city}</a>
              </div>
            </>
          ) : (
            <h1 className="serif" style={{ fontSize: "clamp(42px,6.4vw,96px)", lineHeight: .98, letterSpacing: "-.025em", margin: "18px 0 0", maxWidth: "16ch" }}>
              {t.in} <span style={{ color: "#5F7458" }}>{L.city}</span>
            </h1>
          )}
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 24, marginTop: 24 }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "#4A514B", maxWidth: 700, margin: 0, textWrap: "pretty" }}>{L.heroLead[lang]}</p>
            <div style={{ display: "flex", gap: 28, flex: "none" }}>
              <div><div className="serif" style={{ fontSize: 30, lineHeight: 1 }}>{L.categories.length}</div><div className="label-sm" style={{ marginTop: 6 }}>{t.cats}</div></div>
              <div><div className="serif" style={{ fontSize: 30, lineHeight: 1 }}>{Math.max(...L.categories.map(x => x.guests))}</div><div className="label-sm" style={{ marginTop: 6 }}>{t.maxGuests}</div></div>
              <div><div className="serif" style={{ fontSize: 30, lineHeight: 1 }}>{Math.max(...L.categories.map(x => x.size))} m²</div><div className="label-sm" style={{ marginTop: 6 }}>{t.largest}</div></div>
            </div>
          </div>
          {/* gallery */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,300px),1fr))", gridAutoRows: "minmax(180px,auto)", gap: 12, marginTop: 40, perspective: 1600 }}>
            <div onMouseMove={lxTilt} onMouseLeave={lxUntilt} className="tiltable" style={{ gridColumn: "span 2", gridRow: "span 2", position: "relative", borderRadius: 24, overflow: "hidden", minHeight: 380, background: "#1E231F" }}>
              <div data-depth role="img" aria-label={L.city} style={{ position: "absolute", inset: "-6%", width: "112%", height: "112%", backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${L.heroImages[hero]}")`, transition: "transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s" }}></div>
            </div>
            {L.heroImages.slice(1).map((src, i) => (
              <button key={i} onClick={() => setHero(i + 1)} style={{ position: "relative", border: 0, padding: 0, cursor: "pointer", borderRadius: 18, overflow: "hidden", minHeight: 180, background: "#E3E8DC", outline: hero === i + 1 ? "2px solid #5F7458" : "none", outlineOffset: 3, transition: "transform .5s cubic-bezier(.2,.7,.2,1)", transform: hero === i + 1 ? "translateZ(30px)" : "none" }}>
                <div role="img" aria-label="" style={{ position: "absolute", inset: 0, backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${src}")` }}></div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ABOUT + DISTANCES */}
      <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,380px),1fr))", gap: "clamp(32px,5vw,72px)", alignItems: "start" }}>
          <div data-reveal>
            <div className="eyebrow">{t.aboutHeading}</div>
            <h2 className="h2" style={{ fontSize: "clamp(32px,4vw,56px)", margin: "16px 0 20px" }}>{L.city}, <span style={{ color: "#5F7458" }}>{t.homeAway}</span></h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "#4A514B", margin: "0 0 36px", textWrap: "pretty" }}>{L.about[lang]}</p>
            <div className="serif" style={{ fontSize: 22, marginBottom: 12 }}>{t.whatToExpect}</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))", gap: "0 32px" }}>
              {t.amen.map((a, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 0", borderBottom: "1px solid #DDD8CC", fontSize: 14.5 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#5F7458", flex: "none" }}></span>{a}
                </div>
              ))}
            </div>
          </div>
          <aside data-reveal style={{ position: "sticky", top: 130, background: "#fff", border: "1px solid #E6E1D6", borderRadius: 24, padding: 32, transitionDelay: ".1s" }}>
            <div className="eyebrow">{t.reachable}</div>
            <div className="serif" style={{ fontSize: 24, margin: "12px 0 20px", lineHeight: 1.2 }}>{t.connected}</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {L.distances.map((d, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderTop: "1px solid #EEEAE1", fontSize: 14 }}>
                  <span style={{ color: "#4A514B" }}>{d[lang]}</span><span className="serif" style={{ fontSize: 16 }}>{d.val}</span>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }}>
              {bookBtn}
              {L.gbp && <a href={L.gbp} target="_blank" rel="noreferrer" className="btn btn-outline" style={{ padding: "14px 24px" }}>{t.google}</a>}
            </div>
          </aside>
        </div>
      </section>

      {/* CATEGORIES, dark */}
      <section id="apartments" className="sec-dark" style={{ marginTop: "clamp(72px,9vw,120px)", padding: "clamp(72px,9vw,128px) clamp(20px,4vw,48px)" }}>
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 720 }}>
            <div className="eyebrow-dark">{t.apartmentsHere}</div>
            <h2 className="h2" style={{ margin: "16px 0 18px", color: "#fff" }}>{t.chooseCat}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "#CFCFC6", margin: 0 }}>{t.catLead(L.city, L.categories.length)}</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,380px),1fr))", gap: "clamp(32px,4vw,56px)", marginTop: 48, alignItems: "start" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {L.categories.map((x, i) => {
                const a = i === cat;
                return (
                  <button key={x.id || i} onClick={() => pickCat(i)} style={{ display: "block", width: "100%", textAlign: "left", padding: "24px 26px", border: 0, cursor: "pointer", borderRadius: 18, background: a ? "rgba(255,255,255,.07)" : "transparent", color: "inherit", borderLeft: "3px solid " + (a ? "#5F7458" : "rgba(255,255,255,.14)"), transition: "background .3s" }}>
                    <div className="serif" style={{ fontSize: 13, letterSpacing: ".14em", color: a ? "#B7C4AC" : "#8A918A" }}>0{i + 1}</div>
                    <div className="serif" style={{ fontSize: "clamp(22px,2.2vw,30px)", lineHeight: 1.1, color: "#fff", margin: "8px 0 10px" }}>{x.title[lang]}</div>
                    <div style={{ fontSize: 13, color: "#CFCFC6", display: "flex", gap: 16, flexWrap: "wrap" }}>
                      <span>{x.rooms} {t.rooms}</span><span>{x.guests} {t.guests}</span><span>{x.size} m²</span>
                    </div>
                  </button>
                );
              })}
            </div>
            <div style={{ perspective: 1400 }}>
              <div onMouseMove={lxTilt} onMouseLeave={lxUntilt} className="tiltable" style={{ position: "relative", aspectRatio: "4/3", borderRadius: 22, overflow: "hidden", background: "#262C27", boxShadow: "0 40px 80px -30px rgba(0,0,0,.6)" }}>
                <div data-depth role="img" aria-label={c.title[lang]} style={{ position: "absolute", inset: "-6%", width: "112%", height: "112%", backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${c.images[Math.min(catImg, c.images.length - 1)]}")` }}></div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12, fontSize: 12, color: "#8A918A" }}>
                <span style={{ letterSpacing: ".14em", textTransform: "uppercase" }}>{t.gallery}</span>
                <span className="serif" style={{ fontSize: 15, color: "#B7C4AC" }}>{Math.min(catImg, c.images.length - 1) + 1} / {c.images.length}</span>
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 10, overflowX: "auto", paddingBottom: 6, scrollbarWidth: "thin" }}>
                {c.images.map((src, i) => (
                  <button key={i} onClick={() => setCatImg(i)} style={{ flex: "none", width: 72, height: 72, border: 0, padding: 0, cursor: "pointer", borderRadius: 12, overflow: "hidden", opacity: catImg === i ? 1 : .6, outline: catImg === i ? "2px solid #5F7458" : "none", outlineOffset: 2, transition: "opacity .3s", background: "#262C27" }}>
                    <div role="img" aria-label="" style={{ width: "100%", height: "100%", backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${src}")` }}></div>
                  </button>
                ))}
              </div>
              <h3 className="serif" style={{ fontSize: "clamp(26px,2.6vw,36px)", lineHeight: 1.1, margin: "28px 0 16px", color: "#fff" }}>{c.title[lang]}</h3>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", padding: "18px 0", borderTop: "1px solid rgba(255,255,255,.14)", borderBottom: "1px solid rgba(255,255,255,.14)" }}>
                <div style={statCell}><div className="serif" style={{ fontSize: 22, color: "#fff" }}>{c.rooms}</div><div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "#8A918A", marginTop: 6 }}>{t.rooms}</div></div>
                <div style={statBorder}><div className="serif" style={{ fontSize: 22, color: "#fff" }}>{c.guests}</div><div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "#8A918A", marginTop: 6 }}>{t.guests}</div></div>
                <div style={statBorder}><div className="serif" style={{ fontSize: 22, color: "#fff" }}>{c.baths}</div><div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "#8A918A", marginTop: 6 }}>{t.baths}</div></div>
                <div style={statBorder}><div className="serif" style={{ fontSize: 22, color: "#fff" }}>{c.size} m²</div><div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "#8A918A", marginTop: 6 }}>{t.size}</div></div>
              </div>
              <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "#DCDCD4", margin: "22px 0 14px", textWrap: "pretty" }}>{c.body[lang]}</p>
              <div style={{ fontSize: 13, color: "#8A918A" }}><span style={{ letterSpacing: ".14em", textTransform: "uppercase", marginRight: 10 }}>{t.beds}</span>{c.bed[lang]}</div>
              <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 20, marginTop: 24, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.14)" }}>
                <div>
                  <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "#8A918A", marginBottom: 4 }}>{t.price}</div>
                  <div className="serif" style={{ fontSize: 28, color: "#fff" }}>{c.price[lang]}</div>
                </div>
                {off2
                  ? <a href="/contact" onClick={e => nav(e, "contact")} className="btn btn-green btn-green-inv">{t.enquire} →</a>
                  : <a href={c.link} target="_blank" rel="noreferrer" className="btn btn-green btn-green-inv">{t.bookNow} →</a>}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMMON AREAS */}
      {L.common && (
        <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0" }}>
          <div className="wrap">
            <SectionHead eyebrow={t.shared} title={L.common.title[lang]} lead={L.common.intro[lang]} />
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,240px),1fr))", gridAutoRows: 220, gap: 12, marginTop: 40 }}>
              {L.common.images.map((src, i) => (
                <div key={i} data-reveal style={{ gridColumn: commonLayout(i)[0], gridRow: commonLayout(i)[1], borderRadius: 18, overflow: "hidden", position: "relative", transitionDelay: (i * .08) + "s" }}>
                  <div role="img" aria-label="" style={{ position: "absolute", inset: 0, backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${src}")` }}></div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* OTHER CITIES */}
      <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0" }}>
        <div className="wrap">
          <div className="eyebrow">{t.otherCities}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,240px),1fr))", gap: 16, marginTop: 20, perspective: 1400 }}>
            {LOCATIONS.filter(l => l.key !== L.key).map(l => (
              <button key={l.key} onClick={() => pickCity(l.key)} onMouseMove={lxTilt} onMouseLeave={lxUntilt} className="tiltable" style={{ position: "relative", border: 0, padding: 0, cursor: "pointer", textAlign: "left", borderRadius: 20, overflow: "hidden", aspectRatio: "4/3", background: "#1E231F", color: "#fff" }}>
                <div role="img" data-depth aria-label={l.city} style={{ position: "absolute", inset: "-8%", width: "116%", height: "116%", backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url("${l.heroImages[0]}")` }}></div>
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,24,20,0) 40%, rgba(20,24,20,.8) 100%)" }}></div>
                <div style={{ position: "absolute", left: 22, right: 22, bottom: 20 }}>
                  <div style={{ fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "#B7C4AC" }}>{l.categories.length} {l.categories.length === 1 ? (lang === "de" ? "Kategorie" : "category") : t.cats}</div>
                  <div className="serif" style={{ fontSize: 26, lineHeight: 1.1, marginTop: 6 }}>{l.city}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px)" }}>
        <div data-reveal className="wrap" style={{ background: "var(--green)", color: "#fff", borderRadius: 28, padding: "clamp(40px,6vw,80px)", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,320px),1fr))", gap: 40, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ color: "#E3E8DC" }}>{t.ready}</div>
            <h2 className="h2" style={{ fontSize: "clamp(30px,3.8vw,56px)", lineHeight: 1.04, margin: "16px 0 18px", color: "#fff" }}>{t.comeTo} {L.city}.</h2>
            <p style={{ fontSize: 17, margin: 0, color: "#F0EFE9", maxWidth: 520, textWrap: "pretty" }}>{t.ctaText}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start", justifySelf: "end" }}>
            {off2
              ? <a href="/contact" onClick={e => nav(e, "contact")} className="btn btn-dark">{t.enquire} →</a>
              : <a href="https://luxomes.holidayfuture.com/" target="_blank" rel="noreferrer" className="btn btn-dark">{t.checkAvail} →</a>}
            <a href="/contact" onClick={e => nav(e, "contact")} className="btn btn-outline-w">{t.askQuestion} →</a>
          </div>
        </div>
      </section>
    </main>
  );
}