import type { Metadata } from 'next'
import Link from 'next/link'
import { BLOG_POSTS } from '@/lib/blog'

export const metadata: Metadata = {
  title: 'Blog',
  description: 'The Plymouth Metro campaign blog — news, analysis, and updates on Plymouth Metro, the Tavistock line reinstatement, and the Dawlish resilience issue.',
}

const CATEGORY_LABELS: Record<string, string> = {
  campaign:  'Campaign',
  tavistock: 'Tavistock Line',
  dawlish:   'Dawlish',
  network:   'Network',
  policy:    'Policy',
}
const CATEGORY_COLOURS: Record<string, string> = {
  campaign:  'bg-blue-100 text-blue-800',
  tavistock: 'bg-purple-100 text-purple-800',
  dawlish:   'bg-red-100 text-red-800',
  network:   'bg-teal-100 text-teal-800',
  policy:    'bg-amber-100 text-amber-800',
}

export default function BlogPage() {
  const sorted = [...BLOG_POSTS].sort((a, b) => b.date.localeCompare(a.date))
  const featured = sorted.filter(p => p.featured).slice(0, 3)
  const rest = sorted.filter(p => !p.featured || featured.indexOf(p) === -1 ? !featured.includes(p) : false)

  return (
    <>
      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <div className="badge bg-white/15 text-white mb-4">Blog</div>
            <h1 className="text-4xl sm:text-5xl font-black mb-4">Campaign Blog</h1>
            <p className="text-xl text-white/80 leading-relaxed">
              News, analysis, and campaign updates from the Plymouth Metro team — covering Plymouth Metro, the Tavistock line, the Dawlish vulnerability, and the fight for better transport in the South West.
            </p>
          </div>
        </div>
      </section>

      <section className="py-14 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-xl font-bold text-metro-navy mb-7">Featured posts</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
            {featured.map(post => (
              <Link key={post.slug} href={`/blog/${post.slug}`}
                className="card group hover:border-metro-sky transition-colors flex flex-col">
                <div className="flex items-center gap-2 mb-3">
                  <span className={`text-xs font-semibold px-2 py-1 rounded ${CATEGORY_COLOURS[post.category]}`}>
                    {CATEGORY_LABELS[post.category]}
                  </span>
                  <time className="text-xs text-metro-muted">{new Date(post.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}</time>
                </div>
                <h3 className="font-bold text-metro-navy group-hover:text-metro-sky transition-colors mb-2 leading-snug text-lg flex-1">
                  {post.title}
                </h3>
                <p className="text-sm text-metro-muted leading-relaxed mb-4">{post.excerpt}</p>
                <p className="text-sm font-semibold text-metro-sky">Read more →</p>
              </Link>
            ))}
          </div>

          <h2 className="text-xl font-bold text-metro-navy mb-7">All posts</h2>
          <div className="space-y-4">
            {sorted.map(post => (
              <Link key={post.slug} href={`/blog/${post.slug}`}
                className="card group hover:border-metro-sky transition-colors flex items-start gap-4">
                <div className="flex-shrink-0 w-24 text-xs text-metro-muted mt-0.5">
                  {new Date(post.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className={`text-[10px] font-semibold px-2 py-0.5 rounded ${CATEGORY_COLOURS[post.category]}`}>
                      {CATEGORY_LABELS[post.category]}
                    </span>
                  </div>
                  <h3 className="font-semibold text-metro-navy group-hover:text-metro-sky transition-colors leading-snug">
                    {post.title}
                  </h3>
                  <p className="text-sm text-metro-muted mt-1 leading-relaxed line-clamp-2">{post.excerpt}</p>
                </div>
                <div className="flex-shrink-0 text-metro-sky text-sm font-semibold hidden sm:block">→</div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}