// LUXOMES — SEO landing pages (Redesign 2026).
// 41 management pages (/verwaltung/<slug>), 6 real-estate pages
// (/immobilien/<slug>) and the index (/themenseiten). URLs, titles and
// schema untouched (seo.jsx).

const LAND_TX = {
  de: { idxEyebrow: "Alle Themenseiten", idxTitle: "Verwaltung & Real Estate\nnach Stadt, Region und Anliegen.", idxLead: "LUXOMES verwaltet Apartments in ganz Deutschland und mietet Objekte als Master-Tenant. Wähle Deine Stadt oder Dein Anliegen.",
    gCity: "Apartment-Verwaltung nach Stadt", gRegion: "Verwaltung nach Region", gIntent: "Verpachten, Nachfolge & Co-Hosting", gRe: "Real Estate · Master-Lease",
    mgmtEye: c => `Apartment-Verwaltung in ${c}`, regEye: c => `Apartment- & Pensionsverwaltung in ${c}`,
    mgmtHead: c => `Wir verwalten Dein Serviced Apartment\nin ${c}.`, regHead: c => `Wir verwalten Apartments\nund Pensionen in ${c}.`,
    intentHead: { "pension-verpachten": "Deine Pension,\nwir übernehmen.", "aparthotel-uebernahme": "Aparthotel-Übernahme\ndurch erfahrenen Betreiber.", "master-lease-anbieter": "Master-Lease-Anbieter\nfür ganz Deutschland.", "pension-nachfolge": "Keine Nachfolge?\nWir übernehmen.", "co-hosting-anbieter": "Dein professioneller Co-Host\nfür Airbnb & Co." },
    tagMgmt: "Channel-Management, dynamische Preise, 24/7 Gäste-Support, alles aus einer Hand.", tagIntent: "Garantierte Festmiete, 10 + 10 Jahre Laufzeit, voll operative Übernahme, bundesweit.", tagCohost: "Inserate, dynamische Preise, 24/7 Gäste-Support, Reinigungs-Koordination: klare Pakete ab 15 %.",
    closeCity: c => `Egal ob Du bereits ein Apartment in ${c} besitzt oder gerade investierst, wir übernehmen Vermietung, Reinigung, Gäste-Kommunikation und Reporting. Optional als Master-Lease mit garantierter Festmiete auf 10 + 10 Jahre.`,
    closeRegion: "Wir betreiben aktiv Apartments in Bayern und verwalten Eigentümer-Apartments und Pensionen in der gesamten Region. Egal ob Stadt-Apartment, Aparthotel oder Ferienpension, wir übernehmen Vermietung, Reinigung, Gäste-Kommunikation und Reporting.",
    closeIntent: "Wir sind erfahrener Hospitality-Betreiber mit eigenen Aparthotels in München, Nürnberg, Ingolstadt und Vilshofen. Sprich mit uns, die Erstanalyse ist kostenlos und unverbindlich.",
    closeRe: "Wir sind erfahrener Hospitality-Betreiber seit 2020 mit eigenen Standorten in München, Nürnberg, Ingolstadt und Vilshofen. Sprich mit uns über Dein Objekt, die Erstanalyse ist kostenlos und unverbindlich.",
    covers: c => `Städte und Orte in ${c}, in denen wir verwalten`, ctaMgmt: "Kostenlose Analyse", ctaRe: "Erstgespräch buchen", cta2: "Direkt kontaktieren", cta2Re: "Mehr zu Real Estate",
    occ: "Auslastung", occSub: "im Durchschnitt", lease: "Mietvertrag", leaseSub: "Jahre (mit Option)",
    whyEyebrowM: "Warum LUXOMES", whyTitleM: "Was wir besser machen\nals Self-Hosting.", whyLeadM: "Datenbasiert, automatisiert, transparent, im Schnitt 75–85 % Auslastung und über 30 % mehr Umsatz für unsere Partner.",
    whyEyebrowR: "Warum LUXOMES als Mieter", whyTitleR: "Ein zuverlässiger Mieter,\nkein Mieterkarussell.", whyLeadR: "Anstatt das Objekt selbst zu vermarkten oder über Plattformen zu vermieten, Du übergibst an einen einzigen, professionellen Mieter.",
    tiersEyebrow: "Leistungspakete", tiersTitle: "Für jeden das richtige Paket.", tiersLead: "Von Vermarktung-only bis Rundum-Sorglos. Faire, gestaffelte Provisionen vom Netto-Umsatz.", tiersMore: "Alle Leistungen vergleichen",
    leadEyebrow: "Kostenlos & unverbindlich", leadTitleM: "Was ist Dein Objekt\nwert?", leadTitleR: "Lass uns über\nDein Objekt sprechen.", leadLeadM: "Trag Dein Objekt ein, Du erhältst innerhalb von 24 h eine persönliche Potenzial-Analyse mit realistischer Umsatzprognose.", leadLeadR: "30 Minuten, unverbindlich, vertraulich, am Ende weißt Du, ob ein LUXOMES Master-Lease für Dich passt und in welcher Größenordnung.",
    lp: [["24h", "Persönliche Rückmeldung", "Adress-spezifische Analyse mit Saisonalität und Wettbewerb."], ["0 €", "Kostenlos", "Auch wenn Du nichts buchst: Die Analyse behältst Du."], ["1", "Ansprechpartner", "Vom Erstgespräch bis zur laufenden Partnerschaft."]],
    formTitle: "Objekt anfragen", fName: "Name", fAddress: "Adresse oder Stadt", fUnits: "Einheiten", fType: "Objektart", types: ["Apartment / FeWo", "Pension / Gasthof", "Aparthotel", "Apartmenthaus / MFH", "Neubau-Projekt"], fPhone: "Telefon (optional)", submit: "Anfrage senden", sending: "Wird gesendet…", err: "Fehler, bitte erneut", leadSuccess: "Danke! Wir melden uns innerhalb von 24 Stunden.",
    faqTitleM: "Häufige Fragen\nzur Verwaltung.", faqTitleR: "Häufige\nEigentümer-Fragen.", related: "Weitere Themenseiten", allPages: "Alle Themenseiten" },
  en: { idxEyebrow: "All topic pages", idxTitle: "Management & real estate\nby city, region and intent.", idxLead: "LUXOMES manages apartments across Germany and leases properties as master tenant. Pick your city or topic.",
    gCity: "Apartment management by city", gRegion: "Management by region", gIntent: "Leasing, succession & co-hosting", gRe: "Real estate · Master lease",
    mgmtEye: c => `Apartment management in ${c}`, regEye: c => `Apartment & pension management in ${c}`,
    mgmtHead: c => `We manage your serviced apartment\nin ${c}.`, regHead: c => `We manage apartments\nand pensions in ${c}.`,
    intentHead: { "pension-verpachten": "Your pension,\nwe take over.", "aparthotel-uebernahme": "Aparthotel takeover\nby an experienced operator.", "master-lease-anbieter": "Master-lease provider\nfor all of Germany.", "pension-nachfolge": "No successor?\nWe take over.", "co-hosting-anbieter": "Your professional co-host\nfor Airbnb & co." },
    tagMgmt: "Channel management, dynamic pricing, 24/7 guest support, all from one source.", tagIntent: "Guaranteed fixed rent, 10 + 10 year term, full operational takeover, across Germany.", tagCohost: "Listings, dynamic pricing, 24/7 guest support, cleaning coordination: clear packages from 15 %.",
    closeCity: c => `Whether you already own an apartment in ${c} or are investing, we take over rentals, cleaning, guest communication and reporting. Optionally as a master lease with guaranteed monthly rent on a 10 + 10 year contract.`,
    closeRegion: "We actively operate apartments in Bavaria and manage owner properties across the region. Whether city apartment, aparthotel or holiday pension, we handle everything.",
    closeIntent: "We are an experienced hospitality operator running our own aparthotels in Munich, Nuremberg, Ingolstadt and Vilshofen. Free, no-obligation initial assessment.",
    closeRe: "We've been an experienced hospitality operator since 2020 with our own sites in Munich, Nuremberg, Ingolstadt and Vilshofen. Free, no-obligation initial assessment.",
    covers: c => `Cities we manage in ${c}`, ctaMgmt: "Free analysis", ctaRe: "Book a call", cta2: "Contact us", cta2Re: "Learn more",
    occ: "Occupancy", occSub: "on average", lease: "Lease", leaseSub: "years (with option)",
    whyEyebrowM: "Why LUXOMES", whyTitleM: "What we do better\nthan self-hosting.", whyLeadM: "Data-driven, automated, transparent, on average 75–85 % occupancy and over 30 % more revenue for our partners.",
    whyEyebrowR: "Why LUXOMES as your tenant", whyTitleR: "One reliable tenant,\nno tenant carousel.", whyLeadR: "Instead of marketing the property yourself or listing on platforms, you hand it to one single, professional tenant.",
    tiersEyebrow: "Service tiers", tiersTitle: "The right package for everyone.", tiersLead: "From marketing-only to fully managed. Fair, tiered commissions of net revenue.", tiersMore: "Compare all features",
    leadEyebrow: "Free & non-binding", leadTitleM: "What is your\nproperty worth?", leadTitleR: "Let's talk about\nyour property.", leadLeadM: "Enter your property, within 24h you receive a personal potential analysis with a realistic revenue forecast.", leadLeadR: "30 minutes, no obligation, confidential, by the end you know whether a LUXOMES master lease fits and in what range.",
    lp: [["24h", "Personal reply", "Address-specific analysis with seasonality and competition."], ["€0", "Free", "Even if you don't book anything: the analysis stays yours."], ["1", "Point of contact", "From first call to ongoing partnership."]],
    formTitle: "Enquire about your property", fName: "Name", fAddress: "Address or city", fUnits: "Units", fType: "Property type", types: ["Apartment / holiday flat", "Pension / guesthouse", "Aparthotel", "Apartment building", "New-build project"], fPhone: "Phone (optional)", submit: "Send enquiry", sending: "Sending…", err: "Error, retry", leadSuccess: "Thanks! We'll get back to you within 24 hours.",
    faqTitleM: "Common questions\nabout management.", faqTitleR: "Common\nowner questions.", related: "More topic pages", allPages: "All topic pages" },
};
const LAND_IMGS = ["/assets/nuernberg/IMG_0414.jpg", "/assets/nuernberg/DSC02260.jpg", "/assets/nuernberg/DSC02216.jpg", "/assets/ingolstadt/tropisch/DSC00174.jpg", "/assets/munich/IMG_2012.jpg", "/assets/humboldt/XL/DSC02667.jpg", "/assets/ingolstadt/streetart/DSC00043.jpg", "/assets/humboldt/common/DSC02701.jpg"];

function LandingIndexPage({ lang, setPage }) {
  const t = LAND_TX[lang] || LAND_TX.de;
  const mkeys = Object.keys(MGMT_CITIES), rkeys = Object.keys(RE_INTENTS);
  const go = (e, p) => { e.preventDefault(); setPage(p); };
  const grp = kind => mkeys.filter(k => (MGMT_CITIES[k].kind || "city") === kind).map(k => ({ name: MGMT_CITIES[k].name, page: "mgmt-city-" + k, href: "/verwaltung/" + k }));
  const groups = [
    { title: t.gCity, items: grp("city") },
    { title: t.gRegion, items: grp("region") },
    { title: t.gIntent, items: grp("intent") },
    { title: t.gRe, items: rkeys.map(k => ({ name: RE_INTENTS[k].name[lang], page: "re-intent-" + k, href: "/immobilien/" + k })) },
  ];
  return (
    <main>
      <section style={{ padding: "clamp(56px,7vw,96px) clamp(20px,4vw,48px) clamp(80px,10vw,140px)" }}>
        <div className="wrap">
          <div className="eyebrow">{t.idxEyebrow}</div>
          <h1 className="h1" style={{ margin: "22px 0 0", whiteSpace: "pre-line" }}>{t.idxTitle}</h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "#4A514B", maxWidth: 640, margin: "24px 0 0" }}>{t.idxLead}</p>
          {groups.map((g, gi) => (
            <div key={gi} style={{ marginTop: 56 }}>
              <div className="serif" style={{ fontSize: 26, paddingBottom: 14, borderBottom: "1px solid #DDD8CC", marginBottom: 6 }}>{g.title}</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,260px),1fr))", gap: "0 32px" }}>
                {g.items.map((it, i) => (
                  <a key={i} href={it.href} onClick={e => go(e, it.page)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, padding: "14px 0", borderBottom: "1px solid #EEEAE1", color: "#1E231F", textDecoration: "none", fontSize: 15, transition: "color .3s" }}>
                    <span>{it.name}</span><span style={{ color: "#B7C4AC" }}>→</span>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function LandingPage({ slug, isMgmt, lang, setPage }) {
  const t = LAND_TX[lang] || LAND_TX.de;
  const [form, setForm] = useState("idle");
  const stackRef = useRef(null);
  const go = (e, p) => { e.preventDefault(); setPage(p); };
  useEffect(() => { setForm("idle"); }, [slug]);
  useEffect(() => {
    const onMove = e => {
      const el = stackRef.current; if (!el) return;
      const x = e.clientX / innerWidth - .5, y = e.clientY / innerHeight - .5;
      el.style.transform = `rotateX(${(58 - y * 12).toFixed(1)}deg) rotateZ(${(-28 + x * 16).toFixed(1)}deg)`;
    };
    addEventListener("mousemove", onMove, { passive: true });
    return () => removeEventListener("mousemove", onMove);
  }, []);

  const mkeys = Object.keys(MGMT_CITIES), rkeys = Object.keys(RE_INTENTS);
  const idx = (mkeys.indexOf(slug) + rkeys.indexOf(slug) + 2) % LAND_IMGS.length;
  let p, metrics, points, faqsSrc, sec, related;

  if (isMgmt) {
    const c = MGMT_CITIES[slug] || { name: slug, intro: { de: "", en: "" } };
    const kind = c.kind || "city", cohost = slug === "co-hosting-anbieter";
    p = {
      eyebrow: kind === "region" ? t.regEye(c.name) : kind === "intent" ? c.name : t.mgmtEye(c.name),
      headline: kind === "region" ? t.regHead(c.name) : kind === "intent" ? (t.intentHead[slug] || c.name) : t.mgmtHead(c.name),
      tagline: cohost ? t.tagCohost : kind === "intent" ? t.tagIntent : t.tagMgmt,
      intro: c.intro[lang], hasCovers: !!c.coversCities, coversTitle: t.covers(c.name), covers: (c.coversCities || []).join(" · "),
      closing: kind === "region" ? t.closeRegion : kind === "intent" ? t.closeIntent : t.closeCity(c.name),
      cta: t.ctaMgmt, cta2: t.cta2, cta2Page: "contact",
      badgeLabel: kind === "intent" && !cohost ? t.lease : t.occ, badgeValue: kind === "intent" && !cohost ? "10 + 10" : "75–85%", badgeSub: kind === "intent" && !cohost ? t.leaseSub : t.occSub,
      placeholder: kind === "city" ? c.name : "Regensburg",
    };
    metrics = MGMT.why.map(w => ({ value: w.metric, label: w.title[lang] }));
    points = MGMT.why.map(w => ({ title: w.title[lang], body: w.body[lang] })).concat(MGMT.process.slice(0, 2).map(x => ({ title: x.title[lang], body: x.body[lang] })));
    faqsSrc = MGMT.faq;
    sec = { whyEyebrow: t.whyEyebrowM, whyTitle: t.whyTitleM, whyLead: t.whyLeadM, leadEyebrow: t.leadEyebrow, leadTitle: t.leadTitleM, leadLead: t.leadLeadM, faqTitle: t.faqTitleM };
    const sameKind = mkeys.filter(k => k !== slug && (MGMT_CITIES[k].kind || "city") === kind);
    related = sameKind.slice(0, 12).map(k => ({ name: MGMT_CITIES[k].name, page: "mgmt-city-" + k, href: "/verwaltung/" + k }));
  } else {
    const r = RE_INTENTS[slug] || { name: { de: slug, en: slug }, eyebrow: { de: "", en: "" }, headline: { de: slug, en: slug }, intro: { de: "", en: "" } };
    p = {
      eyebrow: r.eyebrow[lang], headline: r.headline[lang], tagline: t.tagIntent, intro: r.intro[lang],
      hasCovers: false, closing: t.closeRe, cta: t.ctaRe, cta2: t.cta2Re, cta2Page: "realestate",
      badgeLabel: t.lease, badgeValue: "10 + 10", badgeSub: t.leaseSub, placeholder: "München",
    };
    metrics = RE.metrics.map(m => ({ value: m.value, label: m.label[lang] }));
    points = RE.points.map(x => ({ title: x.title[lang], body: x.body[lang] }));
    faqsSrc = RE.faq;
    sec = { whyEyebrow: t.whyEyebrowR, whyTitle: t.whyTitleR, whyLead: t.whyLeadR, leadEyebrow: t.leadEyebrow, leadTitle: t.leadTitleR, leadLead: t.leadLeadR, faqTitle: t.faqTitleR };
    related = rkeys.filter(k => k !== slug).map(k => ({ name: RE_INTENTS[k].name[lang], page: "re-intent-" + k, href: "/immobilien/" + k }))
      .concat(mkeys.filter(k => MGMT_CITIES[k].kind === "intent").map(k => ({ name: MGMT_CITIES[k].name, page: "mgmt-city-" + k, href: "/verwaltung/" + k })));
  }
  const img1 = LAND_IMGS[idx], img2 = LAND_IMGS[(idx + 3) % LAND_IMGS.length], img3 = LAND_IMGS[(idx + 5) % LAND_IMGS.length];
  const submit = e => lxSubmitForm(e, { _subject: `[LUXOMES] Anfrage Themenseite: ${slug}`, source: "landing-" + slug }, setForm);

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "clamp(56px,7vw,96px) clamp(20px,4vw,48px) 0" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,440px),1fr))", gap: "clamp(32px,5vw,72px)", alignItems: "center" }}>
          <div>
            <div className="eyebrow eyebrow-dot">{p.eyebrow}</div>
            <h1 className="serif" style={{ fontSize: "clamp(38px,5.2vw,76px)", lineHeight: 1, letterSpacing: "-.025em", margin: "22px 0 0", whiteSpace: "pre-line", textWrap: "balance" }}>{p.headline}</h1>
            <p className="serif" style={{ fontSize: "clamp(19px,1.7vw,25px)", color: "#5F7458", margin: "22px 0 0", lineHeight: 1.3 }}>{p.tagline}</p>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: "#1E231F", maxWidth: 620, margin: "20px 0 0", textWrap: "pretty" }}>{p.intro}</p>
            {p.hasCovers && (
              <div style={{ maxWidth: 620, marginTop: 22, padding: "18px 22px", background: "#E3E8DC", borderRadius: 16 }}>
                <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".16em", textTransform: "uppercase", color: "#5F7458", marginBottom: 8 }}>{p.coversTitle}</div>
                <div style={{ fontSize: 14.5, lineHeight: 1.7 }}>{p.covers}</div>
              </div>
            )}
            <p style={{ fontSize: 15, lineHeight: 1.65, color: "#4A514B", maxWidth: 620, margin: "20px 0 0", textWrap: "pretty" }}>{p.closing}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 30 }}>
              <a href="#lead" className="btn btn-green">{p.cta} →</a>
              <a href={p.cta2Page === "contact" ? "/contact" : "/realestate"} onClick={e => go(e, p.cta2Page)} className="btn btn-outline">{p.cta2}</a>
            </div>
          </div>
          <div style={{ perspective: 1400, display: "flex", justifyContent: "center", padding: "170px 0 30px" }}>
            <div ref={stackRef} className="stack3d" style={{ position: "relative", width: "min(100%,400px)", aspectRatio: "1", transformStyle: "preserve-3d", transform: "rotateX(58deg) rotateZ(-28deg)", transition: "transform .9s cubic-bezier(.2,.7,.2,1)" }}>
              <div style={{ position: "absolute", inset: "6%", borderRadius: 24, background: "#E3E8DC", boxShadow: "0 60px 80px -30px rgba(30,35,31,.5)" }}></div>
              <div style={{ position: "absolute", inset: "10%", borderRadius: 22, overflow: "hidden", transform: "translateZ(60px)", boxShadow: "0 30px 60px -20px rgba(30,35,31,.4)" }}><img src={img1} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div style={{ position: "absolute", inset: "14%", borderRadius: 20, overflow: "hidden", transform: "translateZ(120px)", boxShadow: "0 30px 60px -20px rgba(30,35,31,.4)" }}><img src={img2} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div style={{ position: "absolute", inset: "18%", borderRadius: 18, overflow: "hidden", transform: "translateZ(180px)", boxShadow: "0 30px 60px -20px rgba(30,35,31,.4)" }}><img src={img3} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div style={{ position: "absolute", left: "50%", top: "50%", width: 160, margin: "-40px 0 0 -80px", transform: "translateZ(250px) rotateZ(28deg) rotateX(-58deg)", transformOrigin: "50% 100%", background: "#1E231F", color: "#fff", borderRadius: 16, padding: "14px 16px", boxShadow: "0 20px 40px -10px rgba(30,35,31,.5)" }}>
                <div style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "#B7C4AC" }}>{p.badgeLabel}</div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1, marginTop: 4 }}>{p.badgeValue}</div>
                <div style={{ fontSize: 11, color: "#CFCFC6", marginTop: 4 }}>{p.badgeSub}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* METRICS */}
      <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%,200px),1fr))", gap: 24 }}>
          {metrics.map((m, i) => (
            <div key={i} data-reveal style={{ padding: "28px 0", borderTop: "2px solid #1E231F", transitionDelay: (i * .1) + "s" }}>
              <div className="serif" style={{ fontSize: "clamp(40px,4.6vw,64px)", lineHeight: 1, letterSpacing: "-.03em" }}>{m.value}</div>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".14em", textTransform: "uppercase", color: "#7A817A", marginTop: 12 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* POINTS */}
      <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%,400px),1fr))", gap: "clamp(32px,5vw,80px)", alignItems: "start" }}>
          <div data-reveal style={{ position: "sticky", top: 96 }}>
            <div className="eyebrow">{sec.whyEyebrow}</div>
            <h2 className="h2" style={{ margin: "16px 0 18px", whiteSpace: "pre-line" }}>{sec.whyTitle}</h2>
            <p className="body-lg">{sec.whyLead}</p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", borderTop: "1px solid #DDD8CC" }}>
            {points.map((pt, i) => (
              <div key={i} data-reveal style={{ display: "grid", gridTemplateColumns: "64px 1fr", gap: 20, padding: "28px 0", borderBottom: "1px solid #DDD8CC" }}>
                <div className="serif" style={{ fontSize: 16, color: "#5F7458", paddingTop: 6 }}>0{i + 1}</div>
                <div>
                  <div className="serif" style={{ fontSize: 24, lineHeight: 1.15, marginBottom: 10 }}>{pt.title}</div>
                  <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, color: "#4A514B", textWrap: "pretty" }}>{pt.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TIERS (mgmt only) */}
      {isMgmt && (
        <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px) 0" }}>
          <div className="wrap">
            <div data-reveal style={{ maxWidth: 760 }}>
              <div className="eyebrow">{t.tiersEyebrow}</div>
              <h2 className="h2" style={{ margin: "16px 0 14px" }}>{t.tiersTitle}</h2>
              <p className="body-lg">{t.tiersLead}</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,300px),1fr))", gap: 20, marginTop: 48, perspective: 1400 }}>
              {MGMT.tiers.map((tr, i) => {
                const act = tr.key === "plus";
                const accent = act ? "#B7C4AC" : "#5F7458", body = act ? "#E6E6DF" : "#4A514B";
                return (
                  <div key={tr.key} onMouseMove={lxTilt} onMouseLeave={lxUntilt} data-reveal className="tiltable" style={{ borderRadius: 24, padding: "36px 32px", display: "flex", flexDirection: "column", gap: 14, background: act ? "#1E231F" : "#fff", color: act ? "#fff" : "#1E231F", border: "1px solid " + (act ? "#1E231F" : "#E6E1D6"), transitionDelay: (i * .1) + "s" }}>
                    <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".18em", textTransform: "uppercase", color: accent }}>{tr.name}</div>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                      <span className="serif" style={{ fontSize: 72, lineHeight: 1, letterSpacing: "-.03em" }}>{tr.fee}</span>
                      <span className="serif" style={{ fontSize: 32, color: accent }}>%</span>
                    </div>
                    <div className="serif" style={{ fontSize: 20, color: accent }}>{tr.tagline[lang]}</div>
                    <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: body }}>{tr.description[lang]}</p>
                    <div style={{ display: "flex", flexDirection: "column", gap: 9, marginTop: 4 }}>
                      {tr.highlights[lang].map((h, j) => (
                        <div key={j} style={{ display: "flex", gap: 10, fontSize: 13.5, lineHeight: 1.4, color: body }}>
                          <span className="check-dot">✓</span><span>{h}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
            <a href="/management" onClick={e => go(e, "management")} className="link-u" style={{ marginTop: 28 }}>{t.tiersMore} →</a>
          </div>
        </section>
      )}

      {/* LEAD FORM, dark */}
      <section id="lead" className="sec-dark" style={{ marginTop: "clamp(72px,9vw,120px)", padding: "clamp(72px,9vw,128px) clamp(20px,4vw,48px)" }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%,380px),1fr))", gap: "clamp(32px,5vw,80px)", alignItems: "start" }}>
          <div data-reveal>
            <div className="eyebrow-dark">{sec.leadEyebrow}</div>
            <h2 className="h2" style={{ margin: "16px 0 18px", color: "#fff", whiteSpace: "pre-line" }}>{sec.leadTitle}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "#CFCFC6", margin: "0 0 32px", textWrap: "pretty" }}>{sec.leadLead}</p>
            <div style={{ display: "grid", gap: 20 }}>
              {t.lp.map((b, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "84px 1fr", gap: 20, alignItems: "baseline" }}>
                  <div className="serif" style={{ fontSize: 34, color: "#B7C4AC", lineHeight: 1 }}>{b[0]}</div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4, color: "#fff" }}>{b[1]}</div>
                    <div style={{ fontSize: 14, color: "#CFCFC6", lineHeight: 1.55 }}>{b[2]}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <form onSubmit={submit} data-reveal style={{ background: "#fff", color: "#1E231F", borderRadius: 24, padding: "clamp(24px,3vw,40px)", display: "grid", gap: 16, transitionDelay: ".1s", position: "relative" }}>
            {form === "sent" ? (
              <div style={{ textAlign: "center", padding: "48px 12px" }}>
                <div style={{ width: 64, height: 64, margin: "0 auto 20px", borderRadius: "50%", background: "#5F7458", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26 }}>✓</div>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "#4A514B" }}>{t.leadSuccess}</p>
              </div>
            ) : (
              <>
                <div className="serif" style={{ fontSize: 24 }}>{t.formTitle}</div>
                <label className="form-label"><span className="label-sm">{t.fName} *</span><input name="name" required className="field" /></label>
                <label className="form-label"><span className="label-sm">{t.fAddress} *</span><input name="address" required placeholder={p.placeholder} className="field" /></label>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px,1fr))", gap: 16 }}>
                  <label className="form-label"><span className="label-sm">{t.fUnits}</span><input name="units" inputMode="numeric" placeholder="4" className="field" /></label>
                  <label className="form-label"><span className="label-sm">{t.fType}</span>
                    <select name="type" className="field">{t.types.map((o, i) => <option key={i} value={o}>{o}</option>)}</select>
                  </label>
                </div>
                <label className="form-label"><span className="label-sm">E-Mail *</span><input name="email" type="email" required className="field" /></label>
                <label className="form-label"><span className="label-sm">{t.fPhone}</span><input name="phone" type="tel" className="field" /></label>
                <input type="text" name="_gotcha" tabIndex="-1" autoComplete="off" className="honeypot" />
                <button type="submit" className="btn btn-dark" style={{ padding: "16px 24px", fontSize: 15 }}>
                  {form === "sending" ? t.sending : form === "error" ? t.err : t.submit}
                </button>
              </>
            )}
          </form>
        </div>
      </section>

      {/* FAQ */}
      <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%,360px),1fr))", gap: "clamp(32px,5vw,80px)", alignItems: "start" }}>
          <div data-reveal style={{ position: "sticky", top: 96 }}>
            <div className="eyebrow">FAQ</div>
            <h2 className="h2" style={{ margin: "16px 0 0", whiteSpace: "pre-line" }}>{sec.faqTitle}</h2>
          </div>
          <FAQList items={faqsSrc} lang={lang} />
        </div>
      </section>

      {/* RELATED */}
      <section style={{ padding: "clamp(72px,9vw,120px) clamp(20px,4vw,48px)" }}>
        <div className="wrap">
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "baseline", gap: 16, paddingBottom: 14, borderBottom: "1px solid #DDD8CC" }}>
            <div className="serif" style={{ fontSize: 26 }}>{t.related}</div>
            <a href="/themenseiten" onClick={e => go(e, "themen")} style={{ fontSize: 14, fontWeight: 600, color: "#1E231F", textDecoration: "none" }}>{t.allPages} →</a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%,220px),1fr))", gap: "0 32px" }}>
            {related.map((it, i) => (
              <a key={i} href={it.href} onClick={e => go(e, it.page)} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, padding: "14px 0", borderBottom: "1px solid #EEEAE1", color: "#1E231F", textDecoration: "none", fontSize: 15, transition: "color .3s" }}>
                <span>{it.name}</span><span style={{ color: "#B7C4AC" }}>→</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function ManagementCityPage({ citySlug, lang, setPage }) {
  return <LandingPage slug={citySlug} isMgmt={true} lang={lang} setPage={setPage} />;
}
function RealEstateIntentPage({ intentSlug, lang, setPage }) {
  return <LandingPage slug={intentSlug} isMgmt={false} lang={lang} setPage={setPage} />;
}