import { createFileRoute } from "@tanstack/react-router";
import { PageHero } from "@/components/site/page-hero";
import { FinalCta } from "@/components/site/final-cta";
import { Reveal } from "@/components/site/reveal";
import { Container, SectionHeading } from "@/components/site/section";
import { Button } from "@/components/ui/button";
import { travelPackages } from "@/data/site";
import { pageHead } from "@/lib/seo";

export const Route = createFileRoute("/travel")({
  component: TravelPage,
  head: () =>
    pageHead(
      "Travel Stories",
      "Virginia travel photographer and cinematic videographer. Harpers Ferry, Shenandoah, Old Town Alexandria, and Washington DC travel films.",
    ),
});

function TravelPage() {
  return (
    <main id="main">
      <PageHero
        kicker="Take the journey home with you"
        title="Don’t just visit a place. Become part of its story."
        lede="Cinematic travel memories for visitors exploring Virginia, West Virginia, Maryland, and Washington, DC."
        image="/images/virginia-landscape.jpg"
        video="/videos/hero-landscape.mp4"
        tall
        primary={{ label: "Create my travel story", to: "/book" }}
      />
      <section className="bg-ink py-24">
        <Container>
          <div className="grid gap-4 md:grid-cols-3">
            {[
              ["/images/alexandria-traveler.jpg", "Old Town"],
              ["/images/dc-memorial.jpg", "Washington, DC"],
              ["/images/shenandoah.jpg", "Shenandoah"],
            ].map(([img, t]) => (
              <Reveal key={t}>
                <img src={img} alt={t} className="aspect-[3/4] w-full rounded-xl object-cover" />
                <p className="mt-3 font-serif text-2xl">{t}</p>
              </Reveal>
            ))}
          </div>
          <div className="mt-20">
            <SectionHeading title="Travel packages" />
            <div className="mt-12 grid gap-5 md:grid-cols-3">
              {travelPackages.map((p) => (
                <div key={p.id} className="rounded-xl border border-line bg-ink-soft p-6">
                  <p className="font-serif text-2xl">{p.name}</p>
                  <p className="mt-2 font-serif text-4xl text-gold">{p.price}</p>
                  <ul className="mt-5 space-y-2 text-sm text-ivory/75">
                    {p.includes.map((i) => (
                      <li key={i}>{i}</li>
                    ))}
                  </ul>
                  <div className="mt-6">
                    <Button to="/book" search={{ service: "travel", package: "signature" }} size="sm">
                      Book {p.name}
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </section>
      <FinalCta title="Take the journey home with you." />
    </main>
  );
}