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-14 sm:px-6 lg:px-8 lg:pb-20">
      <div className="mx-auto max-w-6xl border-y border-border/80 py-9 lg:grid lg:grid-cols-[minmax(0,0.82fr)_minmax(0,1.55fr)] lg:gap-14 lg:py-11">
        <div className="max-w-md space-y-4 lg:pt-1">
          <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
            Vor dem Angebot
          </p>
          <h2 className="text-2xl font-semibold tracking-tight text-balance lg:text-3xl">
            Erst verstehen, dann bauen.
          </h2>
          <p className="text-base leading-7 text-muted-foreground">
            Die Zusammenarbeit ist bewusst direkt gehalten: ein Gespräch, eine
            klare Empfehlung und ein Vorschlag, der zu Ihrem Betrieb passt.
          </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-5 sm:border-t-0 sm:border-l sm:pl-6 sm:pt-0 lg:pl-8",
              )}
            >
              <dt className="text-sm font-semibold text-foreground">
                {item.title}
              </dt>
              <dd className="space-y-2">
                <p className="text-base font-medium leading-7 text-balance text-foreground lg:text-lg">
                  {item.description}
                </p>
                <p className="text-sm leading-6 text-muted-foreground">
                  {item.note}
                </p>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}