import { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { blogPosts } from "@/lib/constants";
import { generatePageMetadata } from "@/lib/metadata";
import { generateBreadcrumbSchema } from "@/lib/structured-data";
import { SectionHeader } from "@/components/shared/SectionHeader";

export const metadata: Metadata = generatePageMetadata({
  title: "The Edit — Stories from Istanbul's Other Side",
  description:
    "Neighbourhood guides, food stories, cultural deep-dives, and insider tips for Istanbul's Asian side. Written by locals who live it.",
  path: "/blog",
});

export default function BlogPage() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(generateBreadcrumbSchema([
            { name: "Home", url: "https://theanatolianedit.com" },
            { name: "The Edit", url: "https://theanatolianedit.com/blog" },
          ])),
        }}
      />

      <section className="pt-28 md:pt-36 pb-16 section-padding">
        <div className="max-w-7xl mx-auto">
          <SectionHeader
            eyebrow="The Edit"
            title="Stories from Istanbul's Other Side"
            subtitle="Neighbourhood guides, food stories, and the local knowledge that doesn't make the guidebooks."
          />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {blogPosts.map((post) => (
              <Link
                key={post.slug}
                href={`/blog/${post.slug}`}
                className="group"
              >
                <article className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
                  <div className="relative aspect-[16/10] overflow-hidden">
                    <Image
                      src={post.image}
                      alt={post.title}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-700"
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                    />
                    <div className="absolute top-4 left-4">
                      <span className="bg-bosphorus text-white text-xs font-semibold px-3 py-1.5 rounded-full">
                        {post.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-1">
                    <h2 className="font-display text-xl font-bold text-deep-nazar mb-3 group-hover:text-bosphorus transition-colors">
                      {post.title}
                    </h2>
                    <p className="text-deep-nazar/60 text-sm leading-relaxed mb-4 flex-1">
                      {post.excerpt}
                    </p>
                    <div className="flex items-center justify-between text-xs text-deep-nazar/40">
                      <span>{new Date(post.date).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}</span>
                      <span>{post.readTime}</span>
                    </div>
                  </div>
                </article>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}