import type { Metadata } from "next";
import Link from "next/link";
import { POSTS, formatDate } from "./posts";
import { Breadcrumb } from "@/components/marketing/Breadcrumb";
import {
  SITE_NAME,
  absoluteUrl,
  blogPostingSchema,
  breadcrumbSchema,
  jsonLdScript,
} from "@/lib/seo";

export const metadata: Metadata = {
  title: "Blog — Baby Feeding, Health & Vaccination Guides",
  description:
    "Guides on baby feeding, health milestones, vaccination schedules, and how to make the most of Tia — written for Indian families.",
  alternates: { canonical: "/blog" },
  openGraph: {
    type: "website",
    url: "/blog",
    siteName: SITE_NAME,
    locale: "en_IN",
    title: `Blog | ${SITE_NAME}`,
    description:
      "Guides on baby feeding, health milestones, vaccination schedules, and how to make the most of Tia — written for Indian families.",
  },
};

// Blog (with each post) + breadcrumb structured data.
const blogSchema = {
  "@context": "https://schema.org",
  "@type": "Blog",
  "@id": `${absoluteUrl("/blog")}#blog`,
  name: `${SITE_NAME} Blog`,
  url: absoluteUrl("/blog"),
  inLanguage: "en-IN",
  blogPost: POSTS.map((p) => blogPostingSchema(p)),
};

const blogBreadcrumb = breadcrumbSchema([
  { name: "Home", path: "/" },
  { name: "Blog", path: "/blog" },
]);

// Derive unique categories + counts from posts
const CATEGORIES = Object.values(
  POSTS.reduce<Record<string, { name: string; color: string; count: number }>>((acc, p) => {
    if (!acc[p.category]) {
      acc[p.category] = { name: p.category, color: p.categoryColor, count: 0 };
    }
    acc[p.category].count++;
    return acc;
  }, {})
);

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-white">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={jsonLdScript([blogSchema, blogBreadcrumb])}
      />
      {/* Page header */}
      <div className="bg-gradient-to-br from-rose-50 to-pink-50 border-b border-rose-100">
        <div className="max-w-6xl mx-auto px-5 py-12 text-center">
          <div className="font-jetbrains mb-2 text-sm font-medium text-rose-500 uppercase tracking-widest">Journal</div>
          <h1 className="font-fraunces italic text-4xl font-bold text-gray-900 mb-3 leading-tight">The Tia Blog</h1>
          <p className="text-base text-gray-500 leading-relaxed max-w-xl mx-auto">
            Practical guides on baby feeding, health, vaccination schedules, and getting the most out of Tia — for Indian families.
          </p>
        </div>
      </div>

      {/* Breadcrumb — sits right above the content grid */}
      <div className="max-w-6xl mx-auto px-5 pt-5 pb-1">
        <Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Blog" }]} />
      </div>

      {/* 3-column layout */}
      <div className="max-w-6xl mx-auto px-5 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)_200px] gap-10">

          {/* ── LEFT SIDEBAR: timeline ── */}
          <aside className="hidden lg:block">
            <div className="sticky top-24">
              <p className="font-jetbrains text-xs font-bold text-gray-400 uppercase tracking-widest mb-5">All posts</p>
              <ol className="relative border-l-2 border-rose-100 pl-4 space-y-5">
                {POSTS.map((p) => (
                  <li key={p.slug} className="group relative">
                    {/* Timeline dot */}
                    <span className="absolute -left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-rose-200 border-2 border-white group-hover:bg-rose-400 transition-colors duration-150" />

                    <p className="text-xs text-gray-400 mb-0.5">
                      {new Date(p.date).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" })}
                    </p>
                    <Link
                      href={`/blog/${p.slug}`}
                      className="text-sm font-medium text-gray-700 hover:text-rose-600 transition-colors duration-150 leading-snug line-clamp-2 block"
                    >
                      {p.title}
                    </Link>
                    <span className={`mt-1.5 text-xs px-2 py-0.5 rounded-full inline-block ${p.categoryColor}`}>
                      {p.category}
                    </span>
                  </li>
                ))}
              </ol>
            </div>
          </aside>

          {/* ── CENTER: post cards ── */}
          <main>
            <div className="flex flex-col gap-6">
              {POSTS.map((post) => (
                <article
                  key={post.slug}
                  className="group border border-gray-100 rounded-2xl p-6 hover:border-rose-200 hover:shadow-md transition-all duration-200 bg-white"
                >
                  <Link href={`/blog/${post.slug}`} className="block">
                    <div className="flex items-start gap-5">
                      {/* Emoji icon */}
                      <div className="hidden sm:flex shrink-0 w-14 h-14 rounded-xl bg-rose-50 items-center justify-center text-2xl border border-rose-100 group-hover:bg-rose-100 transition-colors duration-200">
                        {post.emoji}
                      </div>

                      <div className="flex-1 min-w-0">
                        {/* Meta */}
                        <div className="flex flex-wrap items-center gap-2 mb-3">
                          <span className={`text-xs font-semibold px-2.5 py-0.5 rounded-full ${post.categoryColor}`}>
                            {post.category}
                          </span>
                          <span className="text-xs text-gray-400">{formatDate(post.date)}</span>
                          <span className="text-xs text-gray-400">·</span>
                          <span className="text-xs text-gray-400">{post.readTime}</span>
                        </div>

                        <h2 className="font-fraunces text-lg font-bold text-gray-900 leading-snug mb-2 group-hover:text-rose-700 transition-colors duration-150">
                          {post.title}
                        </h2>
                        <p className="text-gray-500 text-sm leading-relaxed line-clamp-2">
                          {post.excerpt}
                        </p>

                        <div className="mt-4 text-sm font-semibold text-rose-500 group-hover:text-rose-600 transition-colors duration-150">
                          Read article →
                        </div>
                      </div>
                    </div>
                  </Link>
                </article>
              ))}
            </div>
          </main>

          {/* ── RIGHT SIDEBAR: categories + CTA ── */}
          <aside className="hidden lg:block">
            <div className="sticky top-24 space-y-8">

              {/* Categories */}
              <div>
                <p className="font-jetbrains text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Browse by topic</p>
                <div className="flex flex-col gap-2.5">
                  {CATEGORIES.map((cat) => (
                    <div key={cat.name} className="flex items-center justify-between">
                      <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${cat.color}`}>
                        {cat.name}
                      </span>
                      <span className="text-xs text-gray-400 font-medium">{cat.count} {cat.count === 1 ? "post" : "posts"}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Divider */}
              <div className="border-t border-gray-100" />

              {/* Quick links */}
              <div>
                <p className="font-jetbrains text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">Quick reads</p>
                <div className="flex flex-col gap-3">
                  {POSTS.slice(0, 3).map((p) => (
                    <Link
                      key={p.slug}
                      href={`/blog/${p.slug}`}
                      className="group/ql flex items-start gap-2"
                    >
                      <span className="text-base mt-0.5 shrink-0">{p.emoji}</span>
                      <span className="text-xs text-gray-600 group-hover/ql:text-rose-600 leading-snug transition-colors duration-150 line-clamp-2">
                        {p.title}
                      </span>
                    </Link>
                  ))}
                </div>
              </div>

              {/* Divider */}
              <div className="border-t border-gray-100" />

              {/* CTA */}
              <div className="bg-rose-50 rounded-xl p-5 border border-rose-100 text-center">
                <div className="text-2xl mb-2">🌸</div>
                <p className="text-sm font-semibold text-gray-800 mb-1">Free early access</p>
                <p className="text-xs text-gray-500 mb-4 leading-relaxed">
                  Built for Indian families. No ads, no data selling.
                </p>
                <Link
                  href="/login"
                  className="inline-block w-full text-center bg-rose-500 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2.5 rounded-full transition-colors duration-200"
                >
                  Get started →
                </Link>
              </div>

            </div>
          </aside>

        </div>
      </div>
    </div>
  );
}
