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 { ProjectsGrid } from "@/components/projects/ProjectsGrid";
import {
  getProjectsPageContent,
  getProjectsPageProjects,
  getProjectsPageSeo,
} from "@/services/pages/public/projects";

export const revalidate = 1800;

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

  if (!seo) {
    return {
      title: "Projects | Petro-Base Group",
      description: "Explore our portfolio of engineering projects and case studies",
    };
  }

  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/projects",
      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 ProjectsPage = async () => {
  const [content, { data: projects, meta }, seo] = await Promise.all([
    getProjectsPageContent(),
    getProjectsPageProjects(),
    getProjectsPageSeo(),
  ]);

  const hero = content?.hero;
  const stats = content?.stats ?? [];

  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="min-h-screen bg-background">

      {/* Hero */}
      <section className="relative h-[60vh] min-h-[400px] flex items-end overflow-hidden">
        <div className="absolute inset-0">
          {hero?.image_url ? (
            <Image
              src={hero.image_url}
              width={1920}
              height={1080}
              alt={hero.image_alt ?? "Petro-Base Projects"}
              className="w-full h-full object-cover"
            />
          ) : (
            <Image
              src="/projects-hero.jpg"
              width={1920}
              height={1080}
              alt="Petro-Base Projects"
              className="w-full h-full object-cover"
            />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-primary/95 via-primary/60 to-primary/20" />
        </div>
        <div className="relative z-10 text-center petro-container pb-16">
          <FadeIn y={30} duration={0.7}>
            <div className="flex items-center justify-center gap-4 mb-4">
              <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-5xl lg:text-6xl font-bold text-primary-foreground tracking-tight">
              {hero?.title ?? "Projects & Case Studies"}
            </h1>
            <p className="mt-4 text-lg text-primary-foreground/70 max-w-2xl mx-auto">
              {hero?.description ?? "Real-world results from our global operations — offshore platforms, tank farms, gas distribution, and drilling campaigns."}
            </p>
          </FadeIn>
        </div>
      </section>

      {/* Stats Bar */}
      {stats.length > 0 && (
        <section className="bg-primary py-8 border-t border-primary-foreground/10">
          <div className="petro-container grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            {stats.map((s, i) => (
              <FadeIn key={s.label} y={10} duration={0.6} delay={i * 0.1}>
                <div className="text-3xl md:text-4xl font-bold text-accent">{s.value}</div>
                <div className="text-xs uppercase tracking-[0.2em] text-primary-foreground/60 mt-1">{s.label}</div>
              </FadeIn>
            ))}
          </div>
        </section>
      )}

      {/* Projects Grid */}
      <section className="petro-section">
        <div className="petro-container">
          <SectionHeading
            title={content?.section_heading ?? "Case Studies"}
            subtitle={content?.section_subtitle ?? "Explore our track record of delivering complex projects across offshore, onshore, and subsea environments worldwide."}
          />
          <ProjectsGrid initialData={projects} initialMeta={meta} />
        </div>
      </section>

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

export default ProjectsPage;