import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowLeft, FileText } from "lucide-react";

const contractDivider = (
  <div className="my-8 border-t border-border" aria-hidden />
);

const AGB = () => {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
        <div className="container mx-auto px-6">
          <div className="flex items-center justify-between">
            <Link to="/" className="flex items-center gap-2 group">
              <span className="text-xl font-display font-medium text-foreground tracking-tight">
                Webklar
              </span>
            </Link>
            <Link to="/">
              <Button
                variant="ghost"
                className="text-muted-foreground hover:text-foreground"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Zurück
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto">
            {/* Page Header */}
            <div className="mb-12">
              <div className="label-tag mb-4 flex items-center gap-2">
                <FileText className="w-4 h-4" />
                Vertrag
              </div>
              <h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
                Kaufvertrag – WEBklar
              </h1>
              <p className="text-muted-foreground text-lg mb-8">
                (Modularer Projektvertrag)
              </p>
              <div className="text-muted-foreground space-y-1">
                <p><strong className="text-foreground">zwischen</strong></p>
                <p>WEBklar<br /><span className="text-sm">(im Folgenden „Anbieter“)</span></p>
                <p className="pt-2"><strong className="text-foreground">und</strong></p>
                <p>Kunde laut Angebot<br /><span className="text-sm">(im Folgenden „Kunde“)</span></p>
              </div>
            </div>

            {/* Contract Content */}
            <article className="space-y-8 text-foreground">
              {/* 1. Vertragsgegenstand */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  1. Vertragsgegenstand
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Gegenstand dieses Vertrages ist die Erbringung der im Angebot definierten Leistungen.</li>
                  <li>Der Vertrag besteht aus diesem Grundvertrag sowie den ausgewählten Leistungsmodulen.</li>
                  <li>Maßgeblich ist das jeweils angenommene Angebot von WEBklar.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 2. Leistungsart */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  2. Leistungsart
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Sämtliche Leistungen von WEBklar stellen Dienst- und Entwicklungsleistungen dar.</li>
                  <li>Ein bestimmter wirtschaftlicher, technischer oder rechtlicher Erfolg wird nicht geschuldet.</li>
                  <li>WEBklar erbringt keinen laufenden Betrieb, sofern dieser nicht explizit vereinbart wurde.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 3. Leistungsmodul A – Webseite */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
                  3. Leistungsmodul A – Webseite (einmalig)
                </h2>
                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>WEBklar erstellt eine individuelle Webseite gemäß Angebot.</li>
                  <li>Die Umsetzung erfolgt nach den vom Kunden gelieferten Inhalten und Vorgaben.</li>
                  <li>Zusätzliche Leistungen wie Domain, Hosting, Wartung oder SEO sind nicht Bestandteil, sofern sie nicht gesondert beauftragt wurden.</li>
                  <li>Der Kunde ist nicht berechtigt, Änderungen am Quellcode selbst vorzunehmen.</li>
                  <li>Änderungen erfolgen ausschließlich durch WEBklar gegen gesonderte Vergütung.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 4. Leistungsmodul B – Automatisierung / Virtualisierung */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
                  4. Leistungsmodul B – Automatisierung / Virtualisierung (einmalig)
                </h2>
                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>WEBklar entwickelt individuelle Automatisierungen, Apps oder Virtualisierungssysteme.</li>
                  <li>Die Leistung stellt eine reine Entwicklungsleistung dar.</li>
                  <li>Optional kann eine Beratungsleistung Bestandteil des Projektes sein.</li>
                  <li>Ein laufender Betrieb, Monitoring oder Wartung ist nicht geschuldet, außer dies wurde explizit vereinbart.</li>
                  <li>Der Kunde entscheidet über Inhalte, Daten und Prozesse und trägt dafür die rechtliche Verantwortung.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 5. Leistungsmodul C – Hosting */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
                  5. Leistungsmodul C – Hosting
                </h2>
                <p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>
                    Hosting bietet WEBklar als Hosting-Abo an. Für das Hosting-Abo und das Wartungs-Abo gelten die{" "}
                    <a href="https://project.webklar.com/abo-bedingungen.html" className="text-foreground underline hover:no-underline">Vertragsbedingungen der WEBklar-Abos</a>
                    {" "}mit Leistungsbeschreibung; sie gehen diesen AGB vor.
                  </li>
                  <li>Bestehende Hostingverträge mit jährlicher Laufzeit behalten die bei ihrem Abschluss geltende Fassung dieses Moduls.</li>
                  <li>WEBklar ist berechtigt, externe Anbieter (z. B. Rechenzentren) einzusetzen.</li>
                  <li>WEBklar übernimmt keine Haftung für Ausfälle externer Anbieter.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 6. Quellcode und Eigentum */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  6. Quellcode und Eigentum
                </h2>
                <div className="space-y-4 text-muted-foreground">
                  <div>
                    <h3 className="text-foreground font-medium mb-2">6.1 Webseite</h3>
                    <ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
                      <li>Der Kunde erhält ein einfaches, zeitlich unbegrenztes Nutzungsrecht an der fertigen Webseite.</li>
                      <li>Der Quellcode der Webseite wird nur auf ausdrückliche Anfrage und nach Vereinbarung herausgegeben.</li>
                      <li>Ohne Vereinbarung verbleibt der Quellcode bei WEBklar und wird archiviert.</li>
                    </ol>
                  </div>
                  <div>
                    <h3 className="text-foreground font-medium mb-2">6.2 Apps, Automatisierungen und Backend</h3>
                    <ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
                      <li>Der Quellcode von Apps, Automatisierungen und Backend-Systemen verbleibt vollständig bei WEBklar.</li>
                      <li>Eine Herausgabe erfolgt ausschließlich nach gesonderter schriftlicher Vereinbarung.</li>
                      <li>Der Kunde erhält lediglich Zugriff auf die Bedienoberfläche bzw. das Frontend.</li>
                    </ol>
                  </div>
                </div>
              </section>
              {contractDivider}

              {/* 7. Mitwirkungspflichten */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  7. Mitwirkungspflichten des Kunden
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Der Kunde stellt alle benötigten Inhalte, Daten und Freigaben rechtzeitig bereit.</li>
                  <li>Verzögerungen durch fehlende Mitwirkung gehen nicht zu Lasten von WEBklar.</li>
                  <li>WEBklar ist nicht verpflichtet, rechtliche Prüfungen der Inhalte vorzunehmen.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 8. Abnahme */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  8. Abnahme
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Nach Fertigstellung wird dem Kunden die Leistung zur Abnahme bereitgestellt.</li>
                  <li>Erfolgt innerhalb von 14 Tagen keine Rückmeldung, gilt die Leistung als abgenommen.</li>
                  <li>Nach Abnahme sind nur noch kostenpflichtige Änderungen möglich.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 9. Vergütung und Zahlung */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  9. Vergütung und Zahlung
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Die Vergütung ergibt sich aus dem Angebot.</li>
                  <li>Projektleistungen sind nach Vereinbarung fällig.</li>
                  <li>Für das Hosting-Abo und das Wartungs-Abo gelten die Zahlungsbedingungen der Vertragsbedingungen der WEBklar-Abos (monatlich im Voraus).</li>
                </ol>
              </section>
              {contractDivider}

              {/* 10. Zahlungsverzug */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  10. Zahlungsverzug
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Bei Zahlungsverzug erfolgen bis zu zwei Mahnungen.</li>
                  <li>Danach ist WEBklar berechtigt:
                    <ul className="list-disc list-inside mt-2 space-y-1 pl-2">
                      <li>Leistungen zu sperren</li>
                      <li>Verzugszinsen zu berechnen</li>
                      <li>den Vertrag außerordentlich zu kündigen</li>
                    </ul>
                  </li>
                </ol>
              </section>
              {contractDivider}

              {/* 11. Haftung */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  11. Haftung
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>WEBklar haftet nur bei Vorsatz und grober Fahrlässigkeit.</li>
                  <li>Keine Haftung für:
                    <ul className="list-disc list-inside mt-2 space-y-1 pl-2">
                      <li>Umsatzausfälle</li>
                      <li>Datenverlust</li>
                      <li>Systemausfälle</li>
                      <li>externe Dienste</li>
                    </ul>
                  </li>
                  <li>Die Haftung ist der Höhe nach auf den Auftragswert begrenzt.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 12. Kündigung */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  12. Kündigung
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Laufzeitverträge (z. B. Hosting, Wartung) können zum Ende der jeweiligen Laufzeit gekündigt werden. Laufzeit und Kündigung des Hosting-Abos und des Wartungs-Abos richten sich nach den Vertragsbedingungen der WEBklar-Abos (Mindestlaufzeit 12 Monate, danach jederzeit zum Ende des Abrechnungsmonats kündbar).</li>
                  <li>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
                </ol>
              </section>
              {contractDivider}

              {/* 13. Referenzen */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  13. Referenzen
                </h2>
                <p className="text-muted-foreground leading-relaxed">
                  WEBklar darf das Projekt nur nach ausdrücklicher Zustimmung des Kunden als Referenz verwenden.
                </p>
              </section>
              {contractDivider}

              {/* 14. Schlussbestimmungen */}
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
                  14. Schlussbestimmungen
                </h2>
                <ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
                  <li>Es gilt deutsches Recht.</li>
                  <li>Gerichtsstand ist der Sitz von WEBklar, soweit zulässig.</li>
                  <li>Sollten einzelne Bestimmungen unwirksam sein, bleibt der Vertrag im Übrigen wirksam.</li>
                </ol>
              </section>
            </article>

            {/* Back / Contact */}
            <div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
              <Link to="/">
                <Button variant="outline" className="rounded-full">
                  Zur Startseite
                </Button>
              </Link>
              <Link to="/kontakt">
                <Button className="btn-minimal rounded-full">
                  Kontakt
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default AGB;