import Link from 'next/link'
import { ArrowLeft, ArrowRight } from 'lucide-react'
import { POSTS } from '@/lib/blog-data'

export const metadata = {
  title: 'Blog — Nitish Raj Uprety',
  description:
    'Articles on web development, Laravel, React, Next.js, mobile development, and lessons from teaching 500+ students.',
}

export default function BlogPage() {
  return (
    <main className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border">
        <div className="max-w-3xl mx-auto px-6 py-6 flex items-center justify-between">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft size={16} />
            Back to home
          </Link>
        </div>
      </header>

      <div className="max-w-3xl mx-auto px-6 py-16">
        {/* Title */}
        <h1 className="font-serif text-4xl md:text-5xl font-bold text-foreground mb-4">
          Blog
        </h1>
        <p className="text-lg text-muted-foreground mb-12 max-w-xl">
          Thoughts on web development, mobile apps, and lessons from years of
          building and teaching.
        </p>

        {/* Posts list */}
        <div className="divide-y divide-border">
          {POSTS.map((post, idx) => (
            <Link
              href={`/blog/${post.slug}`}
              key={post.slug}
              className="group py-8 first:pt-0 last:pb-0 flex flex-col sm:flex-row sm:items-start gap-4 sm:gap-8 block"
            >
              {/* Index */}
              <span className="hidden sm:block text-xs text-muted-foreground tabular-nums pt-1 w-6 shrink-0">
                {String(idx + 1).padStart(2, '0')}
              </span>

              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <span className="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">
                    {post.tag}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {post.date} &middot; {post.readTime}
                  </span>
                </div>
                <h2 className="font-serif font-semibold text-foreground text-lg group-hover:text-primary transition-colors mb-2 text-balance">
                  {post.title}
                </h2>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  {post.excerpt}
                </p>
              </div>

              <ArrowRight
                size={16}
                className="shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all mt-1.5"
                aria-hidden="true"
              />
            </Link>
          ))}
        </div>
      </div>
    </main>
  )
}
