/* global React, Tag, Reveal */
const { useState: lS, useEffect: lE, useRef: lR } = React;

// ─────── Legal copy (placeholder, kemalduran.de Vorlagen-Stil) ───────
const STUDIO = {
  name: 'Cuvir®',
  legalName: 'Cuvir',
  street: 'Maastrichter Str. 6-8',
  city: '50672 Köln',
  country: 'Deutschland',
  email: 'hello@cuvir.de',
  ceo: 'Kemal Duran',
  dpo: 'Dr. Baran Kizil',
};

const IMPRESSUM = [
  {
    h: 'Angaben gemäß § 5 TMG',
    body: [
      `${STUDIO.legalName}\n${STUDIO.street}\n${STUDIO.city}, ${STUDIO.country}`,
    ],
  },
  {
    h: 'Kontakt',
    body: [
      `E-Mail: ${STUDIO.email}`,
    ],
  },
  {
    h: 'Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV',
    body: [`${STUDIO.ceo}\n${STUDIO.street}\n${STUDIO.city}`],
  },
  {
    h: 'Streitschlichtung',
    body: [
      'Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr.',
      'Unsere E-Mail-Adresse findest du oben im Impressum.',
      'Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.',
    ],
  },
  {
    h: 'Haftung für Inhalte',
    body: [
      'Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich.',
      'Nach §§ 8 bis 10 TMG 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.',
      'Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.',
    ],
  },
  {
    h: 'Haftung für Links',
    body: [
      'Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben.',
      'Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen.',
      'Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.',
    ],
  },
  {
    h: 'Urheberrecht',
    body: [
      '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 Urheberrechtes 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.',
    ],
  },
];

const AGB = [
  {
    h: '§ 1 Geltungsbereich',
    body: [
      `Für alle Leistungen der ${STUDIO.legalName} (nachfolgend „Cuvir") gelten ausschließlich die nachfolgenden Allgemeinen Geschäftsbedingungen in der zum Zeitpunkt des Vertragsschlusses gültigen Fassung.`,
      'Abweichende, entgegenstehende oder ergänzende AGB des Auftraggebers werden nur dann und insoweit Vertragsbestandteil, als Cuvir ihrer Geltung ausdrücklich schriftlich zugestimmt hat.',
    ],
  },
  {
    h: '§ 2 Vertragsgegenstand',
    body: [
      'Cuvir erbringt Beratungs-, Konzeptions-, Design-, Software- und Automatisierungsleistungen im Bereich AI-gestützter Webanwendungen, Workflows und Content-Produktion.',
      'Der konkrete Leistungsumfang ergibt sich aus dem jeweiligen Angebot bzw. Auftrag.',
    ],
  },
  {
    h: '§ 3 Vertragsschluss',
    body: [
      'Angebote von Cuvir sind freibleibend. Ein Vertrag kommt erst durch schriftliche Auftragsbestätigung oder mit Beginn der Leistungserbringung zustande.',
      'Mündliche Nebenabreden bedürfen der schriftlichen Bestätigung durch Cuvir.',
    ],
  },
  {
    h: '§ 4 Mitwirkungspflichten',
    body: [
      'Der Auftraggeber stellt Cuvir alle für die Leistungserbringung erforderlichen Informationen, Materialien, Zugänge und Freigaben rechtzeitig und in geeigneter Form zur Verfügung.',
      'Verzögerungen, die auf fehlende oder verspätete Mitwirkung zurückzuführen sind, gehen nicht zu Lasten von Cuvir.',
    ],
  },
  {
    h: '§ 5 Vergütung & Zahlungsbedingungen',
    body: [
      'Die Vergütung richtet sich nach dem jeweiligen Angebot. Sofern nicht anders vereinbart, sind Rechnungen innerhalb von 14 Tagen nach Zugang ohne Abzug zur Zahlung fällig.',
      'Bei Retainer-Vereinbarungen wird die monatliche Pauschale jeweils zu Monatsbeginn fällig.',
      'Bei Zahlungsverzug gelten die gesetzlichen Verzugszinsen.',
    ],
  },
  {
    h: '§ 6 Nutzungsrechte',
    body: [
      'Mit vollständiger Bezahlung des Honorars überträgt Cuvir dem Auftraggeber die für den vereinbarten Zweck erforderlichen Nutzungsrechte an den erstellten Werken.',
      'Cuvir bleibt berechtigt, die im Rahmen des Auftrags entstandenen Arbeiten zu Eigenwerbungszwecken (Portfolio, Case Study, Social Media) zu nutzen, sofern nicht ausdrücklich anders vereinbart.',
    ],
  },
  {
    h: '§ 7 KI-generierte Inhalte',
    body: [
      'Soweit Cuvir KI-Modelle (insbesondere Sprach- und Bildmodelle) zur Leistungserbringung einsetzt, werden die generierten Inhalte vor Auslieferung redaktionell geprüft.',
      'Cuvir übernimmt jedoch keine Gewähr für die rechtliche Verwertbarkeit von KI-Outputs Dritter (z. B. Trainingsdaten-Konflikte). Der Auftraggeber stellt eine finale rechtliche Prüfung in seinem Verantwortungsbereich sicher.',
    ],
  },
  {
    h: '§ 8 Gewährleistung & Haftung',
    body: [
      'Cuvir haftet nach den gesetzlichen Bestimmungen für Vorsatz und grobe Fahrlässigkeit.',
      'Für leichte Fahrlässigkeit haftet Cuvir nur bei Verletzung wesentlicher Vertragspflichten und beschränkt auf den vorhersehbaren, vertragstypischen Schaden.',
      'Eine Haftung für entgangenen Gewinn, mittelbare Schäden und Folgeschäden ist ausgeschlossen.',
    ],
  },
  {
    h: '§ 9 Vertraulichkeit',
    body: [
      'Beide Parteien verpflichten sich, alle als vertraulich gekennzeichneten oder erkennbar vertraulichen Informationen der jeweils anderen Partei geheim zu halten und nur für die vereinbarten Zwecke zu verwenden.',
      'Diese Verpflichtung besteht über das Vertragsende hinaus für drei Jahre fort.',
    ],
  },
  {
    h: '§ 10 Schlussbestimmungen',
    body: [
      'Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts.',
      `Erfüllungsort und Gerichtsstand ist Köln, sofern der Auftraggeber Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist.`,
      'Sollte eine Bestimmung dieser AGB unwirksam sein oder werden, bleibt die Wirksamkeit der übrigen Bestimmungen unberührt.',
    ],
  },
];

const DATENSCHUTZ = [
  {
    h: '1. Verantwortlicher',
    body: [
      `Verantwortlich im Sinne der DSGVO ist:`,
      `${STUDIO.legalName}\n${STUDIO.street}\n${STUDIO.city}\nE-Mail: ${STUDIO.email}`,
    ],
  },
  {
    h: '2. Datenschutzbeauftragter',
    body: [
      `Als externer Datenschutzbeauftragter ist ${STUDIO.dpo} bestellt.`,
      `Kontakt für datenschutzrechtliche Anfragen über die LTMK Rechtsanwälte und Steuerberater PartmbB.`,
      `Anfragen können auch direkt an ${STUDIO.email} gerichtet werden — wir leiten sie an den Datenschutzbeauftragten weiter.`,
    ],
  },
  {
    h: '3. Allgemeines zur Datenverarbeitung',
    body: [
      'Wir verarbeiten personenbezogene Daten unserer Nutzer:innen grundsätzlich nur, soweit dies zur Bereitstellung einer funktionsfähigen Website sowie unserer Inhalte und Leistungen erforderlich ist.',
      'Die Verarbeitung erfolgt regelmäßig nur nach Einwilligung der Nutzer:innen oder wenn eine gesetzliche Grundlage die Verarbeitung gestattet.',
    ],
  },
  {
    h: '4. Bereitstellung der Website & Server-Logfiles',
    body: [
      'Bei jedem Aufruf unserer Internetseite erfasst unser System automatisiert Daten und Informationen vom Computersystem des aufrufenden Rechners.',
      'Folgende Daten werden hierbei erhoben: IP-Adresse, Datum und Uhrzeit des Zugriffs, Referrer-URL, übertragene Datenmenge, User-Agent.',
      'Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Die Daten werden spätestens nach 14 Tagen gelöscht.',
    ],
  },
  {
    h: '5. Cookies & Einwilligung',
    body: [
      'Unsere Website verwendet technisch notwendige Cookies, um den Betrieb sicherzustellen.',
      'Optionale Cookies (z. B. für Analyse) werden ausschließlich nach deiner Einwilligung über unseren Cookie-Banner gesetzt. Rechtsgrundlage: Art. 6 Abs. 1 lit. a DSGVO.',
      'Du kannst deine Einwilligung jederzeit widerrufen, indem du den lokalen Speicher deines Browsers für diese Domain leerst — anschließend erscheint der Banner erneut.',
    ],
  },
  {
    h: '6. Kontaktaufnahme',
    body: [
      'Bei Kontaktaufnahme per E-Mail oder Kontaktformular werden die übermittelten Angaben zwecks Bearbeitung der Anfrage gespeichert.',
      'Rechtsgrundlage: Art. 6 Abs. 1 lit. b und f DSGVO. Die Daten werden gelöscht, sobald sie für den Zweck nicht mehr erforderlich sind, spätestens nach 24 Monaten.',
    ],
  },
  {
    h: '7. Eingesetzte Drittanbieter',
    body: [
      'Wir nutzen folgende Drittanbieter, deren Verarbeitung jeweils auf Art. 6 Abs. 1 lit. a oder f DSGVO basiert:',
      '• Google Fonts (Google Ireland Ltd., EU / Google LLC, USA — Standardvertragsklauseln): Auslieferung der verwendeten Schriftart "Geist". Beim Aufruf der Seite wird eine Verbindung zu Google-Servern hergestellt; dabei werden IP-Adresse und Browser-Informationen übertragen.',
      '• Google Analytics 4 (Google Ireland Ltd. / Google LLC, USA): pseudonymisierte Reichweiten- und Nutzungsanalyse. Wird ausschließlich nach Einwilligung über den Cookie-Banner aktiviert. IP-Adressen werden vor der Speicherung gekürzt (IP-Anonymisierung).',
      '• Google Search Console (Google Ireland Ltd. / Google LLC, USA): Auswertung der Indexierung und Suchleistung in der Google-Suche. Es werden aggregierte, nicht-personenbezogene Daten von Google bereitgestellt.',
      '• Cal.com Inc. (USA — Standardvertragsklauseln): Terminbuchung über das eingebettete Buchungs-Widget auf der Kontaktseite.',
      '• Vercel Inc. (USA — Standardvertragsklauseln): Hosting der Website.',
      '• Anthropic (Claude API, USA) und OpenAI (GPT API, USA): KI-gestützte Funktionen in unseren Projekten, jeweils nur auf ausdrückliche Auftraggeber-Anfrage.',
      'Eine vollständige Liste mit Auftragsverarbeitungsverträgen stellen wir auf Anfrage zur Verfügung.',
    ],
  },
  {
    h: '8. Deine Rechte',
    body: [
      'Du hast das Recht auf Auskunft (Art. 15), Berichtigung (Art. 16), Löschung (Art. 17), Einschränkung der Verarbeitung (Art. 18), Datenübertragbarkeit (Art. 20) und Widerspruch (Art. 21 DSGVO).',
      'Außerdem steht dir ein Beschwerderecht bei einer Datenschutz-Aufsichtsbehörde zu.',
      `Wende dich für die Ausübung dieser Rechte formlos an ${STUDIO.email}.`,
    ],
  },
  {
    h: '9. Speicherdauer',
    body: [
      'Personenbezogene Daten werden gelöscht, sobald der Zweck der Speicherung entfällt und gesetzliche Aufbewahrungsfristen nicht entgegenstehen.',
      'Handels- und steuerrechtliche Aufbewahrungsfristen können bis zu 10 Jahre betragen.',
    ],
  },
  {
    h: '10. Aktualität dieser Datenschutzerklärung',
    body: [
      'Stand: Mai 2026. Wir passen diese Datenschutzerklärung an, wenn sich rechtliche Anforderungen oder unsere Verarbeitungstätigkeiten ändern.',
    ],
  },
];

const LEGAL_TABS = [
  { id: 'impressum',   title: 'Impressum',         subtitle: 'Pflichtangaben gemäß § 5 TMG.', sections: IMPRESSUM },
  { id: 'agb',         title: 'AGB',               subtitle: 'Allgemeine Geschäftsbedingungen.', sections: AGB },
  { id: 'datenschutz', title: 'Datenschutz',       subtitle: 'Wie wir mit deinen Daten umgehen.', sections: DATENSCHUTZ },
];

function LegalScreen({ id, onNav }) {
  const tab = LEGAL_TABS.find(t => t.id === id) || LEGAL_TABS[0];
  const [activeIdx, setActiveIdx] = lS(0);
  const [hoverIdx, setHoverIdx] = lS(null);
  const olRef = lR(null);
  const [indicator, setIndicator] = lS({ top: 0, height: 0, opacity: 0 });

  // Reset active when tab changes
  lE(() => { setActiveIdx(0); setHoverIdx(null); }, [tab.id]);

  // Track which section is currently visible — highlight the matching TOC item.
  // Strategy:
  //   1. If scrolled close to page bottom → force last section.
  //   2. Else if the LAST section's top has entered the upper ~70% of viewport
  //      (i.e. user is reading or about to read it) → last section.
  //   3. Otherwise pick the deepest section whose top has crossed the
  //      activation line (upper third of viewport).
  lE(() => {
    const ids = tab.sections.map((_, i) => `${tab.id}-${i}`);
    let raf = 0;
    const update = () => {
      raf = 0;
      const sections = ids.map(id => document.getElementById(id)).filter(Boolean);
      if (sections.length === 0) return;
      const viewportH = window.innerHeight;
      const activationLine = viewportH * 0.33;
      const lastIdx = sections.length - 1;

      const docH = Math.max(
        document.documentElement.scrollHeight,
        document.body.scrollHeight,
      );
      const scrolledToBottom = window.innerHeight + window.scrollY >= docH - 160;
      if (scrolledToBottom) {
        setActiveIdx(lastIdx);
        return;
      }

      // Last section reachable: its top has entered the readable zone
      const lastTop = sections[lastIdx].getBoundingClientRect().top;
      if (lastTop <= viewportH * 0.7) {
        setActiveIdx(lastIdx);
        return;
      }

      let idx = 0;
      for (let i = 0; i < sections.length; i++) {
        if (sections[i].getBoundingClientRect().top <= activationLine) idx = i;
        else break;
      }
      setActiveIdx(idx);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      if (raf) cancelAnimationFrame(raf);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [tab.id]);

  // Position the single sliding lime indicator on hover or active item
  lE(() => {
    const ol = olRef.current;
    if (!ol) return;
    const idx = hoverIdx !== null ? hoverIdx : activeIdx;
    const li = ol.children[idx];
    if (!li) return;
    const olRect = ol.getBoundingClientRect();
    const liRect = li.getBoundingClientRect();
    const padY = liRect.height * 0.15; // 15% inset top+bottom → 70% bar height
    setIndicator({
      top: liRect.top - olRect.top + padY,
      height: liRect.height - padY * 2,
      opacity: 1,
    });
  }, [activeIdx, hoverIdx, tab.id]);

  return (
    <div className="page-enter legal-page">
      <section className="hero">
        <div className="hero-grid" style={{ gridTemplateColumns: '1fr', paddingBottom: 0 }}>
          <div className="hero-l">
            <Tag>Rechtliches</Tag>
            <Reveal as="h1" className="display h-1" scramble key={tab.id}>{tab.title}.</Reveal>
            <p className="sub" style={{ maxWidth: 640 }}>{tab.subtitle}</p>
            <div className="legal-tabs" role="tablist">
              {LEGAL_TABS.map(t => (
                <a key={t.id}
                  className={`legal-tab ${t.id === tab.id ? 'active' : ''}`}
                  onClick={() => onNav('legal:' + t.id)}>
                  {t.title}
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section legal-body-section">
        <div className="container">
          <div className="legal-grid">
            <aside className="legal-toc">
              <div className="legal-toc-h">/ Inhalt</div>
              <ol className="legal-toc-list" ref={olRef}>
                <span className="legal-toc-indicator" style={{
                  transform: `translateY(${indicator.top}px)`,
                  height: indicator.height,
                  opacity: indicator.opacity,
                }} aria-hidden="true" />
                {tab.sections.map((s, i) => (
                  <li
                    key={i}
                    className={(activeIdx === i ? 'active ' : '') + (hoverIdx === i ? 'hover' : '')}
                    onMouseEnter={() => setHoverIdx(i)}
                    onMouseLeave={() => setHoverIdx(null)}
                  >
                    <a
                      href={`#${tab.id}-${i}`}
                      onClick={(e) => {
                        e.preventDefault();
                        const el = document.getElementById(`${tab.id}-${i}`);
                        if (!el) return;
                        const offset = 100; // sticky header allowance
                        const y = window.scrollY + el.getBoundingClientRect().top - offset;
                        setActiveIdx(i);
                        if (typeof window.__smoothScrollTo === 'function') {
                          window.__smoothScrollTo(y);
                        } else {
                          window.scrollTo({ top: y, behavior: 'smooth' });
                        }
                      }}
                    >{s.h}</a>
                  </li>
                ))}
              </ol>
              <div className="legal-toc-meta">
                <div>Stand</div>
                <div>Mai 2026</div>
              </div>
            </aside>
            <article className="legal-body">
              {tab.sections.map((s, i) => (
                <div key={i} id={`${tab.id}-${i}`} className="legal-section">
                  <div className="legal-section-num">/ {String(i + 1).padStart(2, '0')}</div>
                  <h2 className="display">{s.h}</h2>
                  {s.body.map((p, j) => <p key={j} style={{ whiteSpace: 'pre-line' }}>{p}</p>)}
                </div>
              ))}
              <div className="legal-foot">
                <span>© 2026 {STUDIO.name} · {STUDIO.street}, {STUDIO.city}</span>
              </div>
            </article>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LegalScreen, LEGAL_TABS });
