// src/app/blog/page.tsx
// ✅ ISR CACHE (5 minutes)
export const revalidate = 300;

import { Metadata } from "next";
import BlogHero from "@/components/blog/BlogHero";
import BlogFilters from "@/components/blog/BlogFilters";
import BlogList from "@/components/blog/BlogList";
import CTABox from "@/components/home/CTABox";
import { getAllBlogsAndCategories } from "@/lib/getAllBlogs";

import { gql } from "@apollo/client";
export const dynamic = "force-dynamic";
const BLOG_SEO_QUERY = gql`
  query BlogSEO {
    pageBy(uri: "/blog/") {
      uri
      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }
    }
  }
`;
type BlogSeoResponse = {
  pageBy: {
    uri: string;
    seo?: {
      title?: string | null;
      metaDesc?: string | null;
      canonical?: string | null;
      opengraphTitle?: string | null;
      opengraphDescription?: string | null;
      opengraphImage?: {
        sourceUrl?: string | null;
      } | null;
    } | null;
  } | null;
};


import { getClient } from "@/lib/apolloClient";

export async function generateMetadata(): Promise<Metadata> {
  const { data } = await getClient().query<BlogSeoResponse>({
    query: BLOG_SEO_QUERY,
    fetchPolicy: "no-cache",
  });

  const page = data?.pageBy;
  const seo = page?.seo;

  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : page?.uri || "/blog/";

  return {
    metadataBase: new URL("https://www.togwe.com"),

    title: seo?.title || "Blogs | Togwe",

    description:
      seo?.metaDesc ||
      "Explore powerful insights into modern technology and innovation.",

    alternates: {
      canonical,
    },

    openGraph: {
      title: seo?.opengraphTitle || seo?.title || "Blogs | Togwe",
      description:
        seo?.opengraphDescription || seo?.metaDesc || undefined,
      images: seo?.opengraphImage?.sourceUrl
        ? [{ url: seo.opengraphImage.sourceUrl }]
        : [],
    },
  };
}



export default async function BlogsPage({
  searchParams,
}: {
  searchParams: Promise<{ category?: string }>;
}) {
  const { category = "" } = await searchParams;

  const { posts, categories } =
    await getAllBlogsAndCategories(category);

  return (
    <>
      <BlogHero />

      <section className="pt-20 bg-[#F3F3F3]">
        <div className="container mx-auto px-4">
          {/* Section Header */}
          <div className="text-center max-w-5xl mx-auto mb-16">
            <span className="text-lg font-medium text-[#202020]/50 block mb-2">
              Latest Insights & Blogs
            </span>

            <h2 className="text-3xl md:text-4xl font-medium text-[#202020] font-mono mb-4">
              Explore Powerful Insights Into Modern Technology And Innovation
            </h2>

            <p className="text-lg font-medium text-[#202020]/70">
              That drive real growth for your business. At Togwe, we strengthen your sports app brand with the latest trends, smart tools, and efficient solutions so you can lead with confidence in today's fast-paced digital world.
            </p>
          </div>

          <BlogFilters
            categories={categories}
            active={category}
          />

          <BlogList posts={posts} />

        </div>
      </section>
      <CTABox />
    </>
  );
}