import { Link, 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 { services } from "@/data/site";
import { pageHead } from "@/lib/seo";

export const Route = createFileRoute("/services")({
  component: ServicesPage,
  head: () =>
    pageHead(
      "Services",
      "Wedding films, event photography, portraits, cinematic reels, travel stories, and business content from FerryLore in Northern Virginia.",
    ),
});

function ServicesPage() {
  return (
    <main id="main">
      <PageHero
        kicker="One studio. Many stories."
        title="We don’t sell photography. We sell the future memory of today."
        lede="Events, weddings, portraits, and cinematic reels — then travel, business, and Timeless when you’re ready."
        image="/images/photographer-moment.jpg"
        primary={{ label: "Create My Story", to: "/book" }}
      />
      <section className="bg-ink py-24">
        <Container>
          <Reveal>
            <SectionHeading title="What we make" lede="Primary work first. The rest of the studio is already here when you need it." />
          </Reveal>
          <div className="mt-14 grid gap-10 md:grid-cols-2">
            {services.map((s) => (
              <Reveal key={s.id}>
                <Link to={s.href} className="group block">
                  <div className="overflow-hidden rounded-xl">
                    <img
                      src={s.image}
                      alt=""
                      className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]"
                    />
                  </div>
                  <p className="mt-5 text-[0.65rem] uppercase tracking-[0.22em] text-gold">
                    {s.from}
                  </p>
                  <h2 className="mt-2 font-serif text-4xl">{s.title}</h2>
                  <p className="mt-3 text-muted">{s.lede}</p>
                  <span className="mt-4 inline-block text-[0.68rem] uppercase tracking-[0.18em] text-ivory/80">
                    {s.cta}
                  </span>
                </Link>
              </Reveal>
            ))}
          </div>
        </Container>
      </section>
      <FinalCta />
    </main>
  );
}