// LUXOMES — Shared components

const { useState, useEffect, useRef } = React;

// ---------- SEOImg ----------
// Crawler-readable <img alt> placed alongside a background-image div.
// Visually invisible (0×0, off-screen) but indexed by Googlebot, GPTBot,
// PerplexityBot, ClaudeBot — they read alt attributes for image search and
// answer-citation grounding. Use this next to any decorative background-image
// that represents content (hero photos, apartment cards, location galleries).
function SEOImg({ src, alt }) {
  if (!src || !alt) return null;
  return (
    <img
      src={src}
      alt={alt}
      loading="lazy"
      decoding="async"
      width="1"
      height="1"
      style={{
        position: "absolute",
        width: 1, height: 1,
        opacity: 0,
        pointerEvents: "none",
        zIndex: -1,
      }}
    />
  );
}

// ---------- Icons ----------
function Icon({ name, size = 22 }) {
  const s = size;
  const stroke = "currentColor";
  const sw = 1.4;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow": return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "arrow-down": return <svg {...common}><path d="M12 5v14M6 13l6 6 6-6"/></svg>;
    case "plus": return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "close": return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "menu": return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "lock": return <svg {...common}><rect x="4.5" y="11" width="15" height="10" rx="1.5"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></svg>;
    case "sparkle": return <svg {...common}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>;
    case "clock": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "moon": return <svg {...common}><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg>;
    case "home": return <svg {...common}><path d="M4 10l8-6 8 6v10H4z"/><path d="M10 20v-6h4v6"/></svg>;
    case "coin": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M9 10h5a2 2 0 1 1 0 4H9"/></svg>;
    case "wifi": return <svg {...common}><path d="M5 12a10 10 0 0 1 14 0"/><path d="M8.5 15.5a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="1"/></svg>;
    case "bed": return <svg {...common}><path d="M3 18V8M3 13h18v5M21 13v-2a3 3 0 0 0-3-3H9"/></svg>;
    case "tv": return <svg {...common}><rect x="3" y="5" width="18" height="12" rx="1.5"/><path d="M8 21h8"/></svg>;
    case "kitchen": return <svg {...common}><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 3v6M5 12h14"/></svg>;
    case "users": return <svg {...common}><circle cx="9" cy="8" r="3.5"/><path d="M3 20a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.5"/><path d="M15 20a5 5 0 0 1 6-5"/></svg>;
    case "pin": return <svg {...common}><path d="M12 22s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case "phone": return <svg {...common}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "mail": return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "check": return <svg {...common}><path d="M5 12l5 5 9-11"/></svg>;
    case "star": return <svg {...common}><path d="M12 3l2.6 6 6.4.5-4.9 4.3 1.5 6.4L12 17l-5.6 3.2 1.5-6.4L3 9.5 9.4 9z"/></svg>;
    case "linkedin": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 10v7M8 7v.01M12 17v-5a2 2 0 1 1 4 0v5M12 12v5"/></svg>;
    case "sun": return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.5 4.5l1.4 1.4M18.1 18.1l1.4 1.4M4.5 19.5l1.4-1.4M18.1 5.9l1.4-1.4"/></svg>;
    case "adjust": return <svg {...common}><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg>;
    default: return null;
  }
}

// ---------- Logo ----------
function Logo({ height = 22 }) {
  return <img src="/assets/luxomes-logo.png" alt="LUXOMES" style={{ height, width: "auto", display: "block" }} />;
}

// ---------- Navigation ----------
function Nav({ page, setPage, lang, setLang, t }) {
  const [locOpen, setLocOpen] = useState(false);
  const [moreOpen, setMoreOpen] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const locRef = useRef(null);
  const moreRef = useRef(null);
  useEffect(() => {
    const onDoc = (e) => {
      if (locRef.current && !locRef.current.contains(e.target)) setLocOpen(false);
      if (moreRef.current && !moreRef.current.contains(e.target)) setMoreOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  // Close drawer on Escape + restore body scroll on close
  useEffect(() => {
    if (!drawerOpen) { document.body.style.overflow = ""; return; }
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setDrawerOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [drawerOpen]);

  const locationsList = (window.LOCATIONS || []);
  const isLocationPage = page.startsWith("location-");
  const secondary = [
    { key: "realestate", label: t.nav.realestate, desc: { de: "Für Investoren & Eigentümer", en: "For investors & owners" } },
    { key: "blog", label: "Blog", desc: { de: "Case Studies & Praxisberichte", en: "Case studies & field reports" } },
    { key: "contact", label: t.nav.contact, desc: { de: "Schreib oder ruf uns an", en: "Write or call us" } },
  ];
  const moreActive = secondary.some(s => s.key === page) || page.startsWith("blog-");

  const nav = (key, scrollTo0 = true) => {
    setPage(key);
    setDrawerOpen(false);
    setLocOpen(false);
    setMoreOpen(false);
    if (scrollTo0) window.scrollTo(0, 0);
  };

  return (
    <>
    <nav className="nav">
      <div className="container nav-inner">
        <button onClick={() => nav("home")} className="nav-logo" aria-label="LUXOMES">
          <Logo />
        </button>
        <div className="nav-links">
          <button className={page === "home" ? "active" : ""} onClick={() => { setPage("home"); window.scrollTo(0,0); }}>{t.nav.home}</button>

          {/* Standorte dropdown — click opens menu, does not navigate */}
          <div ref={locRef} style={{ position: "relative" }}>
            <button
              className={isLocationPage ? "active" : ""}
              onClick={() => setLocOpen(o => !o)}
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
              aria-expanded={locOpen}
            >
              {t.nav.stays}
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: locOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }}>
                <path d="M6 9l6 6 6-6"/>
              </svg>
            </button>
            {locOpen && (
              <div style={{ position: "absolute", top: "calc(100% + 14px)", left: "50%", transform: "translateX(-50%)", minWidth: 320, background: "var(--bg)", border: "1px solid var(--line)", boxShadow: "var(--shadow-lift)", borderRadius: 8, padding: 8, zIndex: 50 }}>
                <div style={{ padding: "8px 16px 10px", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", borderBottom: "1px solid var(--line)", marginBottom: 6 }}>
                  {lang === "de" ? "Standort wählen" : "Select location"}
                </div>
                {locationsList.map(l => (
                  <button key={l.key}
                    onClick={() => { setPage("location-" + l.key); setLocOpen(false); window.scrollTo(0,0); }}
                    style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", padding: "12px 16px", borderRadius: 6, background: page === ("location-" + l.key) ? "var(--surface)" : "transparent", transition: "background .15s" }}
                    onMouseEnter={e => { if (page !== ("location-" + l.key)) e.currentTarget.style.background = "var(--surface)"; }}
                    onMouseLeave={e => { if (page !== ("location-" + l.key)) e.currentTarget.style.background = "transparent"; }}
                  >
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--ink)", lineHeight: 1.2 }}>{l.city}</div>
                  </button>
                ))}
              </div>
            )}
          </div>

          <button className={page === "management" ? "active" : ""} onClick={() => { setPage("management"); window.scrollTo(0,0); }}>{t.nav.management}</button>
          <button className={page === "about" ? "active" : ""} onClick={() => { setPage("about"); window.scrollTo(0,0); }}>{t.nav.about}</button>

          <div ref={moreRef} style={{ position: "relative" }}>
            <button
              className={moreActive ? "active" : ""}
              onClick={() => setMoreOpen(o => !o)}
              style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
              aria-expanded={moreOpen}
            >
              {lang === "de" ? "Mehr" : "More"}
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: moreOpen ? "rotate(180deg)" : "none", transition: "transform .2s" }}>
                <path d="M6 9l6 6 6-6"/>
              </svg>
            </button>
            {moreOpen && (
              <div style={{ position: "absolute", top: "calc(100% + 14px)", right: 0, minWidth: 280, background: "var(--bg)", border: "1px solid var(--line)", boxShadow: "var(--shadow-lift)", borderRadius: 8, padding: 8, zIndex: 50 }}>
                {secondary.map(s => (
                  <button key={s.key}
                    onClick={() => { setPage(s.key); setMoreOpen(false); window.scrollTo(0,0); }}
                    style={{ display: "block", width: "100%", textAlign: "left", padding: "14px 16px", borderRadius: 6, background: page === s.key ? "var(--surface)" : "transparent", transition: "background .15s" }}
                    onMouseEnter={e => { if (page !== s.key) e.currentTarget.style.background = "var(--surface)"; }}
                    onMouseLeave={e => { if (page !== s.key) e.currentTarget.style.background = "transparent"; }}
                  >
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--ink)", marginBottom: 2 }}>{s.label}</div>
                    <div style={{ fontSize: 12, color: "var(--muted)" }}>{s.desc[lang]}</div>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === "de" ? "active" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="https://luxomes.holidayfuture.com/" target="_blank" rel="noreferrer" className="btn btn-primary">
            {t.nav.book} <Icon name="arrow" size={16}/>
          </a>
          <button className="nav-mobile-toggle" onClick={() => setDrawerOpen(o => !o)} aria-label={drawerOpen ? "Close menu" : "Open menu"} aria-expanded={drawerOpen}>
            <Icon name={drawerOpen ? "close" : "menu"} size={22}/>
          </button>
        </div>
      </div>
    </nav>

      {/* Mobile drawer — rendered OUTSIDE <nav> because nav has backdrop-filter,
          which creates a containing block that traps position:fixed children. */}
      <div className={"nav-drawer" + (drawerOpen ? " open" : "")} role="dialog" aria-hidden={!drawerOpen}>
        <button onClick={() => nav("home")} className={page === "home" ? "active" : ""}>{t.nav.home}</button>

        <div className="drawer-section-label">{lang === "de" ? "Standorte" : "Locations"}</div>
        {locationsList.map(l => (
          <button key={l.key} className="drawer-sub" onClick={() => nav("location-" + l.key)}>
            {l.city}
          </button>
        ))}

        <button onClick={() => nav("management")} className={page === "management" ? "active" : ""}>{t.nav.management}</button>
        <button onClick={() => nav("about")} className={page === "about" ? "active" : ""}>{t.nav.about}</button>
        <button onClick={() => nav("realestate")} className={page === "realestate" ? "active" : ""}>{t.nav.realestate}</button>
        <button onClick={() => nav("blog")} className={page === "blog" || page.startsWith("blog-") ? "active" : ""}>Blog</button>
        <button onClick={() => nav("contact")} className={page === "contact" ? "active" : ""}>{t.nav.contact}</button>

        <div className="drawer-section-label">{lang === "de" ? "Sprache" : "Language"}</div>
        <div style={{ display: "flex", gap: 12, padding: "8px 0 12px", borderBottom: "1px solid var(--line)" }}>
          <button onClick={() => setLang("de")} style={{ minHeight: 44, padding: "10px 18px", fontSize: 16, fontFamily: "var(--font-sans)", color: lang === "de" ? "var(--ink)" : "var(--muted)", borderBottom: lang === "de" ? "2px solid var(--accent)" : "2px solid transparent" }}>DE</button>
          <button onClick={() => setLang("en")} style={{ minHeight: 44, padding: "10px 18px", fontSize: 16, fontFamily: "var(--font-sans)", color: lang === "en" ? "var(--ink)" : "var(--muted)", borderBottom: lang === "en" ? "2px solid var(--accent)" : "2px solid transparent" }}>EN</button>
        </div>

        <a href="https://luxomes.holidayfuture.com/" target="_blank" rel="noreferrer" className="btn btn-primary nav-drawer-cta" onClick={() => setDrawerOpen(false)}>
          {t.nav.book} <Icon name="arrow" size={16}/>
        </a>
      </div>
    </>
  );
}

// ---------- Footer ----------
function Footer({ setPage, t, lang }) {
  return (
    <footer>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 48, paddingBottom: 72 }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <img src="/assets/luxomes-logo.png" alt="LUXOMES" style={{ height: 28, filter: "brightness(0) invert(1)" }}/>
            </div>
            <div className="h-md" style={{ color: "#fff", fontFamily: "var(--font-display)", marginBottom: 18, maxWidth: 340 }}>
              {t.footer.tagline}
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.8, color: "oklch(0.75 0.005 110)", maxWidth: 340 }}>
              LUXOMES GmbH<br/>
              An der Burg 5<br/>
              85716 Unterschleißheim<br/>
              Deutschland<br/>
              <br/>
              Tel: +49 89 693378930<br/>
              info@luxomes.com
            </div>
          </div>
          <div>
            <h4>{t.footer.explore}</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button onClick={() => { setPage("home"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>{t.nav.home}</button>
              <button onClick={() => { setPage("management"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>{t.nav.management}</button>
              <button onClick={() => { setPage("blog"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>Blog</button>
            </div>
          </div>
          <div>
            <h4>{t.footer.company}</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button onClick={() => { setPage("about"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>{t.nav.about}</button>
              <button onClick={() => { setPage("contact"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>{t.nav.contact}</button>
              <button onClick={() => window.open("https://luxomes.holidayfuture.com/", "_blank", "noreferrer")} style={{ textAlign: "left" }}>{t.nav.book}</button>
            </div>
          </div>
          <div>
            <h4>{t.footer.legal}</h4>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <button onClick={() => { setPage("legal-impressum"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>Impressum</button>
              <button onClick={() => { setPage("legal-privacy"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>{lang === "de" ? "Datenschutz" : "Privacy"}</button>
              <button onClick={() => { setPage("legal-agb"); window.scrollTo(0,0); }} style={{ textAlign: "left" }}>AGB</button>
            </div>
            <h4 style={{ marginTop: 32 }}>{t.footer.followUs}</h4>
            <a href="https://www.linkedin.com/company/lxomes/" target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <Icon name="linkedin" size={18}/> LinkedIn
            </a>
          </div>
        </div>
        <div style={{ borderTop: "1px solid oklch(1 0 0 / 0.1)", paddingTop: 24, display: "flex", justifyContent: "space-between", fontSize: 13, color: "oklch(0.7 0 0)" }}>
          <div>{t.footer.rights}</div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic" }}>Bavaria · Germany</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Apartment Card ----------
function ApartmentCard({ apt, lang, variant = "classic", t }) {
  const price = apt.price;
  const soon = apt.soon;
  // SEO alt text — combines name + city + district so image search results
  // surface meaningful "serviced apartment <city>" queries.
  const altText = `${apt.name[lang]} — ${lang === "de" ? "Serviced Apartment" : "Serviced apartment"} ${apt.city}${apt.district ? ", " + apt.district[lang] : ""}`;

  if (variant === "editorial") {
    return (
      <a href={apt.link} target="_blank" rel="noreferrer" className="card" style={{ display: "block", background: "transparent", border: 0 }}>
        <div className="ph" style={{ aspectRatio: "4/5", backgroundImage: `url(${apt.image})`, borderRadius: 2 }}>
          <SEOImg src={apt.image} alt={altText}/>
          <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 6 }}>
            {soon && <span className="chip" style={{ background: "oklch(1 0 0 / 0.9)", color: "var(--ink)" }}><span className="dot"/>{lang === "de" ? "Bald verfügbar" : "Coming soon"}</span>}
          </div>
          <div style={{ position: "absolute", bottom: 20, left: 20, right: 20, color: "#fff", zIndex: 1 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.85, marginBottom: 6 }}>{apt.city} · {apt.district[lang]}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1.05 }}>{apt.name[lang]}</div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 16 }}>
          <div style={{ fontSize: 13, color: "var(--muted)" }}>{apt.guests} {t.common.guests} · {apt.beds} {t.common.beds}</div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{price ? <>{t.common.from} €{price}</> : "—"}</div>
        </div>
      </a>
    );
  }

  if (variant === "magazine") {
    return (
      <a href={apt.link} target="_blank" rel="noreferrer" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "center", padding: "28px 0", borderBottom: "1px solid var(--line)" }}>
        <div className="ph" style={{ aspectRatio: "5/4", backgroundImage: `url(${apt.image})`, borderRadius: 8 }}>
          <SEOImg src={apt.image} alt={altText}/>
        </div>
        <div>
          <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 10 }}>{apt.city} · {apt.district[lang]}</div>
          <h3 className="h-lg" style={{ marginBottom: 12 }}>{apt.name[lang]}</h3>
          <p className="body-md" style={{ marginBottom: 18 }}>{apt.desc[lang]}</p>
          <div style={{ display: "flex", gap: 24, fontSize: 13, color: "var(--ink-soft)", marginBottom: 18 }}>
            <span><Icon name="users" size={14}/> {apt.guests}</span>
            <span><Icon name="bed" size={14}/> {apt.beds}</span>
            {price && <span style={{ marginLeft: "auto", fontWeight: 600, color: "var(--ink)" }}>{t.common.from} €{price}/{t.common.night}</span>}
          </div>
          <span className="btn-link">{t.common.readMore} <Icon name="arrow" size={14}/></span>
        </div>
      </a>
    );
  }

  // classic (default)
  return (
    <a href={apt.link} target="_blank" rel="noreferrer" className="card" style={{ display: "flex", flexDirection: "column", height: "100%", borderRadius: 8 }}>
      <div className="ph" style={{ aspectRatio: "4/3", backgroundImage: `url(${apt.image})`, flexShrink: 0 }}>
        <SEOImg src={apt.image} alt={altText}/>
        {soon && <div style={{ position: "absolute", top: 14, left: 14, zIndex: 1 }}>
          <span className="chip" style={{ background: "oklch(1 0 0 / 0.95)", color: "var(--ink)" }}><span className="dot"/>{lang === "de" ? "Bald verfügbar" : "Coming soon"}</span>
        </div>}
      </div>
      <div style={{ padding: "22px 22px 24px", flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8, gap: 12 }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.15 }}>{apt.name[lang]}</h3>
          {price && <div style={{ fontWeight: 600, fontSize: 14, whiteSpace: "nowrap" }}>{t.common.from} <span style={{ fontSize: 18 }}>€{price}</span></div>}
        </div>
        {/* Spacer that grows so location row + divider + icons stick to the bottom in sync across cards */}
        <div style={{ flex: 1 }}/>
        <div style={{ fontSize: 13, color: "var(--muted)", marginBottom: 14, display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="pin" size={14}/> {apt.city} · {apt.district[lang]}
        </div>
        <div style={{ display: "flex", gap: 14, fontSize: 13, color: "var(--ink-soft)", paddingTop: 14, borderTop: "1px solid var(--line)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="users" size={14}/> {apt.guests}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="bed" size={14}/> {apt.beds}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="wifi" size={14}/></span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="tv" size={14}/></span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="kitchen" size={14}/></span>
        </div>
      </div>
    </a>
  );
}

// ---------- Accordion ----------
function Accordion({ items, lang }) {
  const [open, setOpen] = useState(0);
  return (
    <div>
      {items.map((it, i) => (
        <div key={i} className={"acc-item" + (open === i ? " open" : "")}>
          <button className="acc-head" onClick={() => setOpen(open === i ? -1 : i)}>
            <span className="q">{it.q[lang]}</span>
            <span className="acc-icon"><Icon name="plus" size={16}/></span>
          </button>
          <div className="acc-body">
            <div className="acc-body-inner">{it.a[lang]}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---------- Reveal on scroll ----------
function Reveal({ children, delay = 0, as: Tag = "div", style = {}, className = "" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          obs.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={"reveal " + className} style={style}>{children}</Tag>;
}

// ---------- Tweaks Panel ----------
function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });

  const accents = [
    { k: "sage", c: "oklch(0.48 0.045 145)" },
    { k: "terracotta", c: "oklch(0.58 0.10 45)" },
    { k: "ocean", c: "oklch(0.48 0.07 230)" },
    { k: "sand", c: "oklch(0.62 0.05 80)" },
    { k: "ink", c: "oklch(0.22 0.012 150)" },
  ];

  return (
    <div className="tweaks-panel">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>Tweaks</div>
      </div>
      <div className="tweaks-row">
        <h5>Theme</h5>
        <div className="tweaks-options">
          <button className={tweaks.theme === "light" ? "active" : ""} onClick={() => set("theme", "light")}>Light</button>
          <button className={tweaks.theme === "dark" ? "active" : ""} onClick={() => set("theme", "dark")}>Dark</button>
        </div>
      </div>
      <div className="tweaks-row">
        <h5>Accent</h5>
        <div className="tweaks-options">
          {accents.map(a => (
            <button key={a.k} className={"swatch" + (tweaks.accent === a.k ? " active" : "")} style={{ background: a.c }} onClick={() => set("accent", a.k)} title={a.k}/>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <h5>Typography</h5>
        <div className="tweaks-options">
          <button className={tweaks.typo === "default" ? "active" : ""} onClick={() => set("typo", "default")}>Display × Sans</button>
          <button className={tweaks.typo === "editorial" ? "active" : ""} onClick={() => set("typo", "editorial")}>Editorial</button>
          <button className={tweaks.typo === "modern" ? "active" : ""} onClick={() => set("typo", "modern")}>Modern</button>
          <button className={tweaks.typo === "swiss" ? "active" : ""} onClick={() => set("typo", "swiss")}>Swiss</button>
        </div>
      </div>
      <div className="tweaks-row">
        <h5>Hero Layout</h5>
        <div className="tweaks-options">
          <button className={tweaks.hero === "split" ? "active" : ""} onClick={() => set("hero", "split")}>Split</button>
          <button className={tweaks.hero === "fullbleed" ? "active" : ""} onClick={() => set("hero", "fullbleed")}>Full-bleed</button>
          <button className={tweaks.hero === "editorial" ? "active" : ""} onClick={() => set("hero", "editorial")}>Editorial</button>
        </div>
      </div>
      <div className="tweaks-row" style={{ marginBottom: 0 }}>
        <h5>Apartment Cards</h5>
        <div className="tweaks-options">
          <button className={tweaks.cards === "classic" ? "active" : ""} onClick={() => set("cards", "classic")}>Classic</button>
          <button className={tweaks.cards === "editorial" ? "active" : ""} onClick={() => set("cards", "editorial")}>Editorial</button>
          <button className={tweaks.cards === "magazine" ? "active" : ""} onClick={() => set("cards", "magazine")}>Magazine</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Logo, Nav, Footer, ApartmentCard, Accordion, Reveal, TweaksPanel, SEOImg });