import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { ArrowLeft, ArrowRight, CalendarDays, Clock } from 'lucide-react'
import { CtaBand } from '@/components/cta-band'
import { blogPosts } from '@/lib/site'

export function generateStaticParams() {
  return blogPosts.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = blogPosts.find((p) => p.slug === slug)
  if (!post) return { title: 'Article Not Found' }
  return { title: post.title, description: post.excerpt }
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = blogPosts.find((p) => p.slug === slug)
  if (!post) notFound()

  const related = blogPosts.filter((p) => p.slug !== post.slug).slice(0, 3)

  return (
    <>
      <section className="bg-navy text-navy-foreground">
        <div className="mx-auto max-w-3xl px-4 py-16 md:py-20">
          <Link
            href="/blogs"
            className="inline-flex items-center gap-1.5 text-sm font-semibold text-navy-foreground/80 transition-colors hover:text-navy-foreground"
          >
            <ArrowLeft className="size-4" aria-hidden />
            Back to all articles
          </Link>
          <span className="mt-6 inline-flex rounded-full bg-navy-foreground/15 px-3 py-1 text-xs font-semibold uppercase tracking-wide">
            {post.category}
          </span>
          <h1 className="mt-4 text-3xl font-bold text-balance md:text-4xl">{post.title}</h1>
          <div className="mt-4 flex items-center gap-4 text-sm text-navy-foreground/80">
            <span className="flex items-center gap-1.5">
              <CalendarDays className="size-4" aria-hidden />
              {post.date}
            </span>
            <span className="flex items-center gap-1.5">
              <Clock className="size-4" aria-hidden />
              {post.readTime}
            </span>
          </div>
        </div>
      </section>

      <article className="bg-background">
        <div className="mx-auto max-w-3xl px-4 py-16 md:py-20">
          <div className="space-y-6 text-lg leading-relaxed text-foreground">
            <p className="text-xl font-medium text-muted-foreground">{post.excerpt}</p>
            {post.content.map((paragraph, i) => (
              <p key={i} className="text-pretty">
                {paragraph}
              </p>
            ))}
          </div>

          <div className="mt-10 rounded-2xl border border-border bg-secondary p-8 text-center">
            <h2 className="text-2xl font-bold text-balance">Have questions about care for your loved one?</h2>
            <p className="mt-2 text-muted-foreground">
              Our team is here to help with a free, no-obligation consultation.
            </p>
            <Link
              href="/contact"
              className="mt-5 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90"
            >
              Get in Touch
              <ArrowRight className="size-4" aria-hidden />
            </Link>
          </div>
        </div>
      </article>

      <section className="bg-secondary">
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
          <h2 className="text-2xl font-bold">More articles</h2>
          <div className="mt-8 grid gap-6 md:grid-cols-3">
            {related.map((p) => (
              <Link
                key={p.slug}
                href={`/blogs/${p.slug}`}
                className="group flex flex-col rounded-xl border border-border bg-card p-6 transition-all hover:-translate-y-1 hover:shadow-lg"
              >
                <span className="text-xs font-semibold uppercase tracking-wide text-primary">{p.category}</span>
                <h3 className="mt-2 text-lg font-semibold text-balance">{p.title}</h3>
                <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{p.excerpt}</p>
                <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-primary">
                  Read more
                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  )
}