import { ArrowRight, HeartHandshake, ShieldCheck, Zap } from "lucide-react";
import { Button } from "@/components/ui/button.tsx";
import { BookingDialog } from "@/components/booking-dialog.tsx";

const trustPoints = [
    { icon: Zap, label: "Unter 1 Sekunde Ladezeit" },
    { icon: ShieldCheck, label: "Ohne Update-Pflicht" },
    { icon: HeartHandshake, label: "Persönlich betreut" },
];

export default function Hero() {
    return (
        <section className="mx-auto max-w-4xl px-4 pt-12 pb-16 md:px-6 md:pt-20 md:pb-24">
            <div className="space-y-6 rise-in">
                <span className="island-kicker inline-flex items-center gap-2">
                    <span className="h-1.5 w-1.5 rounded-full bg-[var(--lagoon)]" aria-hidden />
                    Für Handwerk, Praxis und Therapie in Bayern
                </span>

                <h1 className="font-heading text-4xl font-bold leading-[1.05] tracking-tight text-[var(--sea-ink)] sm:text-5xl lg:text-6xl">
                    Eine Webseite, die{" "}
                    <span className="text-[var(--lagoon-deep)]">neue Kunden bringt</span> - nicht nur gut aussieht.
                </h1>

                <p className="max-w-xl text-lg text-[var(--sea-ink-soft)] sm:text-xl">
                    Damit neue Kunden Sie zuerst finden - nicht die Konkurrenz in der Nachbarschaft.
                </p>

                <div className="flex flex-wrap items-center gap-3">
                    <BookingDialog>
                        <Button
                            data-type="accent"
                            size="lg"
                            className="gap-2"
                            data-track="cta_erstgespraech"
                            data-source="hero"
                        >
                            Erstgespräch buchen
                            <ArrowRight className="h-4 w-4" />
                        </Button>
                    </BookingDialog>
                    <Button variant="ghost" size="lg" asChild>
                        <a
                            href="#pricing"
                            className="no-underline"
                            data-track="cta_pakete_ansehen"
                            data-source="hero"
                        >
                            Pakete ansehen
                        </a>
                    </Button>
                </div>
                <p className="text-sm text-(--sea-ink-soft)">
                    30 Minuten, kostenlos - direkt online buchen, keine Warteschleifen.
                </p>

                <ul className="flex flex-wrap items-center gap-x-6 gap-y-3 pt-2 text-sm text-[var(--sea-ink-soft)]">
                    {trustPoints.map(({ icon: Icon, label }) => (
                        <li key={label} className="inline-flex items-center gap-2">
                            <Icon className="h-4 w-4 text-[var(--lagoon-deep)]" aria-hidden />
                            {label}
                        </li>
                    ))}
                </ul>
            </div>
        </section>
    );
}