import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Calendar, Clock } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { PageHero } from "@/components/site/PageHero";
import { Section } from "@/components/site/Section";
import { POSTS } from "@/lib/blog";
import { SITE } from "@/lib/site";

export const Route = createFileRoute("/blog")({
  head: () => ({
    meta: [
      { title: `WordPress Blog — Tutorials & Fix Guides | ${SITE.name}` },
      { name: "description", content: "Expert WordPress tutorials: malware removal, hacked site recovery, speed optimization, WooCommerce fixes, and more." },
      { property: "og:title", content: "WordPress Tutorials & Fix Guides" },
      { property: "og:description", content: "Step-by-step guides from a 5-year WordPress specialist." },
    ],
  }),
  component: BlogIndex,
});

function BlogIndex() {
  return (
    <SiteLayout>
      <PageHero
        eyebrow="Blog"
        title="WordPress tutorials & fix guides"
        subtitle="Real fixes for real problems. Written by the same expert who handles every job."
      />
      <Section>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {POSTS.map((p) => (
            <Link
              key={p.slug}
              to="/blog/$slug"
              params={{ slug: p.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="relative h-44 bg-gradient-hero text-cream p-6 flex flex-col justify-end">
                <span className="text-[10px] uppercase tracking-wider font-bold text-emerald">{p.category}</span>
                <h2 className="mt-2 font-display font-semibold text-lg text-balance leading-tight">{p.title}</h2>
              </div>
              <div className="p-6 flex-1 flex flex-col">
                <p className="text-sm text-muted-foreground flex-1">{p.excerpt}</p>
                <div className="mt-4 pt-4 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
                  <span className="flex items-center gap-3">
                    <span className="flex items-center gap-1"><Calendar className="h-3 w-3" />{new Date(p.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })}</span>
                    <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{p.readTime}</span>
                  </span>
                  <ArrowRight className="h-4 w-4 text-emerald group-hover:translate-x-1 transition-transform" />
                </div>
              </div>
            </Link>
          ))}
        </div>
      </Section>
    </SiteLayout>
  );
}