// LUXOMES — Management / Verwaltung page
// Rebuilt 2026-05-16: shifted from investor-focused (new build) to existing-host focused.
// New components: ProcessCircle (replaces RohbauAnimation), TierMatrix (replaces accordion),
// LiveCalculator (replaces static fee example), LeadAnalysis (Formspree-powered free tool).

function MgmtHero({ t, lang }) {
  return (
    <section style={{ paddingTop: 72, paddingBottom: 96 }}>
      <div className="container mgmt-hero">
        <div>
          <div className="eyebrow">{t.mgmt.heroEyebrow}</div>
          <h1 className="h-display" style={{ marginTop: 28, marginBottom: 28, whiteSpace: "pre-line", fontSize: "clamp(40px, 5.4vw, 82px)" }}>{t.mgmt.heroTitle}</h1>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2vw, 30px)", fontStyle: "italic", color: "var(--accent)", marginBottom: 28 }}>{t.mgmt.heroLead}</p>
          <p className="body-lg" style={{ maxWidth: 540, marginBottom: 40 }}>{t.mgmt.heroBody}</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#mgmt-lead" className="btn btn-primary" onClick={(e) => { e.preventDefault(); document.getElementById("mgmt-lead")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}>
              {t.mgmt.heroCta} <Icon name="arrow" size={16}/>
            </a>
            <button onClick={() => { window.__setPage?.("contact"); window.scrollTo(0,0); }} className="btn btn-ghost">{t.mgmt.heroCtaSecondary}</button>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="ph" style={{ aspectRatio: "4/5", backgroundImage: `url(${IMG.mgmtHero})`, borderRadius: 4, backgroundSize: "cover", backgroundPosition: "center" }}>
            <SEOImg src={IMG.mgmtHero} alt={lang === "de" ? "Professionelle Verwaltung von Serviced Apartments durch LUXOMES" : "Professional serviced apartment management by LUXOMES"}/>
          </div>
          <div style={{ position: "absolute", top: -24, right: -24, background: "var(--surface)", padding: "20px 24px", boxShadow: "var(--shadow-lift)", border: "1px solid var(--line)", maxWidth: 220 }}>
            <div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{lang === "de" ? "Durchschnittliche Auslastung" : "Average occupancy"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink)", lineHeight: 1 }}>75–85%</div>
          </div>
          <div style={{ position: "absolute", bottom: -32, left: -28, background: "var(--ink)", color: "var(--bg)", padding: "20px 24px", maxWidth: 240 }}>
            <div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", opacity: 0.6, marginBottom: 8 }}>{lang === "de" ? "Eigentümer-Ertrag" : "Owner yield"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1 }}>+31%</div>
            <div style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>{lang === "de" ? "ggü. Langzeitvermietung" : "vs. long-term rental"}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MgmtWhySection({ t, lang }) {
  return (
    <section style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.mgmt.whyEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, whiteSpace: "pre-line" }}>{t.mgmt.whyTitle}</h2>
            </Reveal>
          </div>
        </div>
        <div className="grid mgmt-why-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          {MGMT_WHY.map((w, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{ background: "var(--surface)", padding: "56px 48px", minHeight: 280, display: "flex", flexDirection: "column", gap: 18 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 62, color: "var(--accent)", lineHeight: 1, fontWeight: 500 }}>{w.metric}</div>
                <h3 className="h-md">{w.title[lang]}</h3>
                <p className="body-md">{w.body[lang]}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// PROCESS CIRCLE — 6 phases arranged around a circle. Active step expands a detail card.
// Auto-rotation pauses on hover/click. Center shows live metric.
function MgmtProcessCircle({ t, lang }) {
  const [active, setActive] = useState(0);
  const ref = useRef(null);
  const auto = useRef(true);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let timer = null;
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting && auto.current) {
          timer = setInterval(() => {
            if (!auto.current) { clearInterval(timer); return; }
            setActive(p => (p + 1) % MGMT_PROCESS.length);
          }, 3600);
        } else if (timer) {
          clearInterval(timer);
        }
      });
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => { obs.disconnect(); if (timer) clearInterval(timer); };
  }, []);

  // 6 segments around a circle. Step 0 starts at top (12 o'clock).
  const N = MGMT_PROCESS.length;
  const radius = 180;
  const cx = 240, cy = 240;
  const positions = MGMT_PROCESS.map((_, i) => {
    const angle = (i / N) * 2 * Math.PI - Math.PI / 2; // start at 12 o'clock
    return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle), angle };
  });

  const iconPath = (name) => {
    const paths = {
      search: <><circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" strokeWidth="1.8"/><line x1="15.5" y1="15.5" x2="20" y2="20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></>,
      camera: <><rect x="3" y="6" width="18" height="14" rx="2" fill="none" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="13" r="4" fill="none" stroke="currentColor" strokeWidth="1.8"/><rect x="8" y="3" width="8" height="3" fill="currentColor"/></>,
      trending: <><polyline points="3,17 9,11 13,15 21,7" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><polyline points="16,7 21,7 21,12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></>,
      chat: <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></>,
      star: <polygon points="12,2 15,8.5 22,9.5 17,14.5 18.5,21.5 12,18 5.5,21.5 7,14.5 2,9.5 9,8.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>,
      dashboard: <><rect x="3" y="3" width="8" height="8" fill="none" stroke="currentColor" strokeWidth="1.6"/><rect x="13" y="3" width="8" height="5" fill="none" stroke="currentColor" strokeWidth="1.6"/><rect x="13" y="10" width="8" height="11" fill="none" stroke="currentColor" strokeWidth="1.6"/><rect x="3" y="13" width="8" height="8" fill="none" stroke="currentColor" strokeWidth="1.6"/></>,
    };
    return paths[name] || null;
  };

  const cur = MGMT_PROCESS[active];

  return (
    <section ref={ref} style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.mgmt.processEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22, whiteSpace: "pre-line" }}>{t.mgmt.processTitle}</h2>
              <p className="body-lg" style={{ maxWidth: 640 }}>{t.mgmt.processLead}</p>
            </Reveal>
          </div>
        </div>

        <div className="mgmt-process-grid">
          {/* Circle SVG */}
          <div style={{ position: "relative", aspectRatio: "1/1", maxWidth: 480, width: "100%", margin: "0 auto" }}>
            <svg viewBox="0 0 480 480" style={{ width: "100%", height: "100%", display: "block" }}>
              {/* Outer subtle ring */}
              <circle cx={cx} cy={cy} r={radius + 6} fill="none" stroke="var(--line)" strokeWidth="1"/>
              {/* Animated progress arc */}
              <circle cx={cx} cy={cy} r={radius} fill="none" stroke="var(--accent)" strokeWidth="2"
                strokeDasharray={`${(2 * Math.PI * radius) / N} ${2 * Math.PI * radius}`}
                strokeDashoffset={-(active / N) * 2 * Math.PI * radius + (Math.PI * radius / 2)}
                style={{ transform: "rotate(-90deg)", transformOrigin: `${cx}px ${cy}px`, transition: "stroke-dashoffset .9s cubic-bezier(.65,.05,.36,1)" }}
                strokeLinecap="round"/>
              {/* Inner circle (center metric) */}
              <circle cx={cx} cy={cy} r="98" fill="var(--bg)" stroke="var(--line)" strokeWidth="1"/>
              {/* Center text */}
              <text x={cx} y={cy - 18} fill="var(--muted)" fontSize="11" textAnchor="middle" letterSpacing="2" style={{ textTransform: "uppercase" }}>
                {lang === "de" ? "Phase" : "Phase"} {String(active + 1).padStart(2, "0")} / {String(N).padStart(2, "0")}
              </text>
              <text x={cx} y={cy + 18} fill="var(--accent)" fontSize="34" textAnchor="middle" fontFamily="var(--font-display)">+31%</text>
              <text x={cx} y={cy + 44} fill="var(--ink)" fontSize="11" textAnchor="middle" letterSpacing="1.5" style={{ textTransform: "uppercase" }}>
                {lang === "de" ? "Mehr Umsatz" : "More revenue"}
              </text>

              {/* Step nodes */}
              {positions.map((p, i) => {
                const isActive = i === active;
                return (
                  <g key={i} style={{ cursor: "pointer" }}
                    onMouseEnter={() => { auto.current = false; setActive(i); }}
                    onClick={() => { auto.current = false; setActive(i); }}>
                    {/* Hit area */}
                    <circle cx={p.x} cy={p.y} r="38" fill="transparent"/>
                    {/* Visible node */}
                    <circle cx={p.x} cy={p.y} r={isActive ? 32 : 26}
                      fill={isActive ? "var(--accent)" : "var(--bg)"}
                      stroke={isActive ? "var(--accent)" : "var(--line)"}
                      strokeWidth={isActive ? 0 : 1.5}
                      style={{ transition: "r .35s, fill .35s, stroke .35s, filter .35s", filter: isActive ? "drop-shadow(0 6px 18px oklch(0 0 0 / 0.18))" : "none" }}/>
                    {/* Icon */}
                    <g transform={`translate(${p.x - 12} ${p.y - 12})`} style={{ color: isActive ? "var(--accent-ink)" : "var(--ink)", transition: "color .35s" }}>
                      <svg viewBox="0 0 24 24" width="24" height="24" overflow="visible">{iconPath(MGMT_PROCESS[i].icon)}</svg>
                    </g>
                    {/* Step number */}
                    <circle cx={p.x + 22} cy={p.y - 22} r="10" fill={isActive ? "var(--ink)" : "var(--surface)"} stroke={isActive ? "var(--ink)" : "var(--line)"} strokeWidth="0.8"/>
                    <text x={p.x + 22} y={p.y - 19} fill={isActive ? "var(--bg)" : "var(--ink)"} fontSize="10" textAnchor="middle" fontWeight="600" style={{ transition: "fill .35s" }}>{i + 1}</text>
                  </g>
                );
              })}
            </svg>
          </div>

          {/* Detail card */}
          <div className="mgmt-process-detail">
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
              <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 600 }}>
                {lang === "de" ? "Schritt" : "Step"} {String(active + 1).padStart(2, "0")} · {cur.duration[lang]}
              </div>
            </div>
            <h3 className="h-lg" style={{ marginBottom: 18, fontFamily: "var(--font-display)" }}>{cur.title[lang]}</h3>
            <p className="body-lg" style={{ marginBottom: 32 }}>{cur.body[lang]}</p>
            <div style={{ display: "flex", gap: 6, marginBottom: 24 }}>
              {MGMT_PROCESS.map((_, i) => (
                <button key={i}
                  onClick={() => { auto.current = false; setActive(i); }}
                  aria-label={`Step ${i+1}`}
                  style={{
                    flex: 1, height: 4, borderRadius: 2, border: "none", padding: 0,
                    background: i === active ? "var(--accent)" : "var(--line)",
                    cursor: "pointer", transition: "background .35s",
                  }}/>
              ))}
            </div>
            <div style={{ fontSize: 13, color: "var(--muted)" }}>
              {lang === "de" ? "Klick auf die Phasen oder warte — der Kreis rotiert automatisch." : "Click the phases or wait — the circle auto-rotates."}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// SERVICE TIERS — 3 cards (Basic / Plus / Premium) + feature matrix below.
function MgmtTiersSection({ t, lang }) {
  const [activeTier, setActiveTier] = useState("plus"); // default selection = most popular

  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.mgmt.servicesEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 14 }}>{t.mgmt.servicesTitle}</h2>
              <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 24, color: "var(--accent)", marginBottom: 20 }}>{t.mgmt.servicesSub}</p>
              <p className="body-lg" style={{ maxWidth: 720 }}>{t.mgmt.servicesLead}</p>
            </Reveal>
          </div>
        </div>

        {/* Tier cards */}
        <div className="mgmt-tier-grid">
          {MGMT_TIERS.map((tier, i) => {
            const isActive = activeTier === tier.key;
            return (
              <Reveal key={tier.key} delay={i * 80} style={{ display: "flex", height: "100%" }}>
                <div
                  onClick={() => setActiveTier(tier.key)}
                  className={"mgmt-tier-card" + (isActive ? " active" : "") + (tier.popular ? " popular" : "")}
                  style={{
                    position: "relative",
                    padding: "44px 36px 36px",
                    background: isActive ? "var(--ink)" : "var(--surface)",
                    color: isActive ? "oklch(0.95 0.005 110)" : "var(--ink)",
                    border: "1px solid " + (isActive ? "var(--ink)" : "var(--line)"),
                    borderRadius: 4,
                    cursor: "pointer",
                    transition: "all .4s cubic-bezier(.65,.05,.36,1)",
                    transform: isActive ? "translateY(-6px)" : "none",
                    boxShadow: isActive ? "0 18px 40px oklch(0 0 0 / 0.18)" : "none",
                    width: "100%",
                    display: "flex", flexDirection: "column",
                  }}>
                  {/* Removed "Beliebtestes Paket" badge — replaced by new section
                      headline "Für jeden das richtige Paket" which conveys the same
                      thought without singling out one tier. */}
                  <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: isActive ? "var(--accent)" : "var(--muted)", marginBottom: 12, fontWeight: 600 }}>
                    {tier.name[lang]}
                  </div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 72, lineHeight: 1, color: isActive ? "#fff" : "var(--ink)" }}>{tier.fee}</span>
                    <span style={{ fontFamily: "var(--font-display)", fontSize: 36, color: isActive ? "var(--accent)" : "var(--accent)" }}>%</span>
                  </div>
                  <div style={{ fontSize: 13, color: isActive ? "oklch(0.85 0 0)" : "var(--muted)", marginBottom: 24 }}>
                    {lang === "de" ? "vom Netto-Umsatz" : "of net revenue"}
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, color: isActive ? "var(--accent)" : "var(--accent)", marginBottom: 16 }}>
                    {tier.tagline[lang]}
                  </div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, marginBottom: 18, color: isActive ? "oklch(0.92 0 0)" : "var(--ink)" }}>
                    {tier.description[lang]}
                  </p>
                  {/* Highlights — key features visible directly on the card */}
                  <ul style={{ listStyle: "none", padding: 0, margin: "0 0 20px", display: "grid", gap: 9 }}>
                    {tier.highlights[lang].map((h, hi) => (
                      <li key={hi} style={{ display: "flex", gap: 10, fontSize: 13.5, lineHeight: 1.4, color: isActive ? "oklch(0.92 0 0)" : "var(--ink)" }}>
                        <svg viewBox="0 0 24 24" width="16" height="16" style={{ color: "var(--accent)", flexShrink: 0, marginTop: 3 }}>
                          <polyline points="4,12 10,18 20,6" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        <span>{h}</span>
                      </li>
                    ))}
                  </ul>
                  <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px solid " + (isActive ? "oklch(1 0 0 / 0.15)" : "var(--line)") }}>
                    <div style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: isActive ? "var(--accent)" : "var(--muted)", marginBottom: 6 }}>
                      {lang === "de" ? "Ideal für" : "Best for"}
                    </div>
                    <div style={{ fontSize: 13, color: isActive ? "oklch(0.92 0 0)" : "var(--ink)", lineHeight: 1.5 }}>
                      {tier.bestFor[lang]}
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>

        {/* Feature matrix */}
        <div style={{ marginTop: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            {lang === "de" ? "Vergleich aller Leistungen" : "Compare all features"}
          </div>
          <div className="mgmt-matrix-scroll">
          <div className="mgmt-matrix">
            <div className="mgmt-matrix-head">
              <div className="mgmt-matrix-cell mgmt-matrix-feature-head">
                {lang === "de" ? "Leistung" : "Feature"}
              </div>
              {MGMT_TIERS.map(tier => (
                <div key={tier.key} className={"mgmt-matrix-cell mgmt-matrix-tier-head" + (activeTier === tier.key ? " active" : "")}>
                  <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 4, fontWeight: 600 }}>{tier.name[lang]}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--accent)" }}>{tier.fee}%</div>
                </div>
              ))}
            </div>
            {Object.keys(MGMT_FEATURE_CATS).map(catKey => (
              <div key={catKey}>
                <div className="mgmt-matrix-section-head">
                  {MGMT_FEATURE_CATS[catKey][lang]}
                </div>
                {MGMT_FEATURES.filter(f => f.cat === catKey).map((f, i) => (
                  <div key={i} className="mgmt-matrix-row">
                    <div className="mgmt-matrix-cell mgmt-matrix-feature">{f.title[lang]}</div>
                    {MGMT_TIERS.map(tier => (
                      <div key={tier.key} className={"mgmt-matrix-cell mgmt-matrix-check" + (activeTier === tier.key ? " active" : "")}>
                        {f.included.includes(tier.key) ? (
                          <svg viewBox="0 0 24 24" width="18" height="18" style={{ color: "var(--accent)" }}>
                            <polyline points="4,12 10,18 20,6" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        ) : (
                          <span style={{ color: "var(--line)", fontSize: 18 }}>—</span>
                        )}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            ))}
          </div>
          </div>
          <p style={{ marginTop: 16, fontSize: 13, color: "var(--muted)", lineHeight: 1.6, maxWidth: 820 }}>
            {MGMT_MATRIX_NOTE[lang]}
          </p>
        </div>
      </div>
    </section>
  );
}

// LIVE CALCULATOR — slider-based revenue projection. Tier × nightly rate × occupancy → owner yield.
function MgmtLiveCalculator({ t, lang }) {
  const [tierKey, setTierKey] = useState("plus");
  const [nightly, setNightly] = useState(120);
  const [occupancy, setOccupancy] = useState(70);

  const tier = MGMT_TIERS.find(t => t.key === tierKey);
  const daysPerMonth = 30;
  const platformFeePct = 12;

  const grossRevenue = nightly * occupancy / 100 * daysPerMonth;
  const platformFee = grossRevenue * platformFeePct / 100;
  const netRevenue = grossRevenue - platformFee;
  const mgmtFee = netRevenue * tier.fee / 100;
  const ownerYield = netRevenue - mgmtFee;
  const longTermComparison = 800; // typical long-term monthly rent for a 1-bedroom — flat assumption

  const fmt = (n) => Math.round(n).toLocaleString(lang === "de" ? "de-DE" : "en-US") + " €";

  return (
    <section style={{ background: "var(--ink)", color: "oklch(0.95 0.005 110)" }}>
      <div className="container">
        <div style={{ marginBottom: 48 }}>
          <div className="eyebrow" style={{ color: "var(--accent)" }}>{t.mgmt.feeEyebrow}</div>
          <h2 className="h-xl" style={{ color: "#fff", marginTop: 18, marginBottom: 18 }}>{t.mgmt.feeTitle}</h2>
          <p className="body-lg" style={{ color: "oklch(0.85 0 0)", maxWidth: 620 }}>{t.mgmt.feeLead}</p>
        </div>

        <div className="mgmt-calc-grid">
          {/* Controls */}
          <div className="mgmt-calc-controls">
            {/* Tier selector */}
            <div style={{ marginBottom: 36 }}>
              <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 14, fontWeight: 600 }}>
                {lang === "de" ? "Dein Paket" : "Your tier"}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
                {MGMT_TIERS.map(t => (
                  <button key={t.key}
                    onClick={() => setTierKey(t.key)}
                    style={{
                      padding: "14px 8px", textAlign: "center",
                      background: tierKey === t.key ? "var(--accent)" : "transparent",
                      color: tierKey === t.key ? "var(--accent-ink)" : "#fff",
                      border: "1px solid " + (tierKey === t.key ? "var(--accent)" : "oklch(1 0 0 / 0.15)"),
                      cursor: "pointer", transition: "all .3s", borderRadius: 2,
                    }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1 }}>{t.fee}%</div>
                    <div style={{ fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", marginTop: 4, opacity: tierKey === t.key ? 1 : 0.7 }}>{t.name[lang]}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* Nightly rate slider */}
            <div style={{ marginBottom: 36 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 600 }}>
                  {lang === "de" ? "Ø Nachtpreis" : "Avg nightly rate"}
                </span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff" }}>{nightly} €</span>
              </div>
              <input type="range" min="50" max="500" step="5" value={nightly} onChange={e => setNightly(Number(e.target.value))} className="mgmt-slider" />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "oklch(0.6 0 0)", marginTop: 6 }}>
                <span>50 €</span><span>500 €</span>
              </div>
            </div>

            {/* Occupancy slider */}
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 600 }}>
                  {lang === "de" ? "Auslastung" : "Occupancy"}
                </span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff" }}>{occupancy}%</span>
              </div>
              <input type="range" min="30" max="95" step="1" value={occupancy} onChange={e => setOccupancy(Number(e.target.value))} className="mgmt-slider" />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "oklch(0.6 0 0)", marginTop: 6 }}>
                <span>30%</span><span>95%</span>
              </div>
            </div>
          </div>

          {/* Output */}
          <div className="mgmt-calc-output">
            <div style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 24, fontWeight: 600 }}>
              {lang === "de" ? "Dein Ergebnis · pro Monat" : "Your result · per month"}
            </div>

            <CalcRow label={lang === "de" ? "Bruttoumsatz (30 Tage)" : "Gross revenue (30 days)"} value={fmt(grossRevenue)} />
            <CalcRow label={lang === "de" ? `Portal-Gebühren (~${platformFeePct}%)` : `Portal fees (~${platformFeePct}%)`} value={"−" + fmt(platformFee)} muted />
            <CalcRow label={lang === "de" ? "Netto-Umsatz" : "Net revenue"} value={fmt(netRevenue)} subtle />
            <CalcRow label={lang === "de" ? `LUXOMES (${tier.fee}%)` : `LUXOMES (${tier.fee}%)`} value={"−" + fmt(mgmtFee)} muted />

            <div style={{ marginTop: 22, padding: "26px 28px", background: "var(--accent)", color: "var(--accent-ink)", borderRadius: 4 }}>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 8, fontWeight: 600 }}>
                {lang === "de" ? "Dein Reingewinn" : "Your net yield"}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1 }}>
                <AnimatedNumber value={Math.round(ownerYield)} suffix=" €" />
              </div>
              <div style={{ fontSize: 13, marginTop: 10, opacity: 0.8 }}>
                {lang === "de" ? `Langzeitvermietung: ~${fmt(longTermComparison)}/Monat` : `Long-term let: ~${fmt(longTermComparison)}/month`} · <strong>+{Math.round(((ownerYield - longTermComparison) / longTermComparison) * 100)}%</strong>
              </div>
            </div>

            <div style={{ marginTop: 20, fontSize: 12, color: "oklch(0.65 0 0)", lineHeight: 1.6 }}>
              {lang === "de" ? "* Berechnung auf Basis 30 Tage/Monat, ~12 % durchschnittlicher Portal-Provision und Standard-Paket (23 %). Mit Basic (18 %) liegt der Nettowert ca. 5 % höher, mit Premium (28 %) ca. 5 % niedriger. Tatsächliche Werte abhängig von Standort, Saisonalität und Buchungs-Mix." : "* Based on 30 days/month, ~12% average portal commission and the Standard package (23%). Basic (18%) yields ~5% more net, Premium (28%) ~5% less. Actual values vary by location, seasonality and booking mix."}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CalcRow({ label, value, muted, subtle }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline",
      padding: "14px 0",
      borderBottom: subtle ? "1px solid oklch(1 0 0 / 0.1)" : "none",
    }}>
      <span style={{ fontSize: 14, color: muted ? "oklch(0.65 0 0)" : "oklch(0.92 0 0)" }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)", fontSize: subtle ? 24 : 18, color: subtle ? "#fff" : "oklch(0.85 0 0)", fontWeight: subtle ? 500 : 400 }}>
        {value}
      </span>
    </div>
  );
}

// Animated counter — smoothly tweens to the target value.
function AnimatedNumber({ value, suffix = "" }) {
  const [display, setDisplay] = useState(value);
  const fromRef = useRef(value);
  const startRef = useRef(Date.now());

  useEffect(() => {
    fromRef.current = display;
    startRef.current = Date.now();
    const duration = 500;
    let raf = null;
    const tick = () => {
      const elapsed = Date.now() - startRef.current;
      const t = Math.min(1, elapsed / duration);
      const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
      const cur = Math.round(fromRef.current + (value - fromRef.current) * eased);
      setDisplay(cur);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line
  }, [value]);

  return <>{display.toLocaleString("de-DE")}{suffix}</>;
}

// LEAD-GEN — Instant heuristic estimator + Formspree contact form.
// The estimate uses hardcoded city benchmarks (MGMT_CITY_BENCHMARKS) — no external API,
// no fake AI claims. Honest copy: "based on city benchmarks, full report in 24h".
function MgmtLeadAnalysis({ t, lang }) {
  const [formData, setFormData] = useState({ address: "", size: "", status: "", email: "", phone: "" });
  const [state, setState] = useState("idle"); // idle | submitting | success | error
  const [estimate, setEstimate] = useState(null);

  // Pure heuristic: city benchmark × sqm scale → monthly range.
  // Standard tier (23%) assumed — middle of our 3 packages (Basic 18 / Standard 23 / Premium 28).
  // Platform fees ~12%. No AirDNA, no AI — just transparent math.
  const computeEstimate = () => {
    const sizeRaw = parseInt(String(formData.size).replace(/[^\d]/g, ""), 10);
    if (!formData.address || !sizeRaw || sizeRaw < 15) return null;
    const bench = mgmtFindBenchmark(formData.address);
    const sizeFactor = Math.min(Math.max(sizeRaw / bench.m2Reference, 0.65), 2.2); // clamp to reasonable bounds
    const grossLow  = bench.nightlyLow  * (bench.occupancyLow  / 100) * 30 * sizeFactor;
    const grossHigh = bench.nightlyHigh * (bench.occupancyHigh / 100) * 30 * sizeFactor;
    const platformFee = 0.12; const mgmtFee = 0.23; // Standard tier as basis
    const netLow  = grossLow  * (1 - platformFee) * (1 - mgmtFee);
    const netHigh = grossHigh * (1 - platformFee) * (1 - mgmtFee);
    return {
      city: bench.label,
      sqm: sizeRaw,
      low: Math.round(netLow / 50) * 50,    // round to nearest 50€
      high: Math.round(netHigh / 50) * 50,
    };
  };

  // Recompute estimate when address or size changes.
  useEffect(() => {
    const e = computeEstimate();
    setEstimate(e);
    // eslint-disable-next-line
  }, [formData.address, formData.size]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.address || !formData.email) return;
    setState("submitting");
    // Use the shared submitContact helper — it has the placeholder guard
    // (skips POST when Formspree endpoint is still "YOUR_FORM_ID") and honeypot logic.
    const result = await window.submitContact(e.target, {
      _subject: `[LUXOMES] Kostenlose Objekt-Analyse: ${formData.address}`,
      topic: lang === "de" ? "Kostenlose Potenzial-Analyse" : "Free potential analysis",
      source: "management-lead-analysis",
      instant_estimate: estimate ? `${estimate.low}–${estimate.high} €/Monat (${estimate.city}, ${estimate.sqm}m²)` : "n/a",
    });
    if (result.ok) {
      setState("success");
      setFormData({ address: "", size: "", status: "", email: "", phone: "" });
      setEstimate(null);
    } else {
      setState("error");
    }
  };

  const fmt = (n) => Math.round(n).toLocaleString(lang === "de" ? "de-DE" : "en-US") + " €";

  return (
    <section id="mgmt-lead" style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="mgmt-lead-grid">
          <div>
            <div className="eyebrow">{t.mgmt.leadEyebrow}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>{t.mgmt.leadTitle}</h2>
            <p className="body-lg" style={{ marginBottom: 32, maxWidth: 520 }}>{t.mgmt.leadLead}</p>

            {/* Live estimate appears here as soon as city + size are entered */}
            {estimate ? (
              <div className="mgmt-estimate-box">
                <div className="mgmt-estimate-eyebrow">{t.mgmt.leadEstimateLabel}</div>
                <div className="mgmt-estimate-value">
                  <AnimatedNumber value={estimate.low} suffix="" /> – <AnimatedNumber value={estimate.high} suffix=" €" />
                </div>
                <div className="mgmt-estimate-meta">
                  <span>{t.mgmt.leadEstimateBasis}: {estimate.city} · {estimate.sqm} m² · Premium-Tier 25%</span>
                </div>
                <div className="mgmt-estimate-hint">{t.mgmt.leadEstimateHint}</div>
              </div>
            ) : (
              <div style={{ display: "grid", gap: 20 }}>
                <LeadBenefit num="60s" label={lang === "de" ? "Sofort-Schätzung" : "Instant estimate"} body={lang === "de" ? "Gib Stadt + m² ein — Du siehst sofort eine Range basierend auf unseren Stadt-Benchmarks." : "Enter city + sqm — see an instant range based on our city benchmarks."}/>
                <LeadBenefit num="24h" label={lang === "de" ? "Detail-Bericht persönlich" : "Detail report, personal"} body={lang === "de" ? "Adress-spezifische Analyse mit Saisonalität und Wettbewerb vom Team." : "Address-specific analysis with seasonality and competition, from the team."}/>
                <LeadBenefit num="0 €" label={lang === "de" ? "Kostenlos & unverbindlich" : "Free & non-binding"} body={lang === "de" ? "Auch wenn Du nichts buchst: Du behältst den Bericht." : "Even if you don't book anything: the report stays yours."}/>
              </div>
            )}
          </div>

          <form onSubmit={handleSubmit} style={{ padding: 40, background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 4 }}>
            {state === "success" ? (
              <div style={{ textAlign: "center", padding: "60px 20px" }}>
                <div style={{
                  width: 72, height: 72, margin: "0 auto 24px",
                  borderRadius: "50%", background: "var(--accent)",
                  display: "grid", placeItems: "center",
                }}>
                  <svg viewBox="0 0 24 24" width="32" height="32" style={{ color: "var(--accent-ink)" }}>
                    <polyline points="4,12 10,18 20,6" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h3 className="h-md" style={{ marginBottom: 12 }}>{lang === "de" ? "Anfrage erhalten!" : "Request received!"}</h3>
                <p className="body-md">{t.mgmt.leadFormSuccess}</p>
              </div>
            ) : (
              <>
                <div style={{ marginBottom: 22 }}>
                  <label className="form-label">{t.mgmt.leadFormAddress} *</label>
                  <input type="text" required value={formData.address} onChange={e => setFormData({...formData, address: e.target.value})} className="form-input" placeholder={lang === "de" ? "z.B. Nürnberg oder Hauptstr. 12, Ingolstadt" : "e.g. Nuremberg or Main St 12, Ingolstadt"}/>
                </div>
                <div style={{ marginBottom: 22 }}>
                  <label className="form-label">{t.mgmt.leadFormSize}</label>
                  <input type="text" value={formData.size} onChange={e => setFormData({...formData, size: e.target.value})} className="form-input" placeholder={lang === "de" ? "z.B. 65" : "e.g. 65"} inputMode="numeric"/>
                </div>
                <div style={{ marginBottom: 22 }}>
                  <label className="form-label">{t.mgmt.leadFormStatus}</label>
                  <select value={formData.status} onChange={e => setFormData({...formData, status: e.target.value})} className="form-input">
                    <option value="">{lang === "de" ? "Bitte wählen…" : "Please select…"}</option>
                    {t.mgmt.leadFormStatusOpts.map((opt, i) => (
                      <option key={i} value={opt}>{opt}</option>
                    ))}
                  </select>
                </div>
                <div style={{ marginBottom: 22 }}>
                  <label className="form-label">{t.mgmt.leadFormEmail} *</label>
                  <input type="email" required value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} className="form-input"/>
                </div>
                <div style={{ marginBottom: 28 }}>
                  <label className="form-label">{t.mgmt.leadFormPhone}</label>
                  <input type="tel" value={formData.phone} onChange={e => setFormData({...formData, phone: e.target.value})} className="form-input"/>
                </div>
                <button type="submit" disabled={state === "submitting"} className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                  {state === "submitting" ? (lang === "de" ? "Sende…" : "Sending…") : t.mgmt.leadFormSubmit} <Icon name="arrow" size={16}/>
                </button>
                {state === "error" && (
                  <div style={{ marginTop: 16, padding: 14, background: "oklch(0.92 0.08 30)", color: "oklch(0.4 0.15 30)", fontSize: 13, borderRadius: 2 }}>
                    {lang === "de" ? "Etwas ist schiefgelaufen. Bitte erneut versuchen oder direkt an info@luxomes.com schreiben." : "Something went wrong. Please retry or email info@luxomes.com directly."}
                  </div>
                )}
                <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 16, lineHeight: 1.5 }}>{t.mgmt.leadFormPromise}</p>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function LeadBenefit({ num, label, body }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 20, alignItems: "baseline" }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 38, color: "var(--accent)", lineHeight: 1 }}>{num}</div>
      <div>
        <div style={{ fontWeight: 600, marginBottom: 4, fontSize: 15 }}>{label}</div>
        <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.55 }}>{body}</div>
      </div>
    </div>
  );
}

function MgmtModulesSection({ t, lang }) {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <Reveal>
              <div className="eyebrow">{t.mgmt.modulesEyebrow}</div>
              <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>{t.mgmt.modulesTitle}</h2>
              <p className="body-lg">{t.mgmt.modulesLead}</p>
            </Reveal>
          </div>
        </div>
        <div className="grid mgmt-modules-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {MGMT_MODULES.map((m, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{
                padding: 36, border: "1px solid var(--line)", borderRadius: 4, minHeight: 220,
                display: "flex", flexDirection: "column", background: m.free ? "var(--ink)" : "var(--surface)",
                color: m.free ? "oklch(0.95 0.005 110)" : "var(--ink)",
                position: "relative",
              }}>
                {m.free && (
                  <div style={{ position: "absolute", top: 16, right: 16, background: "var(--accent)", color: "var(--accent-ink)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", padding: "5px 10px", fontWeight: 700, borderRadius: 2 }}>
                    {lang === "de" ? "Kostenlos" : "Free"}
                  </div>
                )}
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16, gap: 20 }}>
                  <h3 className="h-md" style={{ maxWidth: "70%", color: m.free ? "#fff" : "var(--ink)" }}>{m.title[lang]}</h3>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--accent)", whiteSpace: "nowrap" }}>{m.price[lang]}</div>
                </div>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, marginBottom: m.free ? 20 : "auto", color: m.free ? "oklch(0.88 0 0)" : "var(--ink)" }}>{m.body[lang]}</p>
                {m.free && (
                  <a href="#mgmt-lead"
                    onClick={(e) => { e.preventDefault(); document.getElementById("mgmt-lead")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}
                    className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: "auto" }}>
                    {lang === "de" ? "Jetzt anfragen" : "Request now"} <Icon name="arrow" size={16}/>
                  </a>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MgmtFinalCTA({ t, lang, setPage }) {
  return (
    <section style={{ padding: 0 }}>
      <div className="container">
        <div style={{ position: "relative", padding: "120px 64px", overflow: "hidden", borderRadius: 4 }}>
          <div className="ph" style={{ position: "absolute", inset: 0, backgroundImage: `url(${IMG.interior5})`, backgroundSize: "cover", backgroundPosition: "center" }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.3))" }}/>
          <div style={{ position: "relative", color: "#fff", maxWidth: 720 }}>
            <h2 className="h-xl" style={{ color: "#fff", marginBottom: 24, whiteSpace: "pre-line" }}>{t.mgmt.finalTitle}</h2>
            <p className="body-lg" style={{ color: "oklch(0.92 0 0)", marginBottom: 36 }}>{t.mgmt.finalText}</p>
            <button onClick={() => { setPage("contact"); window.scrollTo(0,0); }} className="btn btn-primary">{t.mgmt.finalCta} <Icon name="arrow" size={16}/></button>
          </div>
        </div>
      </div>
    </section>
  );
}

function ManagementPage({ t, lang, tweaks, setPage }) {
  return (
    <>
      <MgmtHero t={t} lang={lang}/>
      <MgmtWhySection t={t} lang={lang}/>
      <MgmtProcessCircle t={t} lang={lang}/>
      <MgmtTiersSection t={t} lang={lang}/>
      <MgmtLiveCalculator t={t} lang={lang}/>
      <MgmtLeadAnalysis t={t} lang={lang}/>
      <CaseStudySection slug="aparthotel-takeover" lang={lang} setPage={setPage}/>
      <MgmtModulesSection t={t} lang={lang}/>
      <MgmtFAQSection lang={lang}/>
      <MgmtFinalCTA t={t} lang={lang} setPage={setPage}/>
    </>
  );
}

// ────────────────────────────────────────────────────────────────────
// Management FAQ — the 6 most-asked owner questions.
// Lean on purpose: skimmable, search-snippet-friendly, AI-quotable.
// ────────────────────────────────────────────────────────────────────
const MGMT_FAQ = [
  {
    q: { de: "Was kostet die Apartment-Verwaltung?", en: "What does apartment management cost?" },
    a: {
      de: "Drei Provisions-Pakete: <strong>Basic 18 %</strong> (Channel-Management + Pricing, Du machst Reinigung/Wartung selbst), <strong>Standard 23 %</strong> (zusätzlich 24/7 Gäste-Support + Reinigungs-Koordination) und <strong>Premium 28 %</strong> (Komplett-Service inkl. eigener Webseite, Smart-Home-Setup und SEO). Alternativ Master-Lease mit garantierter Festmiete (effektiv ca. 25–35 % vom prognostizierten Umsatz, dafür ohne jedes Auslastungsrisiko für Dich). Reinigung wird pro Wechsel separat berechnet (typisch 60–120 € je nach Größe). Onboarding und Setup sind 0 €.",
      en: "Three commission tiers: <strong>Basic 18%</strong> (channel management + pricing only, you handle cleaning/maintenance), <strong>Standard 23%</strong> (adds 24/7 guest support + cleaning coordination), <strong>Premium 28%</strong> (full service including your own website, smart-home setup and SEO). Alternatively master-lease with guaranteed fixed rent (effectively ~25–35% of forecast revenue, but zero occupancy risk for you). Cleaning billed per turnover (typically 60–120 €). Onboarding and setup are 0 €.",
    },
  },
  {
    q: { de: "Was ist im Preis enthalten — und was nicht?", en: "What's included — and what's not?" },
    a: {
      de: "Enthalten: Channel-Management auf 8+ Plattformen (Booking.com, Airbnb, Expedia, B2B-Portale), dynamische Preisgestaltung, 24/7 Gäste-Kommunikation in mehreren Sprachen, Reinigungs-Koordination, monatliches Reporting, Bewertungsmanagement, Schaden-Abwicklung. Nicht enthalten: Reinigung selbst (pro Wechsel), Verbrauchsmaterialien (WC-Papier etc.), größere Instandhaltung, Sonderwerbe-Kampagnen.",
      en: "Included: channel management across 8+ platforms (Booking.com, Airbnb, Expedia, B2B portals), dynamic pricing, 24/7 multi-language guest comms, cleaning coordination, monthly reporting, review management, damage handling. Not included: cleaning itself (per turn), consumables, larger maintenance, special ad campaigns.",
    },
  },
  {
    q: { de: "Wie schnell könnt ihr starten?", en: "How fast can you start?" },
    a: {
      de: "Onboarding dauert typisch 7–14 Tage: Erstgespräch, professionelle Fotos, Listings-Erstellung auf allen relevanten Plattformen, Channel-Manager-Anbindung, Smart-Lock-Konfiguration. Erste Buchungen kommen meist innerhalb von 2–3 Wochen nach dem ersten Gespräch. Bestehende Buchungen vom Vorbetreiber übernehmen wir nahtlos.",
      en: "Onboarding takes typically 7–14 days: kickoff call, professional photos, listing creation across all relevant platforms, channel-manager connection, smart-lock setup. First bookings usually within 2–3 weeks. We seamlessly take over existing bookings from your previous operator.",
    },
  },
  {
    q: { de: "Was passiert bei Schäden oder Reklamationen?", en: "What happens with damages or complaints?" },
    a: {
      de: "Wir sind Erstkontakt für jeden Gast, dokumentieren Schäden lückenlos mit Fotos und Zeitstempel, klären mit der Haftpflicht- bzw. Hausratversicherung. Kleinere Reparaturen unter 200 € beauftragen wir direkt. Größere Maßnahmen besprechen wir vor Beauftragung mit Dir. Du bekommst monatlich einen Schaden-Report.",
      en: "We are the first point of contact for every guest, document damages with photos and timestamps, settle with liability/contents insurance. Small repairs under 200 € we handle directly. Larger work we discuss with you first. You get a monthly damage report.",
    },
  },
  {
    q: { de: "Provision-Modell oder Master-Lease — was lohnt sich für mich?", en: "Commission or master-lease — which suits me?" },
    a: {
      de: "Provision-Modell: Du behältst die Vermietungs-Kontrolle und profitierst von Peak-Saisons direkt. Ideal bei 1–3 Apartments mit lokaler Marktnähe. Master-Lease: Wir mieten komplett, Du bekommst eine garantierte Monatsmiete auf 10 + 10 Jahre — kein Risiko, vollständig planbar. Ideal ab 4 Apartments, bei Pensionen, Aparthotels oder wenn Du operativ komplett abgeben willst. Wir empfehlen ehrlich was zu Deiner Situation passt.",
      en: "Commission model: you keep rental control and benefit from peak seasons directly. Ideal for 1–3 apartments with local market proximity. Master-lease: we lease in full, you receive guaranteed monthly rent on 10 + 10 years — zero risk, fully predictable. Ideal from 4 apartments upwards, for guesthouses, aparthotels, or if you want to step out of operations entirely.",
    },
  },
  {
    q: { de: "Mindestlaufzeit? Kann ich aussteigen?", en: "Minimum term? Can I exit?" },
    a: {
      de: "Provision-Modell: 12 Monate Mindestlaufzeit, danach 3 Monate ordentliche Kündigung zum Quartalsende. Master-Lease: 10 Jahre Festlaufzeit plus einseitige Verlängerungsoption für LUXOMES um weitere 10 Jahre — als gewerblicher Mietvertrag. Bei wichtigen Gründen (Verkauf der Immobilie, Eigenbedarf) finden wir gemeinsam eine faire Lösung. Wir sind beide an einer Partnerschaft auf Augenhöhe interessiert.",
      en: "Commission model: 12-month minimum term, then 3-month notice at quarter-end. Master-lease: 10-year fixed term plus one-sided 10-year extension option — as commercial lease. For legitimate reasons (property sale, own use) we always find a fair solution.",
    },
  },
];

function MgmtFAQSection({ lang }) {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, background: "var(--surface)" }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div className="section-head" style={{ marginBottom: 40 }}>
          <div className="section-head-text">
            <div className="eyebrow">{lang === "de" ? "Häufig gefragt" : "Frequently asked"}</div>
            <h2 className="h-xl" style={{ marginTop: 18 }}>
              {lang === "de" ? "Antworten auf die wichtigsten Fragen" : "Answers to the questions that matter"}
            </h2>
          </div>
        </div>
        <Accordion items={MGMT_FAQ} lang={lang}/>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Property-Management landing pages (/verwaltung/<slug>)
// Three kinds of pages, all rendered through ManagementCityPage:
//   - kind: "city"    → /verwaltung/<stadt>   "Apartment-Verwaltung <Stadt>"
//   - kind: "region"  → /verwaltung/<region>  "Apartment-Verwaltung <Region>"
//                       lists the small towns it covers, fanging long-tail
//   - kind: "intent"  → /verwaltung/<intent>  catches owner-intent searches
//                       like "Pension verpachten" or "Master-Lease Anbieter"
// All re-use the canonical ManagementPage components below the hero — only
// the hero copy changes, keeping each page unique yet content-rich.
// Focus: GERMANY ONLY (operationally we cannot promise AT/CH yet).
// ────────────────────────────────────────────────────────────────────
const MGMT_CITIES = {
  // ───── GROSSSTÄDTE — Volumen, harter Wettbewerb ───────────────────
  "berlin":      { kind: "city", name: "Berlin", region: "Berlin", country: "Deutschland",
    intro: { de: "Berlin ist Deutschlands größter Serviced-Apartment-Markt — Touristen und Geschäftsreisende erwarten Hotel-Service in Wohnungs-Komfort. LUXOMES übernimmt die komplette Verwaltung Deines Apartments in Berlin: Mitte, Prenzlauer Berg, Kreuzberg, Charlottenburg oder Friedrichshain.", en: "Berlin is Germany's largest serviced apartment market. LUXOMES takes over the full management of your Berlin apartment: Mitte, Prenzlauer Berg, Kreuzberg, Charlottenburg or Friedrichshain." },
    keywords: "Apartment-Verwaltung Berlin, Property Management Berlin, Aparthotel Berlin" },
  "hamburg":     { kind: "city", name: "Hamburg", region: "Hamburg", country: "Deutschland",
    intro: { de: "Hamburg ist nach München der zweitstärkste Markt für Serviced Apartments in Deutschland. HafenCity, Sternschanze, St. Pauli und Eppendorf — stark gefragt von Reedern, Konzern-Mitarbeitern und Wochenend-Touristen.", en: "Hamburg is Germany's second-strongest serviced apartment market after Munich. HafenCity, Sternschanze, St. Pauli, Eppendorf." },
    keywords: "Apartment-Verwaltung Hamburg, Property Management Hamburg" },
  "koeln":       { kind: "city", name: "Köln", region: "Nordrhein-Westfalen", country: "Deutschland",
    intro: { de: "Köln zieht Messe-Reisende, Rheinland-Pendler und Karneval-Touristen an. LUXOMES verwaltet Apartments in Innenstadt, Belgisches Viertel, Ehrenfeld und Deutz mit konstant hoher Auslastung.", en: "Cologne attracts trade-fair travel, Rhineland commuters and carnival tourism." },
    keywords: "Apartment-Verwaltung Köln, Property Management Köln" },
  "frankfurt":   { kind: "city", name: "Frankfurt am Main", region: "Hessen", country: "Deutschland",
    intro: { de: "Frankfurt ist DEUTSCHLAND-weit der Top-Markt für Geschäftsreise-Apartments: Banken, Beratungen, Industrie. Top-ADRs in Sachsenhausen, Westend und Innenstadt.", en: "Frankfurt is Germany's top market for business-travel apartments." },
    keywords: "Apartment-Verwaltung Frankfurt, Property Management Frankfurt" },
  "stuttgart":   { kind: "city", name: "Stuttgart", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Stuttgart kombiniert Automotive-Hauptstadt (Porsche, Mercedes-Benz) mit starker regionaler Industrie. LUXOMES verwaltet Apartments in Stuttgart-Mitte, Bad Cannstatt, Vaihingen und Feuerbach.", en: "Stuttgart combines automotive capital with strong regional industry." },
    keywords: "Apartment-Verwaltung Stuttgart, Property Management Stuttgart" },
  "duesseldorf": { kind: "city", name: "Düsseldorf", region: "Nordrhein-Westfalen", country: "Deutschland",
    intro: { de: "Düsseldorf — Mode, Messe, Japan-Geschäft. Eine der höchsten ADRs Deutschlands. LUXOMES verwaltet Apartments in Altstadt, Pempelfort, Oberkassel und Friedrichstadt.", en: "Düsseldorf — fashion, trade fairs, Japanese business." },
    keywords: "Apartment-Verwaltung Düsseldorf, Property Management Düsseldorf" },
  "leipzig":     { kind: "city", name: "Leipzig", region: "Sachsen", country: "Deutschland",
    intro: { de: "Leipzig wächst dynamisch — Buchmesse, BMW-Werk, junge Tech-Szene, niedrige Kaufpreise bei starker Mietnachfrage. LUXOMES verwaltet Apartments in Mitte, Plagwitz, Connewitz und Südvorstadt.", en: "Leipzig is growing dynamically — Book Fair, BMW plant, young tech scene." },
    keywords: "Apartment-Verwaltung Leipzig, Property Management Leipzig" },

  // ───── MITTELSTÄDTE BAYERN — Heimspiel, niedrige Konkurrenz ───────
  "regensburg":  { kind: "city", name: "Regensburg", region: "Oberpfalz", country: "Deutschland",
    intro: { de: "Regensburg ist UNESCO-Welterbe, Continental-Standort, BMW-Pendler-Stadt und Universitäts-Standort. Stark wachsender Markt für Aufenthalte ab 7 Nächten. LUXOMES verwaltet Apartments in der Altstadt, Innenstadt und Stadtamhof.", en: "Regensburg — UNESCO World Heritage, Continental tech, BMW commuters, university city." },
    keywords: "Apartment-Verwaltung Regensburg, Property Management Regensburg, Aparthotel Regensburg" },
  "wuerzburg":   { kind: "city", name: "Würzburg", region: "Unterfranken", country: "Deutschland",
    intro: { de: "Würzburg — Universitätsstadt, Weinregion, Industrie- und Logistik-Drehscheibe. Hohe Nachfrage von Mediziner-Kongressen und Forschungs-Reisen. LUXOMES verwaltet Apartments in Altstadt, Sanderau und Frauenland.", en: "Würzburg — university city, wine region, industrial and logistics hub." },
    keywords: "Apartment-Verwaltung Würzburg, Property Management Würzburg, Aparthotel Würzburg" },
  "augsburg":    { kind: "city", name: "Augsburg", region: "Schwaben", country: "Deutschland",
    intro: { de: "Augsburg — drittgrößte Stadt Bayerns, Industrie-Standort (Premium Aerotec, MAN), wachsender Tech-Sektor. Geringer Wettbewerb bei stark wachsender Apartment-Nachfrage.", en: "Augsburg — Bavaria's third-largest city, strong industry base." },
    keywords: "Apartment-Verwaltung Augsburg, Property Management Augsburg" },
  "erlangen":    { kind: "city", name: "Erlangen", region: "Mittelfranken", country: "Deutschland",
    intro: { de: "Erlangen ist die Siemens- und Medizintechnik-Hauptstadt Deutschlands. Konstanter Strom von Corporate-Gästen mit 1-4 Wochen Aufenthalt. Idealer Markt für Serviced Apartments.", en: "Erlangen is Germany's Siemens and med-tech capital." },
    keywords: "Apartment-Verwaltung Erlangen, Property Management Erlangen" },
  "bamberg":     { kind: "city", name: "Bamberg", region: "Oberfranken", country: "Deutschland",
    intro: { de: "Bamberg — UNESCO-Welterbe, Tourismus-Magnet, ARM-Standort. Konstante Nachfrage durch Touristen + Geschäftsreisende. Wenig Konkurrenz im Apartment-Verwaltungs-Segment.", en: "Bamberg — UNESCO World Heritage, tourism magnet, ARM chip site." },
    keywords: "Apartment-Verwaltung Bamberg, Property Management Bamberg" },
  "passau":      { kind: "city", name: "Passau", region: "Niederbayern", country: "Deutschland",
    intro: { de: "Passau — Drei-Flüsse-Stadt, Universitäts-Standort, Donau-Kreuzfahrt-Hub. Stabile Tourismus-Nachfrage plus Universitäts-Bedarf. LUXOMES verwaltet Apartments in Altstadt, Innstadt und Hacklberg.", en: "Passau — three-rivers city, university hub, Danube cruise port." },
    keywords: "Apartment-Verwaltung Passau, Property Management Passau, Aparthotel Passau" },
  "landshut":    { kind: "city", name: "Landshut", region: "Niederbayern", country: "Deutschland",
    intro: { de: "Landshut — BMW-Werk-Stadt, Mittelstands-Industrie, Pendler-Knotenpunkt. Hoher Bedarf an Apartments für Werks-Berater und Projekt-Mitarbeiter mit 1-3 Wochen Aufenthalt.", en: "Landshut — BMW plant city, mid-sized industry, commuter hub." },
    keywords: "Apartment-Verwaltung Landshut, Property Management Landshut" },
  "rosenheim":   { kind: "city", name: "Rosenheim", region: "Oberbayern", country: "Deutschland",
    intro: { de: "Rosenheim — Tor zu den Alpen, Tourismus-Stadt, Industrie-Standort. Ganzjähriger Mix aus Geschäfts- und Wellness-Touristen.", en: "Rosenheim — gateway to the Alps, tourism city, industry hub." },
    keywords: "Apartment-Verwaltung Rosenheim, Property Management Rosenheim" },
  "bayreuth":    { kind: "city", name: "Bayreuth", region: "Oberfranken", country: "Deutschland",
    intro: { de: "Bayreuth — Festspielstadt, Universitätsstadt, Industrie. Saison-Peak im Sommer, ganzjährige Geschäfts-Nachfrage.", en: "Bayreuth — festival city, university, industry." },
    keywords: "Apartment-Verwaltung Bayreuth, Property Management Bayreuth" },
  "aschaffenburg": { kind: "city", name: "Aschaffenburg", region: "Unterfranken", country: "Deutschland",
    intro: { de: "Aschaffenburg — Industrie-Stadt zwischen Frankfurt und Würzburg. Stark wachsender Markt für Corporate-Apartments wegen Rhein-Main-Anbindung.", en: "Aschaffenburg — industry city between Frankfurt and Würzburg." },
    keywords: "Apartment-Verwaltung Aschaffenburg, Property Management Aschaffenburg" },

  // ───── MITTELSTÄDTE BADEN-WÜRTTEMBERG ──────────────────────────────
  "ulm":         { kind: "city", name: "Ulm", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Ulm — Universitäts- und Innovations-Stadt, Daimler-Standort, höchster Kirchturm der Welt. Starke Corporate-Nachfrage durch Donauauen-Cluster.", en: "Ulm — university and innovation city, Daimler site." },
    keywords: "Apartment-Verwaltung Ulm, Property Management Ulm" },
  "heidelberg":  { kind: "city", name: "Heidelberg", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Heidelberg — Universitäts-Touristen, Forschung-Hub, Klinikum. Konstante Nachfrage durch Wissenschafts- und Tourismus-Reisende.", en: "Heidelberg — university tourism, research hub, university hospital." },
    keywords: "Apartment-Verwaltung Heidelberg, Property Management Heidelberg" },
  "freiburg":    { kind: "city", name: "Freiburg", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Freiburg — Universitätsstadt, grüne Hauptstadt Deutschlands, Schwarzwald-Tor. Tourismus + Wissenschaft + Solar-Industrie.", en: "Freiburg — university city, Germany's green capital, gateway to the Black Forest." },
    keywords: "Apartment-Verwaltung Freiburg, Property Management Freiburg" },
  "karlsruhe":   { kind: "city", name: "Karlsruhe", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Karlsruhe — KIT-Universität, Bundesverfassungsgericht, IT-Cluster. Konstante Nachfrage aus Forschung, Verwaltung und Tech.", en: "Karlsruhe — KIT university, Federal Constitutional Court, IT cluster." },
    keywords: "Apartment-Verwaltung Karlsruhe, Property Management Karlsruhe" },
  "konstanz":    { kind: "city", name: "Konstanz", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Konstanz — Bodensee-Tourismus, Universität, Grenz-Stadt zur Schweiz. Mix aus Tourismus, Wissenschaft und Schweizer Geschäfts-Reisenden.", en: "Konstanz — Lake Constance tourism, university, border to Switzerland." },
    keywords: "Apartment-Verwaltung Konstanz, Property Management Konstanz" },
  "friedrichshafen": { kind: "city", name: "Friedrichshafen", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Friedrichshafen — ZF-Konzernsitz, Bodensee-Tourismus, Messe-Stadt. Sehr stabile Corporate-Auslastung übers Jahr.", en: "Friedrichshafen — ZF Group HQ, Lake Constance tourism, trade fair city." },
    keywords: "Apartment-Verwaltung Friedrichshafen, Property Management Friedrichshafen" },
  "heilbronn":   { kind: "city", name: "Heilbronn", region: "Baden-Württemberg", country: "Deutschland",
    intro: { de: "Heilbronn — Bildungscampus, Schwarz-Gruppe (Lidl/Kaufland) HQ, Audi-Werk Neckarsulm um die Ecke. Stark wachsender Corporate-Markt.", en: "Heilbronn — Bildungscampus, Schwarz Group HQ, Audi works nearby." },
    keywords: "Apartment-Verwaltung Heilbronn, Property Management Heilbronn" },

  // ───── MITTELSTÄDTE NORD/MITTE DEUTSCHLAND ─────────────────────────
  "mainz":       { kind: "city", name: "Mainz", region: "Rheinland-Pfalz", country: "Deutschland",
    intro: { de: "Mainz — Landeshauptstadt, BioNTech-Sitz, ZDF, Universität. Wachsender Markt durch Biotech-Boom.", en: "Mainz — state capital, BioNTech HQ, ZDF, university." },
    keywords: "Apartment-Verwaltung Mainz, Property Management Mainz" },
  "wiesbaden":   { kind: "city", name: "Wiesbaden", region: "Hessen", country: "Deutschland",
    intro: { de: "Wiesbaden — Landeshauptstadt, Casino-Tourismus, Verwaltung, US-Militär-Hub. Sehr stabile Nachfrage über alle Saisons.", en: "Wiesbaden — state capital, casino tourism, administration, US military hub." },
    keywords: "Apartment-Verwaltung Wiesbaden, Property Management Wiesbaden" },
  "muenster":    { kind: "city", name: "Münster", region: "Nordrhein-Westfalen", country: "Deutschland",
    intro: { de: "Münster — Universitätsstadt, Fahrrad-Hauptstadt Deutschlands, Verwaltungs-Sitz Westfalen. Konstante Nachfrage durch Wissenschaft + Verwaltung.", en: "Münster — university city, Germany's bicycle capital, Westphalia admin hub." },
    keywords: "Apartment-Verwaltung Münster, Property Management Münster" },
  "bonn":        { kind: "city", name: "Bonn", region: "Nordrhein-Westfalen", country: "Deutschland",
    intro: { de: "Bonn — UN-Stadt, Deutsche Telekom, Deutsche Post HQ, Universität. Hohe Corporate-Nachfrage + internationale Diplomaten-Aufenthalte.", en: "Bonn — UN city, Deutsche Telekom, Deutsche Post HQ, university." },
    keywords: "Apartment-Verwaltung Bonn, Property Management Bonn" },
  "erfurt":      { kind: "city", name: "Erfurt", region: "Thüringen", country: "Deutschland",
    intro: { de: "Erfurt — Landeshauptstadt Thüringen, ICE-Knotenpunkt, junger Tourismus-Markt. Wachsende Apartment-Nachfrage bei niedrigem Wettbewerb.", en: "Erfurt — Thuringian state capital, ICE rail hub, growing tourism." },
    keywords: "Apartment-Verwaltung Erfurt, Property Management Erfurt" },
  "luebeck":     { kind: "city", name: "Lübeck", region: "Schleswig-Holstein", country: "Deutschland",
    intro: { de: "Lübeck — Hansestadt, UNESCO-Welterbe, Ostsee-Tourismus. Saison-Peaks im Sommer plus Konferenz-Geschäft ganzjährig.", en: "Lübeck — Hanseatic city, UNESCO World Heritage, Baltic Sea tourism." },
    keywords: "Apartment-Verwaltung Lübeck, Property Management Lübeck" },

  // ───── REGIONAL-PAGES — fängt Kleinstädte über regionalen Suchbegriff ein
  "niederbayern": { kind: "region", name: "Niederbayern", region: "Bayern", country: "Deutschland",
    coversCities: ["Vilshofen an der Donau", "Passau", "Deggendorf", "Landshut", "Straubing", "Plattling", "Pfarrkirchen", "Eggenfelden", "Dingolfing"],
    intro: { de: "Niederbayern ist eines der spannendsten Verwaltungs-Märkte Deutschlands — viele Pensionen und Aparthotels mit traditionellem Inhaber-Modell, niedrige Konkurrenz bei stark wachsender Nachfrage durch BMW Dingolfing, Donau-Kreuzfahrten und Bayerischer Wald.", en: "Lower Bavaria is one of Germany's most exciting management markets — many family-run guesthouses and aparthotels, low competition, strong demand from BMW Dingolfing, Danube cruises and the Bavarian Forest." },
    keywords: "Apartment-Verwaltung Niederbayern, Pension Verwaltung Niederbayern, Aparthotel Niederbayern, Property Management Niederbayern" },
  "oberpfalz":   { kind: "region", name: "Oberpfalz", region: "Bayern", country: "Deutschland",
    coversCities: ["Regensburg", "Amberg", "Weiden", "Schwandorf", "Cham", "Neumarkt"],
    intro: { de: "Die Oberpfalz wächst rasant: BMW Regensburg, Continental Amberg, Bayerischer Wald-Tourismus. Ein hochinteressanter Markt für Apartment- und Pensionsverwaltung mit fast keinem Wettbewerb in Mittelstädten.", en: "Upper Palatinate is growing fast: BMW Regensburg, Continental Amberg, Bavarian Forest tourism. Highly attractive market with almost no competition in mid-sized cities." },
    keywords: "Apartment-Verwaltung Oberpfalz, Pension Verwaltung Oberpfalz, Property Management Oberpfalz" },
  "franken":     { kind: "region", name: "Franken", region: "Bayern", country: "Deutschland",
    coversCities: ["Nürnberg", "Würzburg", "Bamberg", "Bayreuth", "Erlangen", "Coburg", "Schweinfurt", "Aschaffenburg", "Hof"],
    intro: { de: "Franken — von Würzburger Weinregion über Nürnberger Industrie bis zum Frankenwald. Eine Region mit vielen kleinen Aparthotels, Pensionen und Stadt-Apartments, die professionelle Verwaltung suchen.", en: "Franconia — from Würzburg's wine country through Nuremberg industry to the Franconian Forest. Many small aparthotels, pensions and city apartments need professional management." },
    keywords: "Apartment-Verwaltung Franken, Pension Verwaltung Franken, Aparthotel Franken" },
  "allgaeu":     { kind: "region", name: "Allgäu", region: "Bayern", country: "Deutschland",
    coversCities: ["Kempten", "Füssen", "Oberstdorf", "Memmingen", "Sonthofen", "Lindau", "Immenstadt"],
    intro: { de: "Das Allgäu ist DAS Tourismus-Cluster Bayerns: Schloss Neuschwanstein, Wintersport, Wandern, Bodensee-Anschluss. Viele Familien-Pensionen suchen Nachfolger oder professionelle Verwaltung.", en: "The Allgäu is Bavaria's tourism powerhouse: Neuschwanstein Castle, winter sports, hiking, Lake Constance access." },
    keywords: "Apartment-Verwaltung Allgäu, Pension Verwaltung Allgäu, Aparthotel Allgäu, Ferienwohnung Verwaltung Allgäu" },
  "bodensee":    { kind: "region", name: "Bodensee-Region", region: "Baden-Württemberg/Bayern", country: "Deutschland",
    coversCities: ["Konstanz", "Friedrichshafen", "Lindau", "Überlingen", "Meersburg", "Radolfzell"],
    intro: { de: "Die Bodensee-Region ist ein Premium-Tourismus-Markt mit ganzjähriger Auslastung. Pensionen mit Seeblick und Stadt-Apartments in Konstanz/Friedrichshafen — ideal für professionelle Verwaltung mit Multi-Kanal-Vermietung.", en: "The Lake Constance region is a premium tourism market with year-round occupancy." },
    keywords: "Apartment-Verwaltung Bodensee, Pension Verwaltung Bodensee, Ferienwohnung Verwaltung Bodensee" },
  "ruhrgebiet":  { kind: "region", name: "Ruhrgebiet", region: "Nordrhein-Westfalen", country: "Deutschland",
    coversCities: ["Dortmund", "Essen", "Duisburg", "Bochum", "Gelsenkirchen", "Oberhausen", "Mülheim", "Hagen"],
    intro: { de: "Das Ruhrgebiet ist mit 5,1 Mio Einwohnern Deutschlands größter Ballungsraum — Industrie-Geschäftsreisen, Messen, Kultur (Ruhrtriennale). Massiver, unter-bedienter Apartment-Markt.", en: "The Ruhr area is Germany's largest metropolitan region with 5.1 million inhabitants — industrial business travel, trade fairs, culture." },
    keywords: "Apartment-Verwaltung Ruhrgebiet, Property Management Ruhrgebiet, Pension Verwaltung Ruhrgebiet" },

  // ───── INTENT-PAGES — fängt was Eigentümer wirklich suchen ─────────
  "pension-verpachten": { kind: "intent", name: "Pension verpachten", region: "Deutschland", country: "Deutschland",
    intro: { de: "Du hast eine Pension oder ein Aparthotel und möchtest es verpachten — vielleicht weil die Nachfolge fehlt, der Aufwand zu groß geworden ist, oder Du in den Ruhestand willst? LUXOMES ist Master-Tenant für Pensionen in ganz Deutschland: garantierte Festmiete, 10 + 10 Jahre Laufzeit, kein Vermietungsrisiko mehr für Dich. Wir übernehmen das volle operative Geschäft — Du bekommst die Miete monatlich überwiesen.", en: "If you want to lease out your pension or aparthotel, LUXOMES acts as Master Tenant across Germany: guaranteed fixed rent, 10 + 10 years, no rental risk." },
    keywords: "Pension verpachten, Pension verpachten Bayern, Aparthotel verpachten, Hotel Pächter gesucht, Pension Pächter, Gasthof verpachten" },
  "aparthotel-uebernahme": { kind: "intent", name: "Aparthotel-Übernahme", region: "Deutschland", country: "Deutschland",
    intro: { de: "Du suchst einen erfahrenen Betreiber für die Übernahme Deines Aparthotels oder Apartmenthauses? LUXOMES übernimmt komplette Aparthotel-Betriebe in ganz Deutschland: Wir investieren in Refresh wo nötig, modernisieren Buchungssysteme, bauen Marketing aus und garantieren Dir eine Festmiete. Wir haben bereits mehrere Pensionen und Apartmenthäuser erfolgreich übernommen.", en: "Looking for an experienced operator to take over your aparthotel or apartment building? LUXOMES takes over full aparthotel operations across Germany." },
    keywords: "Aparthotel Übernahme, Aparthotel Betreiber gesucht, Apartmenthaus Übernahme, Hotelübernahme, Pension Übernahme, Aparthotel verkaufen" },
  "master-lease-anbieter": { kind: "intent", name: "Master-Lease-Anbieter Deutschland", region: "Deutschland", country: "Deutschland",
    intro: { de: "Du suchst einen verlässlichen Master-Tenant / Generalmieter für Dein Apartmenthaus, Aparthotel oder Pension in Deutschland? LUXOMES ist erfahrener Master-Lease-Anbieter: 10 + 10 Jahre Festlaufzeit, garantierte Festmiete, kein Leerstand für Dich, voll operative Übernahme. Wir mieten ab 5 Apartments aufwärts in der gesamten DACH-Region.", en: "Looking for a reliable master tenant for your apartment building or aparthotel in Germany? LUXOMES leases on 10 + 10 year terms with guaranteed fixed rent." },
    keywords: "Master Lease Anbieter, Generalmieter Apartmenthaus, Master Tenant Deutschland, gewerblicher Mieter Pension, langfristmieter Hotel, garantierte Miete Vermieter" },
  "pension-nachfolge": { kind: "intent", name: "Pension-Nachfolge", region: "Deutschland", country: "Deutschland",
    intro: { de: "Du betreibst eine Pension oder einen Gasthof, möchtest aber in absehbarer Zeit kürzertreten und findest keinen Nachfolger? LUXOMES bietet Dir die operativen Übernahme ohne, dass Du verkaufen musst: Wir übernehmen den Betrieb auf Master-Lease-Basis, Du behältst das Eigentum und bekommst monatlich eine garantierte Miete. Über 30 Jahre Hospitality-Erfahrung im Team.", en: "Running a pension or guesthouse but unable to find a successor? LUXOMES offers operational takeover on master-lease basis — you retain ownership and receive guaranteed monthly rent." },
    keywords: "Pension Nachfolger gesucht, Pension Nachfolge, was tun wenn pension nicht mehr läuft, Pension aufgeben, Gasthof Nachfolger, Hotel Nachfolge Bayern" },
};

function MgmtCityHero({ city, lang }) {
  const cityName = city.name;
  const kind = city.kind || "city";

  // Per-kind copy: each kind has its own eyebrow, headline pattern, and
  // closing paragraph so the page reads naturally for what the visitor
  // searched for. Regions also list their covered towns so Google sees
  // the small-town keywords on a single, content-rich page.
  const eyebrow = lang === "de"
    ? (kind === "region" ? `Apartment- & Pensionsverwaltung in ${cityName}` :
       kind === "intent" ? cityName :
       `Apartment-Verwaltung in ${cityName}`)
    : (kind === "region" ? `Apartment & pension management in ${cityName}` :
       kind === "intent" ? cityName :
       `Apartment management in ${cityName}`);

  const headline = lang === "de"
    ? (kind === "region" ? <>Wir verwalten Apartments<br/>und Pensionen in {cityName}.</> :
       kind === "intent" && city.name === "Pension verpachten" ? <>Deine Pension —<br/>wir übernehmen.</> :
       kind === "intent" && city.name === "Aparthotel-Übernahme" ? <>Aparthotel-Übernahme<br/>durch erfahrenen Betreiber.</> :
       kind === "intent" && city.name === "Master-Lease-Anbieter Deutschland" ? <>Master-Lease-Anbieter<br/>für ganz Deutschland.</> :
       kind === "intent" && city.name === "Pension-Nachfolge" ? <>Keine Nachfolge?<br/>Wir übernehmen.</> :
       <>Wir verwalten Dein Serviced Apartment<br/>in {cityName}.</>)
    : (kind === "region" ? <>We manage apartments<br/>and pensions in {cityName}.</> :
       kind === "intent" ? <>{cityName}.</> :
       <>We manage your serviced apartment<br/>in {cityName}.</>);

  const tagline = lang === "de"
    ? (kind === "intent"
        ? "Garantierte Festmiete, 10 + 10 Jahre Laufzeit, voll operative Übernahme — bundesweit."
        : "Channel-Management, dynamische Preise, 24/7 Gäste-Support — alles aus einer Hand.")
    : (kind === "intent"
        ? "Guaranteed fixed rent, 10 + 10 year term, full operational takeover — across Germany."
        : "Channel management, dynamic pricing, 24/7 guest support — all from one source.");

  const closingPara = lang === "de"
    ? (kind === "region"
        ? `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.`
       : kind === "intent"
        ? `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.`
        : `Egal ob Du bereits ein Apartment in ${cityName} besitzt oder gerade investierst — wir übernehmen Vermietung, Reinigung, Gäste-Kommunikation und Reporting. Optional als Master-Lease mit garantierter Festmiete auf 10 + 10 Jahre.`)
    : (kind === "region"
        ? `We actively operate apartments in Bavaria and manage owner properties across the region. Whether city apartment, aparthotel or holiday pension — we handle everything.`
       : kind === "intent"
        ? `We are an experienced hospitality operator running our own aparthotels in Munich, Nuremberg, Ingolstadt and Vilshofen. Free, no-obligation initial assessment.`
        : `Whether you already own an apartment in ${cityName} 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.`);

  return (
    <section style={{ paddingTop: 72, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ maxWidth: 880 }}>
          <div className="eyebrow">{eyebrow}</div>
          <h1 className="h-display" style={{ marginTop: 28, marginBottom: 28, fontSize: "clamp(36px, 5.4vw, 72px)" }}>
            {headline}
          </h1>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2vw, 28px)", fontStyle: "italic", color: "var(--accent)", marginBottom: 24 }}>
            {tagline}
          </p>
          <p className="body-lg" style={{ maxWidth: 720, marginBottom: 32 }}>
            {city.intro[lang]}
          </p>
          {kind === "region" && city.coversCities && (
            <div style={{ maxWidth: 720, marginBottom: 32, padding: "20px 24px", border: "1px solid var(--line)", borderRadius: 8, background: "var(--surface)" }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{lang === "de" ? `Städte und Orte in ${cityName}, in denen wir verwalten` : `Cities we manage in ${cityName}`}</div>
              <p className="body-md" style={{ margin: 0, lineHeight: 1.7 }}>{city.coversCities.join(" · ")}</p>
            </div>
          )}
          <p className="body-md" style={{ maxWidth: 720, marginBottom: 32, color: "var(--ink-soft)" }}>
            {closingPara}
              : `Whether you already own an apartment in ${cityName} 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.`}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#mgmt-lead" className="btn btn-primary" onClick={(e) => { e.preventDefault(); document.getElementById("mgmt-lead")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}>
              {lang === "de" ? "Kostenlose Analyse" : "Free analysis"} <Icon name="arrow" size={16}/>
            </a>
            <button onClick={() => { window.__setPage?.("contact"); window.scrollTo(0,0); }} className="btn btn-ghost">
              {lang === "de" ? "Direkt kontaktieren" : "Contact us"}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function ManagementCityPage({ t, lang, citySlug, setPage }) {
  const city = MGMT_CITIES[citySlug] || MGMT_CITIES.berlin;
  // SEO (title, description, canonical, OG) is handled centrally in
  // seo.jsx via applyPageSEO("mgmt-city-<slug>", lang) — no duplicate
  // useEffect needed here.

  return (
    <>
      <MgmtCityHero city={city} lang={lang}/>
      <MgmtWhySection t={t} lang={lang}/>
      <MgmtProcessCircle t={t} lang={lang}/>
      <MgmtTiersSection t={t} lang={lang}/>
      <MgmtLiveCalculator t={t} lang={lang}/>
      <MgmtLeadAnalysis t={t} lang={lang}/>
      <MgmtModulesSection t={t} lang={lang}/>
      <MgmtFAQSection lang={lang}/>
      <MgmtFinalCTA t={t} lang={lang} setPage={setPage}/>
    </>
  );
}

Object.assign(window, { ManagementPage, ManagementCityPage, MGMT_CITIES, MGMT_FAQ });
