import { createFileRoute } from "@tanstack/react-router";
import { SiteLayout } from "@/components/site/Layout";
import { PageHero } from "@/components/site/PageHero";
import { Section } from "@/components/site/Section";
import { ServiceCard } from "@/components/site/ServiceCard";
import { CTAButtons } from "@/components/site/CTAButtons";
import { SERVICES } from "@/lib/site";

export const Route = createFileRoute("/services/")({
  head: () => ({
    meta: [
      { title: "WordPress Services — Malware Removal, Bug Fix, Speed | FixWP Pro" },
      { name: "description", content: "Full list of WordPress fixing services: malware removal, hacked site recovery, bug fixing, WooCommerce, speed optimization, monthly maintenance & redesign." },
      { property: "og:title", content: "WordPress Fixing Services — FixWP Pro" },
      { property: "og:description", content: "Every WordPress problem, fixed by an expert. Browse all services and pricing." },
    ],
  }),
  component: ServicesPage,
});

function ServicesPage() {
  return (
    <SiteLayout>
      <PageHero
        eyebrow="All Services"
        title="WordPress Fixing Services"
        subtitle="Pick a service or describe your issue — we quote within 30 minutes. Most fixes shipped same day."
      >
        <CTAButtons />
      </PageHero>
      <Section>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {SERVICES.map((s) => (
            <ServiceCard key={s.slug} {...s} price={s.priceUSD} />
          ))}
        </div>
      </Section>
    </SiteLayout>
  );
}