import "./blog-page.css";
import FeaturedHero from "../components/blog/FeaturedHero";
import CategoryFilters from "../components/blog/CategoryFilters";
import NewsGrid from "../components/blog/NewsGrid";
import BlogSidebar from "../components/blog/BlogSidebar";

export default function BlogPage() {
  return (
    <main className="blog-page w-full min-h-screen bg-ui-bg pb-20">
      <FeaturedHero />

      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
        <div className="flex flex-col lg:flex-row gap-12">
          {/* Left: filters + news grid */}
          <div className="flex-1">
            <CategoryFilters />
            <NewsGrid />
          </div>

          {/* Right: sidebar */}
          <BlogSidebar />
        </div>
      </div>
    </main>
  );
}