function LegalLayout({ title, sub, children, toc }) {
  return (
    <PublicPage>
      <section style={{ padding: '56px 0 28px' }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>
            <Link to="/">Start</Link> &nbsp;/&nbsp; {title}
          </div>
          <h1 style={{ marginTop: 12, fontSize: 42 }}>{title}</h1>
          {sub ? <p className="lead muted" style={{ marginTop: 12, maxWidth: 720 }}>{sub}</p> : null}
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: toc ? '220px 1fr' : '1fr', gap: 56 }}>
          {toc ? (
            <aside>
              <div style={{ position: 'sticky', top: 88 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>Inhaltsverzeichnis</div>
                <nav className="stack-2" style={{ fontSize: 13.5 }}>
                  {toc.map((t, i) => (
                    <a key={i} href={'#' + t.id} style={{ color: 'var(--ink-2)', display: 'block', padding: '4px 0' }}
                       onClick={(e) => { e.preventDefault(); document.getElementById(t.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>
                      {t.label}
                    </a>
                  ))}
                </nav>
              </div>
            </aside>
          ) : null}
          <div className="legal-body" style={{ maxWidth: 760, fontSize: 15, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            {children}
          </div>
        </div>
      </section>
    </PublicPage>
  );
}

const legalStyles = `
.legal-body h2 { font-size: 22px; margin: 36px 0 14px; color: var(--navy-900); scroll-margin-top: 80px; }
.legal-body h3 { font-size: 17px; margin: 24px 0 10px; color: var(--navy-900); scroll-margin-top: 80px; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { padding-left: 22px; margin: 0 0 14px; }
.legal-body ul li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink); }
.legal-body .mono-block { font-family: 'Geist Mono', monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; }
`;

function AGBPage() {
  const toc = [
    { id: 'agb-1', label: '§ 1 Anbieter & Geltungsbereich' },
    { id: 'agb-2', label: '§ 2 Leistungsbeschreibung' },
    { id: 'agb-3', label: '§ 3 Kein Verkauf eines Zertifikats' },
    { id: 'agb-4', label: '§ 4 Vertragslaufzeit & Verlängerung' },
    { id: 'agb-5', label: '§ 5 Preise & Zahlung' },
    { id: 'agb-6', label: '§ 6 Pflichten des Kunden' },
    { id: 'agb-7', label: '§ 7 Support' },
    { id: 'agb-8', label: '§ 8 Haftungsbegrenzung' },
    { id: 'agb-9', label: '§ 9 Kündigung' },
    { id: 'agb-10', label: '§ 10 Schlussbestimmungen' },
  ];

  return (
    <LegalLayout
      title="Allgemeine Geschäftsbedingungen"
      sub="Stand: 12. Mai 2026. Diese AGB regeln die Nutzung des Einrichtungs- und Überwachungsservices für Let's Encrypt SSL-Zertifikate."
      toc={toc}
    >
      <style>{legalStyles}</style>

      <h2 id="agb-1">§ 1 Anbieter &amp; Geltungsbereich</h2>
      <p>Anbieter des Services ist die <strong>Vitalarista LLC</strong>, 30 N Gould St Ste N, Sheridan, WY 82801, USA. Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für sämtliche Verträge zwischen der Vitalarista LLC und dem Kunden über den Bezug der nachfolgend beschriebenen Dienstleistung.</p>

      <h2 id="agb-2">§ 2 Leistungsbeschreibung</h2>
      <p>Gegenstand des Vertrages ist eine technische Dienstleistung, die zwei Bestandteile umfasst:</p>
      <ul>
        <li><strong>Einrichtung</strong> eines kostenlosen Let's Encrypt SSL-Zertifikates auf der vom Kunden angegebenen Domain, inklusive Konfiguration und Einbindung.</li>
        <li><strong>Regelmäßige Überwachung</strong> in einem Intervall von 40 Tagen, ob das Zertifikat weiterhin aktiv, gültig und korrekt eingebunden ist.</li>
      </ul>
      <p>Die Prüfung umfasst eine technische Basisüberwachung der HTTPS-Erreichbarkeit sowie der Zertifikatsgültigkeit. Sie ersetzt kein vollständiges Web-Monitoring.</p>

      <h2 id="agb-3">§ 3 Kein Verkauf eines Zertifikats</h2>
      <p><strong>Es wird ausdrücklich kein SSL-Zertifikat verkauft.</strong> Let's Encrypt SSL-Zertifikate sind über die Zertifizierungsstelle Let's Encrypt kostenlos verfügbar. Der Kunde bezahlt ausschließlich für die fachliche Einrichtung, Konfiguration und die regelmäßige Prüfung durch ReadySSL.</p>

      <h2 id="agb-4">§ 4 Vertragslaufzeit &amp; automatische Verlängerung</h2>
      <p>Die Mindestvertragslaufzeit beträgt 12 Monate. Beim Kauf kann zwischen 12, 24 oder 36 Monaten Laufzeit gewählt werden. Der Vertrag verlängert sich automatisch um jeweils weitere 12 Monate, sofern der Kunde die automatische Verlängerung nicht im Kundendashboard deaktiviert.</p>
      <p>Die Deaktivierung der automatischen Verlängerung ist jederzeit pro Service separat im Kundendashboard möglich. Der Service läuft in diesem Fall bis zum Ende der bereits gebuchten Laufzeit regulär weiter und wird anschließend nicht erneuert.</p>

      <h2 id="agb-5">§ 5 Preise &amp; Zahlung</h2>
      <p>Der Preis beträgt <strong>14,50 € pro Jahr</strong>. Die Zahlung erfolgt per Kreditkarte oder SEPA-Lastschrift.</p>
      <p>Die Abrechnung erfolgt über die Vitalarista LLC mit Sitz in den USA. Aus diesem Grund werden Rechnungen <strong>ohne Ausweis von Umsatzsteuer</strong> ausgestellt.</p>

      <h2 id="agb-6">§ 6 Pflichten des Kunden</h2>
      <p>Damit ReadySSL die Dienstleistung erbringen kann, ist der Kunde verpflichtet, die für die Einrichtung erforderlichen Informationen bereitzustellen:</p>
      <ul>
        <li>Übermittlung der Zugangsdaten zum Hosting- bzw. Domain-Anbieter, <strong>oder</strong></li>
        <li>Vereinbarung eines Termins für eine Fernwartungssitzung über TeamViewer oder AnyDesk.</li>
      </ul>
      <p>Der Kunde ist verantwortlich für die Richtigkeit seiner Angaben und für die Existenz und Erreichbarkeit der angegebenen Domain.</p>

      <h2 id="agb-7">§ 7 Support</h2>
      <p>Support wird ausschließlich über das im Kundendashboard verfügbare Ticket-System angeboten. Anfragen werden in der Regel innerhalb von 24 Stunden an Werktagen beantwortet.</p>

      <h2 id="agb-8">§ 8 Haftungsbegrenzung</h2>
      <p>ReadySSL haftet nicht für Ausfälle oder Schäden, die nicht durch ReadySSL selbst verursacht wurden. Dies umfasst insbesondere:</p>
      <ul>
        <li>Ausfälle oder Konfigurationsänderungen beim Hosting-Anbieter des Kunden,</li>
        <li>Probleme der DNS-Auflösung oder fehlerhafte DNS-Konfigurationen,</li>
        <li>Server- oder Netzwerkprobleme außerhalb der Kontrolle von ReadySSL,</li>
        <li>Falsche oder unvollständige Angaben des Kunden,</li>
        <li>Sperren oder Beschränkungen durch Let's Encrypt bzw. die ausstellende Zertifizierungsstelle.</li>
      </ul>

      <h2 id="agb-9">§ 9 Kündigung</h2>
      <p>Die Kündigung der automatischen Verlängerung erfolgt durch Deaktivieren im Kundendashboard. Eine außerordentliche Kündigung aus wichtigem Grund bleibt hiervon unberührt.</p>

      <h2 id="agb-10">§ 10 Schlussbestimmungen</h2>
      <p>Sollten einzelne Bestimmungen dieser AGB unwirksam sein, so berührt dies die Wirksamkeit der übrigen Bestimmungen nicht. Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts, soweit zwingende Verbraucherschutzvorschriften nichts anderes vorsehen.</p>
    </LegalLayout>
  );
}

function DatenschutzPage() {
  return (
    <LegalLayout
      title="Datenschutzerklärung"
      sub="Informationen zur Verarbeitung Ihrer personenbezogenen Daten."
    >
      <style>{legalStyles}</style>

      <h2>1. Verantwortliche Stelle</h2>
      <p>Verantwortlich für die Datenverarbeitung ist:</p>
      <div className="mono-block">
        VITALARISTA LLC<br />
        30 N Gould St Ste N<br />
        Sheridan, WY 82801<br />
        Vereinigte Staaten von Amerika<br />
        Employer Identification Number (EIN): 42-2773987
      </div>
      <p style={{ marginTop: 12 }}>Kontakt in Datenschutzfragen: <span className="mono">info@vitalarista.com</span>.</p>

      <h2>2. Erhobene Daten</h2>
      <p>Für die Erbringung der Dienstleistung verarbeiten wir folgende Datenkategorien:</p>
      <ul>
        <li>Stammdaten (Name, Adresse, E-Mail, Telefonnummer)</li>
        <li>Vertragsdaten (gewählte Laufzeit, Domain, Status, Rechnungen)</li>
        <li>Technische Daten zur Einrichtung (Hosting-Zugangsdaten, sofern bereitgestellt)</li>
        <li>Logdaten der automatischen Prüfungen</li>
      </ul>

      <h2>3. Rechtsgrundlage</h2>
      <p>Die Verarbeitung erfolgt zur Vertragserfüllung gemäß Art. 6 Abs. 1 lit. b DSGVO sowie zur Erfüllung rechtlicher Pflichten gemäß Art. 6 Abs. 1 lit. c DSGVO.</p>

      <h2>4. Speicherdauer</h2>
      <p>Vertragsdaten werden für die Dauer des Vertragsverhältnisses sowie für die gesetzlich vorgeschriebenen Aufbewahrungsfristen gespeichert.</p>

      <h2>5. Speicherung von Zugangsdaten</h2>
      <p>Übermittelte Hosting-Zugangsdaten werden verschlüsselt gespeichert und nach Abschluss der Einrichtung auf Wunsch des Kunden gelöscht.</p>

      <h2>6. Ihre Rechte</h2>
      <p>Sie haben jederzeit das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung, Datenübertragbarkeit und Widerspruch. Anfragen richten Sie bitte an <span className="mono">info@vitalarista.com</span>.</p>

      <h2>7. Datenübermittlung in Drittländer</h2>
      <p>Da unsere Gesellschaft ihren Sitz in den USA hat, werden bestimmte Daten in die USA übermittelt. Dies erfolgt unter Anwendung der Standardvertragsklauseln der EU-Kommission.</p>
    </LegalLayout>
  );
}

function ImpressumPage() {
  return (
    <LegalLayout
      title="Impressum / Anbieterinformationen"
      sub="Angaben gemäß § 5 TMG"
    >
      <style>{legalStyles}</style>

      <h2>Anbieter</h2>
      <div className="mono-block">
        VITALARISTA LLC<br />
        30 N Gould St Ste N<br />
        Sheridan, WY 82801<br />
        Vereinigte Staaten von Amerika
      </div>

      <h2>Vertretungsberechtigt</h2>
      <p>Vertreten durch das vertretungsberechtigte Mitglied der Gesellschaft (Single-Member LLC).</p>

      <h2>Kontakt</h2>
      <ul>
        <li>E-Mail: <span className="mono">info@vitalarista.com</span></li>
        <li>Support: ausschließlich über das Ticket-System im Kundendashboard</li>
      </ul>

      <h2>Registereintrag</h2>
      <p>Registriert als Limited Liability Company (LLC) im US-Bundesstaat Wyoming.</p>

      <h2>Umsatzsteuer</h2>
      <p>Da der Anbieter seinen Sitz in den USA hat, werden Rechnungen ohne Ausweis von Umsatzsteuer ausgestellt.</p>

      <h2>Streitschlichtung</h2>
      <p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <span className="mono">https://ec.europa.eu/consumers/odr</span>. Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
    </LegalLayout>
  );
}

function FAQPage() {
  const [open, setOpen] = useState({});
  const sections = [
    {
      title: 'Über den Service',
      items: [
        { q: 'Verkaufen Sie ein SSL-Zertifikat?', a: 'Nein. Wir verkaufen ausschließlich die Dienstleistung – also die Einrichtung und die regelmäßige Prüfung eines Let\'s Encrypt SSL-Zertifikates. Das Zertifikat selbst ist von Let\'s Encrypt kostenlos verfügbar.' },
        { q: 'Was genau bezahle ich?', a: 'Sie bezahlen die fachgerechte Einrichtung des Zertifikates auf Ihrer Domain sowie die automatisierte technische Prüfung alle 40 Tage, ob das Zertifikat gültig, aktiv und korrekt eingebunden ist.' },
        { q: 'Was ist Let\'s Encrypt?', a: 'Let\'s Encrypt ist eine gemeinnützige Zertifizierungsstelle, die kostenlose, automatisiert ausgestellte SSL-Zertifikate bereitstellt. Diese sind technisch vollwertig und werden von allen modernen Browsern akzeptiert.' },
      ],
    },
    {
      title: 'Technik & Einrichtung',
      items: [
        { q: 'Warum wird alle 40 Tage geprüft?', a: 'Let\'s Encrypt Zertifikate sind 90 Tage gültig und werden automatisch erneuert. Mit einem engmaschigen Prüfintervall von 40 Tagen erkennen wir innerhalb eines Gültigkeitszyklus mindestens zweimal, ob der Erneuerungsprozess erfolgreich war und das Zertifikat weiterhin korrekt eingebunden ist – Probleme fallen so früh auf, bevor das Zertifikat abläuft.' },
        { q: 'Muss ich Zugangsdaten übermitteln?', a: 'Nein. Sie können wahlweise Hosting-Zugangsdaten bereitstellen – oder die Einrichtung gemeinsam per Fernwartung über TeamViewer oder AnyDesk durchführen.' },
        { q: 'Kann die Einrichtung per Fernwartung erfolgen?', a: 'Ja. Wenn Sie keine Zugangsdaten übermitteln möchten, vereinbaren wir nach der Buchung einen Termin und führen die Einrichtung gemeinsam per TeamViewer oder AnyDesk durch.' },
        { q: 'Was passiert, wenn mein Hostinganbieter die Einrichtung blockiert?', a: 'In seltenen Fällen blockieren Hosting-Anbieter externe Zertifikatsausstellung. Sollte dies bei Ihrem Anbieter der Fall sein, informieren wir Sie umgehend und prüfen gemeinsam alternative Wege. Andernfalls erstatten wir den vollen Betrag.' },
      ],
    },
    {
      title: 'Vertrag & Verlängerung',
      items: [
        { q: 'Wie kann ich die automatische Verlängerung stoppen?', a: 'Im Kundendashboard können Sie für jeden einzelnen Service separat die automatische Verlängerung deaktivieren. Klicken Sie dazu auf den entsprechenden Service und wählen Sie "Automatische Verlängerung stoppen". Ihr Service läuft anschließend bis zum Ende der aktuellen Laufzeit weiter.' },
        { q: 'Welche Laufzeit-Optionen gibt es?', a: 'Sie können beim Kauf zwischen 12, 24 oder 36 Monaten wählen. Nach Ablauf verlängert sich der Vertrag automatisch um weitere 12 Monate – sofern Sie die Verlängerung nicht deaktivieren.' },
      ],
    },
    {
      title: 'Rechnung & Zahlung',
      items: [
        { q: 'Wo finde ich meine Rechnung?', a: 'Alle Rechnungen finden Sie im Kundendashboard unter dem Punkt "Rechnungen". Sie können dort jede Rechnung als PDF herunterladen.' },
        { q: 'Wird MwSt. berechnet?', a: 'Nein. Da die Abrechnung über die Vitalarista LLC mit Sitz in den USA erfolgt, werden Rechnungen ohne Ausweis von Umsatzsteuer ausgestellt.' },
        { q: 'Welche Zahlungsarten werden akzeptiert?', a: 'Wir akzeptieren Kreditkarte (Visa, Mastercard, American Express) und SEPA-Lastschrift.' },
      ],
    },
  ];

  return (
    <PublicPage>
      <section style={{ padding: '64px 0 32px' }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>
            <Link to="/">Start</Link> &nbsp;/&nbsp; FAQ
          </div>
          <h1 style={{ marginTop: 14, fontSize: 44 }}>Häufige Fragen</h1>
          <p className="lead muted" style={{ marginTop: 12, maxWidth: 640 }}>
            Antworten zu Service, Einrichtung, Verlängerung und Abrechnung.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container-narrow stack-8">
          {sections.map((sec, si) => (
            <div key={sec.title}>
              <h3 style={{ fontSize: 18, color: 'var(--navy-900)', marginBottom: 10 }}>{sec.title}</h3>
              <div className="faq-list" style={{ background: 'white', borderRadius: 12, border: '1px solid var(--border)' }}>
                {sec.items.map((it, i) => {
                  const key = si + ':' + i;
                  return (
                    <FAQItem key={key} q={it.q} a={it.a} open={!!open[key]} onClick={() => setOpen({ ...open, [key]: !open[key] })} />
                  );
                })}
              </div>
            </div>
          ))}

          <div className="card-elevated" style={{ padding: 28, marginTop: 24, textAlign: 'center' }}>
            <h3>Keine Antwort gefunden?</h3>
            <p className="muted" style={{ marginTop: 6, fontSize: 14 }}>Unser Support hilft Ihnen über das Ticket-System weiter.</p>
            <div className="row" style={{ justifyContent: 'center', marginTop: 16 }}>
              <Link to="/dashboard/support" className="btn btn-primary">Ticket erstellen</Link>
              <Link to="/checkout" className="btn btn-secondary">Service buchen</Link>
            </div>
          </div>
        </div>
      </section>
    </PublicPage>
  );
}

window.AGBPage = AGBPage;
window.DatenschutzPage = DatenschutzPage;
window.ImpressumPage = ImpressumPage;
window.FAQPage = FAQPage;