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

import PageHero from "@/components/PageHero";
import GetInTouch from "@/components/GetInTouch";
import SolutionsSection from "@/components/single-service/SolutionsSection";
import FeaturesGrid from "@/components/content-creative-services/FeaturesGrid";
import BenefitsSection from "@/components/content-creative-services/BenefitsSection";
import ServicesGrid from "@/components/content-creative-services/ServicesGrid";
import MiddleDescription from "@/components/content-creative-services/MiddleDescription";
export const dynamic = "force-dynamic";
export const CONTENT_CREATIVE_SERVICES_PAGE_QUERY = gql`
  query ContentCreativeServicesPage {
    pageBy(uri: "services/content-creation") {
      title
      uri

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

      featuredImage {
        node {
          sourceUrl
          altText
        }
      }

      contentCreativeServices {
        solutionsSubtitle
        solutionsTitle
        solutionsDescription
        solutionsButtonLabel
        solutionsButtonLink
        middleDescription
        videoServicesGridSubtitle
        videoServicesGridTitle
        videoServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service7 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service8 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service9 {
            serviceTitle
            serviceBoxBg {
                node {
                altText
                sourceUrl
                }
            }
            serviceCtaLink
            }
        }
        writtenServicesGridSubtitle
        writtenGridTitle
        writtenServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            
        }
        socialServicesGridSubtitle
        socialGridTitle
        socialServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceBoxBg {
                node {
                altText
                sourceUrl
                }
            }
            serviceCtaLink
            }
        }
        visualServicesGridSubtitle
        visualGridTitle
        visualServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceBoxBg {
                node {
                altText
                sourceUrl
                }
            }
            serviceCtaLink
            }
        }
        brandServicesGridSubtitle
        brandGridTitle
        brandServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
        }
        gamingServicesGridSubtitle
        gamingGridTitle
        gamingServicesList {
            service1 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service2 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service3 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service4 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service5 {
            serviceTitle
            serviceDescription
            serviceTags {
                tag1
                tag2
                tag3
                tag4
            }
            }
            service6 {
            serviceTitle
            serviceBoxBg {
                node {
                altText
                sourceUrl
                }
            }
            serviceCtaLink
            }
        }
        whyChooseTitleSubtitle
        whyChooseTitle
        whyChooseItems {
            item1
            itemDescription1
            item2
            itemDescription2
            item3
            itemDescription3
            item4
            itemDescription4
            item5
            itemDescription5
            item6
            itemDescription6
        }
        featuresSubtitle
        featuresTitle
        featuresItems {
            item1
            itemDescription1
            item2
            itemDescription2
            item3
            itemDescription3
            item4
            itemDescription4
        }
      }
    }
  }
`;

type MediaNode = {
  sourceUrl: string;
  altText?: string | null;
};

type ServiceTag = {
  tag1?: string | null;
  tag2?: string | null;
  tag3?: string | null;
  tag4?: string | null;
};

type ServiceCard = {
  serviceTitle?: string;
  serviceDescription?: string;
  serviceTags?: ServiceTag;
};

type ServiceCTA = {
  serviceTitle?: string;
  serviceCtaLink?: string | null;
  serviceBoxBg?: {
    node?: MediaNode;
  };
};

type contentCreativeServices = {
  solutionsSubtitle?: string;
  solutionsTitle?: string;
  solutionsDescription?: string;
  solutionsButtonLabel?: string;
  solutionsButtonLink?: string | null;
  middleDescription?: string;

  videoServicesGridSubtitle?: string;
  videoServicesGridTitle?: string;

  videoServicesList?: {
    service1?: ServiceCard;
    service2?: ServiceCard;
    service3?: ServiceCard;
    service4?: ServiceCard;
    service5?: ServiceCard;
    service6?: ServiceCard;
    service7?: ServiceCard;
    service8?: ServiceCard;
    service9?: ServiceCTA;
  };

  writtenServicesGridSubtitle?: string;
  writtenGridTitle?: string;
  writtenServicesList?: Record<string, ServiceCard>;

  socialServicesGridSubtitle?: string;
  socialGridTitle?: string;
  socialServicesList?: Record<string, ServiceCard>;

  visualServicesGridSubtitle?: string;
  visualGridTitle?: string;
  visualServicesList?: Record<string, ServiceCard>;

  brandServicesGridSubtitle?: string;
  brandGridTitle?: string;
  brandServicesList?: Record<string, ServiceCard>;

  gamingServicesGridSubtitle?: string;
  gamingGridTitle?: string;
  gamingServicesList?: Record<string, ServiceCard>;

  whyChooseTitleSubtitle?: string;
  whyChooseTitle?: string;
  whyChooseItems?: Record<string, string | null>;

  featuresSubtitle?: string;
  featuresTitle?: string;
  featuresItems?: Record<string, string | null>;
};
type YoastSEO = {
  title?: string | null;
  metaDesc?: string | null;
  canonical?: string | null;
  opengraphTitle?: string | null;
  opengraphDescription?: string | null;
  opengraphImage?: {
    sourceUrl?: string | null;
  } | null;
};

type ContentPageQueryResult = {
  pageBy: {
    title: string;
    uri: string;
    seo?: YoastSEO | null;
    content?: string;
    featuredImage?: {
      node?: MediaNode;
    };
    contentCreativeServices?: contentCreativeServices;
  } | null;
};

import { Metadata } from "next";

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

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

  const canonical =
    seo?.canonical && seo.canonical.trim() !== ""
      ? seo.canonical
      : page?.uri || "/services/content-creation/";

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

    title: seo?.title || "Content & Creative Services | Togwe",

    description:
      seo?.metaDesc ||
      "High-impact content creation and creative services to grow your brand.",

    alternates: {
      canonical,
    },

    openGraph: {
      title:
        seo?.opengraphTitle ||
        seo?.title ||
        "Content & Creative Services | Togwe",

      description:
        seo?.opengraphDescription || seo?.metaDesc || undefined,

      images: seo?.opengraphImage?.sourceUrl
        ? [{ url: seo.opengraphImage.sourceUrl }]
        : [],
    },
  };
}



export default async function contentCreativeServicesPage() {
  const { data } = await getClient().query<ContentPageQueryResult>({
    query: CONTENT_CREATIVE_SERVICES_PAGE_QUERY,
  });

  const page = data?.pageBy;
  const service = page?.contentCreativeServices;

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

  return (
    <>
      <PageHero title={page.title} />
      <SolutionsSection data={service} featuredImage={page.featuredImage} />
      <MiddleDescription description={service.middleDescription} />
      <section className="pt-24">

        <ServicesGrid
            title={service.videoServicesGridTitle}
            subtitle={service.videoServicesGridSubtitle}
            services={service.videoServicesList}
            />

            <ServicesGrid
            title={service.writtenGridTitle}
            subtitle={service.writtenServicesGridSubtitle}
            services={service.writtenServicesList}
            />

            <ServicesGrid
            title={service.socialGridTitle}
            subtitle={service.socialServicesGridSubtitle}
            services={service.socialServicesList}
            />

            <ServicesGrid
            title={service.visualGridTitle}
            subtitle={service.visualServicesGridSubtitle}
            services={service.visualServicesList}
            />

            <ServicesGrid
            title={service.brandGridTitle}
            subtitle={service.brandServicesGridSubtitle}
            services={service.brandServicesList}
            />

            <ServicesGrid
            title={service.gamingGridTitle}
            subtitle={service.gamingServicesGridSubtitle}
            services={service.gamingServicesList}
            />
        </section>
      <BenefitsSection
        data={{
            whyChooseTitleSubtitle: service.whyChooseTitleSubtitle ?? "",
            whyChooseTitle: service.whyChooseTitle ?? "",
            whyChooseItems: {
            item1: service.whyChooseItems?.item1 ?? null,
            itemDescription1: service.whyChooseItems?.itemDescription1 ?? null,
            item2: service.whyChooseItems?.item2 ?? null,
            itemDescription2: service.whyChooseItems?.itemDescription2 ?? null,
            item3: service.whyChooseItems?.item3 ?? null,
            itemDescription3: service.whyChooseItems?.itemDescription3 ?? null,
            item4: service.whyChooseItems?.item4 ?? null,
            itemDescription4: service.whyChooseItems?.itemDescription4 ?? null,
            item5: service.whyChooseItems?.item5 ?? null,
            itemDescription5: service.whyChooseItems?.itemDescription5 ?? null,
            item6: service.whyChooseItems?.item6 ?? null,
            itemDescription6: service.whyChooseItems?.itemDescription6 ?? null,
            },
        }}
        />
      <FeaturesGrid data={{
        featuresSubtitle: service.featuresSubtitle,
        featuresTitle: service.featuresTitle,
        featuresItems: service.featuresItems,
      }} />
      <GetInTouch />
    </>
  );
}