import type { Metadata } from "next";
import "@/component/Blog/blog.css";
import { BlogHero } from "@/component/Blog/BlogHero";
import { BlogGrid } from "@/component/Blog/BlogGrid";
import { BlogNewsletter } from "@/component/Blog/BlogNewsletter";
import { Marquee } from "@/component/common/Marquee";
import { MARQUEE_ITEMS } from "@/data/blog-posts";

export const metadata: Metadata = {
  title: "Blog — DesignShare",
  description:
    "Honest guides on design subscriptions, real cost breakdowns, and where AI is taking startup design.",
  alternates: {
    canonical: "https://designshare.net/blogs",
  },
};

const marqueeInkItems = [...MARQUEE_ITEMS];

export default function BlogsPage() {
  return (
    <main className="blog-page" style={{ paddingTop: 80 }}>
      <BlogHero />
      <BlogGrid />
      <div style={{ paddingTop: 40 }} />
      <BlogNewsletter />
      <Marquee items={marqueeInkItems} variant="ink" />
    </main>
  );
}