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: `Unter 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>
            <Button asChild variant="ghost" className="text-muted-foreground hover:text-foreground">
              <Link to="/">
                <ArrowLeft className="w-4 h-4 mr-2" />
                Zurück
              </Link>
            </Button>
          </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 in der Regel 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. Bestellen und verringern können Sie die Pakete dort,
                  sobald Ihr Abo begonnen hat, solange es nicht gekündigt ist und keine Zahlung offen 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“ ins{" "}
                  <Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link>, auch während der Mindestlaufzeit: sobald
                  Ihr Hosting-Abo begonnen hat, solange es nicht gekündigt ist und keine Zahlung offen 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“. Im Kundenportal sehen Sie danach
                  jederzeit Ihre Verträge und Rechnungen, buchen Zusatzspeicher und schicken uns Aufträge über den Chat.
                </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 jede Bestellung innerhalb von 14 Tagen ab Vertragsschluss widerrufen: den Abschluss des
                  Abos, den Wechsel ins Wartungs-Abo und die Bestellung von 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">
                  <Button asChild variant="outline" className="rounded-full">
                    <a href={`${PORTAL}/kuendigen.html`}>Verträge hier kündigen</a>
                  </Button>
                  <Button asChild variant="outline" className="rounded-full">
                    <a href={`${PORTAL}/widerrufen.html`}>Vertrag widerrufen</a>
                  </Button>
                </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 für die 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">
              <Button asChild className="btn-minimal rounded-full">
                <a href={`${PORTAL}/login.html`}>Zum Kundenportal</a>
              </Button>
              <Button asChild variant="outline" className="rounded-full">
                <Link to="/kontakt">Kontakt aufnehmen</Link>
              </Button>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default HostingAbo;