// sections.jsx — All landing-page sections for iMMOKi Digital.
// Uses Icon (icons.jsx) and ChatMockup (chat-mockup.jsx).

// Monthly capacity — deterministic by Jahr+Monat, so the number changes
// when a new month starts, but stays stable within the same month.
const MONTHS_DE = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
function capacityForNow() {
  const d = new Date();
  const y = d.getFullYear();
  const m = d.getMonth(); // 0–11
  // Deterministic pseudo-random in [1..4] — always under 5, never zero.
  const seed = y * 12 + m;
  const free = 1 + ((seed * 2654435761 + 0xb5297a4d) >>> 0) % 4;
  return { free, taken: 5 - free, month: MONTHS_DE[m], year: y };
}
const CAP = capacityForNow();

const { useState: useS, useEffect: useE, useRef: useR } = React;

// ─── Reveal-on-scroll wrapper ─────────────────────────────────────────────
function Reveal({ children, delay = 0, className = "", as: Tag = "div", ...rest }) {
  const ref = useR(null);
  const [shown, setShown] = useS(false);
  useE(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => setShown(true), delay);
        io.disconnect();
      }
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} {...rest}>{children}</Tag>;
}

// ─── Brand / Nav ──────────────────────────────────────────────────────────
function Nav({ onBook }) {
  const { t } = useLang();
  return (
    <header className="nav">
      <a className="brand" href="#top">
        <img src="assets/immoki-logo.png" alt="iMMOKi Digital" className="brand-logo" />
      </a>
      <div className="nav-right">
        <LanguageToggle />
        <button className="btn btn-primary nav-cta" onClick={onBook} style={{ padding: "10px 18px", fontSize: 14 }}>
          {t("nav.cta")} <Icon name="arrow-right" size={14} className="arr" />
        </button>
        <button className="nav-cta-mob" onClick={onBook}>{t("nav.cta")}</button>
      </div>
    </header>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────
const HEADLINES = {
  A: (
    <>
      <span className="h-main">Wie viele Interessenten fragen Sie heute wieder</span>
      <span className="h-punch">
        <span className="h-punch-big">Ist die Immobilie noch verfügbar?</span>
      </span>
    </>
  ),
  B: (
    <>
      <span className="accent">3 bis 5 Stunden</span> <br />
      weniger Nachrichten&shy;chaos <br />
      pro Woche.
    </>
  ),
  C: (
    <>
      Ich war selbst Makler. <br />
      <span className="accent">Ich kenne</span> <br />
      dieses Problem.
    </>
  ),
};
const SUBS = {
  A: "Hören Sie auf, täglich dieselben Fragen manuell zu beantworten und konzentrieren Sie sich wieder auf Verkauf und Besichtigungen.",
  B: "Ohne neue Software. Ohne Mehraufwand. Anfragen werden direkt beantwortet, damit Sie sich wieder auf Abschlüsse konzentrieren können.",
  C: "Ich habe dafür gesorgt, dass Anfragen nicht mehr liegen bleiben und Ihr Feierabend wieder Feierabend ist. Eingerichtet von einem, der die Branche von innen kennt.",
};

// ─── "So gewinnen Sie mehr qualifizierte Anfragen" — 3 Schritte ────────────
// Flache SVG-Illustrationen für die 3 Schritte (im Stil des Mockups, ohne externe Datei)
const STEP_ART = [
  (<img src="assets/step-1.png" alt="" aria-hidden="true" style={{width:"100%",height:"100%",objectFit:"contain"}} />),
  (<img src="assets/step-2.png" alt="" aria-hidden="true" style={{width:"100%",height:"100%",objectFit:"contain"}} />),
  (<img src="assets/step-3.png" alt="" aria-hidden="true" style={{width:"100%",height:"100%",objectFit:"contain"}} />),
];

function Steps() {
  const { t } = useLang();
  const steps = [
    { k: "1", ic: "mail" },
    { k: "2", ic: "chat" },
    { k: "3", ic: "filter" },
    { k: "4", ic: "calendar" },
  ];
  return (
    <section className="section wrap" data-track-section="steps">
      <Reveal as="h2" className="sec-h2-center">
        {t("steps.title.1")}<span className="acc">{t("steps.title.acc")}</span>{t("steps.title.2")}
      </Reveal>
      <Reveal delay={60}><p className="sec-sub-center">{t("steps.sub")}</p></Reveal>
      <div className="steps4-grid">
        {steps.map((s, i) => (
          <Reveal key={s.k} delay={i * 80} className="s4-item">
            <span className="s4-badge">{s.k}</span>
            <span className="s4-ic"><Icon name={s.ic} size={26} stroke={1.8}/></span>
            <h4>{t(`steps.${s.k}.h`)}</h4>
            <p>{t(`steps.${s.k}.t`)}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── Warum Makler iMMOKi nutzen (4 Nutzen) ─────────────────────────────────
function WhyUs() {
  const { t } = useLang();
  const items = [
    { ic: "bolt",     k: "1" },
    { ic: "clock",    k: "2" },
    { ic: "filter",   k: "3" },
    { ic: "target",   k: "4" },
  ];
  return (
    <section className="section wrap" data-track-section="why">
      <Reveal><span className="why-eyebrow">{t("why.eyebrow")}</span></Reveal>
      <div className="why-grid">
        {items.map((it, i) => (
          <Reveal key={it.k} delay={i * 70} className="why-card">
            <span className="why-ic"><Icon name={it.ic} size={22} stroke={1.9}/></span>
            <div className="why-h">{t(`why.${it.k}.h`)}</div>
            <p className="why-t">{t(`why.${it.k}.t`)}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── Integrationen / Anfragequellen ────────────────────────────────────────
function Integrations() {
  const { t, lang } = useLang();
  const portals = lang === "es"
    ? [["logo-idealista.png", "Idealista"], ["logo-fotocasa.png", "Fotocasa"]]
    : [["logo-immoscout24.png", "ImmoScout24"], ["logo-immowelt.png", "immowelt"]];
  return (
    <section className="section wrap" data-track-section="integrations">
      <Reveal as="h2" className="sec-h2-center">
        {t("int.title.1")}<span className="acc">{t("int.title.acc")}</span>{t("int.title.2")}
      </Reveal>
      <Reveal delay={60}><p className="sec-sub-center">{t("int.sub")}</p></Reveal>
      <Reveal delay={100}>
        <div className="int-grid">
          {portals.map(([src, alt]) => (
            <span key={alt} className="int-item int-item-logo"><img className="int-logo" src={`assets/${src}`} alt={alt} /></span>
          ))}
          <span className="int-item"><img className="int-ch" src="assets/ch-whatsapp.svg" alt="WhatsApp" /><span>WhatsApp</span></span>
          <span className="int-item"><img className="int-ch" src="assets/ch-website.png" alt="Website" /><span>{t("channels.website")}</span></span>
          <span className="int-item"><img className="int-ch" src="assets/ch-email.png" alt="E-Mail" /><span>{t("channels.email")}</span></span>
          <span className="int-item"><img className="int-ch" src="assets/ch-facebook.svg" alt="Facebook" /><span>Facebook</span></span>
        </div>
      </Reveal>
      <Reveal delay={140}>
        <div className="int-note"><Icon name="check" size={13} stroke={3} /> {t("int.note")}</div>
      </Reveal>
    </section>
  );
}

function Channels() {
  const { t, lang } = useLang();
  return (
    <section className="section wrap" data-track-section="channels">
      <Reveal>
        <div className="channels">
          <div className="channels-label">{t("channels.label.1")} <br/>{t("channels.label.2a")}<span className="cl-accent">{t("channels.label.2acc")}</span>{t("channels.label.2b")}</div>
          <div className="channels-list">
            <span className="ch"><img src="assets/ch-whatsapp.svg" alt="WhatsApp" className="ch-img"/> WhatsApp</span>
            <span className="ch"><img src="assets/ch-instagram.svg" alt="Instagram" className="ch-img"/> Instagram</span>
            <span className="ch"><img src="assets/ch-website.png" alt="Website" className="ch-img"/> {t("channels.website")}</span>
            <span className="ch"><img src="assets/ch-immobilien.png" alt="Immobilienportale" className="ch-img"/> {t("channels.portals")}</span>
            <span className="ch"><img src="assets/ch-facebook.svg" alt="Facebook" className="ch-img"/> Facebook</span>
            <span className="ch"><img src="assets/ch-email.png" alt="E-Mail" className="ch-img"/> {t("channels.email")}</span>
          </div>
          <div className="channels-note">
            <span className="cn-ic"><Icon name="mail" size={20} stroke={1.9}/></span>
            <p>{t("channels.note")}</p>
            {lang === "de" && (
              <span className="cn-logos">
                <img className="cn-logo" src="assets/logo-immoscout24.png" alt="ImmoScout24" />
                <img className="cn-logo" src="assets/logo-immowelt.png" alt="immowelt" />
              </span>
            )}
            {lang === "es" && (
              <span className="cn-logos">
                <img className="cn-logo" src="assets/logo-idealista.png" alt="Idealista" />
                <img className="cn-logo" src="assets/logo-fotocasa.png" alt="Fotocasa" />
              </span>
            )}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function CtaBanner({ onBook }) {
  const { t } = useLang();
  return (
    <section className="section wrap" data-track-section="cta_banner" data-track-cta-location="cta_banner">
      <Reveal>
        <div className="cta-banner">
          <div className="cb-left">
            <span className="cb-ic"><Icon name="calendar" size={22} stroke={1.9}/></span>
            <div className="cb-text">
              <h3>{t("cta.banner.h")}</h3>
              <p>{t("cta.banner.sub")}</p>
            </div>
          </div>
          <div className="cb-right">
            <button className="btn btn-primary" onClick={onBook}>
              {t("cta.banner.btn")} <Icon name="arrow-right" size={16} className="arr"/>
            </button>
            <span className="cb-note"><Icon name="check" size={12} stroke={3}/> {t("cta.banner.note")}</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function Hero({ onBook, variant, playing, setPlaying }) {
  const { t } = useLang();
  return (
    <section className="section hero wrap" id="top" data-track-section="hero" data-track-cta-location="hero">
      <div className="hero-grid">
        <div>
          <Reveal>
            <span className="hero-meta">
              <span className="pulse"></span>
              <span>{t("hero.eyebrow")}</span>
            </span>
          </Reveal>
          <Reveal delay={80} as="h1">
            <span className="h-main">{t("hero.headline.main")}<span className="h-green">{t("hero.headline.punch")}</span></span>
            <span className="h-main">{t("hero.headline.line2.a")}<span className="h-green">{t("hero.headline.line2.b")}</span></span>
          </Reveal>
          <Reveal delay={160}><p className="lede">{t("hero.subhead.a")}<span className="lede-hl">{t("hero.subhead.hl")}</span>{t("hero.subhead.b")}</p></Reveal>
          <Reveal delay={240}>
            <div className="hero-action-box">
              <div className="hero-ctas">
                <button className="btn btn-primary" onClick={onBook}>
                  {t("hero.cta.primary")}
                  <Icon name="arrow-right" size={16} className="arr" />
                </button>
                <a className="btn btn-ghost" href="#demo">{t("hero.cta.secondary")}</a>
              </div>
              <div className="cta-microcopy">
                <div className="cm-ic">
                  <Icon name="clock" size={20} stroke={1.8} />
                </div>
                <div className="cm-text">
                  <strong className="cm-h">{t("hero.micro.1")}</strong>
                  <em className="cm-sub">{t("hero.micro.2")}</em>
                  <span className="cm-desc">{t("hero.micro.3")}</span>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="phone-stage">
            <ChatMockup playing={playing} />
            <div className="phone-reflection" aria-hidden="true"></div>
          </div>
          <div className="example-annotation" aria-hidden="false">
            <p className="ea-text">{t("hero.example.caption")}</p>
            <svg className="ea-arrow ea-arrow-right" viewBox="0 0 60 80" xmlns="http://www.w3.org/2000/svg">
              <path d="M 14 74 C 30 60, 42 38, 46 10"
                    fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
              <path d="M 46 10 L 34 18 M 46 10 L 52 24"
                    fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
            </svg>
          </div>
        </Reveal>

        <div className="hero-aside">
          <div className="ha-notif">
            <span className="ha-nic"><Icon name="bolt" size={18} stroke={2.2} /></span>
            <span>
              <b>{t("hero.float.confirmed.title")}</b>
              <small>{t("hero.float.confirmed.sub")}</small>
            </span>
          </div>
          <div className="ha-notif">
            <span className="ha-nic"><Icon name="calendar" size={18} stroke={2.2} /></span>
            <span>
              <b>{t("hero.float.scheduled.title")}</b>
              <small>{t("hero.float.scheduled.sub")}</small>
            </span>
          </div>
          <div className="ha-feats">
            <div className="ha-feat">
              <span className="ha-fic"><Icon name="chat" size={20} stroke={2} /></span>
              <div>
                <h4>{t("hero.vorteil.1.h")}</h4>
                <p>{t("hero.vorteil.1.t")}</p>
              </div>
            </div>
            <div className="ha-feat">
              <span className="ha-fic"><Icon name="sliders" size={20} stroke={2} /></span>
              <div>
                <h4>{t("hero.vorteil.2.h")}</h4>
                <p>{t("hero.vorteil.2.t")}</p>
              </div>
            </div>
            <div className="ha-feat">
              <span className="ha-fic"><Icon name="shield" size={20} stroke={2} /></span>
              <div>
                <h4>{t("hero.vorteil.3.h")}</h4>
                <p>{t("hero.vorteil.3.t")}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Pain ─────────────────────────────────────────────────────────────────
const PAINS = [
  {
    icon: "phone",
    title: "Sie sitzen im Termin und drei neue Anfragen liegen schon im Postfach.",
    text: "Bis Sie wieder Zeit haben, hat sich der Interessent längst woanders gemeldet. Jede Anfrage, die liegen bleibt, ist ein potenzieller Verkauf weniger.",
  },
  {
    icon: "chat",
    title: "Immer wieder dieselben Fragen. Jeden Tag, jede Woche, jeden Monat.",
    text: "Ist die Wohnung noch frei? Was kostet das Hausgeld? Gibt es Stellplätze? Stunden gehen drauf für Antworten, die Sie schon hundertmal gegeben haben.",
  },
  {
    icon: "filter",
    title: "Besichtigung gemacht und dann: „Ich muss erst noch mit der Bank reden.“",
    text: "Stunden investiert in Interessenten, die am Ende gar nicht kaufen können. Genau das frisst Ihre Zeit, während echte Käufer warten.",
  },
  {
    icon: "clock",
    title: "Sonntagabend, 21:30 Uhr und Sie tippen schon wieder Rückmeldungen.",
    text: "Anfragen kommen rund um die Uhr. Wer abends nicht antwortet, verliert. Wer abends antwortet, verliert seinen Feierabend.",
  },
  {
    icon: "alert",
    title: "Nach der Besichtigung: Stille. Keine Rückmeldung. Kein nächster Schritt.",
    text: "Sie rufen hinterher, schreiben hinterher, hoffen hinterher. Währenddessen meldet sich der Interessent woanders. Oder gar nicht mehr.",
  },
  {
    icon: "globe",
    title: "WhatsApp, E-Mail, Anruf, Portal-Nachricht. Jeder Kanal zur falschen Zeit.",
    text: "Sie verlieren den Überblick, wer wo wartet. Verkäufer fragen sich, warum es so lange dauert. Vertrauen geht verloren, lange bevor ein Vertrag zustande kommt.",
  },
];

// ─── "Das macht den Unterschied" — Vorteile auf einen Blick ────────────────
function Edge() {
  const { t } = useLang();
  const items = [
    { ico: "clock",    k: "1" },
    { ico: "filter",   k: "2" },
    { ico: "calendar", k: "3" },
    { ico: "shield",   k: "4" },
    { ico: "trophy",   k: "5" },
  ];
  return (
    <section className="section bone" data-track-section="edge">
      <div className="wrap">
        <Reveal as="h2" className="edge-title">{t("edge.title")}</Reveal>
        <div className="edge-grid">
          {items.map((it, i) => (
            <Reveal key={it.k} delay={i * 70} className="edge-item">
              <span className="edge-ic"><Icon name={it.ico} size={24} /></span>
              <p><b>{t(`edge.${it.k}.b`)}</b> {t(`edge.${it.k}.t`)}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pain() {
  const { t } = useLang();
  return (
    <section className="section bone" data-track-section="pain">
      <div className="wrap">
        <Reveal>
          <span className="eyebrow navy">{t("pain.eyebrow")}</span>
        </Reveal>
        <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
          {t("pain.h.1")} <br />
          <span className="pain-h2-punch">{t("pain.h.2a")} <span className="pain-h2-accent">{t("pain.h.2b")}</span></span>
        </Reveal>

        <div className="pain-list">
          {PAINS.map((p, i) => (
            <Reveal key={i} delay={i * 60} className="pain">
              <span className="num">{String(i + 1).padStart(2, "0")}</span>
              <div className="pain-body">
                <h4 className="pain-title">{t(`pain.${i+1}.t`)}</h4>
                <p className="pain-text">{t(`pain.${i+1}.d`)}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="pain-close">
            <p className="pc-quote">
              {t("pain.close.1")} <br/>
              <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>{t("pain.close.2")}</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Solution ─────────────────────────────────────────────────────────────
const JOURNEY = [
  {
    time: "Direkt nach Eingang",
    title: "Eine neue Anfrage kommt rein.",
    text: "Egal ob WhatsApp, ImmoScout, Immowelt, E-Mail, Instagram oder Ihre Website. Alle Kanäle laufen zusammen.",
  },
  {
    time: "Kurz danach",
    title: "Interessenten bekommen sofort eine passende Antwort.",
    text: "Freundlich, abgestimmt auf Ihre Objekte und die Informationen, die Sie freigegeben haben.",
  },
  {
    time: "Im selben Gespräch",
    title: "Sie sehen schneller, wer wirklich kaufen kann.",
    text: "Schluss mit Besichtigungen, bei denen sich erst vor Ort herausstellt: „Ich muss erst noch mit der Bank reden.“ Wer kein Budget hat, kommt gar nicht erst rein.",
  },
  {
    time: "Im selben Gespräch",
    title: "Besichtigungen werden schneller abgestimmt.",
    text: "Drei freie Termine aus Ihrer Verfügbarkeit, inklusive Erinnerung 24 h vorher.",
  },
  {
    time: "Nach der Besichtigung",
    title: "Interessenten werden nach der Besichtigung weiter begleitet.",
    text: "Eine kurze Rückmeldung folgt direkt im Anschluss. Mit Bitte um Feedback und nächstem Schritt.",
  },
  {
    time: "Wenn es wichtig wird",
    title: "Sie werden nur eingebunden, wenn es wirklich wichtig wird.",
    text: "Bei unklaren Anfragen, Verhandlungen oder vertraulichen Themen werden Sie sofort eingebunden. Sie bleiben Entscheider.",
    accent: true,
  },
];

function Solution() {
  const { t } = useLang();
  return (
    <section className="section wrap" id="solution" data-track-section="solution">
      <Reveal><span className="eyebrow">{t("sol.eyebrow")}</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        {t("sol.h.1")} <br />
        <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>{t("sol.h.2")}</span>
      </Reveal>
      <Reveal delay={160}>
        <p className="lede" style={{ maxWidth: 660 }}>{t("sol.lede")}</p>
      </Reveal>

      <div className="journey">
        <div className="journey-rail" aria-hidden="true"></div>
        {JOURNEY.map((s, i) => (
          <Reveal key={i} delay={i * 70} className={"j-step" + (s.accent ? " accent" : "")}>
            <span className="j-num">
              <span className="j-num-i">{i + 1}</span>
            </span>
            <div className="j-card">
              <div className="j-meta">
                <span className="j-time">
                  <span className="j-dot"></span>
                  {t(`sol.j.${i+1}.time`)}
                </span>
              </div>
              <h4 className="j-title">{t(`sol.j.${i+1}.t`)}</h4>
              <p className="j-text">{t(`sol.j.${i+1}.d`)}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─── How it works (4 steps) ───────────────────────────────────────────────
const STEPS = [
  {
    icon: "chat",
    title: "Wir schauen gemeinsam auf Ihren aktuellen Ablauf.",
    text: "Wo kommen Anfragen rein? Wie läuft die Kommunikation aktuell? Und wo verlieren Interessenten oft Zeit oder Antworten?",
  },
  {
    icon: "video",
    title: "Sie sehen echte Abläufe aus dem Makler-Alltag.",
    text: "Wir zeigen live, wie Anfragen beantwortet, Interessenten eingeordnet und Besichtigungen abgestimmt werden. Ohne zusätzlichen Aufwand im Alltag.",
  },
  {
    icon: "mail",
    title: "Gemeinsam prüfen wir typische Situationen aus Ihrem Alltag.",
    text: "Rückfragen. Besichtigungstermine. Finanzierung. Nachfassen. Wir schauen gemeinsam, wo es in Ihrem Alltag am meisten Zeit kostet und wo Sie entlastet werden können.",
  },
  {
    icon: "check",
    title: "Gemeinsam entscheiden wir, ob das zu Ihrem Büro passt.",
    text: "Nicht jedes Büro arbeitet gleich. Deshalb schauen wir offen und ehrlich, ob die Abläufe wirklich zu Ihrem Alltag passen.",
  },
];

function HowItWorks() {
  return (
    <section className="section bone" data-track-section="how_it_works">
      <div className="wrap">
        <Reveal><span className="eyebrow green">So läuft das Erstgespräch ab</span></Reveal>
        <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
          So läuft die gemeinsame Live-Demo ab.
        </Reveal>
        <Reveal delay={160}>
          <p className="lede" style={{ maxWidth: 660 }}>
            Keine Technik-Präsentation. Sondern ein ehrlicher Blick auf Ihren Makler-Alltag.
            Gemeinsam schauen wir, wie Anfragen aktuell bei Ihnen laufen und wo Zeit verloren geht.
          </p>
        </Reveal>

        <div className="steps">
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={i * 80} className="step">
              <span className="ic"><Icon name={s.icon} size={18} stroke={2}/></span>
              <span className="step-no">SCHRITT {String(i + 1).padStart(2, "0")}</span>
              <h4>{s.title}</h4>
              <p>{s.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Animated demo ────────────────────────────────────────────────────────
function Demo({ playing, setPlaying }) {
  const { t } = useLang();
  const [progress, setProgress] = useS(0);
  return (
    <section className="section wrap" id="demo" data-track-section="demo">
      <Reveal><span className="eyebrow">{t("demo.eyebrow")}</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        {t("demo.h.1")} <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>{t("demo.h.2")}</span>
      </Reveal>
      <Reveal delay={160}>
        <p className="lede" style={{ maxWidth: 640 }}>{t("demo.lede")}</p>
      </Reveal>

      <div className="demo-frame">
        <div className="demo-grid">
          <div className="demo-side">
            <span className="eyebrow" style={{ background: "rgba(255,255,255,.08)", color: "#b9cfff" }}>
              {t("demo.what.eyebrow")}
            </span>
            <h3 style={{ marginTop: 14 }}>{t("demo.what.h")}</h3>
            <p className="lede">{t("demo.what.lede")}</p>
            <ul className="demo-points">
              {["1","2","3","4"].map((k) => (
                <li key={k}><span className="dp-ck"><Icon name="check" size={11} stroke={3}/></span>{t(`demo.point.${k}`)}</li>
              ))}
            </ul>

            <div className="demo-note">
              <span className="dn-tag">{t("demo.note.tag")}</span>
              <p>{t("demo.note.text")}</p>
            </div>
            <div className="demo-controls">
              <button onClick={() => setPlaying(p => !p)}>
                <Icon name={playing ? "pause" : "play"} size={12} stroke={2.4} style={{ marginRight: 6, verticalAlign: -1 }}/>
                {playing ? t("demo.pause") : t("demo.play")}
              </button>
              <div className="demo-progress"><i style={{ width: `${Math.min(100, progress * 100)}%` }}></i></div>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
            <ChatMockup playing={playing} onTick={setProgress} />
            <div className="demo-phone-caption">
              <p className="dpc-title">{t("demo.phone.caption")}</p>
              <p className="dpc-sub">{t("demo.phone.sub")}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Testimonials ─────────────────────────────────────────────────────────
const REVIEWS = [
  {
    initials: "PM",
    name: "Peter M.",
    role: "Immobilienmakler · NRW",
    date: "März 2026",
    stars: 5,
    text: "Bin sehr zufrieden. Setup hat ein paar Tage länger gedauert als gedacht, aber dafür sitzt jetzt alles. Anfragen werden direkt beantwortet, ich muss nicht mehr abends ran. Daniel ist immer erreichbar wenn was ist.",
  },
  {
    initials: "ER",
    name: "Elisabeth R.",
    role: "Maklerin · Bayern",
    date: "April 2026",
    stars: 5,
    text: `Ich hatte echt Bedenken weil ich nicht wollte das irgendwas „komisches" mit meinen Kunden schreibt. Aber Daniel hat mir alles in Ruhe gezeigt, wir haben die Antworten zusammen abgestimmt. Heute bekomme ich Termine in den Kalender ohne dass ich noch eingreifen muss. Wenn was unklar ist meldet sich das System bei mir.`,
  },
  {
    initials: "MH",
    name: "Markus H.",
    role: "Maklerbüro · Hamburg",
    date: "Februar 2026",
    stars: 5,
    text: "Wir sind zu viert im Büro. Vorher war oft unklar wer schon geantwortet hat oder ob überhaupt jemand. Heute läuft das sauber, jeder weiß was los ist. Daniel kennt den Maklerberuf, das merkt man bei jedem Detail.",
  },
  {
    initials: "TK",
    name: "Tobias K.",
    role: "Immobilienmakler · Köln",
    date: "Mai 2026",
    stars: 5,
    text: "Habe schon einiges ausprobiert in den letzten Jahren. Das hier ist anders weil es nicht einfach Software ist die man selbst bedienen muss. Anfragen werden so beantwortet wie ich es auch tun würde. Klare Empfehlung.",
  },
];

function Stars({ count = 5 }) {
  return (
    <div className="t-stars" aria-label={`${count} von 5 Sternen`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} viewBox="0 0 24 24" width="14" height="14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path
            d="M12 2.5l2.9 6.1 6.7.6-5 4.6 1.5 6.6L12 17l-6.1 3.4 1.5-6.6-5-4.6 6.7-.6L12 2.5z"
            fill={i < count ? "#f5b400" : "#e0e0e0"}
          />
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  const { t } = useLang();
  const revs = [{ k: "1" }, { k: "2" }, { k: "3" }];
  return (
    <section className="section" data-track-section="testimonials">
      <div className="wrap">
        <Reveal as="h2" className="t-title" style={{ textAlign: "center" }}>
          {t("tst.title.1")}<span style={{ color: "var(--green)" }}>{t("tst.title.acc")}</span>{t("tst.title.2")}
        </Reveal>

        <div className="t-grid">
          {revs.map((r, i) => (
            <Reveal key={r.k} delay={80 + i * 70} className="t-card">
              <span className="t-quote-mark" aria-hidden="true">&#8220;</span>
              <p className="quote">{t(`tst.${r.k}.text`)}</p>
              <div className="t-person">
                <span className="t-pinfo">
                  <b>{t(`tst.${r.k}.name`)}</b>
                  <small>{t(`tst.${r.k}.role`)}</small>
                </span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="tst-values">
          <span className="tsv-ic"><Icon name="shield" size={18} stroke={2}/></span>
          <span className="tsv-text">
            {t("tst.values.pre")}
            <b>{t("tst.values.mid")}<span className="tsv-green">{t("tst.values.acc")}</span></b>
          </span>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Qualifizierung (ausgelagert — rendert nach dem Statistik-Band) ─────────
function Qualification() {
  const { t } = useLang();
  return (
    <section className="section bone" data-track-section="qualification">
      <div className="wrap">
        <div className="qual-card">
          <div className="qual-intro">
            <h2 className="qual-h">{t("qual.h.1")}<br/>{t("qual.h.2")}</h2>
            <p className="qual-lede">{t("qual.lede")}</p>
          </div>

          <div className="qual-compare">
            <div className="qc-col qc-yes">
              <div className="qc-head">
                <span className="qc-badge qc-badge-yes"><Icon name="check" size={13} stroke={3}/></span>
                {t("qual.yes.title")}
              </div>
              <ul>
                <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.1")}</li>
                <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.2")}</li>
                <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.3")}</li>
              </ul>
            </div>
            <div className="qc-col qc-no">
              <div className="qc-head">
                <span className="qc-badge qc-badge-no"><Icon name="x" size={13} stroke={3}/></span>
                {t("qual.no.title")}
              </div>
              <ul>
                <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.1")}</li>
                <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.2")}</li>
                <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.3")}</li>
              </ul>
            </div>
          </div>

          <div className="qual-benefits">
            <div className="qb-item">
              <span className="qb-ic"><Icon name="user" size={20} stroke={1.8}/></span>
              <div><b>{t("qual.b1.h")}</b><span>{t("qual.b1.p")}</span></div>
            </div>
            <div className="qb-item">
              <span className="qb-ic"><Icon name="filter" size={20} stroke={1.8}/></span>
              <div><b>{t("qual.b2.h")}</b><span>{t("qual.b2.p")}</span></div>
            </div>
            <div className="qb-item">
              <span className="qb-ic"><Icon name="clock" size={20} stroke={1.8}/></span>
              <div><b>{t("qual.b3.h")}</b><span>{t("qual.b3.p")}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Statistik-Band ────────────────────────────────────────────────────────
function StatBand() {
  const { t } = useLang();
  return (
    <section className="section wrap" data-track-section="stats">
      <div className="statband">
        <div className="statband-grid">
          {["1", "2", "3", "4"].map((k, i) => (
            <Reveal key={k} delay={i * 70} className="sb-item">
              <div className="sb-num">{t(`stats.${k}.n`)}</div>
              <div className="sb-lbl">{t(`stats.${k}.l`)}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── About Daniel ─────────────────────────────────────────────────────────
function About() {
  const { t } = useLang();
  const feats = [
    { ico: "heart",   k: "f1" },
    { ico: "sliders", k: "f2" },
    { ico: "headset", k: "f3" },
    { ico: "user",    k: "f4" },
  ];
  return (
    <section className="section wrap" data-track-section="about">
      <Reveal><span className="eyebrow green">{t("about.eyebrow")}</span></Reveal>

      <div className="about">
        <Reveal delay={120}>
          <div className="about-body">
            <h2 className="about-h">
              {t("about.h.1")} <br />
              {t("about.h.2")} <br />
              <span className="acc-hl">{t("about.h.3")}</span>
            </h2>
            <p className="lede">{t("about.p1")}</p>
            <p className="lede">{t("about.p2")}</p>

            <div className="about-feats">
              {feats.map((f) => (
                <div className="about-feat" key={f.k}>
                  <span className="af-ic"><Icon name={f.ico} size={20} stroke={1.9} /></span>
                  <div>
                    <h4>{t(`about.${f.k}.h`)}</h4>
                    <p>{t(`about.${f.k}.t`)}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="cred-card">
              <img src="assets/ai-certified-agent.png" alt="A.I. Certified Agent" className="cred-badge" />
              <div className="cred-text">
                <span className="cred-label">{t("about.cred.label")}</span>
                <p>
                  {t("about.cred.text.1")}<b>{t("about.cred.text.b")}</b>{t("about.cred.text.2")}
                </p>
                <p className="cred-press-note">{t("about.cred.note")}</p>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={200}>
          <div className="about-right">
            <div className="about-photo">
              <img className="ph-img" src="assets/founder.png" alt="Daniel Rivera – Gründer iMMOKi Digital, A.I. Certified Agent" loading="lazy" />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Certification (Krem Institute + Press) ────────────────────────────────
function Certification() {
  return (
    <section className="section bone" id="zertifizierung" data-track-section="certification">
      <div className="wrap">
        <Reveal><span className="eyebrow">Zertifizierung &amp; Anerkennung</span></Reveal>
        <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
          Offiziell zertifiziert vom <br />
          <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>Krem Institute of Artificial Intelligence (USA).</span>
        </Reveal>

        <div className="cert-grid">
          <Reveal delay={120}>
            <div className="cert-card">
              <img src="assets/krem-institute.png" alt="Krem Institute of Artificial Intelligence" className="cert-krem-logo" />
              <div className="cert-content">
                <p className="cert-lede">
                  Daniel Rivera ist <b>A.I. Certified Agent™</b>, zertifiziert vom
                  <b> Krem Institute of Artificial Intelligence</b>, dem
                  <b> weltweit ersten A.I.-Institut für Immobilienmakler</b>.
                </p>
                <ul className="cert-bullets">
                  <li>
                    <span className="cb-ic"><Icon name="check" size={11} stroke={3}/></span>
                    Weltweit erstes A.I.-Institut speziell für Immobilienmakler
                  </li>
                  <li>
                    <span className="cb-ic"><Icon name="check" size={11} stroke={3}/></span>
                    Tausende Stunden Forschung &amp; Entwicklung zu A.I. in der Immobilienbranche
                  </li>
                  <li>
                    <span className="cb-ic"><Icon name="check" size={11} stroke={3}/></span>
                    Offizielle Zertifizierung als A.I. Certified Agent™. International anerkannt.
                  </li>
                </ul>
              </div>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="press-strip">
              <p className="press-label">
                Das Krem Institute wurde u.a. vorgestellt in:
              </p>
              <div className="press-logos">
                <img src="assets/as-seen-on.png" onError={(e)=>{const s=e.target.closest('.press-strip');if(s)s.style.display='none';}} alt="Forbes, Fox, USA Today, Google News, American Business Stars, Moguls of Business, Stars of Entrepreneurship, New York Business Now, MarketWatch, The US Times, Business Sharks, Future Millionaires, Benzinga, The Chronicle Journal, Digital Journal" />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Guarantee ────────────────────────────────────────────────────────────
function Guarantee() {
  const { t } = useLang();
  const accent = { color: "var(--green)", fontStyle: "italic", fontWeight: 500 };
  const cards = [
    { ico: "target",  k: "c1", no: "01" },
    { ico: "sliders", k: "c2", no: "02" },
    { ico: "headset", k: "c3", no: "03" },
  ];
  const stats = [
    { ico: "users",    k: "s1" },
    { ico: "calendar", k: "s2" },
    { ico: "chat",     k: "s3" },
    { ico: "trend",    k: "s4" },
  ];
  return (
    <section className="section wrap" style={{ paddingTop: 0 }} data-track-section="guarantee">
      <Reveal><span className="eyebrow green">{t("guar.eyebrow")}</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        {t("guar.title.a")} <br />
        <span style={accent}>{t("guar.title.b")}</span>
      </Reveal>
      <Reveal delay={160}>
        <p className="lede" style={{ maxWidth: 660 }}>{t("guar.lead")}</p>
      </Reveal>

      <div className="g2-cards">
        {cards.map((c, i) => (
          <Reveal key={c.no} delay={i * 80} className="g2-card">
            <span className="ic"><Icon name={c.ico} size={18} stroke={2}/></span>
            <span className="step-no">GARANTIE {c.no}</span>
            <h4>{t("guar." + c.k + ".t")}</h4>
            <p>{t("guar." + c.k + ".d")}</p>
            <ul className="g2-checks">
              {[1, 2, 3].map((b) => (
                <li key={b}><span className="ck"><Icon name="check" size={11} stroke={3}/></span>{t("guar." + c.k + ".b" + b)}</li>
              ))}
            </ul>
            <p className="g2-note">{t("guar." + c.k + ".f")} <span style={accent}>{t("guar." + c.k + ".fb")}</span></p>
          </Reveal>
        ))}
      </div>

      <Reveal className="g2-quote">
        <p className="g2-quote-text">{t("guar.quote.a")} <span style={accent}>{t("guar.quote.b")}</span></p>
        <span className="g2-quote-sign">{t("guar.quote.sign")}</span>
        <span className="g2-quote-role">{t("guar.quote.role")}</span>
      </Reveal>

      <Reveal className="g2-res">
        <div className="g2-res-head">
          <span className="ic"><Icon name="trophy" size={18} stroke={2}/></span>
          <h3 className="g2-res-title">{t("guar.res.a")} <span style={accent}>{t("guar.res.b")}</span></h3>
        </div>
        <div className="g2-stats">
          {stats.map((s) => (
            <div className="g2-stat" key={s.k}>
              <span className="ic"><Icon name={s.ico} size={18} stroke={2}/></span>
              <span>{t("guar.res." + s.k)}</span>
            </div>
          ))}
        </div>
        <div className="g2-strip">
          <Icon name="shield" size={16} stroke={2}/>
          <span>{t("guar.res.strip")} <span className="g2-strip-em">{t("guar.res.stripb")}</span></span>
        </div>
      </Reveal>
    </section>
  );
}

// ─── Pricing ──────────────────────────────────────────────────────────────
const INCLUDES = [
  "Kostenloses Erstgespräch mit Live-Demo und Analyse",
  "Individuelle Einrichtung, abgestimmt auf Objekte, Kanäle, Arbeitsweise",
  "Kanäle: WhatsApp, E-Mail, Immobilienportale (ImmoScout, Immowelt), Instagram, Website",
  "Wichtige Fragen direkt im Erstkontakt geklärt",
  "Besichtigungstermine direkt in Ihren Kalender",
  "Laufende Betreuung, Anpassungen und Optimierungen",
  "Direkte Einbindung bei unklaren oder wichtigen Anfragen",
  "Die iMMOKi Digital Garantie",
];

// ─── Pricing → Collaboration framing ──────────────────────────────────────
const COLLAB = [
  "Wir schauen uns gemeinsam Ihren aktuellen Alltag an",
  "Alles wird auf Ihre Objekte & Abläufe abgestimmt",
  "Interessenten erhalten schnelle und passende Antworten",
  "Sie bleiben bei wichtigen Themen eingebunden",
  `Laufende Anpassungen statt „einmal einrichten und fertig"`,
  "Direkter Ansprechpartner statt Ticketsystem",
];

function Pricing({ onBook }) {
  const { t } = useLang();
  return (
    <section className="section bone" id="zusammenarbeit" data-track-section="pricing" data-track-cta-location="pricing">
      <div className="wrap">
        <Reveal><span className="eyebrow">{t("price.eyebrow")}</span></Reveal>
        <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
          {t("price.h.1")} <br />
          <span style={{ color: "var(--muted)" }}>{t("price.h.2")}<br />{t("price.h.3")}</span>
        </Reveal>

        <div className="price-wrap">
          <Reveal delay={80} className="price-card">
            <div className="collab-head">
              <span className="collab-ic"><Icon name="user" size={16} stroke={2.2}/></span>
              <div>
                <h3 style={{ margin: 0 }}>{t("price.col.h")}</h3>
                <p className="sub" style={{ marginTop: 6 }}>{t("price.col.sub")}</p>
              </div>
            </div>

            <ul className="collab-list">
              {[1,2,3,4,5].map((n) => (
                <li key={n}>
                  <span className="ck"><Icon name="check" size={11} stroke={3}/></span>
                  <span>{t(`price.col.${n}`)}</span>
                </li>
              ))}
            </ul>

            <button className="btn btn-primary btn-block" style={{ marginTop: 28 }} onClick={onBook}>
              {t("price.cta")} <Icon name="arrow-right" size={16} className="arr"/>
            </button>
            <p style={{ marginTop: 12, fontSize: 13, color: "var(--muted-2)", textAlign: "center" }}>{t("price.fine")}</p>
          </Reveal>

          <Reveal delay={160} className="price-side">
            <div style={{ position: "relative" }}>
              <span className="eyebrow" style={{ background: "rgba(255,255,255,.10)", color:"#cfe9dd" }}>{t("price.side.eyebrow")}</span>
              <h4 style={{ marginTop: 14 }}>{t("price.side.h")}</h4>
              <p style={{ marginTop: 10 }}>{t("price.side.p.1")}</p>
            </div>
            <div style={{ position: "relative", fontSize: 13.5, color: "rgba(255,255,255,.78)", marginTop: "auto", lineHeight: 1.55 }}>
              {t("price.side.note")}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Objections + FAQ ─────────────────────────────────────────────────────
const OBJECTIONS = [
  { q: "Ich habe keine Zeit, mich damit zu beschäftigen.", a: "Müssen Sie nicht. Ihr einziger Aufwand ist das Erstgespräch zu Beginn. Wir hören zu, verstehen Ihre Objekte und Abläufe – und richten alles ein. Danach läuft es ohne Ihren Aufwand." },
  { q: "Ich will nicht, dass etwas mit meinen Kunden schreibt, das ich nicht kontrolliere.", a: "Verständlich – genau deshalb richten wir alles gemeinsam mit Ihnen ein. Geantwortet wird ausschließlich, was Sie freigegeben haben. Sobald eine Anfrage nicht eindeutig ist, werden Sie sofort direkt eingebunden." },
  { q: "Was, wenn eine falsche Antwort rausgeht?", a: "Antworten erfolgen nur auf Basis der Objektinformationen, die Sie uns geben. Bei allem, was nicht klar beantwortet werden kann, wird sofort an Sie eskaliert. Sie entscheiden – nicht die Technik." },
  { q: "Ich habe schon onOffice – reicht das nicht?", a: "onOffice ist ein Verwaltungstool. Wir übernehmen die aktive Kommunikation mit Interessenten: Nachrichten beantworten, Rückfragen klären, Termine abstimmen, nachfassen. Beides ergänzt sich. Es ersetzt nichts, das Sie bereits nutzen." },
];

function Objections() {
  return (
    <section className="section wrap" data-track-section="objections">
      <Reveal><span className="eyebrow navy">Häufige Bedenken</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        Was Makler vorher fragen.
      </Reveal>

      <div className="obj-grid">
        {OBJECTIONS.map((o, i) => (
          <Reveal key={i} delay={i * 60} className="obj">
            <div className="q">{o.q}</div>
            <p className="a">{o.a}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

const FAQS = [
  { q: "Muss ich etwas in meinem Alltag umstellen?", a: "Nein. Die Abläufe werden gemeinsam auf Ihren Makler-Alltag angepasst. Ziel ist weniger manuelle Arbeit und kein zusätzlicher Aufwand." },
  { q: "Wie läuft die Einrichtung ab?", a: "Im ersten gemeinsamen Gespräch schauen wir:\n\n• wo Ihre meisten Anfragen herkommen\n• welche Fragen sich ständig wiederholen\n• welche Abläufe aktuell Zeit kosten\n• und welche Kanäle sinnvoll eingebunden werden sollen\n\nDanach wird alles gemeinsam eingerichtet und auf Ihren Ablauf angepasst." },
  { q: "Wie sieht der unverbindliche Live-Einblick aus?", a: "Wir schauen uns gemeinsam an, wie Ihre Interessenten-Anfragen aktuell ablaufen, wo Zeit verloren geht und wie wiederkehrende Fragen übernommen werden können.\n\nKein Technik-Termin. Kein Verkaufsdruck." },
  { q: "Ich bin mir nicht sicher, ob das bei uns passt.", a: "Genau dafür ist der Live-Einblick da. Gemeinsam schauen wir auf Ihren aktuellen Ablauf und prüfen, welche Lösung sinnvoll zu Ihrem Makler-Alltag passt." },
];

function FAQ() {
  const { t } = useLang();
  const [open, setOpen] = useS(0);
  return (
    <section className="section wrap" style={{ paddingTop: 0 }} data-track-section="faq">
      <Reveal><span className="eyebrow">{t("faq.eyebrow")}</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>{t("faq.h")}</Reveal>

      <Reveal delay={120}>
        <div className="faq-trust">
          <span className="ftr-item"><span className="ftr-ic"><Icon name="check" size={11} stroke={3}/></span> {t("faq.trust.1")}</span>
          <span className="ftr-item"><span className="ftr-ic"><Icon name="check" size={11} stroke={3}/></span> {t("faq.trust.2")}</span>
          <span className="ftr-item"><span className="ftr-ic"><Icon name="check" size={11} stroke={3}/></span> {t("faq.trust.3")}</span>
          <span className="ftr-item"><span className="ftr-ic"><Icon name="check" size={11} stroke={3}/></span> {t("faq.trust.4")}</span>
        </div>
      </Reveal>

      <div className="faq">
        {[1,2,3,4,5].map((n, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className={"faq-item " + (isOpen ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                <span>{t(`faq.${n}.q`)}</span>
                <span className="ic"><Icon name="plus" size={14} stroke={2.4} /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: isOpen ? 400 : 0 }}>
                <div className="faq-a-inner">{t(`faq.${n}.a`)}</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────
function FinalCTA({ onBook }) {
  const { t } = useLang();
  return (
    <section className="wrap" style={{ paddingBottom: 56 }} data-track-section="final_cta" data-track-cta-location="final_cta">
      <Reveal>
        <div className="final">
          <span className="eyebrow" style={{ background: "rgba(255,255,255,.1)", color: "#fff" }}>{t("fin.eyebrow")}</span>
          <h2 style={{ marginTop: 18 }}>{t("fin.h.1")} <br/> {t("fin.h.2")}</h2>
          <p>{t("fin.p1")}</p>
          <div className="ctas">
            <button className="btn btn-primary" onClick={onBook}>
              {t("fin.cta")} <Icon name="arrow-right" size={16} className="arr"/>
            </button>
          </div>
          <div className="final-micro">
            <span className="fm-strong">{t("fin.micro.1")}</span>
            <span>{t("fin.micro.2")}</span>
            <span>{t("fin.micro.3")}</span>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer() {
  const { t } = useLang();
  const go = (to) => (e) => { e.preventDefault(); if (window.__navigate) window.__navigate(to); else window.location.href = to; };
  return (
    <footer className="foot">
      <span className="foot-brand">{t("foot.brand")}</span>
      <span className="links">
        <a href="/impressum" onClick={go("/impressum")}>{t("foot.impressum")}</a>
        <a href="/datenschutz" onClick={go("/datenschutz")}>{t("foot.datenschutz")}</a>
        <a href="/agb" onClick={go("/agb")}>{t("foot.agb")}</a>
        <a href="/kontakt" onClick={go("/kontakt")}>{t("foot.kontakt")}</a>
        <a href="#" onClick={(e) => { e.preventDefault(); if (window.__openCookieSettings) window.__openCookieSettings(); }}>{window.__cookieSettingsLabel ? window.__cookieSettingsLabel() : "Cookie-Einstellungen"}</a>
      </span>
    </footer>
  );
}

// ─── Sticky Mobile CTA ────────────────────────────────────────────────────
function StickyMobileCTA({ onBook }) {
  const { t } = useLang();
  const [visible, setVisible] = useS(false);
  useE(() => {
    let last = 0;
    const onScroll = () => {
      const y = window.scrollY;
      const max = (document.documentElement.scrollHeight - window.innerHeight);
      const shouldShow = y > 600 && y < max - 200;
      setVisible(shouldShow);
      last = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta " + (visible ? "visible" : "")} role="region" aria-label={t("sticky.h")}>
      <span className="meta">
        <b>{t("sticky.h")}</b>
        <small>{t("sticky.sub")}</small>
      </span>
      <button className="btn btn-primary" onClick={onBook}>
        {t("sticky.cta")} <Icon name="arrow-right" size={14} className="arr"/>
      </button>
    </div>
  );
}

// ─── Fit (für wen / für wen nicht) ────────────────────────────────────────
const FIT_FOR = [
  "Einzelmakler & kleine Maklerbüros (1–10 Mitarbeitende)",
  "20+ Anfragen pro Monat über mehrere Kanäle",
  "Wer Anfragen schneller beantworten möchte – ohne neues Tool",
  "Wer die volle Kontrolle behalten will",
];
const FIT_NOT = [
  "Große Franchise-Strukturen mit eigener IT-Abteilung",
  "Wer eine reine Self-Service-Software sucht",
  "Wer den Erstkontakt grundsätzlich selbst führen möchte",
  "Wer < 5 Anfragen pro Monat hat",
];

function Fit() {
  return (
    <section className="section wrap" data-track-section="fit">
      <Reveal><span className="eyebrow navy">Ehrlich: Passt das zu Ihnen?</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        Für wen das gedacht ist. <br />
        <span style={{ color: "var(--muted)" }}>Und für wen nicht.</span>
      </Reveal>

      <div className="fit-grid">
        <Reveal delay={80} className="fit-card fit-yes">
          <span className="fit-head">
            <span className="fit-ic"><Icon name="check" size={16} stroke={2.6}/></span>
            <span>Passt zu Ihnen, wenn:</span>
          </span>
          <ul className="fit-list">
            {FIT_FOR.map((t, i) => (
              <li key={i}>
                <span className="li-ic" style={{ background: "var(--green-tint)", color: "var(--green)" }}>
                  <Icon name="check" size={11} stroke={3}/>
                </span>
                {t}
              </li>
            ))}
          </ul>
        </Reveal>

        <Reveal delay={140} className="fit-card fit-no">
          <span className="fit-head">
            <span className="fit-ic" style={{ background: "rgba(7,18,43,.06)", color: "var(--ink-2)" }}>
              <Icon name="x" size={14} stroke={2.6}/>
            </span>
            <span>Passt eher nicht, wenn:</span>
          </span>
          <ul className="fit-list">
            {FIT_NOT.map((t, i) => (
              <li key={i}>
                <span className="li-ic" style={{ background: "rgba(7,18,43,.06)", color: "var(--ink-2)" }}>
                  <Icon name="x" size={11} stroke={3}/>
                </span>
                <span style={{ color: "var(--muted)" }}>{t}</span>
              </li>
            ))}
          </ul>
        </Reveal>
      </div>

      <Reveal>
        <p className="fit-foot">
          Im Erstgespräch sagen wir Ihnen ehrlich, ob es für Sie sinnvoll ist – oder eben nicht.
        </p>
      </Reveal>
    </section>
  );
}

// ─── Differentiation — "Klassische Software vs unser System" ──────────────
const DIFFS = [
  { old: "Speichert Kontakte und Vorgänge", neu: "Interessenten erhalten direkt eine passende Rückmeldung" },
  { old: "Wartet darauf, dass Sie sich kümmern", neu: "Klärt wichtige Fragen direkt im Erstkontakt" },
  { old: "Oft unpersönliche oder verspätete Antworten", neu: "Antworten abgestimmt auf Ihre Objekte und Vorgaben" },
  { old: "Sie müssen alles selbst einrichten und pflegen", neu: "Einrichtung, Betreuung und laufende Anpassung inklusive" },
  { old: "Mehr Aufwand im ohnehin vollen Alltag", neu: "Läuft im Hintergrund, während Sie sich auf Abschlüsse konzentrieren" },
];

function Differentiation() {
  const { t } = useLang();
  return (
    <section className="section wrap" id="diff" data-track-section="differentiation">
      <div className="qual-card">
        <div className="qual-intro">
          <Reveal as="h2" className="qual-h">{t("qual.h.1")}<br/>{t("qual.h.2")}</Reveal>
          <Reveal delay={120}><p className="qual-lede">{t("qual.lede")}</p></Reveal>
        </div>

        <Reveal delay={80} className="qual-compare">
          <div className="qc-col qc-yes">
            <div className="qc-head">
              <span className="qc-badge qc-badge-yes"><Icon name="check" size={13} stroke={3}/></span>
              {t("qual.yes.title")}
            </div>
            <ul>
              <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.1")}</li>
              <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.2")}</li>
              <li><span className="qc-ic qc-ic-yes"><Icon name="check" size={11} stroke={3}/></span>{t("qual.yes.3")}</li>
            </ul>
          </div>
          <div className="qc-col qc-no">
            <div className="qc-head">
              <span className="qc-badge qc-badge-no"><Icon name="x" size={13} stroke={3}/></span>
              {t("qual.no.title")}
            </div>
            <ul>
              <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.1")}</li>
              <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.2")}</li>
              <li><span className="qc-ic qc-ic-no"><Icon name="x" size={11} stroke={3}/></span>{t("qual.no.3")}</li>
            </ul>
          </div>
        </Reveal>

        <Reveal delay={160} className="qual-benefits">
          <div className="qb-item">
            <span className="qb-ic"><Icon name="user" size={20} stroke={1.8}/></span>
            <div><b>{t("qual.b1.h")}</b><span>{t("qual.b1.p")}</span></div>
          </div>
          <div className="qb-item">
            <span className="qb-ic"><Icon name="filter" size={20} stroke={1.8}/></span>
            <div><b>{t("qual.b2.h")}</b><span>{t("qual.b2.p")}</span></div>
          </div>
          <div className="qb-item">
            <span className="qb-ic"><Icon name="clock" size={20} stroke={1.8}/></span>
            <div><b>{t("qual.b3.h")}</b><span>{t("qual.b3.p")}</span></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── After-Viewing Follow-up ──────────────────────────────────────────────
const FOLLOWUP_STEPS = [
  {
    title: "Feedback wird eingeholt",
    text: "Eine kurze, freundliche Nachricht direkt nach dem Termin – ehrliche Rückmeldung statt Funkstille.",
  },
  {
    title: "Interesse wird nachgefasst",
    text: "Hat der Interessent noch Fragen? Kommt die Wohnung in die engere Auswahl? Wird im Gespräch geklärt.",
  },
  {
    title: "Unterlagen werden angefordert",
    text: "Finanzierungsbestätigung, Selbstauskunft oder Identitätsnachweis – freundlich angefragt, ohne dass Sie hinterherrennen müssen.",
  },
  {
    title: "Nächster Schritt wird abgestimmt",
    text: "Zweite Besichtigung, Notartermin, Bedenkzeit – der nächste konkrete Schritt wird vereinbart, statt offen zu bleiben.",
  },
];

function Followup() {
  const { t } = useLang();
  return (
    <section className="section wrap" id="nachbereitung" data-track-section="followup">
      <Reveal><span className="eyebrow green">{t("fu.eyebrow")}</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        {t("fu.h.1")} <br />
        <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>{t("fu.h.2")}</span>
      </Reveal>
      <Reveal delay={160}>
        <p className="lede" style={{ maxWidth: 660 }}>{t("fu.lede")}</p>
      </Reveal>

      <div className="fu-grid">
        {[1,2,3,4].map((n, i) => (
          <Reveal key={i} delay={i * 70} className="fu-card">
            <span className="fu-num">{String(i + 1).padStart(2, "0")}</span>
            <div className="fu-body">
              <h4 className="fu-title">{t(`fu.${n}.t`)}</h4>
              <p className="fu-text">{t(`fu.${n}.d`)}</p>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div className="fu-close">
          {t("fu.close.1")}{" "}
          <b>{t("fu.close.2")}</b>
        </div>
      </Reveal>

      <Reveal>
        <div className="results-strip">
          <div className="rs-item"><span>{t("fu.rs.1")}</span></div>
          <div className="rs-item"><span>{t("fu.rs.2")}</span></div>
          <div className="rs-item"><span>{t("fu.rs.3")}</span></div>
          <div className="rs-item"><span>{t("fu.rs.4")}</span></div>
          <div className="rs-item rs-flip"><span>{t("fu.rs.5")}</span></div>
          <div className="rs-item rs-flip"><span>{t("fu.rs.6")}</span></div>
        </div>
      </Reveal>
    </section>
  );
}

// ─── Before / After transformation ────────────────────────────────────────
const BEFORE_AFTER = {
  before: [
    "Nachrichtenchaos über WhatsApp, E-Mail und Telefon",
    "Besichtigungen mit Interessenten ohne Finanzierung",
    "Antworten gehen oft erst Stunden später raus",
    "Nach der Besichtigung: Funkstille",
    "Sonntagabend noch Nachrichten beantworten",
    "Stunden für immer dieselben Standardfragen",
  ],
  after: [
    "Strukturierte Anfragen über alle Kanäle hinweg",
    "Besichtigungen nur mit ernsthaften Käufern",
    "Antworten gehen sofort raus, auch ohne Sie",
    "Automatisches Nachfassen mit jedem Interessenten",
    "Freier Feierabend ohne ständiges Antworten",
    "Mehr Zeit für Verkaufsgespräche und Abschlüsse",
  ],
};

function BeforeAfter() {
  return (
    <section className="section wrap" data-track-section="before_after">
      <Reveal><span className="eyebrow navy">Die Transformation</span></Reveal>
      <Reveal delay={80} as="h2" style={{ marginTop: 18 }}>
        Vorher Nachrichtenchaos. <br />
        <span style={{ color: "var(--green)", fontStyle: "italic", fontWeight: 500 }}>Nachher klare Tage.</span>
      </Reveal>

      <div className="ba-grid">
        <Reveal delay={80} className="ba-card ba-before">
          <div className="ba-head">
            <span className="ba-tag">Vorher</span>
            <h4>Ihr aktueller Alltag</h4>
          </div>
          <ul>
            {BEFORE_AFTER.before.map((t, i) => (
              <li key={i}>
                <span className="ba-ic ba-x"><Icon name="x" size={11} stroke={3}/></span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </Reveal>

        <span className="ba-arrow" aria-hidden="true">
          <Icon name="arrow-right" size={22} stroke={2.2}/>
        </span>

        <Reveal delay={160} className="ba-card ba-after">
          <div className="ba-head">
            <span className="ba-tag">Nachher</span>
            <h4>Mit iMMOKi Digital</h4>
          </div>
          <ul>
            {BEFORE_AFTER.after.map((t, i) => (
              <li key={i}>
                <span className="ba-ic ba-check"><Icon name="check" size={11} stroke={3}/></span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </Reveal>
      </div>

      <Reveal>
        <div className="ba-foot">
          <b>Makler mit iMMOKi Digital gewinnen bis zu 15 Stunden pro Woche zurück.</b>
          <span>Zeit, die für Verkauf, Besichtigungen und echte Käufer da ist. Nicht für Nachrichten und Nachfassen.</span>
        </div>
      </Reveal>
    </section>
  );
}

Object.assign(window, {
  Reveal, Nav, Hero, Pain, Solution, HowItWorks, Demo, WhyUs, Integrations,
  Testimonials, About, Certification, Guarantee, Pricing, Objections, FAQ, FinalCTA, Footer,
  StickyMobileCTA, Fit, Differentiation, Followup, BeforeAfter, CookieConsent,
});

// ─── Cookie consent banner (DE/ES, consent-gated Clarity) ────────────────────
const CC_CONSENT_KEY = "immoki_cookie_consent";
const CC_TEXT = {
  de: {
    title: "Cookies & Analyse",
    body: "Wir verwenden technisch notwendige Cookies sowie – mit Ihrer Zustimmung – Microsoft Clarity, um die Nutzung der Seite anonymisiert zu analysieren und sie zu verbessern. Sie können Ihre Wahl jederzeit ändern.",
    accept: "Alle akzeptieren", decline: "Nur notwendige", privacy: "Datenschutz", settings: "Cookie-Einstellungen",
  },
  es: {
    title: "Cookies y análisis",
    body: "Utilizamos cookies técnicamente necesarias y, con su consentimiento, Microsoft Clarity para analizar el uso de la página de forma anónima y mejorarla. Puede cambiar su elección en cualquier momento.",
    accept: "Aceptar todo", decline: "Solo necesarias", privacy: "Privacidad", settings: "Configuración de cookies",
  },
};
const CC_LISTENERS = new Set();
window.__openCookieSettings = function () { CC_LISTENERS.forEach((fn) => fn()); };
window.__cookieSettingsLabel = function () {
  const l = window.__getLang ? window.__getLang() : "de";
  return (CC_TEXT[l] || CC_TEXT.de).settings;
};

function CookieConsent() {
  const { lang } = useLang();
  const tx = CC_TEXT[lang] || CC_TEXT.de;
  const [open, setOpen] = useS(() => {
    try { return !localStorage.getItem(CC_CONSENT_KEY); } catch (e) { return true; }
  });
  useE(() => {
    const reopen = () => setOpen(true);
    CC_LISTENERS.add(reopen);
    return () => { CC_LISTENERS.delete(reopen); };
  }, []);
  const choose = (v) => {
    try { localStorage.setItem(CC_CONSENT_KEY, v); } catch (e) {}
    // Load Clarity ONLY on explicit acceptance — never on "Nur notwendige".
    if (v === "accepted" && window.__loadClarity) window.__loadClarity();
    if (window.track) window.track("cookie_consent", { choice: v });
    setOpen(false);
  };
  if (!open) return null;
  return (
    <div className="cc-banner" role="dialog" aria-label={tx.title}>
      <div className="cc-inner">
        <div className="cc-text">
          <b>{tx.title}</b>
          <p>{tx.body} <a href="#" className="cc-link" onClick={(e) => { e.preventDefault(); if (window.__openLegal) window.__openLegal("datenschutz"); }}>{tx.privacy}</a></p>
        </div>
        <div className="cc-actions">
          <button type="button" className="cc-btn cc-decline" onClick={() => choose("declined")}>{tx.decline}</button>
          <button type="button" className="cc-btn cc-accept" onClick={() => choose("accepted")}>{tx.accept}</button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { CookieConsent });

// ─── Legal pages (Impressum / Datenschutz / AGB / Kontakt) — own URLs ──────────
// Navigate to a dedicated legal page (rendered full-screen by the router in app.jsx).
window.__openLegal = function (page) { if (window.__navigate) window.__navigate("/" + page); };

const LEGAL = {
  de: {
    close: "Schließen",
    impressum: {
      title: "Impressum",
      blocks: [
        { h: "Angaben gemäß § 5 DDG", p: "iMMOKi Digital\nInhaber: Daniel Borge Rivera\nVon-Ketteler-Straße 24\n53229 Bonn\nDeutschland" },
        { h: "Kontakt", p: "Telefon: 01517 0088522\nE-Mail: info@immoki-digital.de" },
        { h: "Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV", p: "Daniel Borge Rivera, Anschrift wie oben." },
        { h: "Haftung für Inhalte", p: "Als Diensteanbieter sind wir gemäß § 7 Abs. 1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Eine diesbezügliche Haftung ist erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden entsprechender Rechtsverletzungen entfernen wir diese Inhalte umgehend." },
        { h: "Haftung für Links", p: "Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber verantwortlich. Bei Bekanntwerden von Rechtsverletzungen entfernen wir derartige Links umgehend." },
        { h: "Urheberrecht", p: "Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet." },
        { h: "Verbraucherstreitbeilegung / OS-Plattform", p: "Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/\n\nWir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen (§ 36 VSBG)." },
        { h: "Hinweis zur Nutzung künstlicher Intelligenz (KI)", p: "Teile der Texte auf dieser Website wurden mit Unterstützung von künstlicher Intelligenz (KI) erstellt. Diese Inhalte dienen ausschließlich Informationszwecken. Trotz sorgfältiger Prüfung übernehmen wir keine Haftung für etwaige Fehler oder Ungenauigkeiten." },
      ],
    },
    datenschutz: {
      title: "Datenschutzerklärung",
      blocks: [
        { h: "1. Verantwortlicher", p: "Verantwortlich für die Datenverarbeitung auf dieser Website ist:\niMMOKi Digital, Inhaber Daniel Borge Rivera\nVon-Ketteler-Straße 24, 53229 Bonn\nTelefon: 01517 0088522\nE-Mail: info@immoki-digital.de" },
        { h: "2. Verwendete Begrifflichkeiten", p: "„Personenbezogene Daten“ sind alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person beziehen. „Verarbeitung“ ist jeder Vorgang im Zusammenhang mit personenbezogenen Daten. „Verantwortlicher“ ist die Stelle, die über Zwecke und Mittel der Verarbeitung entscheidet. Im Übrigen gelten die Begriffsbestimmungen des Art. 4 DSGVO." },
        { h: "3. Maßgebliche Rechtsgrundlagen", p: "Rechtsgrundlage für Einwilligungen ist Art. 6 Abs. 1 lit. a DSGVO. Rechtsgrundlage für die Erfüllung vertraglicher Leistungen und die Beantwortung von Anfragen ist Art. 6 Abs. 1 lit. b DSGVO. Rechtsgrundlage für rechtliche Verpflichtungen ist Art. 6 Abs. 1 lit. c DSGVO. Rechtsgrundlage für die Wahrung berechtigter Interessen ist Art. 6 Abs. 1 lit. f DSGVO." },
        { h: "4. Sicherheitsmaßnahmen", p: "Wir treffen nach Art. 32 DSGVO geeignete technische und organisatorische Maßnahmen, um ein dem Risiko angemessenes Schutzniveau zu gewährleisten (u. a. verschlüsselte Übertragung per SSL/TLS, Zugriffsbeschränkungen, regelmäßige Prüfung). Wir berücksichtigen den Schutz personenbezogener Daten bereits bei der Auswahl von Software und Verfahren (Art. 25 DSGVO)." },
        { h: "5. Zugriffsdaten / Server-Logfiles", p: "Beim Aufruf der Website werden automatisch Informationen erfasst, die Ihr Browser übermittelt (z. B. Browsertyp, Betriebssystem, Referrer-URL, Uhrzeit der Anfrage, IP-Adresse in gekürzter Form). Diese Daten dienen der technischen Bereitstellung und Sicherheit der Website. Logfiles werden aus Sicherheitsgründen für maximal 7 Tage gespeichert. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO." },
        { h: "6. Hosting", p: "Diese Website wird bei einem Hosting-Anbieter betrieben, der in unserem Auftrag personenbezogene Daten (Zugriffsdaten, Kontaktdaten, Inhaltsdaten) verarbeitet. Grundlage ist unser berechtigtes Interesse an einer sicheren Bereitstellung gemäß Art. 6 Abs. 1 lit. f DSGVO i. V. m. Art. 28 DSGVO (Auftragsverarbeitungsvertrag)." },
        { h: "7. Kontakt- und Erstgespräch-Formular", p: "Wenn Sie unser Formular nutzen, verarbeiten wir die angegebenen Daten (Name, E-Mail, Telefon, Maklerbüro, Angaben zu Anfragen) ausschließlich zur Bearbeitung Ihrer Anfrage und zur Terminvereinbarung. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO. Die Daten werden gelöscht, sobald sie für den Zweck nicht mehr erforderlich sind und keine gesetzlichen Aufbewahrungspflichten entgegenstehen." },
        { h: "8. Terminbuchung (Cal.com)", p: "Für die Vereinbarung eines Erstgesprächs nutzen wir ggf. einen externen Buchungsdienst. Die von Ihnen dort angegebenen Daten werden zur Terminorganisation verarbeitet. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO." },
        { h: "9. Newsletter & kostenlose Downloads", p: "Sofern Sie einen kostenlosen Download (z. B. ein PDF) anfordern oder unseren Newsletter abonnieren, verarbeiten wir Ihren Namen und Ihre E-Mail-Adresse, um Ihnen das Material zuzusenden und Sie über Angebote zu informieren. Die Anmeldung erfolgt im Double-Opt-In-Verfahren. Rechtsgrundlage ist Ihre Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO i. V. m. § 7 Abs. 2 UWG. Sie können den Newsletter jederzeit über den Abmeldelink am Ende jeder E-Mail abbestellen." },
        { h: "10. Microsoft Clarity", p: "Mit Ihrer Einwilligung nutzen wir Microsoft Clarity, einen Dienst der Microsoft Corporation (One Microsoft Way, Redmond, WA 98052, USA), zur Analyse des Nutzerverhaltens (Klicks, Scrollbewegungen, Sitzungsaufzeichnungen in anonymisierter Form) zur Verbesserung unseres Angebots. IP-Adressen werden gekürzt, sensible Eingaben maskiert. Eine Übermittlung in die USA kann nicht ausgeschlossen werden. Rechtsgrundlage ist Ihre Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO. Sie können Ihre Einwilligung jederzeit über die Cookie-Einstellungen im Seitenfuß widerrufen. Weitere Informationen: https://privacy.microsoft.com" },
        { h: "11. KI-Sprach- und Chat-Assistent (ElevenLabs)", p: "Auf dieser Website bieten wir einen KI-gestützten Sprach- und Chat-Assistenten an, der über die Technologie der ElevenLabs, Inc. (169 Madison Ave #2484, New York, NY 10016, USA) bereitgestellt wird. Der Assistent wird erst aktiv, wenn Sie ihn ausdrücklich starten (Schaltfläche „Gespräch starten“ bzw. „Chat starten“) und dem eingeblendeten Hinweis zustimmen. Im Sprachmodus werden Ihre Spracheingaben (Audioaufnahme über Ihr Mikrofon), die daraus erstellten Transkripte sowie die Antworten des Assistenten verarbeitet, um Ihre Anfrage zu beantworten. Dabei werden die Daten an Server von ElevenLabs übermittelt und können dort gespeichert werden. Rechtsgrundlage ist Ihre Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO, die Sie durch das Starten des Gesprächs und die Bestätigung des Hinweises erteilen, sowie Art. 6 Abs. 1 lit. b DSGVO zur Beantwortung Ihrer Anfrage. ElevenLabs, Inc. ist unter dem EU-US Data Privacy Framework zertifiziert; ergänzend kommen Standardvertragsklauseln nach Art. 46 DSGVO zur Anwendung. Bitte teilen Sie dem Assistenten keine besonderen Kategorien personenbezogener Daten (Art. 9 DSGVO, etwa Gesundheits- oder Finanzdaten) mit. Sie können das Gespräch jederzeit beenden. Weitere Informationen finden Sie in der Datenschutzerklärung von ElevenLabs: https://elevenlabs.io/privacy-policy" },
        { h: "12. Cookies & Einwilligung", p: "Wir verwenden technisch notwendige Cookies sowie – nach Ihrer Einwilligung – Analyse-Cookies. Notwendige Cookies sind für den Betrieb der Seite erforderlich (Rechtsgrundlage Art. 6 Abs. 1 lit. f DSGVO). Analyse-Cookies setzen wir nur mit Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO, § 25 Abs. 1 TDDDG). Ihre Auswahl können Sie jederzeit über den Link „Cookie-Einstellungen“ im Seitenfuß ändern." },
        { h: "13. Verarbeitung über n8n", p: "Zur Verarbeitung und Weiterleitung Ihrer Formularanfragen nutzen wir n8n (n8n Cloud, Server-Standort Deutschland/EU). Die von Ihnen im Formular angegebenen Daten werden dabei automatisiert verarbeitet und an unsere interne Lead-Verwaltung übergeben. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO. Die Verarbeitung erfolgt innerhalb der EU." },
        { h: "14. Google Sheets", p: "Zur Verwaltung eingehender Anfragen speichern wir die übermittelten Formulardaten in Google Sheets, einem Dienst der Google Ireland Ltd. Dabei kann eine Übermittlung in die USA nicht ausgeschlossen werden; Google ist unter dem EU-US Data Privacy Framework zertifiziert. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO." },
        { h: "15. Onlinepräsenzen in sozialen Medien", p: "Wir unterhalten Profile auf Instagram (Meta Platforms Ireland Ltd.) und LinkedIn (LinkedIn Ireland Unlimited Company) und verlinken darauf. Wenn Sie diese Profile besuchen, verarbeiten die jeweiligen Anbieter Ihre Daten in eigener Verantwortung, ggf. auch außerhalb der EU. Auf den Umfang dieser Verarbeitung haben wir keinen Einfluss. Rechtsgrundlage für unsere Präsenz ist unser berechtigtes Interesse an Kommunikation und Außendarstellung gemäß Art. 6 Abs. 1 lit. f DSGVO. Details finden Sie in den Datenschutzerklärungen von Instagram und LinkedIn." },
        { h: "16. Empfänger / Auftragsverarbeitung", p: "Personenbezogene Daten werden an Dienstleister (z. B. Hosting, Analyse, Terminbuchung) nur im Rahmen von Auftragsverarbeitungsverträgen gemäß Art. 28 DSGVO weitergegeben. Eine Weitergabe zu anderen Zwecken erfolgt nicht." },
        { h: "17. Übermittlung in Drittländer", p: "Sofern Daten in Drittländer (außerhalb der EU/des EWR) übermittelt werden, geschieht dies nur beim Vorliegen der Voraussetzungen der Art. 44 ff. DSGVO, etwa auf Grundlage von Angemessenheitsbeschlüssen (EU-US Data Privacy Framework), Standardvertragsklauseln oder Ihrer ausdrücklichen Einwilligung." },
        { h: "18. Speicherdauer", p: "Wir speichern personenbezogene Daten nur so lange, wie es für die genannten Zwecke erforderlich ist oder gesetzliche Aufbewahrungsfristen bestehen (insbesondere handels- und steuerrechtliche Fristen von 6 bzw. 10 Jahren). Danach werden die Daten gelöscht." },
        { h: "19. Ihre Rechte", p: "Sie haben das Recht auf Auskunft (Art. 15), Berichtigung (Art. 16), Löschung (Art. 17), Einschränkung der Verarbeitung (Art. 18), Datenübertragbarkeit (Art. 20) sowie Widerspruch (Art. 21 DSGVO). Erteilte Einwilligungen können Sie jederzeit mit Wirkung für die Zukunft widerrufen. Wenden Sie sich dazu an die oben genannten Kontaktdaten." },
        { h: "20. Widerspruch gegen Werbe-Mails", p: "Der Nutzung der im Impressum veröffentlichten Kontaktdaten zur Übersendung nicht ausdrücklich angeforderter Werbung wird hiermit widersprochen. Wir behalten uns rechtliche Schritte im Falle unverlangter Werbe-E-Mails (Spam) vor." },
        { h: "21. Beschwerderecht", p: "Sie haben das Recht, sich bei einer Datenschutz-Aufsichtsbehörde zu beschweren. Zuständig ist die Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen." },
        { h: "22. Hinweis zur Nutzung künstlicher Intelligenz (KI)", p: "Teile der Texte auf dieser Website wurden mit Unterstützung von KI erstellt. Diese Inhalte dienen ausschließlich Informationszwecken und enthalten keine personenbezogenen Daten." },
        { h: "23. Änderung der Datenschutzerklärung", p: "Wir behalten uns vor, diese Datenschutzerklärung anzupassen, wenn sich die Rechtslage, unser Angebot oder die Datenverarbeitung ändert. Bitte informieren Sie sich regelmäßig über den Inhalt." },
        { h: "Hinweis", p: "Diese Datenschutzerklärung ist eine Vorlage und sollte vor Veröffentlichung durch einen Anwalt oder einen Dienst wie eRecht24 geprüft und auf Ihr Unternehmen angepasst werden." },
      ],
    },
    agb: {
      title: "Allgemeine Geschäftsbedingungen",
      blocks: [
        { h: "1. Geltungsbereich", p: "Diese AGB gelten für die Dienstleistungen, die iMMOKi Digital, Inhaber Daniel Borge Rivera, gegenüber Unternehmern (§ 14 BGB), insbesondere Immobilienmaklern, erbringt. Diese Website dient der Information und der Vereinbarung eines unverbindlichen Erstgesprächs; ein Vertragsabschluss erfolgt nicht über die Website." },
        { h: "2. Leistungen", p: "Gegenstand ist die individuelle Einrichtung und laufende Betreuung eines Kommunikationssystems zur Bearbeitung von Interessentenanfragen. Es handelt sich um eine Dienstleistung, nicht um die Überlassung einer Standard-Software. Der genaue Leistungsumfang wird vor Beauftragung gemeinsam festgelegt und individuell vereinbart." },
        { h: "3. Zustandekommen des Vertrags", p: "Ein Vertrag kommt erst durch eine gesonderte, individuelle Vereinbarung zwischen iMMOKi Digital und dem Auftraggeber zustande (z. B. nach dem Erstgespräch). Über die Website werden keine kostenpflichtigen Leistungen gebucht." },
        { h: "4. Mitwirkung des Auftraggebers", p: "Der Auftraggeber stellt die für die Einrichtung erforderlichen Informationen (z. B. Objektdaten, freigegebene Antworten, Kanäle) bereit. Antworten erfolgen ausschließlich auf Basis der vom Auftraggeber freigegebenen Inhalte." },
        { h: "5. Laufzeit & Kündigung", p: "Es besteht keine Mindestvertragslaufzeit. Die laufende Betreuung ist monatlich kündbar, sofern individuell nichts anderes vereinbart wurde." },
        { h: "6. Vergütung", p: "Die Vergütung richtet sich nach der im Erstgespräch bzw. im individuellen Angebot getroffenen Vereinbarung." },
        { h: "7. Haftung", p: "iMMOKi Digital haftet nach den gesetzlichen Bestimmungen. Für leicht fahrlässige Pflichtverletzungen wird die Haftung auf den vertragstypischen, vorhersehbaren Schaden begrenzt, soweit gesetzlich zulässig." },
        { h: "Hinweis", p: "Diese AGB sind eine Vorlage und sollten vor Veröffentlichung rechtlich geprüft werden." },
      ],
    },
    kontakt: {
      title: "Kontakt",
      blocks: [
        { h: "iMMOKi Digital", p: "Inhaber: Daniel Borge Rivera\nVon-Ketteler-Straße 24\n53229 Bonn" },
        { h: "Telefon", p: "01517 0088522" },
        { h: "E-Mail", p: "info@immoki-digital.de" },
        { h: "Lieber direkt sprechen?", p: "Buchen Sie sich einen unverbindlichen Live-Einblick. Kein Verkaufsdruck, von Makler zu Makler.", cta: true },
      ],
    },
  },
  es: {
    close: "Cerrar",
    impressum: {
      title: "Aviso legal",
      blocks: [
        { h: "Datos según § 5 DDG (Alemania)", p: "iMMOKi Digital\nTitular: Daniel Borge Rivera\nVon-Ketteler-Straße 24\n53229 Bonn\nAlemania" },
        { h: "Contacto", p: "Teléfono: 01517 0088522\nCorreo: info@immoki-digital.de" },
        { h: "Responsable del contenido según § 18.2 MStV", p: "Daniel Borge Rivera, dirección como arriba." },
        { h: "Responsabilidad por los contenidos", p: "Como prestador de servicios somos responsables de los contenidos propios de estas páginas conforme a la legislación general (§ 7.1 DDG). No obstante, conforme a los §§ 8 a 10 DDG, no estamos obligados a supervisar la información ajena transmitida o almacenada, ni a investigar circunstancias que indiquen una actividad ilícita. Una responsabilidad al respecto solo es posible a partir del momento en que se tiene conocimiento de una infracción concreta. En cuanto tengamos conocimiento de tales infracciones, retiraremos dichos contenidos de inmediato." },
        { h: "Responsabilidad por los enlaces", p: "Nuestra oferta contiene enlaces a sitios web externos de terceros sobre cuyos contenidos no tenemos influencia. Por ello no podemos asumir ninguna garantía por dichos contenidos ajenos. Del contenido de las páginas enlazadas es siempre responsable el respectivo proveedor u operador. En cuanto tengamos conocimiento de infracciones, retiraremos dichos enlaces de inmediato." },
        { h: "Derechos de autor", p: "Los contenidos y obras creados por los operadores del sitio en estas páginas están sujetos a la legislación alemana de derechos de autor. La reproducción, edición, distribución y cualquier tipo de explotación fuera de los límites de los derechos de autor requieren el consentimiento por escrito del respectivo autor o creador. Las descargas y copias de este sitio solo se permiten para uso privado, no comercial." },
        { h: "Resolución de litigios en línea (OS)", p: "La Comisión Europea pone a disposición una plataforma de resolución de litigios en línea (OS): https://ec.europa.eu/consumers/odr/\n\nNo estamos dispuestos ni obligados a participar en procedimientos de resolución de litigios ante una junta de arbitraje de consumo (§ 36 VSBG)." },
        { h: "Aviso sobre el uso de inteligencia artificial (IA)", p: "Algunos textos de este sitio web se han elaborado con ayuda de inteligencia artificial (IA). Estos contenidos tienen una finalidad meramente informativa. A pesar de una revisión cuidadosa, no asumimos ninguna responsabilidad por posibles errores o inexactitudes." },
      ],
    },
    datenschutz: {
      title: "Política de privacidad",
      blocks: [
        { h: "1. Responsable", p: "Responsable del tratamiento de datos en este sitio web:\niMMOKi Digital, titular Daniel Borge Rivera\nVon-Ketteler-Straße 24, 53229 Bonn (Alemania)\nTeléfono: 01517 0088522\nCorreo: info@immoki-digital.de" },
        { h: "2. Conceptos utilizados", p: "«Datos personales» es toda información relativa a una persona física identificada o identificable. «Tratamiento» es toda operación realizada sobre datos personales. «Responsable» es la entidad que decide sobre los fines y medios del tratamiento. Por lo demás, rigen las definiciones del art. 4 RGPD." },
        { h: "3. Bases jurídicas aplicables", p: "La base jurídica para los consentimientos es el art. 6.1.a RGPD. La base para la ejecución de prestaciones contractuales y la respuesta a consultas es el art. 6.1.b RGPD. La base para el cumplimiento de obligaciones legales es el art. 6.1.c RGPD. La base para la salvaguarda de intereses legítimos es el art. 6.1.f RGPD." },
        { h: "4. Medidas de seguridad", p: "Adoptamos medidas técnicas y organizativas adecuadas conforme al art. 32 RGPD para garantizar un nivel de protección apropiado al riesgo (entre otras, transmisión cifrada mediante SSL/TLS, restricciones de acceso y revisiones periódicas). Tenemos en cuenta la protección de datos ya en la selección de software y procedimientos (art. 25 RGPD)." },
        { h: "5. Datos de acceso / archivos de registro del servidor", p: "Al acceder al sitio web se registran automáticamente datos que su navegador transmite (p. ej., tipo de navegador, sistema operativo, URL de referencia, hora de la solicitud y dirección IP de forma abreviada). Estos datos sirven para la prestación técnica y la seguridad del sitio. Los archivos de registro se conservan por motivos de seguridad un máximo de 7 días. Base jurídica: art. 6.1.f RGPD." },
        { h: "6. Alojamiento (hosting)", p: "Este sitio web se opera a través de un proveedor de alojamiento que trata datos personales (datos de acceso, de contacto y de contenido) por encargo nuestro. La base es nuestro interés legítimo en una prestación segura conforme al art. 6.1.f RGPD en relación con el art. 28 RGPD (contrato de encargo de tratamiento)." },
        { h: "7. Formulario de contacto y de primera consulta", p: "Si utiliza nuestro formulario, tratamos los datos facilitados (nombre, correo, teléfono, oficina inmobiliaria, datos sobre su consulta) exclusivamente para gestionar su solicitud y concertar una cita. Base jurídica: art. 6.1.b RGPD. Los datos se suprimen en cuanto dejan de ser necesarios para dicha finalidad y no existan obligaciones legales de conservación." },
        { h: "8. Reserva de cita (Cal.com)", p: "Para concertar una primera consulta podemos utilizar un servicio externo de reservas. Los datos que facilite allí se tratan para la organización de la cita. Base jurídica: art. 6.1.b RGPD." },
        { h: "9. Newsletter y descargas gratuitas", p: "Si solicita una descarga gratuita (p. ej., un PDF) o se suscribe a nuestro newsletter, tratamos su nombre y su dirección de correo para enviarle el material e informarle sobre ofertas. El registro se realiza mediante el procedimiento de doble opt-in. Base jurídica: su consentimiento conforme al art. 6.1.a RGPD. Puede darse de baja del newsletter en cualquier momento mediante el enlace de cancelación al final de cada correo." },
        { h: "10. Microsoft Clarity", p: "Con su consentimiento utilizamos Microsoft Clarity, un servicio de Microsoft Corporation (One Microsoft Way, Redmond, WA 98052, EE. UU.), para analizar el comportamiento de uso (clics, desplazamientos y grabaciones de sesión de forma anonimizada) con el fin de mejorar nuestra oferta. Las direcciones IP se acortan y las entradas sensibles se enmascaran. No puede descartarse una transferencia a EE. UU. Base jurídica: su consentimiento conforme al art. 6.1.a RGPD. Puede revocar su consentimiento en cualquier momento desde la configuración de cookies en el pie de página. Más información: https://privacy.microsoft.com" },
        { h: "11. Asistente de voz y chat con IA (ElevenLabs)", p: "En este sitio web ofrecemos un asistente de voz y chat basado en IA proporcionado por ElevenLabs, Inc. (169 Madison Ave #2484, Nueva York, NY 10016, EE. UU.). El asistente solo se activa cuando usted lo inicia expresamente (botón «Iniciar conversación» o «Iniciar chat») y acepta el aviso mostrado. En el modo de voz se procesan sus entradas de voz (grabación de audio a través de su micrófono), las transcripciones generadas y las respuestas del asistente para atender su consulta; los datos se transmiten a servidores de ElevenLabs y pueden almacenarse allí. Base jurídica: su consentimiento (art. 6.1.a RGPD) y el art. 6.1.b RGPD para responder a su consulta. ElevenLabs, Inc. está certificada conforme al EU-US Data Privacy Framework; de forma complementaria se aplican cláusulas contractuales tipo (art. 46 RGPD). Por favor, no comparta categorías especiales de datos personales (art. 9 RGPD, p. ej., datos de salud o financieros). Puede finalizar la conversación en cualquier momento. Más información: https://elevenlabs.io/privacy-policy" },
        { h: "12. Cookies y consentimiento", p: "Utilizamos cookies técnicamente necesarias y —previo su consentimiento— cookies de análisis. Las cookies necesarias son imprescindibles para el funcionamiento del sitio (base jurídica: art. 6.1.f RGPD). Las cookies de análisis solo se utilizan con su consentimiento (art. 6.1.a RGPD y normativa de cookies aplicable). Puede cambiar su elección en cualquier momento mediante el enlace «Configuración de cookies» en el pie de página." },
        { h: "13. Tratamiento mediante n8n", p: "Para procesar y reenviar las solicitudes del formulario utilizamos n8n (n8n Cloud, ubicación del servidor en Alemania/UE). Los datos que facilita en el formulario se procesan de forma automatizada y se transfieren a nuestra gestión interna de contactos. Base jurídica: art. 6.1.b RGPD. El tratamiento se realiza dentro de la UE." },
        { h: "14. Google Sheets", p: "Para gestionar las solicitudes entrantes almacenamos los datos del formulario en Google Sheets, un servicio de Google Ireland Ltd. No puede descartarse una transferencia a EE. UU.; Google está certificada conforme al EU-US Data Privacy Framework. Base jurídica: art. 6.1.b RGPD." },
        { h: "15. Presencia en redes sociales", p: "Mantenemos perfiles en Instagram (Meta Platforms Ireland Ltd.) y LinkedIn (LinkedIn Ireland Unlimited Company) y enlazamos a ellos. Cuando visita estos perfiles, los respectivos proveedores tratan sus datos bajo su propia responsabilidad, en su caso también fuera de la UE. No tenemos influencia sobre el alcance de dicho tratamiento. La base jurídica de nuestra presencia es nuestro interés legítimo en la comunicación y la imagen pública conforme al art. 6.1.f RGPD. Encontrará más detalles en las políticas de privacidad de Instagram y LinkedIn." },
        { h: "16. Destinatarios / encargados del tratamiento", p: "Los datos personales solo se comunican a proveedores de servicios (p. ej., alojamiento, análisis, reserva de citas) en el marco de contratos de encargo de tratamiento conforme al art. 28 RGPD. No se comunican para otros fines." },
        { h: "17. Transferencias a terceros países", p: "En la medida en que se transfieran datos a terceros países (fuera de la UE/EEE), ello solo se producirá si se cumplen los requisitos de los arts. 44 y ss. RGPD, p. ej., sobre la base de decisiones de adecuación (EU-US Data Privacy Framework), cláusulas contractuales tipo o su consentimiento expreso." },
        { h: "18. Plazo de conservación", p: "Conservamos los datos personales solo durante el tiempo necesario para los fines indicados o mientras existan plazos legales de conservación (en particular, plazos mercantiles y fiscales de 6 y 10 años). Transcurridos estos, los datos se suprimen." },
        { h: "19. Sus derechos", p: "Tiene derecho de acceso (art. 15), rectificación (art. 16), supresión (art. 17), limitación del tratamiento (art. 18), portabilidad (art. 20) y oposición (art. 21 RGPD). Puede revocar en cualquier momento los consentimientos otorgados con efecto para el futuro. Para ello, diríjase a los datos de contacto indicados arriba." },
        { h: "20. Oposición a correos publicitarios", p: "Por la presente nos oponemos al uso de los datos de contacto publicados en el aviso legal para el envío de publicidad no solicitada expresamente. Nos reservamos el derecho a emprender acciones legales en caso de correos publicitarios no solicitados (spam)." },
        { h: "21. Derecho de reclamación", p: "Tiene derecho a presentar una reclamación ante una autoridad de control de protección de datos. Para el responsable, la autoridad competente es la Delegada Estatal de Protección de Datos y Libertad de Información de Renania del Norte-Westfalia (Alemania). Conforme al art. 77 RGPD, también puede dirigirse a la autoridad de control de su lugar de residencia habitual (en España, la AEPD)." },
        { h: "22. Aviso sobre el uso de inteligencia artificial (IA)", p: "Algunos textos de este sitio web se han elaborado con ayuda de inteligencia artificial (IA). Estos contenidos tienen una finalidad meramente informativa y no contienen datos personales." },
        { h: "23. Modificación de la política de privacidad", p: "Nos reservamos el derecho de adaptar esta política de privacidad cuando cambien la situación legal, nuestra oferta o el tratamiento de datos. Le rogamos que se informe periódicamente sobre su contenido." },
        { h: "Nota", p: "Esta política de privacidad es una plantilla y debe ser revisada y adaptada a su empresa por un abogado o un servicio como eRecht24 antes de su publicación." },
      ],
    },
    agb: {
      title: "Términos y condiciones",
      blocks: [
        { h: "1. Ámbito de aplicación", p: "Estas condiciones se aplican a los servicios que iMMOKi Digital, titular Daniel Borge Rivera, presta a empresarios (§ 14 BGB), en particular a agentes inmobiliarios. Este sitio web sirve para informar y concertar una primera consulta sin compromiso; no se celebra ningún contrato a través del sitio web." },
        { h: "2. Servicios", p: "El objeto es la configuración individual y el mantenimiento continuo de un sistema de comunicación para la gestión de consultas de interesados. Se trata de un servicio, no de la cesión de un software estándar. El alcance exacto de las prestaciones se define conjuntamente y se acuerda de forma individual antes del encargo." },
        { h: "3. Formación del contrato", p: "Un contrato solo se perfecciona mediante un acuerdo individual y por separado entre iMMOKi Digital y el cliente (p. ej., tras la primera consulta). A través del sitio web no se contratan prestaciones de pago." },
        { h: "4. Colaboración del cliente", p: "El cliente facilita la información necesaria para la configuración (p. ej., datos de inmuebles, respuestas autorizadas, canales). Las respuestas se realizan exclusivamente sobre la base de los contenidos autorizados por el cliente." },
        { h: "5. Duración y cancelación", p: "No existe una duración mínima del contrato. El servicio continuo puede cancelarse mensualmente, salvo que se acuerde individualmente otra cosa." },
        { h: "6. Remuneración", p: "La remuneración se rige por el acuerdo alcanzado en la primera consulta o en la oferta individual." },
        { h: "7. Responsabilidad", p: "iMMOKi Digital responde conforme a las disposiciones legales. En caso de incumplimientos por negligencia leve, la responsabilidad se limita al daño previsible y típico del contrato, en la medida en que la ley lo permita." },
        { h: "Nota", p: "Estos términos son una plantilla y deben revisarse legalmente antes de su publicación." },
      ],
    },
    kontakt: {
      title: "Contacto",
      blocks: [
        { h: "iMMOKi Digital", p: "Titular: Daniel Borge Rivera\nVon-Ketteler-Straße 24\n53229 Bonn" },
        { h: "Teléfono", p: "01517 0088522" },
        { h: "Correo electrónico", p: "info@immoki-digital.de" },
        { h: "¿Prefiere hablar directamente?", p: "Reserve una demostración en vivo sin compromiso. Sin presión de venta, de agente a agente.", cta: true },
      ],
    },
  },
};

const LEGAL_ROUTES = { "/impressum": "impressum", "/datenschutz": "datenschutz", "/agb": "agb", "/kontakt": "kontakt" };

// Full-page legal view — rendered at its own URL by the router in app.jsx.
function LegalPage({ page }) {
  const { lang } = useLang();
  const dict = LEGAL[lang] || LEGAL.de;
  const content = dict[page];
  const back = lang === "es" ? "Volver al inicio" : "Zurück zur Startseite";
  const go = (to) => (e) => { e.preventDefault(); if (window.__navigate) window.__navigate(to); else window.location.href = to; };
  useE(() => {
    window.scrollTo(0, 0);
    if (content && content.title) document.title = content.title + " · iMMOKi Digital";
    return () => { document.title = "iMMOKi Digital"; };
  }, [page]);
  if (!content) { if (window.__navigate) window.__navigate("/"); return null; }
  const links = [
    ["/impressum", window.t ? window.t("foot.impressum") : "Impressum"],
    ["/datenschutz", window.t ? window.t("foot.datenschutz") : "Datenschutz"],
    ["/agb", window.t ? window.t("foot.agb") : "AGB"],
    ["/kontakt", window.t ? window.t("foot.kontakt") : "Kontakt"],
  ];
  return (
    <div className="legal-page">
      <div className="legal-sheet">
        <div className="legal-head">
          <a className="brand" href="/" onClick={go("/")}><img src="assets/immoki-logo.png" alt="iMMOKi Digital" className="brand-logo" /></a>
          <a className="legal-back" href="/" onClick={go("/")}>← {back}</a>
        </div>
        <div className="legal-body">
          <h1 className="legal-title">{content.title}</h1>
          {content.blocks.map((b, i) => (
            <div key={i} className="legal-block">
              <h3>{b.h}</h3>
              <p>{b.p}</p>
              {b.cta && (
                <button className="btn btn-primary" style={{ marginTop: 14 }}
                  onClick={() => { if (window.__openBooking) window.__openBooking(); }}>
                  {(window.t ? window.t("nav.cta") : "Live-Einblick erhalten")}
                  <Icon name="arrow-right" size={16} className="arr" />
                </button>
              )}
            </div>
          ))}
          <nav className="legal-foot-links" aria-label="Rechtliches">
            {links.filter(([to]) => to !== "/" + page).map(([to, label]) => (
              <a key={to} href={to} onClick={go(to)}>{label}</a>
            ))}
            <a href="#" onClick={(e) => { e.preventDefault(); if (window.__openCookieSettings) window.__openCookieSettings(); }}>
              {window.__cookieSettingsLabel ? window.__cookieSettingsLabel() : "Cookie-Einstellungen"}
            </a>
          </nav>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { LegalPage, LEGAL_ROUTES });