import type { Metadata } from "next";
import { SiteFrame } from "@/app/components/SiteFrame/SiteFrame";
import { JsonLd } from "@/app/lib/structured-data";
import { getAllPosts, CATEGORIES } from "@/app/lib/blog";
import { BlogList } from "@/app/components/BlogList/BlogList";
import { AnimatedHeader } from "@/app/components/Motion/AnimatedHeader";
import styles from "./blog.module.css";

export const metadata: Metadata = {
  title: "Blog",
  description:
    "Insights on AI automation, product engineering, and growth infrastructure from the Meliorate team.",
  alternates: { canonical: "/blog" },
  openGraph: {
    title: "Meliorate Blog",
    description:
      "Insights on AI automation, product engineering, and growth infrastructure.",
    url: "/blog",
  },
};

export default function BlogPage() {
  const posts = getAllPosts();

  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            {
              "@type": "ListItem",
              position: 1,
              name: "Home",
              item: "https://meliorate.pro",
            },
            {
              "@type": "ListItem",
              position: 2,
              name: "Blog",
              item: "https://meliorate.pro/blog",
            },
          ],
        }}
      />
      <section className={styles.pageSection}>
        <div className={styles.container}>
          <AnimatedHeader className={styles.hero}>
            <span className={styles.eyebrow}>Blog</span>
            <h1 className={styles.title}>Insights & Ideas</h1>
            <p className={styles.description}>
              Practical thinking on AI automation, product engineering, and growth
              infrastructure for ambitious teams.
            </p>
          </AnimatedHeader>

          <BlogList posts={posts} categories={[...CATEGORIES]} />
        </div>
      </section>
    </SiteFrame>
  );
}