import React from 'react'
import { Metadata } from 'next'
import Image from 'next/image'
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',
  },
}

const readMoreLabel: Record<string, string> = {
  en: 'Read Full Guide',
  de: 'Ganzen Artikel lesen',
  es: 'Leer la guía completa',
}

const languageBadge: Record<string, { label: string; flag: string }> = {
  en: { label: 'EN', flag: '🇬🇧' },
  de: { label: 'DE', flag: '🇩🇪' },
  es: { label: 'ES', flag: '🇪🇸' },
}

export default function BlogIndexPage() {
  // This index page's own chrome (hero copy) stays English, but every post —
  // English, German, Spanish — is listed here with a small language badge so
  // DE/ES posts are actually discoverable instead of living at an unlinked URL.
  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, index) => (
              <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">
                  <Image
                    src={post.heroImage}
                    alt={post.heroImageAlt}
                    fill
                    priority={index < 3}
                    loading={index < 3 ? undefined : 'lazy'}
                    sizes="(min-width: 768px) 33vw, 100vw"
                    className="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 className="absolute top-4 right-4 bg-white/95 backdrop-blur-md px-2.5 py-1 rounded-full text-[10px] font-extrabold uppercase tracking-wider text-emerald-900 border border-emerald-600/20 shadow-sm">
                    {languageBadge[post.locale]?.flag ?? ''} {languageBadge[post.locale]?.label ?? post.locale}
                  </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>{readMoreLabel[post.locale] ?? readMoreLabel.en}</span>
                    <span>→</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </main>

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