// LUXOMES — Real Estate page (for investors)

const RE_INVEST_POINTS = [
  { num: "01", title: { de: "Garantierte Festmiete", en: "Guaranteed fixed rent" }, body: { de: "Eine vertraglich zugesicherte Monatsmiete — pünktlich zum Ersten, unabhängig von Belegung oder Saison. Dein Cashflow wird planbar wie eine Anleihe.", en: "A contractually guaranteed monthly rent — paid on the first, regardless of occupancy or season. Your cashflow becomes as predictable as a bond." } },
  { num: "02", title: { de: "Langfristiger Vertrag (10 + 10 Jahre)", en: "Long-term lease (10 + 10 years)" }, body: { de: "10 Jahre Festlaufzeit plus 10 Jahre Verlängerungsoption — bis zu zwei Jahrzehnte Planungssicherheit mit einem einzigen Mieter. Kein Mieterwechsel, keine Kündigungswelle, kein neuer Vermarktungsaufwand alle paar Jahre.", en: "10-year fixed term plus a 10-year extension option — up to two decades of certainty with a single tenant. No tenant turnover, no churn waves, no re-marketing every few years." } },
  { num: "03", title: { de: "Null Leerstandsrisiko", en: "Zero vacancy risk" }, body: { de: "Leerstand, Saisonalität, Konjunkturdellen — das alles trägt LUXOMES als Mieter, nicht Du. Du erhältst die volle Miete auch dann, wenn nicht jede Nacht gebucht ist.", en: "Vacancy, seasonality, downturns — all carried by LUXOMES as your tenant, not by you. You receive full rent even when not every night is booked." } },
  { num: "04", title: { de: "Professionelle Objektpflege", en: "Professional asset care" }, body: { de: "Wir behandeln Dein Objekt wie unser eigenes — wöchentliche Qualitätskontrollen, sofortige Schadensbearbeitung, jährliche Renovierungsbudgets. Übergeben wird in besserem Zustand als übernommen.", en: "We treat your property like our own — weekly QC, immediate damage handling, annual refurb budgets. You'll get it back in better shape than handed over." } },
  { num: "05", title: { de: "LUXOMES investiert in Setup", en: "LUXOMES funds the setup" }, body: { de: "Möblierung, Smart-Lock, WLAN, Innenausbau — die einmaligen Setup-Investitionen trägt in der Regel LUXOMES. Du musst nicht renovieren, um attraktive Mieten zu erzielen.", en: "Furniture, smart-lock, WiFi, fit-out — one-off setup investments are typically funded by LUXOMES. No renovation needed on your end to unlock strong rents." } },
  { num: "06", title: { de: "Bonität & Dokumentation", en: "Credit & documentation" }, body: { de: "LUXOMES GmbH mit dokumentierter Performance seit 2020, Bilanzen auf Anfrage, Mietkaution oder Bürgschaft nach Vereinbarung. Klare, belastbare Geschäftsbeziehung.", en: "LUXOMES GmbH with documented performance since 2020, financials on request, deposit or guarantee on agreed terms. A clear, robust business relationship." } },
];

const RE_METRICS = [
  { value: "10 + 10", label: { de: "Jahre Mietvertrag (mit Option)", en: "Years lease (with option)" } },
  { value: "100%", label: { de: "Mietgarantie", en: "Rent guaranteed" } },
  { value: "0€", label: { de: "Verwaltungsaufwand für Dich", en: "Owner workload" } },
  { value: "40+", label: { de: "Apartments unter Vertrag", en: "Apartments under contract" } },
];

const RE_PROCESS = [
  { n: "01", title: { de: "Erstgespräch", en: "Discovery call" }, body: { de: "Wir lernen Deine Ziele, Risikoprofil und Kapitalrahmen kennen — in einem unverbindlichen 30-Minuten-Gespräch.", en: "We understand your goals, risk profile and capital range — in a no-obligation 30-minute call." } },
  { n: "02", title: { de: "Objekt-Screening", en: "Asset screening" }, body: { de: "Wir präsentieren passende Objekte aus unserer Pipeline oder suchen gezielt am Markt — inklusive Due-Diligence-Unterlagen.", en: "We present suitable assets from our pipeline — or source specifically — including due-diligence packs." } },
  { n: "03", title: { de: "Ankauf & Setup", en: "Acquisition & setup" }, body: { de: "Wir begleiten Ankauf, Konzeption, Möblierung und Marktstart — als Single Point of Contact.", en: "We guide acquisition, concept, fit-out and launch — as your single point of contact." } },
  { n: "04", title: { de: "Betrieb & Reporting", en: "Operations & reporting" }, body: { de: "LUXOMES übernimmt den laufenden Betrieb. Du erhältst monatliches Reporting und volle Einsicht ins Dashboard.", en: "LUXOMES runs the asset. You receive monthly reporting and full dashboard access." } },
];

// Only LUXOMES-operated cities — keep this in sync with src/data.jsx LOCATIONS.
const RE_LOCATIONS = [
  { city: "München", tag: { de: "Core Metropolregion", en: "Core metro" }, body: { de: "Höchste Nachfrage in Deutschland — Business-Travel, Messen, Konzerne. Wir mieten gezielt zentrale Objekte.", en: "Germany's highest demand — business travel, trade fairs, corporates. We lease centrally located assets." }, image: PHOTO.muenchen_bed_desk },
  { city: "Nürnberg", tag: { de: "Wachsende B-Stadt", en: "Growing B-city" }, body: { de: "Starker Mittelstand, Tech-Szene, Messe — stabile Nachfrage, attraktive Konditionen für Master-Leases.", en: "Strong Mittelstand, tech scene, trade fairs — stable demand, attractive master-lease terms." }, image: PHOTO.nuernberg_design_exterior },
  { city: "Ingolstadt", tag: { de: "Corporate Travel Hotspot", en: "Corporate travel hotspot" }, body: { de: "Audi, Airbus und Zulieferer sorgen für konstante Business-Nachfrage — ganzjährig stabil, ideal für Festmieten.", en: "Audi, Airbus and suppliers drive constant business demand — stable year-round, ideal for fixed rents." }, image: PHOTO.ingolstadt_4p_a },
  { city: "Vilshofen an der Donau", tag: { de: "Niederbayern Perle", en: "Lower Bavaria gem" }, body: { de: "Donau-Lage, Tourismus, wachsender Business-Bedarf — wir suchen hier weitere Objekte zum langfristigen Anmieten.", en: "Danube location, tourism, growing business demand — we're looking for more long-term lease properties here." }, image: PHOTO.vilshofen_penthouse_a },
];

const RE_FAQ = [
  { q: { de: "Wie lange läuft der Mietvertrag?", en: "How long is the lease?" }, a: { de: "Standard: 10 Jahre Festlaufzeit plus eine einseitige Verlängerungsoption für LUXOMES um weitere 10 Jahre — als gewerblicher Mietvertrag. Insgesamt also bis zu 20 Jahre Planungssicherheit. Kürzere Laufzeiten sind im Einzelfall möglich.", en: "Standard: 10-year fixed term plus a one-sided 10-year extension option for LUXOMES — as a commercial lease. That's up to 20 years of certainty in total. Shorter terms possible case by case." } },
  { q: { de: "Was passiert, wenn Apartments leer stehen?", en: "What happens during vacancy?" }, a: { de: "Das ist unser Risiko, nicht deins. Du bekommst die vereinbarte Festmiete pünktlich zum Ersten — auch wenn nicht jede Nacht gebucht ist. Genau dafür mieten wir das ganze Objekt.", en: "That's our risk, not yours. You receive the agreed fixed rent on the 1st — regardless of whether every night is booked. That's exactly why we lease the whole property." } },
  { q: { de: "Wer trägt Setup- und Renovierungskosten?", en: "Who pays for setup and renovations?" }, a: { de: "Die einmaligen Setup-Kosten (Möblierung, Smart-Lock, WLAN, Erstausstattung) trägt in der Regel LUXOMES. Größere bauliche Maßnahmen am Objekt bleiben Sache des Eigentümers — wie bei jedem gewerblichen Mietvertrag. Wartung des Inventars trägt LUXOMES während der Laufzeit.", en: "One-off setup costs (furniture, smart-lock, WiFi, initial stock) are typically borne by LUXOMES. Larger structural work on the building stays with the owner — as in any commercial lease. Maintenance of inventory during the term is on LUXOMES." } },
  { q: { de: "Wie ist die Bonität von LUXOMES?", en: "How creditworthy is LUXOMES?" }, a: { de: "LUXOMES GmbH ist seit 2020 aktiv mit dokumentierter Performance, mehreren laufenden Standorten und eigenem Operations-Team. Bilanzen und Geschäftszahlen können wir auf Anfrage vorlegen. Mietkaution oder Bankbürgschaft regeln wir individuell.", en: "LUXOMES GmbH has been operating since 2020 with documented performance, multiple active locations and an in-house operations team. We can share financials on request. Deposit or bank guarantee is structured individually." } },
  { q: { de: "Kann ich vorzeitig kündigen?", en: "Can I terminate early?" }, a: { de: "Während der Festlaufzeit gelten die üblichen Regeln gewerblicher Mietverträge — eine ordentliche Kündigung ist ausgeschlossen. Bei berechtigten Gründen (Eigenbedarf, Verkauf, außerordentliche Umstände) finden wir gemeinsam eine faire Lösung — wir sind beide an einer professionellen Partnerschaft interessiert.", en: "During the fixed term the standard rules for commercial leases apply — ordinary termination is excluded. For legitimate reasons (own use, sale, exceptional circumstances) we find a fair solution together — both sides have an interest in a professional partnership." } },
  { q: { de: "Welche Objekte sucht ihr aktuell?", en: "What properties are you looking for?" }, a: { de: "Vor allem ganze Apartmenthäuser, Mehrfamilienobjekte ab 4 Einheiten, ehemalige Pensionen oder Hotels, ungenutzte Gewerbeflächen mit Umnutzungspotenzial. Bevorzugt zentrale Lagen in Bayern und Baden-Württemberg — Expansion in die gesamte DACH-Region in Planung.", en: "Mostly whole apartment buildings, multi-unit residential from 4+ units, former guesthouses or hotels, vacant commercial space with conversion potential. Preferably central locations in Bavaria and Baden-Württemberg — DACH-wide expansion planned." } },
  { q: { de: "Was ist mit Eigentümern, die das Objekt erst kaufen wollen?", en: "What about owners still looking to buy?" }, a: { de: "Wenn du noch im Ankauf bist und LUXOMES als zukünftigen Mieter ankerst, geben wir dir gerne eine Letter of Intent mit indikativen Konditionen — damit deine Bank-Finanzierung auf einem soliden, planbaren Cashflow basieren kann.", en: "If you're still acquiring and want to anchor LUXOMES as future tenant, we're happy to provide a letter of intent with indicative terms — so your bank financing rests on a solid, predictable cashflow." } },
  { q: { de: "Wir bauen neu — könnt ihr uns in der Bauphase begleiten?", en: "We're building from scratch — can you support the construction phase?" }, a: { de: "Ja, sehr gerne — das ist sogar einer der wirkungsvollsten Wege, mit LUXOMES zusammenzuarbeiten. Wir bringen unsere Betriebs-Expertise schon in die Planungsphase ein: Apartment-Mix, Grundrisse, Smart-Home-Verkabelung, Schallschutz, Materialwahl. Parallel stellen wir eine Letter of Intent für die spätere Anmietung aus, die du bei der Finanzierung vorlegen kannst. Je früher wir an Bord sind, desto besser passt das Objekt später zum tatsächlichen Betrieb.", en: "Yes, gladly — it's actually one of the most impactful ways to work with LUXOMES. We bring our operating expertise into the planning phase: unit mix, floor plans, smart-home wiring, sound insulation, material selection. In parallel we issue a letter of intent for the future lease that you can present to your bank. The earlier we're involved, the better the asset will match real operations later." } },
];

function RealEstateHero({ lang, setPage }) {
  return (
    <section style={{ paddingTop: 72, paddingBottom: 96 }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="eyebrow">{lang === "de" ? "Real Estate · Für Eigentümer & Investoren" : "Real Estate · For owners & investors"}</div>
          <h1 className="h-display" style={{ marginTop: 28, marginBottom: 28, fontSize: "clamp(40px, 5.4vw, 82px)" }}>
            {lang === "de" ? (<>Garantierte Miete.<br/>Null Aufwand.</>) : (<>Guaranteed rent.<br/>Zero effort.</>)}
          </h1>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2vw, 30px)", fontStyle: "italic", color: "var(--accent)", marginBottom: 28 }}>
            {lang === "de" ? "Wir mieten Dein Objekt — Du bekommst monatlich überwiesen." : "We lease your property — you get paid every month."}
          </p>
          <p className="body-lg" style={{ maxWidth: 560, marginBottom: 40 }}>
            {lang === "de"
              ? "LUXOMES schließt langfristige Mietverträge über ganze Apartmenthäuser, Pensionen, Mehrfamilien-Objekte — oder Neubauprojekte, die wir schon in der Bauphase begleiten. Du bekommst eine vertraglich zugesicherte Monatsmiete; wir tragen Leerstand, Gäste-Operations und Pflege. Eine GmbH als Mieter, klare Konditionen, 10 Jahre Festlaufzeit plus 10 Jahre Verlängerungsoption."
              : "LUXOMES signs long-term master-lease contracts on full apartment buildings, guesthouses, multi-unit properties — or new-build projects we accompany from the construction phase onward. You get a contractually guaranteed monthly rent; we carry vacancy, guest operations and upkeep. A GmbH as tenant, clear terms, 10-year fixed term plus a 10-year extension option."}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button onClick={() => { setPage("contact"); window.scrollTo(0,0); }} className="btn btn-primary">
              {lang === "de" ? "Objekt zur Anmietung anbieten" : "Offer property for lease"} <Icon name="arrow" size={16}/>
            </button>
            <button onClick={() => { setPage("contact"); window.scrollTo(0,0); }} className="btn btn-ghost">
              {lang === "de" ? "Erstgespräch buchen" : "Book intro call"} <Icon name="arrow" size={14}/>
            </button>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="ph" style={{ aspectRatio: "4/5", backgroundImage: `url(${IMG.interior4})`, borderRadius: 4 }}>
            <SEOImg src={IMG.interior4} alt={lang === "de" ? "LUXOMES Apartmenthaus — Master-Lease Objektbeispiel" : "LUXOMES apartment building — master-lease example asset"}/>
          </div>
          <div style={{ position: "absolute", top: -24, right: -24, background: "var(--surface)", padding: "20px 24px", boxShadow: "var(--shadow-lift)", border: "1px solid var(--line)" }}>
            <div style={{ fontSize: 12, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{lang === "de" ? "Mietvertrag-Laufzeit" : "Lease term"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 40, color: "var(--ink)", lineHeight: 1 }}>10 + 10</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>{lang === "de" ? "Jahre (mit Option)" : "years (with option)"}</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" ? "Leerstandsrisiko" : "Vacancy risk"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1 }}>0%</div>
            <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>{lang === "de" ? "trägt LUXOMES" : "borne by LUXOMES"}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstateMetrics({ lang }) {
  return (
    // Top padding bumped to 112 to clear the absolute "0% Leerstandsrisiko" badge
    // from RealEstateHero which sits at bottom:-32 of the hero image.
    <section style={{ background: "var(--ink)", color: "oklch(0.95 0.005 110)", padding: "112px 0 80px" }}>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {RE_METRICS.map((m, i) => (
            <div key={i} style={{ padding: "0 32px", borderLeft: i > 0 ? "1px solid oklch(1 0 0 / 0.12)" : "none" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 56, color: "var(--accent)", lineHeight: 1, marginBottom: 14 }}>{m.value}</div>
              <div style={{ fontSize: 13, letterSpacing: "0.12em", textTransform: "uppercase", color: "oklch(0.8 0 0)" }}>{m.label[lang]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RealEstateInvestPoints({ lang }) {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <div className="eyebrow">{lang === "de" ? "Warum LUXOMES als Mieter" : "Why LUXOMES as your tenant"}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>
              {lang === "de" ? "Ein zuverlässiger Mieter — kein Mieterkarussell." : "One reliable tenant — no tenant carousel."}
            </h2>
            <p className="body-lg" style={{ maxWidth: 720 }}>
              {lang === "de"
                ? "Anstatt das Objekt selbst zu vermarkten, mit unterschiedlichen Privatmietern zu jonglieren oder über Plattformen zu vermieten — Du übergibst an einen einzigen, professionellen Mieter."
                : "Instead of marketing the property yourself, juggling private tenants or listing on platforms — you hand it to one single, professional tenant."}
            </p>
          </div>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          {RE_INVEST_POINTS.map((p, i) => (
            <div key={i} style={{ background: "var(--bg)", padding: "56px 48px", minHeight: 260, display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 44, color: "var(--accent)", lineHeight: 1 }}>{p.num}</div>
              <h3 className="h-md">{p.title[lang]}</h3>
              <p className="body-md">{p.body[lang]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RealEstateNewBuild({ lang, setPage }) {
  const bullets = lang === "de" ? [
    { h: "Apartment-Mix & Grundrisse", b: "Welche Einheitenmischung (Studios / 1-Zi / 2-Zi) maximiert die Buchungs-Performance? Wir bringen Echtdaten aus 40+ laufenden Apartments in deine Planung." },
    { h: "Technische Ausstattung", b: "Smart-Lock, WLAN-Verteilung, Netzwerk-Anschlüsse, Schallschutz zwischen Einheiten, energieeffiziente Standards — wir definieren mit, was später wirklich gebraucht wird." },
    { h: "Bankable Letter of Intent", b: "Wir geben dir frühzeitig eine LoI mit indikativen Mietkonditionen, damit deine Bank-Finanzierung auf einem belastbaren, langfristigen Mietcashflow basieren kann." },
    { h: "Vermarktungs- und Betriebskonzept", b: "Schon vor dem Spatenstich entsteht das Operating-Konzept: Zielgruppen, Pricing-Strategie, Brand-Positionierung — damit ab Tag 1 nach Übergabe Buchungen laufen." },
  ] : [
    { h: "Unit mix & floor plans", b: "Which mix of units (studios / 1-BR / 2-BR) maximises booking performance? We bring live data from 40+ operating apartments into your planning." },
    { h: "Technical fit-out", b: "Smart-lock, WiFi distribution, network points, sound insulation between units, energy-efficient standards — we co-define what will actually matter later." },
    { h: "Bankable letter of intent", b: "We issue an early LoI with indicative lease terms, so your bank financing rests on a robust, long-term rental cashflow." },
    { h: "Marketing & operating concept", b: "The operating concept is built before the foundation is poured: target groups, pricing strategy, brand positioning — so bookings start on day 1 of handover." },
  ];

  return (
    <section style={{ background: "var(--bg)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 72, alignItems: "start" }}>
          <div>
            <div className="eyebrow">{lang === "de" ? "Auch für Neubauprojekte" : "Also for new-build projects"}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 24 }}>
              {lang === "de" ? "Schon in der Bauphase\nan Bord." : "On board from\nday one of construction."}
            </h2>
            <p className="body-lg" style={{ marginBottom: 28 }}>
              {lang === "de"
                ? "Wenn Du planst zu bauen oder bereits in der Genehmigungs- oder Bauphase steckst — wir bringen die Betriebsperspektive in deine Planung ein. Aus 5 Jahren Operations wissen wir, was ein Apartment buchungsstark macht. Diese Expertise sparst Du dir später teuer wieder rauszusanieren."
                : "If you're planning to build or already in the permit or construction phase — we bring the operator perspective into your planning. From 5 years of operations we know what makes an apartment perform. That expertise saves you costly retrofits later."}
            </p>
            <div style={{ padding: "22px 26px", background: "var(--surface)", borderLeft: "3px solid var(--accent)", borderRadius: 4 }}>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 600, marginBottom: 10 }}>
                {lang === "de" ? "Der Vorteil für Bauträger & Developer" : "The advantage for developers"}
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
                {lang === "de"
                  ? "Ein vorvertraglich abgesicherter Mietvertrag mit LUXOMES — über 10 + 10 Jahre — bedeutet kalkulierbarer Cashflow vom ersten Bezugstag an. Banken und Investoren lieben solche Sicherheiten."
                  : "A pre-secured lease with LUXOMES — over 10 + 10 years — means predictable cashflow from day one of occupancy. Banks and investors love this kind of security."}
              </p>
            </div>
            <button
              onClick={() => { setPage("contact"); window.scrollTo(0, 0); }}
              className="btn btn-primary"
              style={{ marginTop: 32 }}
            >
              {lang === "de" ? "Neubau-Projekt besprechen" : "Discuss your new build"} <Icon name="arrow" size={16}/>
            </button>
          </div>
          <div style={{ display: "grid", gap: 20 }}>
            {bullets.map((b, i) => (
              <div key={i} style={{ display: "flex", gap: 20, padding: "24px 26px", background: "var(--surface)", borderRadius: 6, border: "1px solid var(--line)" }}>
                <div style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 22, background: "var(--accent)", color: "var(--accent-ink, #fff)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600 }}>
                  {String(i+1).padStart(2,"0")}
                </div>
                <div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.3, marginBottom: 8 }}>{b.h}</h3>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-soft, var(--ink))", margin: 0 }}>{b.b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstateBuildPhases({ lang }) {
  // 6 cumulative phases — same building progressively assembles itself.
  // `progress` is a continuous 0..1 value used to drive the progress bar smoothly.
  const TOTAL = 6;
  const [phase, setPhase] = useState(0);
  const [progress, setProgress] = useState(0); // 0..1 across all 6 phases
  const ref = useRef(null);
  const auto = useRef(true);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let rafId = null;
    let startedAt = null;
    const TICK_MS = 3200;          // time per phase
    const HOLD_RATIO = 0.55;       // first 55% of tick = hold; remaining 45% = animate bar to next phase
    const tick = (t) => {
      if (!auto.current) return;
      if (!startedAt) startedAt = t;
      const elapsed = t - startedAt;
      const cycle = elapsed / TICK_MS;
      const idx = Math.floor(cycle) % TOTAL;
      const frac = cycle - Math.floor(cycle);
      // Progress eases from idx/(TOTAL-1) toward (idx+1)/(TOTAL-1) during the second half of the tick.
      const base = idx / (TOTAL - 1);
      const next = Math.min(1, (idx + 1) / (TOTAL - 1));
      const localFrac = frac < HOLD_RATIO ? 0 : (frac - HOLD_RATIO) / (1 - HOLD_RATIO);
      const eased = localFrac * localFrac * (3 - 2 * localFrac); // smoothstep
      setPhase(idx);
      setProgress(base + (next - base) * eased);
      rafId = requestAnimationFrame(tick);
    };
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting && auto.current) {
          startedAt = null;
          rafId = requestAnimationFrame(tick);
        } else if (rafId) {
          cancelAnimationFrame(rafId);
          rafId = null;
        }
      });
    }, { threshold: 0.35 });
    obs.observe(el);
    return () => { obs.disconnect(); if (rafId) cancelAnimationFrame(rafId); };
  }, []);

  const manualSelect = (i) => {
    auto.current = false;
    setPhase(i);
    setProgress(i / (TOTAL - 1));
  };

  const phases = [
    {
      key: "intro",
      label: { de: "Erstgespräch", en: "Intro call" },
      duration: { de: "30 Minuten", en: "30 minutes" },
      caption: { de: "Wir hören uns Dein Objekt an: Standort, Größe, Zustand, gewünschte Miethöhe und Laufzeit. Unverbindlich, vertraulich — am Ende weißt Du, ob ein Master-Lease grundsätzlich für Dich passt.", en: "We listen: location, size, condition, target rent and term. No commitment, confidential — by the end you know whether a master-lease fits in principle." },
      deliverables: {
        de: ["Vorab-Einschätzung Standort & Marktmiete", "Indikative Mietspanne", "Klärung der Eckpunkte", "Nächste Schritte besprochen"],
        en: ["Pre-assessment of location & market rent", "Indicative rent range", "Key parameters clarified", "Next steps agreed"],
      },
    },
    {
      key: "site",
      label: { de: "Objekt-Begehung", en: "Site visit" },
      duration: { de: "Woche 1–2", en: "Week 1–2" },
      caption: { de: "Wir besichtigen das Objekt vor Ort — Bausubstanz, Raumaufteilung, Technik, Lage im Quartier. Auf dieser Basis ergibt sich, was sinnvoll vermietet werden kann und welche Setup-Investitionen LUXOMES tragen würde.", en: "We visit on site — structure, layout, tech, neighbourhood. From there we know what can sensibly be leased and which setup costs LUXOMES would absorb." },
      deliverables: {
        de: ["Komplette Objekt-Begehung", "Aufnahme der Ist-Substanz", "Setup-Bedarf identifiziert", "Foto-Dokumentation"],
        en: ["Full site walkthrough", "As-is assessment", "Setup needs identified", "Photo documentation"],
      },
    },
    {
      key: "terms",
      label: { de: "Konditionen", en: "Terms" },
      duration: { de: "Woche 2–4", en: "Week 2–4" },
      caption: { de: "Wir erarbeiten ein konkretes Angebot: monatliche Festmiete, Laufzeit, Mietstaffelung, Kautions- bzw. Bürgschaftsregelung, Übergabezeitpunkt. Alles transparent kalkuliert, alles auf dem Tisch.", en: "We work out a concrete offer: monthly fixed rent, term, step-rent, deposit or bond, handover date. All transparently calculated, all on the table." },
      deliverables: {
        de: ["Indikatives Term-Sheet", "Mietspanne mit Begründung", "Verhandelbare Punkte markiert", "Vertragsmuster zur Vorlage"],
        en: ["Indicative term sheet", "Rent range with rationale", "Negotiable items flagged", "Draft contract template"],
      },
    },
    {
      key: "contract",
      label: { de: "Mietvertrag", en: "Lease signing" },
      duration: { de: "Woche 4–6", en: "Week 4–6" },
      caption: { de: "Vertragsunterzeichnung — gewerblicher Mietvertrag mit 10 Jahren Festlaufzeit plus 10-Jahres-Verlängerungsoption. LUXOMES GmbH als Mieter, ggf. Bürgschaft oder Kaution nach Absprache. Klar, belastbar, prüffähig.", en: "Contract signed — commercial lease with a 10-year fixed term plus a 10-year extension option. LUXOMES GmbH as tenant, bond or deposit as agreed. Clear, robust, auditable." },
      deliverables: {
        de: ["Finaler gewerblicher Mietvertrag", "Bürgschaft / Kaution geleistet", "Vertraglich fixierter Mietzins", "Übergabetermin festgelegt"],
        en: ["Final commercial lease", "Bond / deposit posted", "Fixed contractual rent", "Handover date set"],
      },
    },
    {
      key: "handover",
      label: { de: "Übernahme & Setup", en: "Handover & setup" },
      duration: { de: "Wochen 6–10", en: "Weeks 6–10" },
      caption: { de: "Schlüsselübergabe. LUXOMES übernimmt das Objekt und investiert in Möblierung, Smart-Lock, WLAN und alle weiteren Setup-Komponenten — auf eigene Kosten. Du musst nichts vorbereiten und nichts zahlen.", en: "Keys handed over. LUXOMES takes possession and invests in furniture, smart-lock, WiFi and all other setup components — at our own cost. You prepare nothing and pay nothing." },
      deliverables: {
        de: ["Schlüsselübergabe & Übernahmeprotokoll", "Komplettmöblierung durch LUXOMES", "Smart-Lock & WLAN-Installation", "Professionelle Fotostrecke"],
        en: ["Keys handed over & protocol", "Full furnishing by LUXOMES", "Smart-lock & WiFi install", "Professional photo shoot"],
      },
    },
    {
      key: "rent",
      label: { de: "Miete fließt", en: "Rent flowing" },
      duration: { de: "ab Monat 3", en: "from month 3" },
      caption: { de: "Die monatliche Festmiete trifft pünktlich zum Ersten auf Deinem Konto ein — egal wie die Auslastung läuft. LUXOMES kümmert sich um Gäste, Reinigung, Bewertungen, Schäden. Du machst nichts, und du bekommst Geld.", en: "The fixed monthly rent lands on your account on the 1st — regardless of how occupancy runs. LUXOMES handles guests, cleaning, reviews, damages. You do nothing, and you get paid." },
      deliverables: {
        de: ["Monatliche Festmiete pünktlich", "Vierteljährlicher Status-Bericht", "Ein fester Ansprechpartner", "Jährliche Objekt-Inspektion"],
        en: ["Fixed monthly rent on time", "Quarterly status report", "One dedicated contact", "Annual property inspection"],
      },
    },
  ];

  // Composite "growing building" SVG — same property, progressively assembled.
  // Layer-fade values are derived from current `progress` (0..1) — each element appears at its trigger point.
  // appearAt(start, end): returns 0..1 opacity for the current `progress` within [start..end].
  const appearAt = (a, b) => Math.max(0, Math.min(1, (progress - a) / Math.max(0.0001, b - a)));
  const oSurveying  = 1 - appearAt(0.05, 0.20);    // dashed plot outline + survey stake — visible at phase 0
  const oBlueprint  = appearAt(0.15, 0.30) * (1 - appearAt(0.35, 0.50)); // semi-transparent blueprint of building
  const oCrane      = appearAt(0.35, 0.45) * (1 - appearAt(0.75, 0.85)); // crane only during construction
  const oFoundation = appearAt(0.30, 0.42);
  const oWalls1     = appearAt(0.40, 0.55);  // ground floor walls
  const oWalls2     = appearAt(0.50, 0.65);  // first floor walls
  const oWalls3     = appearAt(0.55, 0.70);  // second floor walls
  const oRoof       = appearAt(0.65, 0.78);
  const oScaffold   = appearAt(0.45, 0.60) * (1 - appearAt(0.78, 0.85));
  const oWindowsEmpty = appearAt(0.55, 0.72) * (1 - appearAt(0.78, 0.88));
  const oWindowsLit = appearAt(0.80, 0.95);   // lit windows
  const oTrees      = appearAt(0.80, 0.95);
  const oSign       = appearAt(0.88, 1.00);
  const oDoor       = appearAt(0.72, 0.85);

  const pct = Math.round(progress * 100);
  const active = phases[phase];

  return (
    <section ref={ref} style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <div className="eyebrow">{lang === "de" ? "So werden wir Partner" : "How we become partners"}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 22 }}>
              {lang === "de" ? "Vom Erstgespräch bis zur Festmiete." : "From intro call to fixed rent."}
            </h2>
            <p className="body-lg" style={{ maxWidth: 680 }}>
              {lang === "de"
                ? "Sechs klare Schritte vom ersten Telefonat bis zum Tag, an dem die monatliche Miete pünktlich auf Deinem Konto landet. Transparent, dokumentiert, ohne versteckte Klauseln — ein professioneller Mietvertrag wie er sein sollte."
                : "Six clear steps from the first call to the day the monthly rent reliably hits your account. Transparent, documented, without hidden clauses — a professional lease the way it should be."}
            </p>
          </div>
        </div>

        {/* TOP TIMELINE: 6 phase markers + continuous filled progress bar */}
        <div className="re-build-timeline" style={{ position: "relative", marginBottom: 40 }}>
          {/* Continuous progress track behind markers */}
          <div className="re-build-progress-track" style={{ position: "absolute", top: 18, left: 12, right: 12, height: 2, background: "var(--line)", borderRadius: 1 }}/>
          <div className="re-build-progress-fill" style={{ position: "absolute", top: 18, left: 12, height: 2, background: "var(--accent)", borderRadius: 1, width: `calc((100% - 24px) * ${progress})`, transition: "width .15s linear", boxShadow: "0 0 10px rgba(107, 127, 92, 0.4)" }}/>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${TOTAL}, 1fr)`, gap: 0, position: "relative" }}>
            {phases.map((p, i) => {
              const reached = progress >= i / (TOTAL - 1) - 0.001;
              return (
                <button key={p.key}
                  onClick={() => manualSelect(i)}
                  style={{
                    background: "transparent", border: "none", padding: "0 6px",
                    textAlign: "center", cursor: "pointer", position: "relative",
                  }}
                >
                  {/* Marker dot */}
                  <div style={{
                    width: 14, height: 14, borderRadius: "50%",
                    background: reached ? "var(--accent)" : "var(--bg)",
                    border: "2px solid " + (reached ? "var(--accent)" : "var(--line)"),
                    margin: "12px auto 0",
                    transition: "all .3s ease",
                    boxShadow: phase === i ? "0 0 0 6px rgba(107, 127, 92, 0.18)" : "none",
                  }}/>
                  <div style={{
                    fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
                    color: phase === i ? "var(--accent)" : "var(--muted)",
                    fontWeight: 600, marginTop: 14, marginBottom: 4, transition: "color .3s",
                  }}>
                    {String(i+1).padStart(2,"0")}
                  </div>
                  <div style={{
                    fontFamily: "var(--font-display)", fontSize: 15, lineHeight: 1.25,
                    color: phase === i ? "var(--ink)" : "var(--muted)",
                    opacity: phase === i ? 1 : 0.7,
                    transition: "all .3s",
                  }}>
                    {p.label[lang]}
                  </div>
                  <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>
                    {p.duration[lang]}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* MAIN: composite building + detail card */}
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "stretch" }}>
          {/* Composite SVG that grows phase by phase */}
          <div style={{ position: "relative", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden", minHeight: 380 }}>
            <svg viewBox="0 0 600 380" style={{ width: "100%", height: "100%", display: "block" }}>
              {/* Sky gradient */}
              <defs>
                <linearGradient id="sky-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="oklch(0.97 0.012 220)"/>
                  <stop offset="100%" stopColor="oklch(0.94 0.005 100)"/>
                </linearGradient>
                <linearGradient id="ground-grad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="oklch(0.82 0.02 100)"/>
                  <stop offset="100%" stopColor="oklch(0.76 0.022 90)"/>
                </linearGradient>
              </defs>
              <rect width="600" height="270" fill="url(#sky-grad)"/>
              <circle cx="490" cy="80" r="32" fill="oklch(0.93 0.05 80)" opacity={0.4 + 0.4 * oSign}/>
              {/* Far hills */}
              <path d="M0 220 Q 130 170 270 200 T 600 195 L 600 270 L 0 270 Z" fill="oklch(0.86 0.018 145)" opacity="0.55"/>
              {/* Ground */}
              <rect y="270" width="600" height="110" fill="url(#ground-grad)"/>

              {/* PHASE 1: Empty plot — dashed outline + survey stake (fades out as build progresses) */}
              <g opacity={oSurveying}>
                <rect x="170" y="240" width="260" height="40" fill="oklch(0.86 0.022 100)" stroke="var(--accent)" strokeWidth="2" strokeDasharray="7 5"/>
                <line x1="300" y1="240" x2="300" y2="200" stroke="var(--accent)" strokeWidth="1.8"/>
                <polygon points="300,198 314,206 300,214" fill="var(--accent)"/>
                <text x="300" y="195" fontSize="9" fill="var(--accent)" textAnchor="middle" letterSpacing="1.5" fontWeight="600">GRUNDSTÜCK</text>
              </g>

              {/* PHASE 2: Blueprint overlay — semi-transparent line drawing of future building */}
              <g opacity={oBlueprint} stroke="var(--accent)" strokeWidth="1.2" fill="none" strokeDasharray="3 3">
                <rect x="190" y="100" width="220" height="170"/>
                <line x1="190" y1="145" x2="410" y2="145"/>
                <line x1="190" y1="190" x2="410" y2="190"/>
                <line x1="190" y1="235" x2="410" y2="235"/>
                {[1,2,3].map(c => <line key={c} x1={190 + c*55} y1="100" x2={190 + c*55} y2="270"/>)}
              </g>

              {/* Foundation slab — appears at phase 3 */}
              <rect x="186" y="265" width="228" height="10" fill="oklch(0.62 0.015 100)" opacity={oFoundation}/>

              {/* Ground floor walls */}
              <g opacity={oWalls1}>
                <rect x="190" y="220" width="220" height="50" fill="oklch(0.91 0.008 100)" stroke="oklch(0.5 0.015 100)" strokeWidth="1.2"/>
              </g>
              {/* First floor walls */}
              <g opacity={oWalls2}>
                <rect x="190" y="170" width="220" height="50" fill="oklch(0.92 0.008 100)" stroke="oklch(0.5 0.015 100)" strokeWidth="1.2"/>
              </g>
              {/* Top floor walls */}
              <g opacity={oWalls3}>
                <rect x="190" y="120" width="220" height="50" fill="oklch(0.93 0.008 100)" stroke="oklch(0.5 0.015 100)" strokeWidth="1.2"/>
              </g>
              {/* Roof line */}
              <g opacity={oRoof}>
                <rect x="184" y="114" width="232" height="8" fill="var(--ink)"/>
                <polygon points="184,114 300,90 416,114" fill="oklch(0.4 0.02 60)"/>
              </g>

              {/* Empty window openings (during build) */}
              <g opacity={oWindowsEmpty}>
                {[0,1,2].map(r => [0,1,2,3].map(c => (
                  <rect key={`e-${r}-${c}`} x={208 + c*54} y={134 + r*50} width="32" height="28" fill="oklch(0.7 0.012 100)" stroke="oklch(0.45 0.012 100)" strokeWidth="0.8"/>
                )))}
              </g>

              {/* Lit windows (when building is complete) */}
              <g opacity={oWindowsLit}>
                {[0,1,2].map(r => [0,1,2,3].map(c => (
                  <g key={`l-${r}-${c}`}>
                    <rect x={208 + c*54} y={134 + r*50} width="32" height="28" fill="oklch(0.88 0.09 80)"/>
                    <line x1={208 + c*54 + 16} y1={134 + r*50} x2={208 + c*54 + 16} y2={134 + r*50 + 28} stroke="oklch(0.45 0.015 80)" strokeWidth="0.8"/>
                    <line x1={208 + c*54} y1={134 + r*50 + 14} x2={208 + c*54 + 32} y2={134 + r*50 + 14} stroke="oklch(0.45 0.015 80)" strokeWidth="0.8"/>
                  </g>
                )))}
              </g>

              {/* Door */}
              <g opacity={oDoor}>
                <rect x="285" y="230" width="30" height="40" fill="var(--accent)"/>
                <circle cx="310" cy="252" r="1.6" fill="oklch(0.96 0 0)"/>
              </g>

              {/* Scaffolding (only during walls phase) */}
              <g opacity={oScaffold}>
                <rect x="412" y="120" width="6" height="150" fill="var(--accent)"/>
                {[140, 175, 210, 245].map(y => (
                  <line key={y} x1="412" y1={y} x2="436" y2={y} stroke="var(--accent)" strokeWidth="1.6"/>
                ))}
                <rect x="180" y="120" width="6" height="150" fill="var(--accent)"/>
                {[140, 175, 210, 245].map(y => (
                  <line key={`l${y}`} x1="164" y1={y} x2="186" y2={y} stroke="var(--accent)" strokeWidth="1.6"/>
                ))}
              </g>

              {/* Crane */}
              <g opacity={oCrane}>
                <line x1="100" y1="280" x2="100" y2="55" stroke="oklch(0.35 0.02 60)" strokeWidth="3.5"/>
                <line x1="100" y1="55" x2="290" y2="55" stroke="oklch(0.35 0.02 60)" strokeWidth="3.5"/>
                <line x1="100" y1="55" x2="60" y2="95" stroke="oklch(0.35 0.02 60)" strokeWidth="2"/>
                {[120, 150, 180, 210, 240].map(x => (
                  <line key={x} x1="100" y1="55" x2={x} y2={x % 2 ? 65 : 45} stroke="oklch(0.35 0.02 60)" strokeWidth="1" opacity="0.5"/>
                ))}
                <line x1="250" y1="55" x2="250" y2="130" stroke="oklch(0.35 0.02 60)" strokeWidth="1.3"/>
                <rect x="234" y="130" width="32" height="22" fill="var(--accent)"/>
              </g>

              {/* Trees (when fully built) */}
              <g opacity={oTrees}>
                <circle cx="90" cy="275" r="26" fill="oklch(0.6 0.06 145)"/>
                <rect x="86" y="290" width="7" height="22" fill="oklch(0.38 0.02 60)"/>
                <circle cx="510" cy="280" r="22" fill="oklch(0.6 0.06 145)"/>
                <rect x="506" y="293" width="7" height="20" fill="oklch(0.38 0.02 60)"/>
              </g>

              {/* LUXOMES sign */}
              <g opacity={oSign}>
                <rect x="240" y="92" width="120" height="18" fill="var(--ink)" rx="1"/>
                <text x="300" y="105" fill="oklch(0.96 0 0)" fontSize="11" textAnchor="middle" fontFamily="var(--font-display)" letterSpacing="3" fontWeight="600">LUXOMES</text>
              </g>
            </svg>

            {/* Progress overlay — big numeric percentage in the corner */}
            <div style={{ position: "absolute", top: 18, right: 22, textAlign: "right", fontFamily: "var(--font-display)" }}>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 2 }}>
                {lang === "de" ? "Vertragsstatus" : "Lease progress"}
              </div>
              <div style={{ fontSize: 36, lineHeight: 1, color: "var(--ink)", fontWeight: 500 }}>
                {pct}<span style={{ fontSize: 18, color: "var(--accent)", marginLeft: 2 }}>%</span>
              </div>
            </div>
          </div>

          {/* Right column: active phase detail card */}
          <div key={active.key} style={{
            background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 8,
            padding: "32px 30px", display: "flex", flexDirection: "column",
            animation: "reFade .45s ease",
          }}>
            <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", fontWeight: 600, marginBottom: 10 }}>
              {lang === "de" ? "Phase " : "Phase "}{String(phase+1).padStart(2,"0")} · {active.duration[lang]}
            </div>
            <h3 className="h-md" style={{ marginBottom: 14 }}>{active.label[lang]}</h3>
            <p className="body-md" style={{ marginBottom: 22 }}>{active.caption[lang]}</p>

            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 600, marginBottom: 12 }}>
              {lang === "de" ? "Was Du bekommst" : "What you get"}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
              {active.deliverables[lang].map((d, di) => (
                <li key={di} style={{ display: "flex", gap: 10, fontSize: 14, lineHeight: 1.45 }}>
                  <svg viewBox="0 0 24 24" width="16" height="16" style={{ color: "var(--accent)", flexShrink: 0, marginTop: 2 }}>
                    <polyline points="4,12 10,18 20,6" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{d}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: "auto", paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13, color: "var(--muted)" }}>
              <span>{lang === "de" ? "Ein Ansprechpartner — über die gesamte Strecke." : "One contact — across the entire journey."}</span>
              <span style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontSize: 16 }}>{phase+1}/{TOTAL}</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`@keyframes reFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }`}</style>
    </section>
  );
}

function RealEstateProcess({ lang }) {
  return (
    <section style={{ background: "var(--surface)" }}>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <div className="eyebrow">{lang === "de" ? "Unser Prozess" : "Our process"}</div>
            <h2 className="h-xl" style={{ marginTop: 18 }}>
              {lang === "de" ? "Vom Erstgespräch bis zum laufenden Betrieb." : "From discovery call to ongoing operations."}
            </h2>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="re-process-connector" style={{ position: "absolute", top: 36, left: 0, right: 0, height: 1, background: "var(--line)" }}/>
          <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 32, position: "relative" }}>
            {RE_PROCESS.map((s, i) => (
              <div key={i}>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
                  <div style={{ width: 12, height: 12, borderRadius: "50%", background: "var(--accent)", border: "4px solid var(--surface)", boxShadow: "0 0 0 1px var(--line)" }}/>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 14, letterSpacing: "0.1em", color: "var(--accent)" }}>{s.n}</div>
                </div>
                <h3 className="h-md" style={{ marginBottom: 12 }}>{s.title[lang]}</h3>
                <p className="body-md">{s.body[lang]}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstateLocations({ lang }) {
  const tiers = [
    { key: "metro", label: { de: "Metropolregion", en: "Metro" }, body: { de: "Hohe konstante Nachfrage — wir mieten hier gezielt zentrale, gut angebundene Objekte ab 4 Einheiten.", en: "High constant demand — we lease selectively here: centrally located, well-connected assets with 4+ units." } },
    { key: "b", label: { de: "B-Stadt", en: "Secondary city" }, body: { de: "Mittelgröße mit Corporate- und Messe-Nachfrage — unser Sweet-Spot für nachhaltige Master-Leases.", en: "Mid-size with corporate and trade-fair demand — our sweet-spot for sustainable master-leases." } },
    { key: "small", label: { de: "Klein- & Kreisstadt", en: "Small & district town" }, body: { de: "Stabile lokale Nachfrage, oft weniger Wettbewerb — perfekt für ganze Apartmenthäuser oder ehemalige Pensionen.", en: "Stable local demand, often less competition — perfect for whole apartment buildings or former guesthouses." } },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="section-head-text">
            <div className="eyebrow">{lang === "de" ? "Wo wir mieten" : "Where we lease"}</div>
            <h2 className="h-xl" style={{ marginTop: 18 }}>
              {lang === "de" ? "Von Metropole bis Kleinstadt." : "From metropolis to small town."}
            </h2>
            <p className="body-lg" style={{ maxWidth: 720, marginTop: 18 }}>
              {lang === "de"
                ? "Wir suchen Objekte überall dort, wo Menschen für Arbeit, Gesundheit oder Erlebnis unterwegs sind — von der Münchner Innenstadt bis zur niederbayerischen Kreisstadt. Entscheidend ist nicht die Größe der Stadt, sondern die Qualität der Nachfrage."
                : "We're looking for properties wherever people travel for work, health or experience — from central Munich to a small Lower Bavarian district town. What matters is not the size of the city but the quality of demand."}
            </p>
          </div>
        </div>

        {/* Tier cards */}
        <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginBottom: 72 }}>
          {tiers.map((tier, i) => (
            <div key={tier.key} style={{ padding: "36px 32px", background: "var(--surface)", borderRadius: 4, borderLeft: "3px solid var(--accent)" }}>
              <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 14, fontWeight: 600 }}>
                {lang === "de" ? `Tier 0${i+1}` : `Tier 0${i+1}`}
              </div>
              <h3 className="h-md" style={{ marginBottom: 12 }}>{tier.label[lang]}</h3>
              <p className="body-md">{tier.body[lang]}</p>
            </div>
          ))}
        </div>

        {/* Location grid */}
        <div className="grid re-locations-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {RE_LOCATIONS.map((loc, i) => (
            <div key={i}>
              <div className="ph" style={{ aspectRatio: "3/4", backgroundImage: `url(${loc.image})`, marginBottom: 18, borderRadius: 4 }}/>
              <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 8, fontWeight: 600 }}>{loc.tag[lang]}</div>
              <h3 className="h-md" style={{ marginBottom: 10 }}>{loc.city}</h3>
              <p className="body-md">{loc.body[lang]}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, padding: "32px 40px", background: "var(--surface)", borderRadius: 4, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>{lang === "de" ? "Andere Region?" : "Different region?"}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3 }}>
              {lang === "de"
                ? "Wir expandieren laufend in der DACH-Region — erzähl uns von Deinem Objekt, wir prüfen es."
                : "We're expanding across DACH — tell us about your property and we'll evaluate it."}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstateYieldExample({ lang }) {
  return (
    <section style={{ background: "var(--ink)", color: "oklch(0.95 0.005 110)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "flex-start" }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--accent)" }}>{lang === "de" ? "Rechenbeispiel" : "Worked example"}</div>
            <h2 className="h-xl" style={{ color: "#fff", marginTop: 18, marginBottom: 24 }}>
              {lang === "de" ? "Privatmiete vs. LUXOMES-Mietvertrag." : "Private tenants vs. LUXOMES lease."}
            </h2>
            <p style={{ color: "oklch(0.82 0 0)", fontSize: 17, lineHeight: 1.7, marginBottom: 24 }}>
              {lang === "de"
                ? "Beispielobjekt: 8-Zimmer-Pension oder Mehrfamilienhaus in einer süddeutschen B-Stadt, gut 240m² Wohnfläche. Im Vergleich: klassische Privat-Wohnungsvermietung gegen einen LUXOMES Master-Lease."
                : "Sample asset: an 8-room guesthouse or multi-unit residential, ~240sqm, in a southern-German secondary city. Classical private tenancy compared to a LUXOMES master lease."}
            </p>
            <div style={{ padding: "20px 24px", background: "oklch(1 0 0 / 0.05)", border: "1px solid oklch(1 0 0 / 0.12)", borderRadius: 4, fontSize: 14, lineHeight: 1.6 }}>
              <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 10, fontWeight: 600 }}>
                {lang === "de" ? "Der entscheidende Unterschied" : "The decisive difference"}
              </div>
              <span style={{ color: "oklch(0.88 0 0)" }}>
                {lang === "de"
                  ? "Bei Privatmiete trägst Du Leerstand, Mieterwechsel, Renovierung und Mietausfall. Bei LUXOMES nicht — die Miete fließt unabhängig von Belegung über die gesamte Laufzeit."
                  : "With private tenants you carry vacancy, churn, renovations and rent default. With LUXOMES you don't — rent flows regardless of occupancy, across the entire term."}
              </span>
            </div>
          </div>
          <div style={{ background: "oklch(1 0 0 / 0.04)", border: "1px solid oklch(1 0 0 / 0.12)", padding: 44, borderRadius: 4 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "oklch(0.65 0 0)", marginBottom: 4, fontWeight: 600 }}>
              {lang === "de" ? "Privat-Vermietung (klassisch)" : "Private tenants (classical)"}
            </div>
            <YieldRow label={lang === "de" ? "Ortsübliche Kaltmiete" : "Local market rent (cold)"} val="~3.500 €/Mo"/>
            <YieldRow label={lang === "de" ? "− Leerstandsrisiko (Ø 7%)" : "− Vacancy risk (avg 7%)"} val="−245 €/Mo"/>
            <YieldRow label={lang === "de" ? "− Verwaltungs- & Mietausfallaufwand" : "− Mgmt & default reserves"} val="−180 €/Mo"/>
            <YieldRow label={lang === "de" ? "Effektive Privat-Miete" : "Effective private rent"} val="~3.075 €/Mo"/>

            <div style={{ marginTop: 22, paddingTop: 18, borderTop: "1px solid oklch(1 0 0 / 0.2)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 4, fontWeight: 600 }}>
              {lang === "de" ? "LUXOMES Master-Lease" : "LUXOMES master lease"}
            </div>
            <YieldRow label={lang === "de" ? "Garantierte Festmiete" : "Guaranteed fixed rent"} val="4.200–4.800 €/Mo"/>
            <YieldRow label={lang === "de" ? "− Leerstandsrisiko" : "− Vacancy risk"} val="0 €"/>
            <YieldRow label={lang === "de" ? "− Eigener Verwaltungsaufwand" : "− Owner workload"} val="0 €"/>
            <YieldRow label={lang === "de" ? "Effektive LUXOMES-Miete" : "Effective LUXOMES rent"} val="4.200–4.800 €/Mo" bold/>

            <div style={{ marginTop: 28, padding: "20px 24px", background: "var(--accent)", color: "var(--accent-ink)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, textAlign: "center" }}>
              {lang === "de" ? "= +37–56% mehr Cashflow · 100% planbar" : "= +37–56% more cashflow · 100% predictable"}
            </div>
            <div style={{ marginTop: 16, fontSize: 12, color: "oklch(0.65 0 0)", textAlign: "center" }}>
              {lang === "de" ? "Beispielhafte Zahlen — konkrete Konditionen abhängig von Objekt, Lage und Zustand." : "Illustrative figures — actual terms depend on asset, location and condition."}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function YieldRow({ label, val, bold }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "10px 0", borderBottom: "1px solid oklch(1 0 0 / 0.08)" }}>
      <span style={{ fontSize: 14, color: bold ? "#fff" : "oklch(0.82 0 0)", fontWeight: bold ? 600 : 400 }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)", fontSize: bold ? 22 : 17, color: bold ? "var(--accent)" : "#fff" }}>{val}</span>
    </div>
  );
}

function RealEstateFAQ({ lang }) {
  return (
    <section>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <div className="mobile-static-aside" style={{ position: "sticky", top: 120, alignSelf: "start" }}>
            <div className="eyebrow">{lang === "de" ? "FAQ" : "FAQ"}</div>
            <h2 className="h-xl" style={{ marginTop: 18, marginBottom: 24 }}>
              {lang === "de" ? "Häufige Eigentümer-Fragen." : "Common owner questions."}
            </h2>
          </div>
          <div>
            <Accordion items={RE_FAQ} lang={lang}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstateFinalCTA({ 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.lobby})` }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg, oklch(0 0 0 / 0.75), oklch(0 0 0 / 0.35))" }}/>
          <div style={{ position: "relative", color: "#fff", maxWidth: 720 }}>
            <h2 className="h-xl" style={{ color: "#fff", marginBottom: 24 }}>
              {lang === "de" ? "Lass uns über Dein Objekt sprechen." : "Let's talk about your property."}
            </h2>
            <p className="body-lg" style={{ color: "oklch(0.92 0 0)", marginBottom: 36 }}>
              {lang === "de"
                ? "30 Minuten, unverbindlich, vertraulich — am Ende weißt Du, ob ein LUXOMES Master-Lease für Dich passt und in welcher Größenordnung."
                : "30 minutes, no obligation, confidential — by the end you know whether a LUXOMES master lease fits and in what range."}
            </p>
            <button onClick={() => { setPage("contact"); window.scrollTo(0,0); }} className="btn btn-primary">
              {lang === "de" ? "Erstgespräch buchen" : "Book intro call"} <Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function RealEstatePage({ lang, setPage }) {
  return (
    <>
      <RealEstateHero lang={lang} setPage={setPage}/>
      <RealEstateMetrics lang={lang}/>
      <RealEstateInvestPoints lang={lang}/>
      <RealEstateNewBuild lang={lang} setPage={setPage}/>
      <RealEstateBuildPhases lang={lang}/>
      <CaseStudySection slug="vilshofen-launch" lang={lang} setPage={setPage} accent="dark"/>
      <RealEstateLocations lang={lang}/>
      <RealEstateFAQ lang={lang}/>
      <RealEstateFinalCTA lang={lang} setPage={setPage}/>
    </>
  );
}

Object.assign(window, { RealEstatePage, RE_FAQ });
