import { cn } from "@/lib/utils";

const trustAnchors = [
  {
    title: "Direkter Kontakt",
    description:
      "Sie sprechen mit dem Menschen, der die Website auch plant und baut.",
    note: "Keine Vertriebsrunde, keine unklaren Übergänge.",
  },
  {
    title: "15+ Jahre Erfahrung",
    description:
      "Webentwicklung und Software mit Fokus auf robuste, wartbare Lösungen.",
    note: "Praxis statt Buzzwords und Technik nur dort, wo sie wirklich hilft.",
  },
  {
    title: "Hosting in Sachsen",
    description:
      "Deutsche Server, DSGVO-konform und passend für regionale Unternehmen.",
    note: "Greifbar, nachvollziehbar und ohne unnötiges Zusatztheater.",
  },
];

export default function CTASection() {
  return (
    <section className="px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
      <div className="mx-auto max-w-6xl border-y border-border/80 py-8 lg:grid lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.45fr)] lg:gap-12 lg:py-10">
        <div className="max-w-md space-y-4">
          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
            Vertrauensanker
          </p>
          <h2 className="text-2xl font-semibold tracking-tight text-balance lg:text-3xl">
            Ein gemeinsamer Startpunkt statt leerer Versprechen.
          </h2>
          <p className="text-base leading-7 text-muted-foreground">
            Noch bevor es um Pakete oder Features geht, soll direkt klar sein,
            warum diese Zusammenarbeit für regionale Unternehmen greifbar und
            verlaesslich wirkt.
          </p>
        </div>
        <dl className="mt-8 grid gap-6 sm:grid-cols-3 lg:mt-0 lg:gap-0">
          {trustAnchors.map((item, index) => (
            <div
              key={item.title}
              className={cn(
                "space-y-3",
                index === 0
                  ? ""
                  : "border-t border-border/70 pt-4 sm:border-t-0 sm:border-l sm:pl-6 sm:pt-0 lg:pl-8",
              )}
            >
              <dt className="text-sm font-medium text-foreground">
                {item.title}
              </dt>
              <dd className="space-y-2">
                <p className="text-lg font-semibold leading-7 text-balance text-foreground">
                  {item.description}
                </p>
                <p className="text-sm leading-6 text-muted-foreground">
                  {item.note}
                </p>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}