import React from 'react'
import { Metadata } from 'next'
import Link from 'next/link'
import SeoNavbar from '@/components/seo/SeoNavbar'
import SeoFooter from '@/components/seo/SeoFooter'
import { blogPosts } from '@/lib/blogPosts'

export const metadata: Metadata = {
  title: 'GreenLens Plant Care & Identification Blog',
  description:
    'Expert guides on houseplant watering schedules, plant disease diagnosis, pest control, and photo identification.',
  alternates: {
    canonical: '/blog',
  },
}

export default function BlogIndexPage() {
  const posts = Object.values(blogPosts)

  return (
    <div className="bg-[#fdfbf6] text-on-surface font-body antialiased min-h-screen relative overflow-hidden flex flex-col justify-between">
      {/* Header Navigation */}
      <SeoNavbar locale="en" />

      {/* Decorative Ambient Green Blobs */}
      <div className="absolute inset-0 pointer-events-none -z-10" aria-hidden="true">
        <div className="absolute top-[-5%] left-[-10%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#c2e5cc] blur-[120px] rounded-full mix-blend-multiply opacity-70" />
        <div className="absolute top-[25%] right-[-5%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-[#e5f0cb] blur-[100px] rounded-full mix-blend-multiply opacity-80" />
      </div>

      {/* Main Content */}
      <main className="pt-32 pb-24 flex-1">
        <div className="max-w-[1100px] mx-auto px-6">
          {/* Hero Header */}
          <div className="text-center max-w-[750px] mx-auto mb-16">
            <span className="bg-emerald-600/10 text-emerald-800 border border-emerald-600/20 text-xs font-extrabold tracking-widest uppercase px-4 py-1.5 rounded-full inline-block mb-4 shadow-xs">
              🌿 Botanical Research & Guides
            </span>
            <h1 className="font-display text-4xl sm:text-5xl font-bold text-emerald-950 mb-4 tracking-tight leading-tight">
              Plant Care & Identification Guides
            </h1>
            <p className="text-emerald-900/80 text-lg sm:text-xl font-medium leading-relaxed">
              Evidence-based guides on indoor plant watering schedules, health diagnostics, pest control, and species identification.
            </p>
          </div>

          {/* Blog Cards Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {posts.map((post) => (
              <Link
                key={post.slug}
                href={`/blog/${post.slug}`}
                className="group bg-white rounded-3xl border-2 border-emerald-600/20 overflow-hidden shadow-sm hover:shadow-2xl hover:border-emerald-600/40 transition-all duration-300 flex flex-col"
              >
                {/* Image */}
                <div className="relative h-52 w-full overflow-hidden bg-emerald-950">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={post.heroImage}
                    alt={post.heroImageAlt}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute top-4 left-4 bg-emerald-950/90 backdrop-blur-md px-3.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-300 border border-emerald-500/30">
                    {post.category}
                  </div>
                </div>

                {/* Card Content */}
                <div className="p-6 flex-1 flex flex-col justify-between">
                  <div>
                    <div className="text-xs text-emerald-800 font-semibold mb-2">
                      {post.publishedAt} • {post.readTime}
                    </div>
                    <h2 className="font-display text-xl font-bold text-emerald-950 group-hover:text-emerald-700 transition-colors mb-3 leading-snug">
                      {post.title}
                    </h2>
                    <p className="text-emerald-900/70 text-sm line-clamp-3 leading-relaxed mb-6 font-normal">
                      {post.subtitle}
                    </p>
                  </div>

                  <div className="text-emerald-700 font-bold text-sm flex items-center gap-1.5 group-hover:translate-x-1 transition-transform">
                    <span>Read Full Guide</span>
                    <span>→</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </main>

      {/* Footer Navigation */}
      <SeoFooter locale="en" />
    </div>
  )
}