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

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

interface Hero235Props {
  className?: string;
}

const Hero235 = ({ className }: Hero235Props) => {
  return (
    <section className={cn("px-4 pt-5 sm:px-6 lg:px-8", className)}>
      <div className="mx-auto max-w-6xl">
        <header className="flex flex-col gap-4 border-b border-border/80 pb-4 sm:flex-row sm:items-center sm:justify-between">
          <a
            href="/"
            className="text-sm font-semibold tracking-tight text-foreground"
          >
            Matthias Meister Webdesign
          </a>
          <nav
            aria-label="Direkte Kontaktwege"
            className="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-muted-foreground"
          >
            <a
              href="tel:037627984400"
              className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
            >
              <Phone className="size-3.5" aria-hidden />
              03762 798 4400
            </a>
            <a
              href="mailto:info@matthias-meister-webdesign.de"
              className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
            >
              <Mail className="size-3.5" aria-hidden />
              E-Mail
            </a>
            <span className="inline-flex items-center gap-1.5">
              <MapPin className="size-3.5" aria-hidden />
              Crimmitschau
            </span>
          </nav>
        </header>

        <div className="grid gap-10 py-16 sm:py-20 lg:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)] lg:items-end lg:py-24">
          <div className="flex max-w-3xl flex-col gap-7">
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
              Webdesign für regionale KMU
            </p>
            <h1 className="max-w-[12ch] text-5xl font-semibold leading-[0.95] tracking-tight text-balance text-foreground sm:text-6xl lg:text-7xl">
              Websites, die vor Ort Vertrauen schaffen.
            </h1>
            <p className="max-w-[62ch] text-lg leading-8 text-muted-foreground">
              Für Handwerk, Praxen und kleine Betriebe: klar erklärt, schnell
              gebaut und so strukturiert, dass Besucher ohne Umwege verstehen,
              warum sie gerade Sie anfragen sollten.
            </p>
            <div className="flex flex-col gap-3 pt-1 sm:flex-row sm:items-center">
              <Button asChild size="lg" className="h-11 rounded-md px-5">
                <a href="#kontakt">
                  Projekt anfragen
                  <ArrowRight className="shrink-0" aria-hidden />
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="h-11 rounded-md px-5"
              >
                <a href="#preise">Pakete ansehen</a>
              </Button>
            </div>
            <dl className="grid gap-4 border-t border-border/80 pt-6 sm:grid-cols-3">
              {[
                ["24h", "Rückmeldung"],
                ["2 Wochen", "typischer Go-Live"],
                ["Sachsen", "Hosting & Betrieb"],
              ].map(([value, label]) => (
                <div key={label}>
                  <dt className="text-2xl font-semibold tracking-tight text-foreground">
                    {value}
                  </dt>
                  <dd className="mt-1 text-sm text-muted-foreground">
                    {label}
                  </dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="relative">
            <figure className="overflow-hidden rounded-lg border border-border bg-card">
              <img
                src="/about.jpg"
                alt="Arbeitsplatz von Matthias Meister beim Entwickeln einer Website"
                className="h-[19rem] w-full object-cover sm:h-[24rem] lg:h-[31rem]"
              />
              <figcaption className="grid gap-2 border-t border-border bg-card/95 p-5 sm:grid-cols-[1fr_auto] sm:items-center">
                <span className="text-sm font-medium text-foreground">
                  Direkt mit dem Entwickler statt mit wechselnden Agenturrollen.
                </span>
                <span className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                  Persönlich geplant
                </span>
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero235 };