import { createFileRoute } from "@tanstack/react-router";
import { SaturdayCalendar } from "@/components/saturday-calendar";
import { VehiclePage } from "@/components/vehicle-page";
import { vehicles } from "@/lib/content";

export const Route = createFileRoute("/lillith")({ component: Lillith });

function Lillith() {
  return (
    <VehiclePage vehicle={vehicles.lillith}>
      <section id="calendar" className="scroll-mt-24 bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <p className="font-display text-kicker font-medium uppercase tracking-wide text-muted">
          Held Saturdays
        </p>
        <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
          Pick a date. Hold it today.
        </h2>
        <p className="mt-4 max-w-xl text-body text-muted">
          Three booked Lillith Saturdays deposited is the near-term proof. The
          calendar is the work. Files included. Gallery in 48 hours.
        </p>
        <div className="mt-12">
          <SaturdayCalendar />
        </div>
      </section>
    </VehiclePage>
  );
}