import { Check } from "lucide-react";

const packages = [
  {
    name: "Basis",
    price: "799 EUR",
    detail: "Eine starke Seite für ein klares Angebot.",
    highlighted: false,
    features: [
      "One-Page-Website",
      "Mobil optimiert",
      "Kontaktformular",
      "DSGVO & Impressum",
      "Hosting für 1 Jahr",
    ],
  },
  {
    name: "Profi",
    price: "1.499 EUR",
    detail: "Mehrere Seiten für Betriebe mit mehr zu zeigen.",
    highlighted: true,
      features: [
        "Alles aus Basis",
      "Bis zu 5 Unterseiten",
      "Individuelles Design",
      "SEO-Grundoptimierung",
      "Google Maps Einbindung",
      "Kontaktformular",
      "DSGVO & Impressum",
      "Hosting für 1 Jahr",
    ],
  },
  {
    name: "Maßarbeit",
    price: "2.499 EUR+",
    detail: "Ihr Betrieb, Ihre Regeln. Inhalte selbst ändern, Seiten ergänzen, wachsen.",
    highlighted: false,
      features: [
        "Alles aus Profi",
      "Unbegrenzte Seiten",
      "Inhalte selbst pflegbar (CMS)",
      "Individuelles Design & Struktur",
      "SEO-Optimierung",
      "Blog oder News-Bereich",
      "Erweiterte Funktionen",
      "DSGVO & Impressum",
      "Hosting für 1 Jahr",
    ],
  },
];

const PackagesSection = () => {
  return (
    <section
      id="pakete"
      className="border-b border-border px-5 py-14 sm:px-8 lg:px-12 lg:py-24"
    >
      <div className="grid gap-8 lg:grid-cols-[0.45fr_0.55fr]">
        <div>
          <p className="text-sm uppercase tracking-[0.3em] text-primary">
            Pakete (05)
          </p>
          <h2 className="mt-8 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
            Festpreis. Punkt.
          </h2>
        </div>
        <div className="grid gap-4">
          {packages.map((item) => (
            <article
              key={item.name}
              className={`grid gap-6 border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6 ${item.highlighted ? "border-primary bg-primary/6" : "border-border"}`}
            >
              <div>
                <div className="flex items-center gap-3">
                  <p className="text-sm uppercase tracking-[0.24em] text-primary">
                    {item.name}
                  </p>
                  {item.highlighted ? (
                    <span className="bg-primary px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.2em] text-primary-foreground">
                      Beliebteste Wahl
                    </span>
                  ) : null}
                </div>
                <p className="mt-4 text-4xl font-black uppercase">
                  {item.price}
                </p>
                <p className="mt-3 text-lg leading-7 text-muted-foreground">
                  {item.detail}
                </p>
              </div>
              <ul className="flex flex-col gap-2.5 self-center">
                {item.features.map((feature) => (
                  <li
                    key={feature}
                    className="flex items-center gap-3 text-sm text-foreground/85"
                  >
                    <Check className="size-4 shrink-0 text-primary" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

export { PackagesSection };