import { getClient } from "@/lib/apolloClient";
import { gql } from "@apollo/client";

import PageHero from "@/components/PageHero";
import SolutionsSection from "@/components/services/SolutionsSection";
import ServicesGrid from "@/components/services/ServicesGrid";
import BenefitsSection from "@/components/services/BenefitsSection";
import TrustedBy from "@/components/services/TrustedBy";
import WhyChoose from "@/components/services/WhyChoose";
import ClientTestimonials from "@/components/home/ClientTestimonials";
import GetInTouch from "@/components/GetInTouch";
import GrowthStats from "../about-us/GrowthStats";
export const dynamic = "force-dynamic";

export type ServicesPageQuery = {
  pageBy: {
    title: string;
    uri: string;
    seo?: YoastSEO | null;
    featuredImage?: {
      node?: {
        sourceUrl?: string;
        altText?: string;
      };
    };
    serviceFields: unknown;
  } | null;
};

type YoastSEO = {
  title?: string | null;
  metaDesc?: string | null;
  canonical?: string | null;
  opengraphTitle?: string | null;
  opengraphDescription?: string | null;
  opengraphImage?: {
    sourceUrl?: string | null;
  } | null;
};


const SERVICES_PAGE_QUERY = gql`
  query ServicesPage {
    pageBy(uri: "services") {
      title
      uri

      seo {
        title
        metaDesc
        canonical
        opengraphTitle
        opengraphDescription
        opengraphImage {
          sourceUrl
        }
      }

      featuredImage {
        node {
          sourceUrl
          altText
        }
      }

      serviceFields {
        solutionsSubtitle
        solutionsTitle
        solutionsDescription
        solutionsButtonLabel
        solutionsButtonLink
        benefitsSubtitle
        benefitsTitle
        benefitsDescription
        benefitsItems {
          item1
          item2
          item3
          item4
          item5
          item6
        }
        benefitsButtonText
        benefitsLinks
        benefitsImage { node { sourceUrl altText } }

        services1 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }
        services2 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }
        services3 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }
        services4 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }
        services5 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }
        services6 {
          serviceTitle
          serviceSubtitle
          serviceDescription
          featuresTitle
          featuresItems { item1 item2 item3 item4 item5 }
          servicePageUrl
        }

        trustedSubtitle
        trustedTitle
        trustedLogos {
          logo1 { node { sourceUrl altText } }
          logo2 { node { sourceUrl altText } }
          logo3 { node { sourceUrl altText } }
          logo4 { node { sourceUrl altText } }
          logo5 { node { sourceUrl altText } }
          logo6 { node { sourceUrl altText } }
          logo7 { node { sourceUrl altText } }
          logo8 { node { sourceUrl altText } }
        }

        whyChooseSubtitle
        whyChooseTitle
        whyChooseButtonLabel
        whyChooseButtonLink
        whyChooseItems {
          item1
          item2
          item3
          item4
          item5
        }
      }
    }
  }
`;
import { Metadata } from "next";

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

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

  // Fallback canonical → page URI
  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : page?.uri || "/services/";

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

    title: seo?.title || page?.title || "Our Services | Togwe",

    description:
      seo?.metaDesc ||
      "Explore Togwe’s full range of digital, sports, gaming, and marketing services.",

    alternates: {
      canonical,
    },

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



export default async function ServicesPage() {
  const { data } = await getClient().query<ServicesPageQuery>({
    query: SERVICES_PAGE_QUERY,
  });

  const page = data?.pageBy;
  const fields = page?.serviceFields;

  if (!page || !fields) return null;

  return (
    <>
      <PageHero title={page.title} />
      <SolutionsSection data={fields} featuredImage={page.featuredImage} />

      <ServicesGrid data={fields} />

      <BenefitsSection data={fields} />

      <TrustedBy data={fields} />
      <GrowthStats />
      <ClientTestimonials />
      <WhyChoose data={fields} />
      <GetInTouch />
    </>
  );
}