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 { TechnologiesGrid } from "@/components/technologies/TechnologiesGrid";
import {
  getTechPageContent,
  getTechPageTechnologies,
  getTechPageSeo,
} from "@/services/pages/public/technologies";

export const revalidate = 1800;

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

  if (!seo) {
    return {
      title: "Technologies | Petro-Base Group",
      description: "Advanced inspection technologies and equipment solutions",
    };
  }

  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/technologies",
      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 TechnologiesPage = async () => {
  const [content, { data: technologies, meta }, seo] = await Promise.all([
    getTechPageContent(),
    getTechPageTechnologies(),
    getTechPageSeo(),
  ]);

  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-[60vh] min-h-[400px] flex items-center overflow-hidden">
        {hero?.image_url ? (
          <Image
            src={hero.image_url}
            alt={hero.image_alt ?? "Advanced Inspection Technologies"}
            fill
            className="object-cover"
            priority
          />
        ) : (
          <Image
            src="/hero-refinery.jpg"
            alt="Advanced Inspection Technologies"
            fill
            className="object-cover"
            priority
          />
        )}
        <div className="absolute inset-0 bg-primary/80" />
        <div className="relative z-10 text-center petro-container">
          <FadeIn>
            <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 ?? "Petro-Base Group"}</span>
              <div className="w-12 h-[2px] bg-accent" />
            </div>
            <h1 className="text-4xl md:text-6xl font-bold text-primary-foreground mb-6 tracking-tight">
              {hero?.title ?? "Advanced Inspection Technologies"}
            </h1>
            <p className="text-primary-foreground/70 max-w-2xl mx-auto text-lg">
              {hero?.description ?? "Industry-leading NDT equipment and robotic systems for onshore, offshore and subsea asset integrity solutions."}
            </p>
          </FadeIn>
        </div>
      </section>

      {/* Section heading */}
      <section className="petro-section pb-0">
        <div className="petro-container">
          <SectionHeading
            title={content?.section_heading ?? "Our Technology Portfolio"}
            subtitle={content?.section_subtitle ?? "Specialized technologies for comprehensive asset integrity — from tank floors to subsea hulls."}
          />
        </div>
      </section>

      {/* Client component: quick nav + overview grid + detail sections + load more */}
      <TechnologiesGrid initialData={technologies} initialMeta={meta} />

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

export default TechnologiesPage;