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

export const metadata: Metadata = {
  title: 'Blogs',
  description:
    'Helpful articles and resources on home care, senior wellness, memory care, and family caregiving from the team at 24-7 Care Givers.',
}

export default function BlogsPage() {
  const [featured, ...rest] = blogPosts

  return (
    <>
      <PageHero
        breadcrumb="Blogs"
        title="Care Insights & Resources"
        subtitle="Guidance, tips, and stories to help families navigate the journey of caring for the ones they love."
      />

      <section className="bg-background">
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
          <Link
            href={`/blogs/${featured.slug}`}
            className="group grid overflow-hidden rounded-2xl border border-border bg-card transition-shadow hover:shadow-lg md:grid-cols-2"
          >
            <div className="flex items-center justify-center bg-navy p-10 text-navy-foreground">
              <div>
                <span className="inline-flex rounded-full bg-navy-foreground/15 px-3 py-1 text-xs font-semibold uppercase tracking-wide">
                  Featured
                </span>
                <h2 className="mt-4 text-3xl font-bold text-balance">{featured.title}</h2>
              </div>
            </div>
            <div className="p-8">
              <span className="text-xs font-semibold uppercase tracking-wide text-primary">{featured.category}</span>
              <p className="mt-3 leading-relaxed text-muted-foreground">{featured.excerpt}</p>
              <div className="mt-4 flex items-center gap-4 text-sm text-muted-foreground">
                <span className="flex items-center gap-1.5">
                  <CalendarDays className="size-4" aria-hidden />
                  {featured.date}
                </span>
                <span className="flex items-center gap-1.5">
                  <Clock className="size-4" aria-hidden />
                  {featured.readTime}
                </span>
              </div>
              <span className="mt-5 inline-flex items-center gap-1 font-semibold text-primary">
                Read article
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" aria-hidden />
              </span>
            </div>
          </Link>

          <div className="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {rest.map((post) => (
              <Link
                key={post.slug}
                href={`/blogs/${post.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">{post.category}</span>
                <h3 className="mt-2 text-xl font-semibold text-balance">{post.title}</h3>
                <p className="mt-2 flex-1 text-sm leading-relaxed text-muted-foreground">{post.excerpt}</p>
                <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
                  <span className="flex items-center gap-1.5">
                    <CalendarDays className="size-3.5" aria-hidden />
                    {post.date}
                  </span>
                  <span className="flex items-center gap-1.5">
                    <Clock className="size-3.5" aria-hidden />
                    {post.readTime}
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  )
}