import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Clock } from "lucide-react";
import { BLOG_POSTS } from "@/lib/blog-posts";
import { PublicFooter } from "@/components/public-footer";
import { PublicSiteHeader } from "@/components/public-site-header";

const CANONICAL = "https://sms.gatavaseug.com/blog";

export const Route = createFileRoute("/blog/")({
  head: () => ({
    meta: [
      { title: "Bulk SMS Blog — Uganda & Africa Guides | Gatavase Bulky SMS" },
      { name: "description", content: "Guides, pricing breakdowns and playbooks on bulk SMS in Uganda and across Africa — from MTN/Airtel/Africell delivery to SMS marketing strategy." },
      { property: "og:title", content: "Bulk SMS Blog — Uganda & Africa Guides | Gatavase Bulky SMS" },
      { property: "og:description", content: "Guides and playbooks on bulk SMS in Uganda and Africa — pricing, sender IDs, MTN/Airtel/Africell delivery and marketing strategy." },
      { name: "twitter:card", content: "summary" },
      { property: "og:url", content: CANONICAL },
      { property: "og:type", content: "website" },
    ],
    links: [{ rel: "canonical", href: CANONICAL }],
    scripts: [{
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Blog",
        name: "Gatavase Bulky SMS Blog",
        url: CANONICAL,
        description: "Bulk SMS guides for Uganda and Africa.",
        blogPost: BLOG_POSTS.map((p) => ({
          "@type": "BlogPosting",
          headline: p.title,
          description: p.description,
          datePublished: p.date,
          url: `https://sms.gatavaseug.com/blog/${p.slug}`,
        })),
      }),
    }],
  }),
  component: BlogIndex,
});

function BlogIndex() {
  return (
    <div className="min-h-screen bg-background">
      <PublicSiteHeader activePath="/blog" />

      <section className="container mx-auto max-w-5xl px-4 pt-16 pb-10">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">Blog</p>
        <h1 className="mt-2 font-display text-4xl font-bold tracking-tight md:text-5xl">
          Bulk SMS insights for Uganda & Africa
        </h1>
        <p className="mt-4 max-w-2xl text-lg text-muted-foreground">
          Pricing breakdowns, marketing playbooks and delivery guides for teams sending SMS across MTN, Airtel and Africell.
        </p>
      </section>

      <section className="container mx-auto max-w-5xl px-4 pb-24">
        <div className="grid gap-6 md:grid-cols-2">
          {BLOG_POSTS.map((post) => (
            <Link
              key={post.slug}
              to="/blog/$slug"
              params={{ slug: post.slug }}
              className="group flex flex-col rounded-2xl border border-border bg-card p-6 shadow-sm transition hover:border-primary/40 hover:shadow-md"
            >
              <div className="flex items-center gap-3 text-xs text-muted-foreground">
                <span className="rounded-full bg-primary/10 px-2 py-0.5 font-medium text-primary">{post.category}</span>
                <span className="flex items-center gap-1"><Clock className="h-3 w-3" /> {post.readMinutes} min read</span>
              </div>
              <h2 className="mt-4 font-display text-xl font-semibold leading-snug group-hover:text-primary">
                {post.title}
              </h2>
              <p className="mt-3 flex-1 text-sm text-muted-foreground">{post.excerpt}</p>
              <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
                Read article <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
              </span>
            </Link>
          ))}
        </div>
      </section>

      <PublicFooter />
    </div>
  );
}