import { createFileRoute } from "@tanstack/react-router";
import { PageHero } from "@/components/site/page-hero";
import { FinalCta } from "@/components/site/final-cta";
import { Container, Kicker, SectionHeading } from "@/components/site/section";
import { Button } from "@/components/ui/button";
import { addons, packages, policies } from "@/data/site";
import { pageHead } from "@/lib/seo";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/pricing")({
  component: PricingPage,
  head: () =>
    pageHead(
      "Pricing",
      "FerryLore packages from $199 portrait sessions to $1,499+ wedding films. Clear add-ons, deposits, and delivery timelines.",
    ),
});

function PricingPage() {
  return (
    <main id="main">
      <PageHero
        kicker="Pricing"
        title="Simple packages. Beautiful results."
        lede="Four named collections, one custom signature, and add-ons when the day asks for more."
        image="/images/bouquet.jpg"
        primary={{ label: "Create My Story", to: "/book" }}
      />
      <section className="bg-ink py-24">
        <Container>
          <div className="grid gap-5 lg:grid-cols-2">
            {packages.map((p) => (
              <article
                key={p.id}
                className={cn(
                  "flex flex-col rounded-xl border bg-ink-soft p-7",
                  p.popular ? "border-gold/55" : "border-line",
                )}
              >
                {p.popular ? (
                  <p className="mb-3 text-[0.62rem] uppercase tracking-[0.22em] text-gold">
                    Most popular
                  </p>
                ) : null}
                <div className="flex items-baseline justify-between gap-4">
                  <h2 className="font-serif text-3xl">{p.name}</h2>
                  <p className="font-serif text-3xl text-gold">{p.price}</p>
                </div>
                <p className="mt-3 text-sm text-muted">{p.blurb}</p>
                <ul className="mt-6 flex-1 space-y-2 text-sm text-ivory/80">
                  {p.includes.map((i) => (
                    <li key={i}>{i}</li>
                  ))}
                </ul>
                <p className="mt-5 text-[0.65rem] uppercase tracking-[0.16em] text-muted">
                  Best for {p.bestFor}
                </p>
                <div className="mt-6">
                  <Button to="/book" search={{ package: p.id }} className="w-full">
                    {p.cta}
                  </Button>
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>
      <section className="border-t border-line bg-ink-soft py-24">
        <Container>
          <SectionHeading title="Add-ons" lede="Layered onto any package." />
          <ul className="mt-10 divide-y divide-line border-y border-line">
            {addons.map((a) => (
              <li key={a.name} className="flex items-center justify-between py-4">
                <span>{a.name}</span>
                <span className="text-gold">{a.price}</span>
              </li>
            ))}
          </ul>
          <div className="mt-16 grid gap-10 md:grid-cols-2">
            <div>
              <Kicker>Larger projects</Kicker>
              <ul className="mt-4 space-y-2 text-sm text-muted">
                {policies.large.map((p) => (
                  <li key={p}>{p}</li>
                ))}
              </ul>
            </div>
            <div>
              <Kicker>Smaller sessions</Kicker>
              <ul className="mt-4 space-y-2 text-sm text-muted">
                {policies.small.map((p) => (
                  <li key={p}>{p}</li>
                ))}
              </ul>
            </div>
          </div>
          <ul className="mt-10 space-y-2 text-sm text-muted">
            {policies.cancel.map((p) => (
              <li key={p}>{p}</li>
            ))}
          </ul>
        </Container>
      </section>
      <FinalCta />
    </main>
  );
}