import {
  Check,
  CornerDownRight,
  Mail,
  MapPin,
  Phone,
} from "lucide-react";

const services = [
  {
    number: "01",
    title: "Website",
    text: "Eine klare Startseite oder ein kompletter Auftritt, der sofort zeigt, warum man Ihnen vertrauen kann.",
  },
  {
    number: "02",
    title: "Struktur",
    text: "Angebot, Beweise, Ablauf und Kontakt werden so sortiert, dass Besucher nicht suchen müssen.",
  },
  {
    number: "03",
    title: "Technik",
    text: "Schnell, mobil sauber, DSGVO-arm und so gebaut, dass spätere Änderungen nicht zum Projekt werden.",
  },
];

const deliverables = [
  "Strategie und Seitenstruktur",
  "Individuelles Screen-Design",
  "Astro/React Umsetzung",
  "Kontaktformular und Datenschutz",
  "Hosting, Wartung und Analytics",
];

const packages = [
  {
    name: "Basis",
    price: "799 EUR",
    detail: "Eine starke Seite für ein klares Angebot.",
  },
  {
    name: "Profi",
    price: "1.499 EUR",
    detail: "Mehrere Seiten für Betriebe mit erklärungsbedürftigem Angebot.",
  },
  {
    name: "Maßarbeit",
    price: "2.499 EUR+",
    detail: "Individuelle Struktur, CMS und besondere Anforderungen.",
  },
];

const LandingRest = () => {
  return (
    <>
      <section
        id="leistungen"
        className="grid border-b border-border lg:grid-cols-[0.36fr_0.64fr]"
      >
        <div className="border-b border-border px-5 py-12 sm:px-8 lg:border-b-0 lg:border-r lg:px-12 lg:py-20">
          <p className="text-sm uppercase tracking-[0.3em] text-primary">
            Leistungen (02)
          </p>
          <h2 className="mt-6 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
            Vom Brief zur Seite
          </h2>
        </div>
        <div className="divide-y divide-border">
          {services.map((service) => (
            <article
              key={service.number}
              className="grid gap-8 px-5 py-10 sm:px-8 md:grid-cols-[7rem_0.4fr_1fr] lg:px-12"
            >
              <span className="text-5xl font-black text-primary">
                {service.number}
              </span>
              <h3 className="text-3xl font-black uppercase leading-none">
                {service.title}
              </h3>
              <p className="max-w-2xl text-lg leading-8 text-muted-foreground">
                {service.text}
              </p>
            </article>
          ))}
        </div>
      </section>

      <section className="grid border-b border-border lg:grid-cols-2">
        <div className="bg-foreground px-5 py-14 text-background sm:px-8 lg:px-12 lg:py-24">
          <p className="text-sm uppercase tracking-[0.3em] text-primary">
            Deliverables (03)
          </p>
          <h2 className="mt-8 max-w-[10ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
            Was am Ende steht
          </h2>
        </div>
        <div className="grid content-center gap-4 px-5 py-12 sm:px-8 lg:px-12">
          {deliverables.map((item) => (
            <div
              key={item}
              className="flex items-center gap-4 border-b border-border pb-4 text-lg font-semibold uppercase tracking-[0.08em]"
            >
              <Check className="size-5 text-primary" />
              <span>{item}</span>
            </div>
          ))}
        </div>
      </section>

      <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 (04)
            </p>
            <h2 className="mt-8 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
              Kosten ohne Nebel
            </h2>
          </div>
          <div className="grid gap-4">
            {packages.map((item) => (
              <article
                key={item.name}
                className="grid gap-4 border border-border p-5 sm:grid-cols-[0.5fr_0.5fr] sm:p-6"
              >
                <div>
                  <p className="text-sm uppercase tracking-[0.24em] text-primary">
                    {item.name}
                  </p>
                  <p className="mt-4 text-4xl font-black uppercase">
                    {item.price}
                  </p>
                </div>
                <p className="self-end text-lg leading-7 text-muted-foreground">
                  {item.detail}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section
        id="kontakt"
        className="grid min-h-[620px] lg:grid-cols-[0.72fr_0.28fr]"
      >
        <div className="px-5 py-14 sm:px-8 lg:px-12 lg:py-24">
          <p className="text-sm uppercase tracking-[0.3em] text-primary">
            Kontakt (05)
          </p>
          <h2 className="mt-8 max-w-[12ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl lg:text-8xl">
            Erzählen Sie mir kurz vom Projekt
          </h2>
          <p className="mt-8 max-w-2xl text-xl leading-8 text-muted-foreground">
            Ein paar Sätze reichen: Was bieten Sie an, was soll die Website
            leisten, und wann soll sie online sein?
          </p>
          <a
            href="mailto:hallo@matthias-meister.com"
            className="mt-10 inline-flex items-center gap-3 bg-primary px-6 py-5 text-sm font-black uppercase tracking-[0.18em] text-primary-foreground transition hover:bg-foreground hover:text-background"
          >
            <CornerDownRight className="size-5" />
            Anfrage per Mail senden
          </a>
        </div>
        <div className="flex flex-col justify-end gap-6 bg-primary px-5 py-10 text-primary-foreground sm:px-8 lg:px-10">
          <div className="flex gap-3">
            <Mail className="size-5" />
            <span>hallo@matthias-meister.com</span>
          </div>
          <div className="flex gap-3">
            <Phone className="size-5" />
            <span>Rückmeldung innerhalb von 24 Stunden</span>
          </div>
          <div className="flex gap-3">
            <MapPin className="size-5" />
            <span>Regionale KMU in Deutschland</span>
          </div>
        </div>
      </section>
    </>
  );
};

export { LandingRest };