import { getSectorIcon } from "@/lib/sectorIconMap";
import type { Metadata } from "next";

import CallToAction from "@/components/CallToAction";
import SectionHeading from "@/components/SectionHeading";
import Image from "next/image";
import FadeIn from "@/components/animations/FadeIn";
import { ClientsGrid } from "@/components/clients/ClientsGrid";
import { TestimonialsSection } from "@/components/clients/TestimonialsSection";
import { IndustrySectorsSection } from "@/components/clients/IndustrySectorsSection";
import {
  getClientsPageContent,
  getClientsPageClients,
  getClientsPageTestimonials,
  getClientsPageIndustrySectors,
  getClientsPageSeo,
} from "@/services/pages/public/clients";

export const revalidate = 1800;

export async function generateMetadata(): Promise<Metadata> {
  const seo = await getClientsPageSeo();

  return {
    title: seo?.meta_title,
    description: seo?.meta_description,
    robots: seo?.no_index ? "noindex, nofollow" : "index, follow",
    alternates: seo?.canonical_url ? { canonical: seo.canonical_url } : {},
    openGraph: {
      title: seo?.og_title,
      description: seo?.og_description,
      url: "https://petrobasegroup.com/clients",
      siteName: "Petro-Base Group",
      images: seo?.og_image_url
        ? [{ url: seo.og_image_url, width: 1200, height: 630, alt: seo?.og_title }]
        : [],
      type: "website",
    },
  };
}

const ClientsPage = async () => {
  const [content, clientsResult, testimonialsResult, sectorsResult, seo] = await Promise.all([
    getClientsPageContent(),
    getClientsPageClients(1),
    getClientsPageTestimonials(1),
    getClientsPageIndustrySectors(1),
    getClientsPageSeo(),
  ]);

  const hero = content?.hero;

  // Normalize schema JSON to string
  let schemaJson = "";
  if (seo?.schema_json) {
    if (typeof seo.schema_json === "string") {
      schemaJson = seo.schema_json;
    } else {
      schemaJson = JSON.stringify(seo.schema_json);
    }
  }

  return (
    <>
      {schemaJson && (
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: schemaJson }} />
      )}
      <div className="min-h-screen bg-background">

      {/* Hero */}
      <section className="relative h-[50vh] min-h-[400px] flex items-center justify-center overflow-hidden">
        <Image
          src={hero?.image_url ?? "/client.jpeg"}
          width={1920}
          height={1080}
          alt={hero?.image_alt ?? "Petro-Base client partnerships"}
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-primary/80" />
        <FadeIn
          y={30}
          duration={0.7}
          className="relative z-10 text-center petro-container"
        >
          <div className="flex items-center justify-center gap-4 mb-6">
            <div className="w-12 h-[2px] bg-accent" />
            <span className="petro-section-label-light">{hero?.label ?? "Our Clients"}</span>
            <div className="w-12 h-[2px] bg-accent" />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-primary-foreground mb-4 tracking-tight">
            {hero?.title ?? "Trusted by Industry Leaders"}
          </h1>
          <p className="text-primary-foreground/70 max-w-2xl mx-auto text-lg">
            {hero?.description ?? "For over two decades, we've partnered with the world's leading energy companies, delivering engineering excellence across West Africa and beyond."}
          </p>
        </FadeIn>
      </section>

      {/* Client Logos Grid */}
      <section className="petro-section">
        <div className="petro-container">
          <SectionHeading
            title={content?.section_heading ?? "Our Partners"}
            subtitle={content?.section_subtitle ?? "A selection of the major operators and service companies we proudly serve."}
          />
          <ClientsGrid
            initialData={clientsResult.data}
            initialMeta={clientsResult.meta}
          />
        </div>
      </section>

      {/* Testimonials */}
      <section className="petro-section bg-secondary">
        <div className="petro-container">
          <SectionHeading
            title={content?.testimonial_section_heading ?? "Client Testimonials"}
            subtitle={content?.testimonial_section_subtitle ?? "What our partners say about working with Petro-Base Group."}
          />
          <TestimonialsSection
            initialData={testimonialsResult.data}
            initialMeta={testimonialsResult.meta}
          />
        </div>
      </section>

      {/* Industry Sectors */}
      <section className="petro-section">
        <div className="petro-container">
          <SectionHeading
            title={content?.industry_section_heading ?? "Industry Sectors"}
            subtitle={content?.industry_section_subtitle ?? "We serve a broad range of industries across the energy and industrial value chain."}
          />
          <IndustrySectorsSection
            initialData={sectorsResult.data}
            initialMeta={sectorsResult.meta}
          />
        </div>
      </section>

      <CallToAction />
      </div>
    </>
  );
};

export default ClientsPage;