import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, TrendingUp } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { PageHero } from "@/components/site/PageHero";
import { Section } from "@/components/site/Section";
import { CASE_STUDIES } from "@/lib/case-studies";
import { SITE } from "@/lib/site";

export const Route = createFileRoute("/case-studies/")({
  head: () => ({
    meta: [
      { title: `WordPress Case Studies — Real Fixes, Real Results | ${SITE.name}` },
      { name: "description", content: "Real WordPress recoveries: malware cleanup, speed optimization, white screen rescues and design fixes — with before/after metrics from real clients." },
      { property: "og:title", content: "WordPress Case Studies — Real Fixes, Real Results" },
      { property: "og:description", content: "Before/after metrics from real WordPress emergencies we've solved." },
    ],
  }),
  component: CaseStudiesIndex,
});

function CaseStudiesIndex() {
  return (
    <SiteLayout>
      <PageHero
        eyebrow="Case Studies"
        title="Real WordPress emergencies. Measurable outcomes."
        subtitle="Every case below is a real client — the metrics, timelines and quotes are unedited. No stock screenshots."
      />
      <Section>
        <div className="grid gap-6 md:grid-cols-2">
          {CASE_STUDIES.map((c) => (
            <Link
              key={c.slug}
              to="/case-studies/$slug"
              params={{ slug: c.slug }}
              className="group flex flex-col rounded-2xl border border-border bg-card overflow-hidden shadow-soft hover:shadow-elegant hover:-translate-y-1 transition-all"
            >
              <div className="bg-gradient-hero text-cream p-7">
                <div className="flex items-center gap-2 text-[10px] uppercase tracking-wider font-bold text-emerald-glow">
                  {c.tags.map((t: string) => (
                    <span key={t} className="rounded-full border border-emerald/40 bg-emerald/10 px-2 py-0.5">
                      {t}
                    </span>
                  ))}
                </div>
                <h2 className="mt-4 font-display font-semibold text-2xl text-balance leading-tight">
                  {c.client}
                </h2>
                <p className="mt-1 text-sm text-cream/70">{c.industry} · {c.service}</p>
              </div>
              <div className="p-7 flex-1 flex flex-col">
                <p className="text-sm text-muted-foreground flex-1">{c.excerpt}</p>
                <div className="mt-5 grid grid-cols-2 gap-3">
                  {c.results.slice(0, 2).map((r: { label: string; before: string; after: string }) => (
                    <div key={r.label} className="rounded-lg bg-muted/50 p-3">
                      <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-semibold">{r.label}</p>
                      <p className="mt-1 font-display font-bold text-navy-deep flex items-center gap-1.5 text-sm">
                        <TrendingUp className="h-3.5 w-3.5 text-emerald" />
                        {r.after}
                      </p>
                    </div>
                  ))}
                </div>
                <span className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-emerald">
                  Read the full story <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </span>
              </div>
            </Link>
          ))}
        </div>
      </Section>
    </SiteLayout>
  );
}