import { createFileRoute } from "@tanstack/react-router";
import { BookingFlow } from "@/components/site/booking-flow";
import { Container, Kicker } from "@/components/site/section";
import { pageHead } from "@/lib/seo";

type Search = {
  service?: string;
  package?: string;
};

export const Route = createFileRoute("/book")({
  component: BookPage,
  validateSearch: (raw: Record<string, unknown>): Search => ({
    service: typeof raw.service === "string" ? raw.service : undefined,
    package: typeof raw.package === "string" ? raw.package : undefined,
  }),
  head: () =>
    pageHead(
      "Create My Story",
      "Book a FerryLore session — choose a service, pick a package, reserve your date with a deposit.",
    ),
});

function BookPage() {
  const search = Route.useSearch();
  return (
    <main id="main" className="bg-ink pt-28 pb-24">
      <Container>
        <Kicker>Create My Story</Kicker>
        <h1 className="max-w-2xl font-serif text-5xl sm:text-6xl">
          What will you want to remember?
        </h1>
        <p className="mt-4 max-w-xl text-muted">
          Choose a service, a package, a date. Policies are visible before any deposit.
        </p>
        <div className="mt-14">
          <BookingFlow initialService={search.service} initialPackage={search.package} />
        </div>
      </Container>
    </main>
  );
}