import Image from "next/image";
import FadeIn from "@/components/animations/FadeIn";
import SectionHeading from "@/components/SectionHeading";
import CallToAction from "@/components/CallToAction";
import { InspectorsGrid } from "@/components/inspectors/InspectorsGrid";
import {
  getInspectorsPageContent,
  getInspectorsPageInspectors,
  getInspectorsPageSeo,
} from "@/services/pages/public/inspectors";
import { Metadata } from "next";

export const revalidate = 1800;

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

  if (!seo) {
    return {
      title: "Our Inspectors | Petro-Base Group",
      description:
        "Browse our roster of certified inspection professionals available for on-demand manpower deployment.",
    };
  }

  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/inspectors",
      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 InspectorsPage = async () => {
  const [content, inspectorsResult, seo] = await Promise.all([
    getInspectorsPageContent(),
    getInspectorsPageInspectors(),
    getInspectorsPageSeo(),
  ]);

  const hero = content?.hero;

  const schemaJson = seo?.schema_json
    ? typeof seo.schema_json === "object"
      ? JSON.stringify(seo.schema_json)
      : seo.schema_json
    : null;

  return (
    <>
      {schemaJson && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: schemaJson }}
        />
      )}
      <div className="bg-background text-foreground">
        {/* Hero */}
        <section className="relative h-[50vh] min-h-[360px] flex items-center justify-center overflow-hidden">
          {hero?.image_url ? (
            <Image
              src={hero.image_url}
              width={1920}
              height={1080}
              alt={hero.image_alt ?? "Inspectors hero"}
              className="absolute inset-0 w-full h-full object-cover"
            />
          ) : null}
          <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 ?? "Inspection Resource Marketplace"}
              </span>
              <div className="w-12 h-[2px] bg-accent" />
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-foreground mb-4 tracking-tight">
              {hero?.title ?? "Our Inspectors"}
            </h1>
            <p className="text-primary-foreground/70 max-w-2xl mx-auto text-lg">
              {hero?.description ??
                "Browse our roster of certified inspection professionals available for on-demand deployment."}
            </p>
          </FadeIn>
        </section>

        {/* Inspector grid */}
        <section className="petro-section bg-secondary">
          <div className="petro-container">
            <SectionHeading
              title={content?.section_heading ?? "Certified Inspection Professionals"}
              subtitle={
                content?.section_subtitle ??
                "Each inspector is vetted, certified, and ready to deploy to your site — onshore or offshore."
              }
            />

            <InspectorsGrid
              initialData={inspectorsResult.data}
              initialMeta={inspectorsResult.meta}
            />
          </div>
        </section>

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

export default InspectorsPage;