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

interface Stats11Props {
  className?: string;
}

const Stats11 = ({ className }: Stats11Props) => {
  const stats = [
    ["SEO-ready", "Leistungsseiten, Region und Kontakt sauber strukturiert."],
    ["< 1 Sek.", "Auf schnelle Ladezeiten und klare Technik ausgelegt."],
    ["ab 799 €", "Transparente Einstiegspreise ohne Paketnebel."],
    ["2 Wochen", "Typischer Zeitraum vom Startgespräch bis zur Vorschau."],
  ];

  return (
    <section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
      <div className="mx-auto max-w-6xl">
        <div className="rounded-lg border border-border bg-primary p-6 text-primary-foreground sm:p-8 lg:grid lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.45fr)] lg:gap-12 lg:p-10">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary-foreground/65">
              Messbare Grundlagen
            </p>
            <h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Gute Websites fühlen sich ruhig an, weil die Basis stimmt.
            </h2>
          </div>
          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:mt-0">
            {stats.map(([value, label]) => (
              <div
                key={value}
                className="rounded-md border border-primary-foreground/15 bg-primary-foreground/[0.06] p-5"
              >
                <p className="text-3xl font-semibold tracking-tight">
                  {value}
                </p>
                <p className="mt-3 text-sm leading-6 text-primary-foreground/72">
                  {label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Stats11 };