import { ArrowRight, Mail, Phone } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Footer27Props {
  className?: string;
}

const Footer27 = ({ className }: Footer27Props) => {
  return (
    <footer className={cn("px-4 pb-10 sm:px-6 lg:px-8", className)}>
      <div className="mx-auto max-w-6xl border-t border-border/80 pt-8">
        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
          <div>
            <h2 className="max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Bereit für eine Website, die Ihr Unternehmen klarer erklärt?
            </h2>
            <p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground">
              Eine kurze Nachricht reicht. Ich prüfe, welcher Weg sinnvoll ist,
              und melde mich mit einer ehrlichen Einschätzung.
            </p>
            <Button asChild size="lg" className="mt-6 h-11 rounded-md px-5">
              <a href="#kontakt">
                Kostenloses Angebot anfordern
                <ArrowRight className="shrink-0" aria-hidden />
              </a>
            </Button>
          </div>

          <address className="not-italic">
            <div className="space-y-3 text-sm text-muted-foreground">
              <a
                href="mailto:info@matthias-meister-webdesign.de"
                className="flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Mail className="size-4" aria-hidden />
                info@matthias-meister-webdesign.de
              </a>
              <a
                href="tel:037627984400"
                className="flex items-center gap-2 transition-colors hover:text-foreground"
              >
                <Phone className="size-4" aria-hidden />
                03762 798 4400
              </a>
            </div>
          </address>
        </div>

        <div className="mt-10 flex flex-col gap-4 border-t border-border/80 pt-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
          <p>© 2026 Matthias Meister Webdesign — Crimmitschau</p>
          <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
            <a
              href="/impressum"
              className="underline underline-offset-4 transition-colors hover:text-foreground"
            >
              Impressum
            </a>
            <a
              href="/datenschutz"
              className="underline underline-offset-4 transition-colors hover:text-foreground"
            >
              Datenschutz
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export { Footer27 };