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

export const Route = createFileRoute("/business")({
  component: BusinessPage,
  head: () =>
    pageHead(
      "Business Content",
      "Photography, reels, and promotional video for small businesses and personal brands in Northern Virginia, Maryland, and Washington, DC.",
    ),
});

function BusinessPage() {
  return (
    <main id="main">
      <PageHero
        kicker="Your business has a story too"
        title="People don’t connect with logos. They connect with stories."
        lede="Visual content designed to make people stop scrolling."
        image="/images/cafe-owner.jpg"
        primary={{ label: "Grow my brand", to: "/book" }}
      />
      <section className="bg-ink py-24">
        <Container>
          <SectionHeading title="Content packages" lede="Photography · Reels · Promotional video · Social content. From $299/month." />
          <div className="mt-12 grid gap-5 md:grid-cols-3">
            {businessPackages.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: "business" }} size="sm">
                    Start {p.name}
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>
      <FinalCta title="Give your business a story people watch." />
    </main>
  );
}