// pages.jsx — page sections

const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

/* ─────────── Standorte (home) ─────────────────────────────────────────── */

function StandortePage({ onNavigate }) {
  return (
    <main className="page" data-screen-label="Standorte">
      <section className="hero">
        <div className="wrap hero-grid">
          <div className="hero-text">
            <div className="eyebrow">Räume für Unternehmen</div>
            <h1 className="display hero-title">
              Gewerbeflächen<br/>
              mit <em>Charakter</em> —<br/>
              im Hamburger Norden.
            </h1>
            <p className="hero-lede">
              Moderne Hallen, Werkstätten und Showrooms ab 160 m². Energieeffizient,
              verkehrsgünstig, individuell nutzbar.
            </p>
            <div className="hero-cta">
              <button className="btn-primary" onClick={() => onNavigate("kontakt")}>
                Kontakt aufnehmen <Icon.arrow />
              </button>
              <a className="btn-ghost" href="#standorte" onClick={(e)=>{e.preventDefault(); document.getElementById("standorte-list")?.scrollIntoView({behavior:"smooth", block:"start"});}}>
                Standorte ansehen
              </a>
            </div>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-row">
              <span className="hero-meta-k">Standorte</span>
              <span className="hero-meta-v">02</span>
            </div>
            <div className="hero-meta-row">
              <span className="hero-meta-k">Mietfläche</span>
              <span className="hero-meta-v">1.700 m²</span>
            </div>
            <div className="hero-meta-row">
              <span className="hero-meta-k">Einheiten ab</span>
              <span className="hero-meta-v">160 m²</span>
            </div>
            <div className="hero-meta-row">
              <span className="hero-meta-k">Standard</span>
              <span className="hero-meta-v">KfW-40nh</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section" id="standorte-list">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow">Standorte</div>
            <h2 className="display section-title">Zwei Adressen, ein Anspruch.</h2>
          </div>

          <div className="loc-grid">
            <LocationCard
              id="barsbuettel"
              kicker="Neubau · Verfügbar 2026"
              name="Barsbüttel"
              address="Rahlstedter Straße 7"
              meta={[
                ["Mietfläche", "1.700 m²"],
                ["Einheiten", "8 (160–230 m²)"],
                ["Anbindung", "A1 direkt"],
              ]}
              onClick={() => onNavigate("barsbuettel")}
              imgSrc="https://uraeume.de/wp-content/uploads/2025/11/gesamtanlage-barsbuettel.jpg"
              imgLabel="Barsbüttel — Außenansicht"
              tone="render"
            />
            <LocationCard
              id="ahrensburg"
              kicker="Bestand · Besichtigung möglich"
              name="Ahrensburg"
              address="Unternehmerräume Ahrensburg"
              meta={[
                ["Status", "Realisiert"],
                ["Nutzung", "Gewerbe & Lager"],
                ["Referenz", "Qualitätsnachweis"],
              ]}
              onClick={() => onNavigate("ahrensburg")}
              imgSrc="https://uraeume.de/wp-content/uploads/2025/12/gesamtanlage-ahrensburg.jpeg"
              imgLabel="Ahrensburg — Außenansicht"
              tone="photo"
            />
          </div>
        </div>
      </section>

      <section className="section quiet">
        <div className="wrap quiet-grid">
          <div className="eyebrow">Auf einen Blick</div>
          <h3 className="display quiet-title">Flexibel nutzbar — von der Werkstatt bis zum Showroom.</h3>
          <ul className="bullet-grid">
            <li><span className="bullet-i"><Icon.ruler /></span><div><b>160 – 230 m²</b><div>Einheiten, kombinierbar.</div></div></li>
            <li><span className="bullet-i"><Icon.bolt /></span><div><b>KfW-40nh-Standard</b><div>Energieeffizient gebaut.</div></div></li>
            <li><span className="bullet-i"><Icon.sun /></span><div><b>Photovoltaik</b><div>Strom direkt vom Dach.</div></div></li>
            <li><span className="bullet-i"><Icon.car /></span><div><b>E-Ladestationen</b><div>Pro Mieteinheit verfügbar.</div></div></li>
            <li><span className="bullet-i"><Icon.pin /></span><div><b>A1-Anschluss</b><div>Direkte Verkehrsanbindung.</div></div></li>
            <li><span className="bullet-i"><Icon.ruler /></span><div><b>Bis 7,80 m</b><div>Lichte Hallenhöhe.</div></div></li>
          </ul>
        </div>
      </section>
    </main>
  );
}

function LocationCard({ kicker, name, address, meta, onClick, imgLabel, imgSrc, tone }) {
  return (
    <article className="loc-card" onClick={onClick} tabIndex="0" role="link"
      onKeyDown={(e)=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); onClick(); } }}>
      <div className="loc-img">
        <ImagePlaceholder label={imgLabel} ratio="16 / 11" tone={tone} src={imgSrc} alt={imgLabel} />
      </div>
      <div className="loc-body">
        <div className="loc-kicker">{kicker}</div>
        <h3 className="display loc-name">{name}</h3>
        <div className="loc-addr">{address}</div>
        <dl className="loc-meta">
          {meta.map(([k, v]) => (
            <React.Fragment key={k}>
              <dt>{k}</dt><dd>{v}</dd>
            </React.Fragment>
          ))}
        </dl>
        <div className="loc-cta">Standort ansehen <Icon.arrow /></div>
      </div>
    </article>
  );
}

/* ─────────── Barsbüttel detail ────────────────────────────────────────── */

function BarsbuettelPage({ onNavigate }) {
  return (
    <main className="page" data-screen-label="Barsbüttel">
      <section className="detail-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#/" onClick={(e)=>{e.preventDefault();onNavigate("standorte");}}>Standorte</a>
            <span>/</span>
            <span>Barsbüttel</span>
          </div>
          <div className="detail-hero-grid">
            <div>
              <div className="eyebrow">Standort 01 · Neubau</div>
              <h1 className="display detail-title">Barsbüttel<br/><em>Rahlstedter Straße 7</em></h1>
            </div>
            <dl className="key-facts">
              <div><dt>Gesamt</dt><dd>1.700 m²</dd></div>
              <div><dt>Einheiten</dt><dd>8</dd></div>
              <div><dt>Standard</dt><dd>KfW-40nh</dd></div>
              <div><dt>Anbindung</dt><dd>A1</dd></div>
            </dl>
          </div>
        </div>
        <div className="wrap">
          <ImagePlaceholder src="https://uraeume.de/wp-content/uploads/2025/11/gesamtanlage-barsbuettel.jpg" alt="Außenansicht Barsbüttel" ratio="21 / 9" tone="render" />
        </div>
      </section>

      <section className="section">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Überblick</div></div>
          <div className="two-col-r prose">
            <p className="lede">
              In den neuen Gewerbeeinheiten stehen zwei Gebäude mit insgesamt 1.700 m² Mietfläche
              zur Verfügung. Die acht flexibel nutzbaren Einheiten umfassen jeweils 160 bis 230 m²
              und eignen sich ideal als Lagerflächen, Werkstätten, Showrooms oder moderne
              Produktionsbereiche.
            </p>
            <p>
              Jede Einheit verfügt über exklusiv nutzbare Hofflächen sowohl vor als auch hinter dem
              Gebäude — perfekt für Stellplätze, Lieferzonen oder Außenlager. Die Immobilien
              werden im energieeffizienten KfW-40nh-Standard errichtet und bieten eine hochwertige
              Fassade sowie eine moderne Ausstattung.
            </p>
            <p>
              Die hervorragende Verkehrsanbindung direkt an die Autobahn A1 ermöglicht eine optimale
              Erreichbarkeit für Kunden, Lieferanten und Mitarbeiter. Für die Zukunft gerüstet:
              E-Mobil-Ladestationen stehen jeder Mieteinheit zur Verfügung. Eine Photovoltaikanlage
              versorgt die Nutzer zudem mit selbst erzeugtem Strom, der direkt von den Mietern
              bezogen werden kann.
            </p>
            <p className="quote-line">
              Als Qualitätsnachweis können die bereits realisierten „Unternehmerräume Ahrensburg"
              dienen — <a href="#/ahrensburg" onClick={(e)=>{e.preventDefault();onNavigate("ahrensburg");}}>eine Besichtigung ist jederzeit möglich</a>.
            </p>
          </div>
        </div>
      </section>

      <section className="section quiet">
        <div className="wrap">
          <div className="eyebrow">Lageplan</div>
          <ImagePlaceholder src="https://uraeume.de/wp-content/uploads/2025/12/lageplan-barsbuettel-2.png" alt="Lageplan Barsbüttel" ratio="16 / 9" tone="plan" />
        </div>
      </section>

      <HouseBlock
        label="Haus 1"
        units="3 Mieteinheiten"
        body={
          <>
            <p>
              In dem Objekt stehen drei moderne Mieteinheiten zur Verfügung. Jede Einheit verfügt
              über eine Bürofläche von rund 40 m² sowie eine Hallenfläche von ca. 120–130 m², die
              sich ideal für Lager-, Produktions- oder Handwerksbetriebe eignet.
            </p>
            <p>
              Die Hallen bieten eine lichte Höhe von 6,20 m und sind natürlich belichtet, wodurch
              ein angenehmes und effizientes Arbeiten ermöglicht wird. Ergänzt werden die Flächen
              durch exklusiv genutzte Hofflächen von jeweils rund 110 m².
            </p>
            <p>
              Zwei der Mieteinheiten können bei Bedarf zusammengeschlossen werden und bieten so
              zusätzliche Flexibilität für wachsende Unternehmen.
            </p>
          </>
        }
        facts={[
          ["Büro", "ca. 40 m²"],
          ["Halle", "120–130 m²"],
          ["Höhe", "6,20 m"],
          ["Hof", "ca. 110 m²"],
        ]}
        img="https://uraeume.de/wp-content/uploads/2025/12/haus-1-barsbuettel-2.png"
      />

      <HouseBlock
        reverse
        label="Haus 2"
        units="5 Mieteinheiten"
        body={
          <>
            <p>
              In dem Objekt stehen fünf moderne Mieteinheiten zur Verfügung. Jede Einheit verfügt
              über eine Bürofläche von rund 70 m² sowie eine Hallenfläche von ca. 150–160 m², die
              vielfältige Nutzungsmöglichkeiten für Handwerk, Lager oder Produktion bietet.
            </p>
            <p>
              Die Hallen überzeugen durch eine großzügige lichte Höhe von 7,80 m und sind natürlich
              belichtet, was optimale Arbeitsbedingungen schafft. Ergänzend stehen den Mietern
              exklusiv genutzte Hofflächen von ca. 120 bis 190 m² je Einheit zur Verfügung.
            </p>
            <p>
              Für wachsende Betriebe besteht die Möglichkeit, zwei Mieteinheiten miteinander zu
              verbinden.
            </p>
          </>
        }
        facts={[
          ["Büro", "ca. 70 m²"],
          ["Halle", "150–160 m²"],
          ["Höhe", "7,80 m"],
          ["Hof", "120–190 m²"],
        ]}
        img="https://uraeume.de/wp-content/uploads/2025/12/haus-2-barsbuettel-2.png"
      />

      <CtaBand onNavigate={onNavigate} />
    </main>
  );
}

function HouseBlock({ label, units, body, facts, img, reverse }) {
  return (
    <section className="section">
      <div className={"wrap house " + (reverse ? "reverse" : "")}>
        <div className="house-media">
          <ImagePlaceholder src={img} alt={label} ratio="4 / 3" tone="render" />
        </div>
        <div className="house-text">
          <div className="eyebrow">{units}</div>
          <h3 className="display house-title">{label}</h3>
          <dl className="house-facts">
            {facts.map(([k, v]) => (
              <div key={k} className="house-fact">
                <dt>{k}</dt><dd>{v}</dd>
              </div>
            ))}
          </dl>
          <div className="prose">{body}</div>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Ahrensburg detail ────────────────────────────────────────── */

function AhrensburgPage({ onNavigate }) {
  return (
    <main className="page" data-screen-label="Ahrensburg">
      <section className="detail-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#/" onClick={(e)=>{e.preventDefault();onNavigate("standorte");}}>Standorte</a>
            <span>/</span>
            <span>Ahrensburg</span>
          </div>
          <div className="detail-hero-grid">
            <div>
              <div className="eyebrow">Standort 02 · Beimoor Süd</div>
              <h1 className="display detail-title">Ahrensburg<br/><em>Carl-Backhaus-Straße 5</em></h1>
            </div>
            <dl className="key-facts">
              <div><dt>Module</dt><dd>M / L</dd></div>
              <div><dt>Flächen</dt><dd>190 / 260 m²</dd></div>
              <div><dt>Höhe</dt><dd>bis 8,00 m</dd></div>
              <div><dt>Standard</dt><dd>KfW 40</dd></div>
            </dl>
          </div>
        </div>
        <div className="wrap">
          <ImagePlaceholder src="https://uraeume.de/wp-content/uploads/2025/12/gesamtanlage-ahrensburg.jpeg" alt="Ahrensburg Außenansicht" ratio="21 / 9" tone="photo" />
        </div>
      </section>

      <section className="section">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Überblick</div></div>
          <div className="two-col-r prose">
            <p className="lede">
              Unternehmens-Räume sind moderne Arbeitsräume mit eigener Adresse um einen
              geschützten gemeinsamen Hof mit idealen Anlieferungsbedingungen und Stellplätzen.
            </p>
            <p>
              Die Unternehmens-Räume bieten klare Grundrisse und Offenheit mit bis zu 8,00 m
              lichter Hallenraumhöhe und konzentrierte Arbeitsatmosphäre in Büro- und
              Präsentationsflächen im Obergeschoss. Mit optimalen Grundrissen und einem
              effizienten Nutzungskonzept halten die Unternehmens-Räume Ihre Raumkosten klein.
            </p>
            <p>
              In den URäumen spiegelt sich unsere Passion für Nachhaltigkeit und
              generationsübergreifendes Denken. Das Objekt wird in einer Massivbauweise errichtet
              und erreicht mit KfW 40 eine der höchsten Energieeffizienzklassen. Die benötigte
              Energie für Strom und Wärme wird mehrheitlich mittels einer 134 kWp
              Photovoltaikanlage selber produziert.
            </p>
            <p>
              Die zwei Module M / L mit 260 m² / 190 m² bieten genau die passende Größe für Ihr
              Unternehmen. In erster Lage im neuen Gewerbegebiet Beimoor Süd in Ahrensburg liegen
              die Unternehmens-Räume direkt vor den Toren Hamburgs.
            </p>
          </div>
        </div>
      </section>

      <section className="section quiet">
        <div className="wrap">
          <div className="eyebrow">Lageplan</div>
          <ImagePlaceholder src="https://uraeume.de/wp-content/uploads/2025/11/lageplan-ahrensburg.jpg" alt="Lageplan Ahrensburg" ratio="16 / 9" tone="plan" />
        </div>
      </section>

      <CtaBand onNavigate={onNavigate} />
    </main>
  );
}

/* ─────────── Kontakt ──────────────────────────────────────────────────── */

function KontaktPage({ onNavigate }) {
  const [form, setForm] = useStateP({ name: "", email: "", subject: "", message: "", location: "" });
  const [sent, setSent] = useStateP(false);
  const [errs, setErrs] = useStateP({});

  const STOPS = [
    {
      id: "barsbuettel",
      name: "Barsbüttel",
      sub: "Rahlstedter Straße 7 · Neubau 2026",
      src: "https://uraeume.de/wp-content/uploads/2025/11/gesamtanlage-barsbuettel.jpg",
    },
    {
      id: "ahrensburg",
      name: "Ahrensburg",
      sub: "Carl-Backhaus-Straße 5 · Beimoor Süd",
      src: "https://uraeume.de/wp-content/uploads/2025/12/gesamtanlage-ahrensburg.jpeg",
    },
  ];

  const activeId = form.location;
  const ambient = !form.location;

  function submit(e) {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = "Bitte Namen angeben.";
    if (!/^\S+@\S+\.\S+$/.test(form.email)) next.email = "Bitte gültige E-Mail-Adresse.";
    if (!form.message.trim()) next.message = "Bitte Nachricht eingeben.";
    setErrs(next);
    if (Object.keys(next).length === 0) {
      setSent(true);
    }
  }

  return (
    <main className="page" data-screen-label="Kontakt">
      <section className="detail-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#/" onClick={(e)=>{e.preventDefault();onNavigate("standorte");}}>Start</a>
            <span>/</span>
            <span>Kontakt</span>
          </div>
          <div className="detail-hero-grid">
            <div>
              <div className="eyebrow">Sie haben Interesse?</div>
              <h1 className="display detail-title">Sprechen Sie<br/><em>mit uns.</em></h1>
              <p className="hero-lede" style={{ maxWidth: 460 }}>
                Per Anruf, E-Mail oder Formular — wir freuen uns auf Ihre Nachricht.
              </p>
            </div>
            <div className="contact-card">
              <div className="contact-h">Kontaktdaten</div>
              <div className="contact-block">
                <span className="contact-k">Telefon</span>
                <a className="contact-v big" href="tel:+4945324084744">+49 4532 40847 44</a>
              </div>
              <div className="contact-block">
                <span className="contact-k">E-Mail</span>
                <a className="contact-v" href="mailto:info@uraeume.de">info@uraeume.de</a>
              </div>
              <div className="contact-block">
                <span className="contact-k">Anschrift</span>
                <div className="contact-v">URäume GmbH<br/>Ahrensburger Straße 3<br/>22941 Hammoor</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="eyebrow">Kontaktformular</div>
            <h2 className="display section-title" style={{ fontSize: "clamp(32px, 4vw, 52px)" }}>
              Schreiben Sie uns.
            </h2>
          </div>

          <div className="contact-grid">
            <div className="contact-form-col">
              {sent ? (
                <div className="form-success">
                  <div className="form-success-mark">✓</div>
                  <h3 className="display" style={{ fontSize: 28, margin: "8px 0 6px" }}>Vielen Dank.</h3>
                  <p>Ihre Nachricht wurde gesendet. Wir melden uns zeitnah zurück.</p>
                </div>
              ) : (
                <form className="form" onSubmit={submit} noValidate>
                  <div className="form-row">
                    <label>
                      <span>Ihr Name <em>*</em></span>
                      <input type="text" value={form.name} onChange={(e)=>setForm({...form, name:e.target.value})} />
                      {errs.name && <div className="form-err">{errs.name}</div>}
                    </label>
                    <label>
                      <span>E-Mail-Adresse <em>*</em></span>
                      <input type="email" value={form.email} onChange={(e)=>setForm({...form, email:e.target.value})} />
                      {errs.email && <div className="form-err">{errs.email}</div>}
                    </label>
                  </div>

                  <fieldset className="loc-pick">
                    <legend>Welcher Standort interessiert Sie?</legend>
                    <div className="loc-pick-row">
                      {STOPS.map((s) => (
                        <button
                          type="button"
                          key={s.id}
                          className={"loc-chip " + (form.location === s.id ? "is-active" : "")}
                          onClick={() => setForm({ ...form, location: s.id })}
                          aria-pressed={form.location === s.id}
                          onMouseEnter={() => { /* preview handled via ambient */ }}
                        >
                          <span className="loc-chip-thumb" style={{ backgroundImage: `url(${s.src})` }} aria-hidden="true" />
                          <span className="loc-chip-name">{s.name}</span>
                        </button>
                      ))}
                      <button
                        type="button"
                        className={"loc-chip loc-chip-neutral " + (form.location === "" ? "is-active" : "")}
                        onClick={() => setForm({ ...form, location: "" })}
                        aria-pressed={form.location === ""}
                      >
                        <span className="loc-chip-thumb is-neutral" aria-hidden="true">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M3 10c0-2 1.6-3.6 3.6-3.6 1.4 0 2.7.8 3.4 2 .7-1.2 2-2 3.4-2C15.4 6.4 17 8 17 10s-1.6 3.6-3.6 3.6c-1.4 0-2.7-.8-3.4-2-.7 1.2-2 2-3.4 2C4.6 13.6 3 12 3 10z" stroke="currentColor" strokeWidth="1.2"/>
                          </svg>
                        </span>
                        <span className="loc-chip-name">Keine Präferenz</span>
                      </button>
                    </div>
                  </fieldset>

                  <label>
                    <span>Betreff</span>
                    <input type="text" value={form.subject} onChange={(e)=>setForm({...form, subject:e.target.value})} />
                  </label>
                  <label>
                    <span>Ihre Nachricht <em>*</em></span>
                    <textarea rows="6" value={form.message} onChange={(e)=>setForm({...form, message:e.target.value})}></textarea>
                    {errs.message && <div className="form-err">{errs.message}</div>}
                  </label>
                  <div className="form-actions">
                    <button type="submit" className="btn-primary">Absenden <Icon.arrow /></button>
                  </div>
                </form>
              )}
            </div>

            <div className="contact-stage-col">
              <ContactStage stops={STOPS} activeId={activeId} ambient={ambient} />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactStage({ stops, activeId, ambient }) {
  const active = stops.find((s) => s.id === activeId);
  return (
    <div className="stage" aria-live="polite">
      <div className={"stage-inner " + (ambient ? "is-split" : "")}>
        {stops.map((s, i) => (
          <div
            key={s.id}
            className={"stage-frame " + (ambient || activeId === s.id ? "is-active" : "") + " stage-frame-" + i}
            aria-hidden={!ambient && activeId !== s.id}
          >
            <img src={s.src} alt="" />
          </div>
        ))}
        <div className="stage-veil" />
        <div className="stage-caption">
          <div className="stage-eyebrow">
            <span className="stage-dot" />
            {ambient ? "Zwei Standorte verfügbar" : "Ihr Wunschstandort"}
          </div>
          {ambient ? (
            <React.Fragment>
              <div className="display stage-title">Beide Standorte</div>
              <div className="stage-sub">Wir beraten Sie zur passenden Wahl.</div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div className="display stage-title" key={active.id}>{active.name}</div>
              <div className="stage-sub">{active.sub}</div>
            </React.Fragment>
          )}
        </div>
        {!ambient && (
          <div className="stage-pager">
            {stops.map((s) => (
              <span key={s.id} className={"stage-pip " + (activeId === s.id ? "is-active" : "")} />
            ))}
          </div>
        )}
        {ambient && (
          <div className="stage-split-labels">
            <span>{stops[0].name}</span>
            <span>{stops[1].name}</span>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─────────── CTA band ─────────────────────────────────────────────────── */

function CtaBand({ onNavigate }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-band-grid">
        <div>
          <div className="eyebrow inverse">Interesse geweckt?</div>
          <h3 className="display cta-band-title">
            Lassen Sie uns über Ihre <em>Flächenbedürfnisse</em> sprechen.
          </h3>
        </div>
        <div className="cta-band-actions">
          <button className="btn-primary inverse" onClick={() => onNavigate("kontakt")}>
            Kontakt aufnehmen <Icon.arrow />
          </button>
          <a className="btn-ghost inverse" href="tel:+4945324084744">+49 4532 40847 44</a>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Impressum ────────────────────────────────────────────────── */

function ImpressumPage({ onNavigate }) {
  return (
    <main className="page" data-screen-label="Impressum">
      <section className="detail-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#/" onClick={(e)=>{e.preventDefault();onNavigate("standorte");}}>Start</a>
            <span>/</span>
            <span>Impressum</span>
          </div>
          <h1 className="display detail-title" style={{ fontSize: "clamp(36px,5vw,64px)", marginTop: 14 }}>Impressum</h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Angaben gemäß § 5 TMG</div></div>
          <div className="two-col-r prose">
            <p><strong>URäume GmbH</strong><br/>Ahrensburger Str 3<br/>22941 Hammoor</p>
            <p><strong>Vertreten durch:</strong><br/>Thekla Osterhage und Lars Osterhoff</p>

            <p><strong>Kontakt</strong><br/>
              Telefon: <a href="tel:+4945324084744">+49 4532 40847 44</a><br/>
              E-Mail: <a href="mailto:info@uraeume.de">info@uraeume.de</a>
            </p>

            <p><strong>Registereintrag</strong><br/>
              Handelsregister Lübeck<br/>
              Registernummer: HRB 15031 HL
            </p>

            <p><strong>Umsatzsteuer-ID</strong><br/>DE 301412076</p>

            <p><strong>Webmaster</strong><br/>
              Katharina Osterhoff<br/>
              E-Mail: <a href="mailto:info@uraeume.de">info@uraeume.de</a>
            </p>
          </div>
        </div>
      </section>

      <section className="section quiet">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Haftungsausschluss</div></div>
          <div className="two-col-r prose">
            <p><strong>Haftung für Inhalte</strong><br/>
              Als Dienstleister haften wir für selbst erstellte Inhalte nach deutschem Recht.
              Externe Informationen müssen nicht überwacht werden, können aber nach Kenntnisnahme
              von Rechtsverletzungen unverzüglich entfernt werden.
            </p>
            <p><strong>Haftung für Links</strong><br/>
              Externe Seiten wurden bei Verlinkung überprüft, unterliegen aber nicht unserer Kontrolle.
              Der jeweilige Betreiber trägt Verantwortung für Inhalte fremder Webseiten.
            </p>
            <p><strong>Urheberrecht</strong><br/>
              Inhalte der Website unterliegen deutschem Urheberrecht. Vervielfältigungen außer für
              privaten, nicht-kommerziellen Gebrauch erfordern schriftliche Genehmigung.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ─────────── Datenschutzerklärung ─────────────────────────────────────── */

function DatenschutzPage({ onNavigate }) {
  return (
    <main className="page" data-screen-label="Datenschutz">
      <section className="detail-hero">
        <div className="wrap">
          <div className="crumb">
            <a href="#/" onClick={(e)=>{e.preventDefault();onNavigate("standorte");}}>Start</a>
            <span>/</span>
            <span>Datenschutzerklärung</span>
          </div>
          <h1 className="display detail-title" style={{ fontSize: "clamp(32px,4.5vw,60px)", marginTop: 14 }}>Datenschutz&shy;erklärung</h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Überblick</div></div>
          <div className="two-col-r prose">
            <p><strong>Verantwortliche:</strong> Thekla Osterhage, Lars Osterhoff</p>
            <p><strong>Arten verarbeiteter Daten:</strong> Bestandsdaten (Namen, Adressen), Kontaktdaten (E-Mail, Telefonnummern), Meta-/Kommunikationsdaten (Geräte-Informationen, IP-Adressen)</p>
            <p><strong>Betroffene Personen:</strong> Besucher und Nutzer des Onlineangebotes</p>
            <p><strong>Verarbeitungszwecke:</strong> Beantwortung von Kontaktanfragen, Kommunikation mit Nutzern, Sicherheitsmaßnahmen</p>
          </div>
        </div>
      </section>

      <section className="section quiet">
        <div className="wrap two-col">
          <div className="two-col-l"><div className="eyebrow">Rechtliches</div></div>
          <div className="two-col-r prose">

            <p><strong>1. Maßgebliche Rechtsgrundlage</strong><br/>
              Die Rechtsgrundlagen folgen Art. 6 und 7 DSGVO: Einwilligungen (Art. 6 Abs. 1 lit. a),
              Vertragserfüllung (Art. 6 Abs. 1 lit. b), rechtliche Verpflichtungen (Art. 6 Abs. 1 lit. c),
              berechtigte Interessen (Art. 6 Abs. 1 lit. f), lebenswichtige Interessen (Art. 6 Abs. 1 lit. d).
            </p>

            <p><strong>2. Änderungen der Datenschutzerklärung</strong><br/>
              Wir informieren regelmäßig über Änderungen der Datenschutzerklärung und benachrichtigen
              bei erforderlichen Handlungen.
            </p>

            <p><strong>3. Sicherheitsmaßnahmen</strong><br/>
              Nach Art. 32 DSGVO werden geeignete technische und organisatorische Maßnahmen implementiert,
              einschließlich physischen Zugriffsschutz, Verschlüsselung und Datenschutz durch
              Technikgestaltung gemäß Art. 25 DSGVO.
            </p>

            <p><strong>4. Zusammenarbeit mit Auftragsverarbeitern und Dritten</strong><br/>
              Datenweitergaben erfolgen auf Grundlage gesetzlicher Erlaubnis, Einwilligung oder
              berechtigter Interessen. Auftragsverarbeiter werden nach Art. 28 DSGVO beauftragt.
            </p>

            <p><strong>5. Übermittlungen in Drittländer</strong><br/>
              Übermittlungen in Drittländer erfolgen unter Beachtung von Art. 44 ff. DSGVO,
              einschließlich anerkannter Datenschutzniveaus oder Standardvertragsklauseln.
            </p>

            <p><strong>6. Rechte der betroffenen Personen</strong><br/>
              Recht auf Auskunft (Art. 15 DSGVO) · Recht auf Berichtigung (Art. 16 DSGVO) ·
              Recht auf Löschung (Art. 17 DSGVO) · Recht auf Einschränkung (Art. 18 DSGVO) ·
              Recht auf Datenportabilität (Art. 20 DSGVO) · Recht auf Beschwerde (Art. 77 DSGVO)
            </p>

            <p><strong>7. Widerrufsrecht</strong><br/>
              Einwilligungen können gem. Art. 7 Abs. 3 DSGVO mit Wirkung für die Zukunft widerrufen werden.
            </p>

            <p><strong>8. Widerspruchsrecht</strong><br/>
              Nutzer können der Datenverarbeitung nach Art. 21 DSGVO widersprechen,
              besonders gegen Direktwerbung.
            </p>

            <p><strong>9. Cookies</strong><br/>
              Wir setzen temporäre und permanente Cookies für Betrieb, Sicherheit und Marketing ein.
              Widerspruch ist möglich über{" "}
              <a href="http://www.aboutads.info/choices/" target="_blank" rel="noopener">aboutads.info</a>{" "}
              oder{" "}
              <a href="http://www.youronlinechoices.com/" target="_blank" rel="noopener">youronlinechoices.com</a>.
              Nutzer können Cookies in den Browser-Einstellungen deaktivieren.
            </p>

            <p><strong>10. Löschung von Daten</strong><br/>
              Daten werden gelöscht, sobald sie für ihre Zweckbestimmung nicht mehr erforderlich sind
              (Art. 17, 18 DSGVO). Gesetzliche Aufbewahrungsfristen: 6 Jahre (HGB § 257 Abs. 1),
              10 Jahre (AO § 147 Abs. 1).
            </p>

            <p><strong>11. Kontaktaufnahme</strong><br/>
              Kontaktformular-Daten werden zur Anfrageverarbeitung nach Art. 6 Abs. 1 lit. b DSGVO erfasst
              und können im CRM-System gespeichert werden. Nicht mehr erforderliche Anfragen werden
              gelöscht (Überprüfung alle zwei Jahre).
            </p>

            <p><strong>12. Server-Logfiles</strong><br/>
              Server-Logfiles werden auf Grundlage berechtigter Interessen erfasst (Webseite, Datei,
              Abrufdatum/-uhrzeit, Datenmenge, Browser, Betriebssystem, Referrer-URL, IP-Adresse, Provider).
              Logfiles werden maximal 7 Tage gespeichert, dann gelöscht.
            </p>

            <p><strong>13. Onlinepräsenzen in sozialen Medien</strong><br/>
              Wir unterhalten Social-Media-Profile auf Grundlage berechtigter Interessen
              (Art. 6 Abs. 1 lit. f DSGVO) zur Kommunikation und Information.
            </p>

            <p><strong>14. Google Analytics</strong><br/>
              Google Analytics wird zur Analyse und Optimierung des Onlineangebotes eingesetzt
              (Art. 6 Abs. 1 lit. f DSGVO). IP-Anonymisierung ist aktiviert; IP-Adressen werden
              innerhalb der EU/EWR gekürzt. Opt-Out:{" "}
              <a href="https://tools.google.com/dlpage/gaoptout?hl=de" target="_blank" rel="noopener">
                Google Analytics Opt-Out
              </a>.
              Personenbezogene Daten werden nach 14 Monaten anonymisiert oder gelöscht.
            </p>

            <p><strong>15. Einbindung von Diensten Dritter</strong><br/>
              Drittanbieter-Inhalte (Videos, Schriftarten) werden auf Grundlage berechtigter Interessen
              eingebunden. Genutzte Dienste:{" "}
              <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Google Fonts / Google LLC</a>.
            </p>

            <p style={{ color: "var(--ink-3)", fontSize: 13 }}>Stand: 22.05.2018</p>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { StandortePage, BarsbuettelPage, AhrensburgPage, KontaktPage, ContactStage, ImpressumPage, DatenschutzPage });