/* global React, window */
// Legal screen — Impressum · Datenschutz · Statuten · AGB

(function () {
  const { SectionBand, Button } = window.RAAIRODesignSystem_d9bba9;

  const SECTIONS = {
    impressum: {
      eyebrow: "Rechtliches",
      heading: "Impressum",
      body: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
          <div style={card}>
            <div style={label}>Verein</div>
            <div style={{ fontFamily: "serif", fontStyle: "italic", fontSize: "1.1rem", fontWeight: 600 }}>
              «RA | AI | RO»
            </div>
            <div style={{ fontSize: "0.78rem", color: "var(--text-muted)", marginTop: 2 }}>
              Eingetragener Verein gem. Art. 60 ff. ZGB
            </div>
          </div>

          <div style={card}>
            <div style={label}>Adresse</div>
            <div style={{ fontSize: "0.85rem", lineHeight: 1.7, marginTop: 8 }}>
              C/O Lehder<br />
              Hubelmatt 16<br />
              3624 Thun · Schweiz
            </div>
          </div>

          <div style={card}>
            <div style={label}>Vorstand</div>
            <div style={{ fontSize: "0.85rem", lineHeight: 1.7, marginTop: 8 }}>
              Kurt Federico Lehder<br />
              Ilona Rebecca Löwinger
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
            <div style={card}>
              <div style={label}>Handelsregister</div>
              <div style={{ fontFamily: "monospace", fontSize: "0.72rem", marginTop: 6 }}>CH-036.6.104.113-3</div>
            </div>
            <div style={card}>
              <div style={label}>UID</div>
              <div style={{ fontFamily: "monospace", fontSize: "0.72rem", marginTop: 6 }}>CHE-449.056.305</div>
            </div>
          </div>

          <div style={{ ...card, background: "var(--color-forest-900)", color: "#fff" }}>
            <div style={{ fontSize: "0.65rem", textTransform: "uppercase", letterSpacing: "0.2em", color: "rgba(255,255,255,0.65)", fontWeight: 600 }}>Kontakt</div>
            <a href="mailto:support@raairo.org" style={{ display: "block", marginTop: 6, color: "#fff", fontWeight: 600, fontSize: "1rem" }}>
              support@raairo.org
            </a>
          </div>

          <div style={card}>
            <h2 style={{ fontSize: "1.1rem", fontFamily: "serif", fontWeight: 600, marginBottom: 8 }}>Haftungsausschluss</h2>
            <p style={{ fontSize: "0.78rem", lineHeight: 1.7, color: "var(--text-muted)" }}>
              RA | AI | RO übernimmt keine Gewähr für die Aktualität, Richtigkeit oder Vollständigkeit der
              bereitgestellten Informationen. Haftungsansprüche gegen RA | AI | RO sind grundsätzlich
              ausgeschlossen, sofern kein grob fahrlässiges oder vorsätzliches Verschulden vorliegt.
            </p>
            <h3 style={{ fontSize: "0.65rem", textTransform: "uppercase", letterSpacing: "0.2em", color: "var(--text-muted)", fontWeight: 600, marginTop: 14 }}>Links</h3>
            <p style={{ fontSize: "0.78rem", lineHeight: 1.7, color: "var(--text-muted)", marginTop: 4 }}>
              Bei Verweisen auf fremde Webseiten übernimmt RA | AI | RO keine Haftung für deren Inhalte.
            </p>
          </div>
        </div>
      ),
    },

    datenschutz: {
      eyebrow: "Rechtliches",
      heading: "Datenschutzerklärung",
      intro: "revDSG (Schweiz) & DSGVO (EU)",
      body: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
          {[
            { t: "Verantwortliche Stelle", p: "RA | AI | RO, Hubelmatt 16, 3624 Thun, Schweiz, ist verantwortlich für die Datenverarbeitung auf dieser Website." },
            { t: "Widerruf Ihrer Einwilligung", p: "Sie können Ihre Einwilligung zur Datenverarbeitung jederzeit per E-Mail an support@raairo.org widerrufen." },
            { t: "Beschwerderecht", p: "Im Falle eines datenschutzrechtlichen Verstosses können Sie beim EDOB Beschwerde einlegen." },
            { t: "Datenübertragbarkeit", p: "Sie haben das Recht, Ihre Daten in einem maschinenlesbaren Format zu erhalten." },
            { t: "Auskunft, Berichtigung, Löschung", p: "Sie haben jederzeit das Recht auf Auskunft über Ihre gespeicherten Daten sowie auf deren Berichtigung oder Löschung." },
            { t: "Server-Log-Dateien", p: "Der Server speichert automatisch Informationen in Server-Log-Dateien, die nicht mit anderen Datenquellen zusammengeführt werden." },
          ].map(s => (
            <div key={s.t} style={card}>
              <h2 style={{ fontSize: "0.88rem", fontWeight: 600, marginBottom: 8 }}>{s.t}</h2>
              <p style={{ fontSize: "0.78rem", lineHeight: 1.7, color: "var(--text-muted)" }}>{s.p}</p>
            </div>
          ))}
        </div>
      ),
    },

    statuten: {
      eyebrow: "RA | AI | RO · Verein",
      heading: "Statuten",
      body: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
          {[
            { t: "Art. 1 — Name und Sitz", p: "Unter dem Namen RA | AI | RO besteht ein Verein im Sinne der Artikel 60 ff. ZGB mit Sitz in Thun, Schweiz." },
            { t: "Art. 2 — Zweck", p: "Der Verein stärkt die Wirtschaft und die Gesellschaft durch den Einsatz von KI, Robotik und weiteren digitalen Technologien. Wir bauen Software, die in echten Gemeinschaften läuft — 27 Projekte, 150 Freiwillige." },
            { t: "Art. 3 — Mitgliedschaft", p: "Mitglieder sind natürliche und juristische Personen, die den Vereinszweck unterstützen." },
            { t: "Art. 4 — Organe", p: "Die Organe des Vereins sind die Generalversammlung und der Vorstand." },
            { t: "Art. 5 — Finanzen", p: "Einnahmen werden ausschliesslich für den Vereinszweck verwendet. Es erfolgt keine Gewinnausschüttung." },
          ].map(a => (
            <div key={a.t} style={card}>
              <h2 style={{ fontSize: "0.88rem", fontWeight: 600, marginBottom: 8 }}>{a.t}</h2>
              <p style={{ fontSize: "0.78rem", lineHeight: 1.7, color: "var(--text-muted)" }}>{a.p}</p>
            </div>
          ))}
        </div>
      ),
    },

    agb: {
      eyebrow: "Rechtliches",
      heading: "Allgemeine Geschäftsbedingungen",
      intro: "Diese Plattform wird vom RA | AI | RO Verein, Schweiz betrieben.",
      body: () => (
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
          {[
            { t: "§ 1 Geltungsbereich", p: "Diese AGB gelten für alle Nutzer der RA | AI | RO Plattform und Dienstleistungen." },
            { t: "§ 2 Leistungen", p: "RA | AI | RO bietet Praktikumsvermittlung, Sprachkurse, KI-Weiterbildung und Community-Zugang." },
            { t: "§ 3 Zahlungsbedingungen", p: "Einschreibung ist nur nach vollständig ausgefülltem Formular und bestätigtem Zahlungseingang gültig." },
            { t: "§ 4 Haftung", p: "RA | AI | RO haftet nicht für Schäden durch höhere Gewalt oder technische Fehler." },
            { t: "§ 5 Datenschutz", p: "Die Verarbeitung personenbezogener Daten erfolgt gemäss der Datenschutzerklärung und dem revDSG/FADP 2023." },
          ].map(s => (
            <div key={s.t} style={card}>
              <h2 style={{ fontSize: "0.88rem", fontWeight: 600, marginBottom: 8 }}>{s.t}</h2>
              <p style={{ fontSize: "0.78rem", lineHeight: 1.7, color: "var(--text-muted)" }}>{s.p}</p>
            </div>
          ))}
        </div>
      ),
    },
  };

  const card = {
    background: "#fff",
    borderRadius: 16,
    border: "1px solid rgba(28,35,32,0.08)",
    padding: "1.2rem",
    boxShadow: "0 1px 3px rgba(28,35,32,0.06)",
  };

  const label = {
    fontSize: "0.65rem",
    textTransform: "uppercase",
    letterSpacing: "0.2em",
    color: "var(--text-muted)",
    fontWeight: 600,
  };

  function LegalScreen({ section, nav }) {
    const cfg = SECTIONS[section] || SECTIONS.impressum;

    return (
      <div style={{ background: "var(--bg-page)", minHeight: "100%", paddingBottom: "2rem" }}>
        <div style={{ padding: "1rem 1.25rem 0" }}>
          <button
            onClick={() => nav("home")}
            style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              fontSize: "0.75rem", fontWeight: 600, color: "var(--text-muted)",
              background: "none", border: "none", cursor: "pointer", padding: 0,
            }}
          >
            ‹ Zurück
          </button>
          <div style={{ marginTop: 12, fontSize: "0.65rem", textTransform: "uppercase", letterSpacing: "0.3em", color: "var(--text-muted)", fontWeight: 700 }}>
            {cfg.eyebrow}
          </div>
          <h1 style={{ marginTop: 6, fontFamily: "serif", fontSize: "1.6rem", lineHeight: 1.1, fontWeight: 700 }}>{cfg.heading}</h1>
          {cfg.intro && <p style={{ fontSize: "0.78rem", color: "var(--text-muted)", marginTop: 4 }}>{cfg.intro}</p>}
        </div>

        <div style={{ padding: "1.25rem 1rem 0" }}>
          <cfg.body />
        </div>

        <div style={{ padding: "1.5rem 1rem 0", display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
          {["impressum","datenschutz","statuten","agb"].filter(s => s !== section).map(s => (
            <button
              key={s}
              onClick={() => nav("legal", s)}
              style={{
                fontSize: "0.72rem", fontWeight: 600, textTransform: "capitalize",
                color: "var(--text-muted)", background: "none", border: "1px solid rgba(28,35,32,0.18)",
                borderRadius: 999, padding: "4px 12px", cursor: "pointer",
              }}
            >
              {s === "agb" ? "AGB" : s.charAt(0).toUpperCase() + s.slice(1)}
            </button>
          ))}
        </div>
      </div>
    );
  }

  window.RAAIROLegal = LegalScreen;
})();