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

const PORTAL = "https://project.webklar.com";
const STEUER = "Endpreis, gemäß § 19 UStG ohne Umsatzsteuer";

const divider = <div className="my-8 border-t border-border" aria-hidden />;
const linkClass = "text-foreground underline hover:no-underline";

const leistungen = [
  {
    titel: "Bereitstellung Ihrer Website",
    text: "Hosting auf unserem Server in Deutschland, SSL-Zertifikat, tägliche Datensicherung, Überwachung der Erreichbarkeit sowie Updates von Betriebssystem und Server-Software.",
  },
  {
    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. Mehr Platz gibt es über den E-Mail-Zusatzspeicher: je 5 GB für 1,00 € pro Monat (${STEUER}).`,
  },
  {
    titel: "Störungen inklusive",
    text: "Störungen an Server, Domain und Postfach in unserem Verantwortungsbereich beheben wir ohne Berechnung. Servicezeiten Montag bis Freitag 9 bis 17 Uhr (außer an gesetzlichen Feiertagen in Rheinland-Pfalz), Antwort spätestens bis zum Ende des nächsten Werktags.",
  },
];

const HostingAbo = () => {
  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">
                <Server 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">
                Hosting-Abo
              </h1>
              <p className="text-muted-foreground text-lg">
                Ihre statische Website auf unserem Server in Deutschland: 15,00 € pro Monat, 12 Monate Mindestlaufzeit.
              </p>
              <p className="text-muted-foreground text-sm mt-1">Alle Preise sind Endpreise, gemäß § 19 UStG ohne Umsatzsteuer.</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">Nur für statische Websites</h2>
                <div className="text-muted-foreground leading-relaxed space-y-3">
                  <p>
                    Das Hosting-Abo ist für statische Websites bestimmt, die wir erstellt oder zur Betreuung übernommen haben.
                    Statisch heißt: Der Webserver liefert die Dateien Ihrer Website (HTML, CSS, JavaScript, Bilder) unverändert
                    aus. Dazu gehören auch die React- und Vite-Websites, die wir erstellen.
                  </p>
                  <p>
                    Nicht möglich sind ein Content-Management-System, ein Login, eine Datenbank und eigener serverseitiger Code
                    (etwa PHP). Kontakt über E-Mail-Links auf der Website ist möglich. Formulare, die Eingaben an einen Server
                    übermitteln, sind nicht enthalten; eine Lösung dafür bieten wir auf Anfrage gesondert an.
                  </p>
                  <p>
                    Updates und Pflege der Website selbst sind nicht enthalten; bei statischen Websites sind sie für den sicheren
                    Betrieb nicht nötig. Braucht Ihre Website dynamische Teile oder wünschen Sie laufende Pflege und eine Stunde
                    Arbeitszeit pro Monat, ist unser{" "}
                    <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link> das Richtige.
                  </p>
                </div>
              </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>15,00 € pro Monat, monatlich im Voraus. {STEUER}.</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>Ein Stundenkontingent ist nicht enthalten. Änderungen an Ihrer Website und andere Aufträge führen wir nur nach Ihrer Freigabe aus: 100 € pro Stunde ({STEUER}), abgerechnet in 15-Minuten-Schritten. Vorher nennen wir Ihnen den geschätzten Aufwand.</li>
                </ul>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">E-Mail-Zusatzspeicher</h2>
                <p className="text-muted-foreground leading-relaxed">
                  Brauchen Sie mehr Platz für E-Mails, buchen Sie im Kundenportal unter „Verträge“ Zusatzspeicher: Pakete von je
                  5 GB für 1,00 € pro Monat ({STEUER}), bis zu 10 Pakete. Die Zahl der Pakete können Sie dort jederzeit erhöhen
                  oder verringern, solange Ihr Abo nicht gekündigt ist. Eine Verringerung wirkt zum Ende des Abrechnungsmonats.
                  Einzelheiten:{" "}
                  <a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
                </p>
              </section>
              {divider}

              <section>
                <h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Wechsel ins Wartungs-Abo</h2>
                <p className="text-muted-foreground leading-relaxed">
                  Braucht Ihre Website später dynamische Teile oder möchten Sie Pflege und Arbeitszeit dazubuchen, wechseln Sie
                  im Kundenportal unter „Verträge“ jederzeit ins{" "}
                  <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link>, auch während der Mindestlaufzeit, solange
                  Ihr Hosting-Abo nicht gekündigt ist. Mit dem Wechsel beginnt eine neue Mindestlaufzeit von 12 Monaten.
                  Einzelheiten:{" "}
                  <a href={`${PORTAL}/abo-bedingungen.html#wechsel`} className={linkClass}>§ 9 der Vertragsbedingungen</a>.
                </p>
              </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 Hosting-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 im Bereich „Verträge“. Dort sehen Sie danach jederzeit
                  Ihre Verträge und Rechnungen, buchen Zusatzspeicher 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; das gilt für jede Bestellung, also für das
                  Abo, den Wechsel ins Wartungs-Abo und den Zusatzspeicher. Bereits gezahlte Beträge erstatten wir dann nach der{" "}
                  <a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className={linkClass}>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={linkClass}>Vertragsbedingungen der WEBklar-Abos</a>
                  {" · "}
                  <a href={`${PORTAL}/abo-bedingungen.html#hosting`} className={linkClass}>Leistungsbeschreibung A (Hosting-Abo)</a>
                  {" · "}
                  <a href={`${PORTAL}/WEBklar-Abo-Vertragsunterlagen.pdf`} className={linkClass}>Vertragsunterlagen als PDF</a>
                  {" · "}
                  <a href={`${PORTAL}/datenschutz.html`} className={linkClass}>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 HostingAbo;