import { createFileRoute } from "@tanstack/react-router";
import Header from "@/components/header.tsx";
import { Footer } from "@/components/footer.tsx";
import BookingEmbed from "@/components/booking-embed.tsx";

export const Route = createFileRoute("/termin")({
    component: TerminPage,
    head: () => ({
        meta: [
            { title: "Termin buchen - webkulisse" },
            {
                name: "description",
                content:
                    "Buchen Sie ein 30-minütiges, kostenloses Erstgespräch mit webkulisse - direkt online, keine Warteschleifen.",
            },
        ],
        links: [{ rel: "canonical", href: "https://webkulisse.de/termin" }],
    }),
});

function TerminPage() {
    return (
        <div className="relative flex min-h-screen flex-col">
            <Header />
            <main className="flex-1">
                <section className="mx-auto max-w-6xl px-4 pt-10 pb-6 md:px-6 md:pt-16">
                    <div className="mx-auto max-w-2xl text-center">
                        <span className="island-kicker">Erstgespräch</span>
                        <h1 className="mt-3 font-heading text-3xl font-bold leading-tight tracking-tight text-(--sea-ink) sm:text-4xl">
                            Termin online buchen.
                        </h1>
                        <p className="mt-4 text-(--sea-ink-soft) sm:text-lg">
                            30 Minuten, kostenlos - suchen Sie sich einfach einen freien
                            Slot aus. Sie bekommen die Termin-Bestätigung direkt per Mail.
                        </p>
                    </div>
                </section>

                <section className="mx-auto max-w-6xl px-4 pb-16 md:px-6 md:pb-24">
                    <div className="island-shell rounded-3xl p-2 sm:p-4">
                        <div className="h-[80vh] min-h-[600px] w-full overflow-hidden rounded-2xl">
                            <BookingEmbed />
                        </div>
                    </div>
                </section>
            </main>
            <Footer />
        </div>
    );
}