"use client";

import { Check } from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface PricingPlan {
  name: string;
  badge: string;
  price: string;
  description?: string;
  features: string[];
  buttonText: string;
  isPopular?: boolean;
}

interface Pricing4Props {
  title?: string;
  description?: string;
  plans?: PricingPlan[];
  className?: string;
}

const Pricing4 = ({
  title = "Entwicklungspakete",
  description =
    "Alle Websites laufen auf deutschen Servern, sind DSGVO-konform und kommen ohne Cookie-Banner aus. Auf Wunsch erhalten Sie monatlich einen Einblick, wie viele Menschen Ihre Website besuchen haben — und woher sie kommen.",
  plans = [
    {
      name: "BASIS",
      badge: "799 €",
      price: "799 €",
      features: [
        "Eine Seite, fünf Sektionen",
        "Kontaktformular",
        "Impressum & Datenschutz",
        "Mobilfreundlich & für Google optimiert",
        "DSGVO-konformes Kontaktformular",
        "Cookiefreies Analytics — ohne Abmahnrisiko",
      ],
      buttonText: "Kostenloses Angebot anfordern",
    },
    {
      name: "PROFI",
      badge: "1.499 € ⭐ Empfehlung",
      price: "1.499 €",
      features: [
        "Bis zu 5 Unterseiten",
        "Google Maps Integration",
        "SEO-Basis (bessere Auffindbarkeit bei Google)",
        "Optionaler Blog",
        "DSGVO-konformes Kontaktformular",
        "Cookiefreies Analytics — ohne Abmahnrisiko",
        "Alles aus Basis inklusive",
      ],
      buttonText: "Kostenloses Angebot anfordern",
      isPopular: true,
    },
    {
      name: "MASSARBEIT",
      badge: "2.499 €",
      price: "2.499 €",
      features: [
        "Individuelles Design nach Ihren Wünschen",
        "CMS — Sie pflegen Inhalte selbst",
        "DSGVO-konformes Kontaktformular",
        "Cookiefreies Analytics — ohne Abmahnrisiko",
        "Alles aus Profi inklusive",
      ],
      buttonText: "Kostenloses Angebot anfordern",
    },
  ],
  className,
}: Pricing4Props) => {
  const [isMonthly, setIsMonthly] = useState(false);
  return (
    <section className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="flex flex-col gap-6">
          <h2 className="text-4xl font-semibold text-pretty lg:text-6xl">
            {title}
          </h2>
          <div className="flex flex-col justify-between gap-10 md:flex-row">
            <p className="max-w-3xl text-muted-foreground lg:text-xl">
              {description}
            </p>
            <Tabs
              value={isMonthly ? "monthly" : "yearly"}
              onValueChange={(value: string) =>
                setIsMonthly(value === "monthly")
              }
              className="w-fit shrink-0"
              aria-label="Leistungsvariante"
            >
              <TabsList className="grid h-11 w-max grid-cols-2 gap-0 rounded-md p-1 text-lg">
                <TabsTrigger
                  value="monthly"
                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                >
                  Entwicklung
                </TabsTrigger>
                <TabsTrigger
                  value="yearly"
                  className="h-full min-h-0 px-7 py-0 font-semibold text-muted-foreground data-active:text-foreground"
                >
                  Hosting & Wartung
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
          <div className="flex w-full flex-col items-stretch gap-6 md:flex-row">
            {isMonthly ? (
              plans.map((plan) => (
                <div
                  key={plan.name}
                  className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
                    plan.isPopular ? "bg-muted" : ""
                  }`}
                >
                  <Badge className="mb-8 block w-fit uppercase">
                    {plan.badge}
                  </Badge>
                  <h3 className="font-mono text-4xl lg:text-5xl">
                    {plan.price}
                  </h3>
                  <p className="text-muted-foreground">Einmalpreis</p>
                  <Separator className="my-6" />
                  <div className="flex h-full flex-col justify-between gap-20">
                    <ul className="space-y-4 text-muted-foreground md:leading-snug">
                      {plan.features.map((feature, featureIndex) => (
                        <li
                          key={featureIndex}
                          className="flex items-center gap-2"
                        >
                          <Check className="size-4 shrink-0" aria-hidden="true" />
                          <span>{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button className="w-full">{plan.buttonText}</Button>
                  </div>
                </div>
              ))
            ) : (
              [
                {
                  name: "BASIC HOSTING",
                  badge: "19 €/Monat",
                  price: "19 €",
                  features: [
                    "Hosting auf deutschen Servern in Sachsen",
                    "Grünes Schloss im Browser (SSL) — sicher & von Google bevorzugt",
                    "Tägliche Backups — Ihre Daten sind immer geschützt",
                    "Domain inklusive",
                    "Monatlicher Einblick in Ihre Besucherzahlen",
                  ],
                },
                {
                  name: "WARTUNG",
                  badge: "39 €/Monat ⭐ Empfehlung",
                  price: "39 €",
                  features: [
                    "Alles aus Basic Hosting inklusive",
                    "Regelmäßige Updates & Sicherheitschecks",
                    "1 Stunde Support pro Monat",
                    "Monitoring — ich merke bevor Sie es tun, wenn etwas nicht stimmt",
                    "Wöchentlicher Einblick in Ihre Besucherzahlen",
                  ],
                  isPopular: true,
                },
                {
                  name: "FULL SERVICE",
                  badge: "69 €/Monat",
                  price: "69 €",
                  features: [
                    "Alles aus Wartung inklusive",
                    "Kleinere Inhaltsänderungen (bis 2 Stunden/Monat)",
                    "Täglicher Einblick in Ihre Besucherzahlen",
                  ],
                },
              ].map((plan) => (
                <div
                  key={plan.name}
                  className={`flex w-full flex-col rounded-xl border shadow-sm p-6 text-left ${
                    plan.isPopular ? "bg-muted" : ""
                  }`}
                >
                  <Badge className="mb-8 block w-fit uppercase">
                    {plan.badge}
                  </Badge>
                  <h3 className="font-mono text-4xl lg:text-5xl">
                    {plan.price}
                  </h3>
                  <p className="text-muted-foreground">Monatlicher Preis</p>
                  <Separator className="my-6" />
                  <div className="flex h-full flex-col justify-between gap-20">
                    <ul className="space-y-4 text-muted-foreground md:leading-snug">
                      {plan.features.map((feature, featureIndex) => (
                        <li
                          key={featureIndex}
                          className="flex items-center gap-2"
                        >
                          <Check className="size-4 shrink-0" aria-hidden="true" />
                          <span>{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button className="w-full">Kostenloses Angebot anfordern</Button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing4 };