webklar-alt/src/pages/WartungsAbo.tsx

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

const PORTAL = "https://project.webklar.com";

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

const leistungen = [
  {
    titel: "Betrieb & Pflege Ihrer Website",
    text: "Hosting auf unserem Server in Deutschland, Sicherheitsupdates, SSL-Zertifikat, tägliche Datensicherung und Überwachung der Erreichbarkeit.",
  },
  {
    titel: "1 Domain inklusive",
    text: "Registrierung auf Ihren Namen, Verlängerung und DNS-Verwaltung (.de, .com, .eu, .net oder .org).",
  },
  {
    titel: "1 E-Mail-Postfach",
    text: "Mit Ihrer eigenen Domain, 5 GB Speicher, Webmail und Zugriff per Outlook oder Smartphone.",
  },
  {
    titel: "1 Stunde Arbeitszeit pro Monat",
    text: "Für Änderungen und Unterstützung rund um Ihre Website. Nicht genutzte Zeit bleibt 12 Monate verfügbar.",
  },
];

const WartungsAbo = () => {
  return (
    <div className="min-h-screen bg-background">
      <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 className="pt-32 pb-24">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto">
            <div className="mb-12">
              <div className="label-tag mb-4 flex items-center gap-2">
                <ShieldCheck className="w-4 h-4" />
                Leistungen
              </div>
              <h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
                Wartungs-Abo
              </h1>
              <p className="text-muted-foreground text-lg">
                Betrieb, Pflege und Betreuung Ihrer Website: 50 € pro Monat, 12 Monate Mindestlaufzeit.
              </p>
            </div>

            <article className="space-y-8 text-foreground">
              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-4">Das ist enthalten</h2>
                <ul className="grid gap-5 sm:grid-cols-2">
                  {leistungen.map((l) => (
                    <li key={l.titel} className="rounded-2xl border border-border p-5">
                      <p className="font-medium mb-1">{l.titel}</p>
                      <p className="text-muted-foreground text-sm leading-relaxed">{l.text}</p>
                    </li>
                  ))}
                </ul>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Preis und Laufzeit</h2>
                <ul className="text-muted-foreground leading-relaxed space-y-1 list-disc pl-5">
                  <li>50,00 € pro Monat, monatlich im Voraus. Gemäß § 19 UStG wird keine Umsatzsteuer berechnet.</li>
                  <li>Mindestlaufzeit 12 Monate, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach jederzeit zum Ende des Abrechnungsmonats. Bei Geschäftsaufgabe Sonderkündigung mit einem Monat Frist.</li>
                  <li>Zahlung per Kreditkarte oder SEPA-Lastschrift über unseren Zahlungsdienstleister Stripe.</li>
                  <li>Arbeit über die enthaltene Stunde hinaus nur nach Ihrer Freigabe, 100 € pro Stunde, abgerechnet in 15-Minuten-Schritten.</li>
                </ul>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">So schließen Sie das Abo ab</h2>
                <p className="text-muted-foreground leading-relaxed">
                  Das Wartungs-Abo schließen Sie in unserem Kundenportal ab. Den Zugang richten wir Ihnen ein, sprechen Sie uns
                  einfach an. Nach der Anmeldung finden Sie das Angebot auf der Startseite. Dort sehen Sie danach jederzeit Ihr
                  Stundenkontingent, Ihre Rechnungen und können uns Aufträge schicken.
                </p>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Widerruf und Kündigung</h2>
                <p className="text-muted-foreground leading-relaxed">
                  Verbraucher können den Vertrag innerhalb von 14 Tagen widerrufen. Bereits gezahlte Beträge erstatten wir dann
                  nach der{" "}
                  <a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className="text-foreground underline hover:no-underline">Widerrufsbelehrung</a>.
                  Kündigen können Sie online ohne Anmeldung oder per E-Mail.
                </p>
                <div className="mt-4 flex flex-wrap gap-3">
                  <a href={`${PORTAL}/kuendigen.html`}>
                    <Button variant="outline" className="rounded-full">Verträge hier kündigen</Button>
                  </a>
                  <a href={`${PORTAL}/widerrufen.html`}>
                    <Button variant="outline" className="rounded-full">Vertrag widerrufen</Button>
                  </a>
                </div>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Unterlagen und Kontakt</h2>
                <p className="text-muted-foreground leading-relaxed">
                  <a href={`${PORTAL}/abo-bedingungen.html`} className="text-foreground underline hover:no-underline">Vertragsbedingungen mit Leistungsbeschreibung</a>
                  {" · "}
                  <a href={`${PORTAL}/WEBklar-Wartungs-Abo-Vertragsunterlagen.pdf`} className="text-foreground underline hover:no-underline">Vertragsunterlagen als PDF</a>
                  {" · "}
                  <a href={`${PORTAL}/datenschutz.html`} className="text-foreground underline hover:no-underline">Datenschutz</a>
                  <br />
                  WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · E-Mail support@webklar.com
                </p>
              </section>
            </article>

            <div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
              <a href={`${PORTAL}/login.html`}>
                <Button className="btn-minimal rounded-full">Zum Kundenportal</Button>
              </a>
              <Link to="/kontakt">
                <Button variant="outline" className="rounded-full">Kontakt aufnehmen</Button>
              </Link>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default WartungsAbo;