import { Metadata } from "next";
import Image from "next/image";
import SectionHeading from "@/components/SectionHeading";
import FadeIn from "@/components/animations/FadeIn";
import RegionsGrid from "@/components/regions/RegionsGrid";
import { getPublicRegions } from "@/services/regions";
import CallToAction from "@/components/CallToAction";

export const revalidate = 1800;

export const metadata: Metadata = {
  title: "Regions | Petro-Base Group",
  description: "Browse our services and projects by geographic region",
};

async function RegionsPage() {
  let regions: Awaited<ReturnType<typeof getPublicRegions>> = [];
  try {
    regions = await getPublicRegions();
  } catch {
    // API unavailable at build time; page will revalidate at runtime
  }

  return (
    <main className="min-h-screen">
      {/* Hero Banner */}
      <section className="relative h-[60vh] min-h-[400px] flex items-center justify-center overflow-hidden">
        <Image
          src="/pb-regions.png"
          width={1920}
          height={1080}
          priority
          alt="Our Operating Regions"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-primary/80" />
        <FadeIn y={30} className="relative z-10 text-center px-6">
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-12 h-[2px] bg-accent" />
            <span className="petro-section-label-light">Our Regions</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">
            Our Operating Regions
          </h1>
          <p className="text-primary-foreground/70 text-lg md:text-xl max-w-2xl mx-auto">
            Explore services and completed projects across our key operational areas worldwide
          </p>
        </FadeIn>
      </section>
      
      <section className="petro-section pt-32">
        <div className="petro-container">
          <SectionHeading
            title="Our Operating Regions"
            subtitle="Explore services and completed projects across our key operational areas"
          />

          <RegionsGrid regions={regions} />
        </div>
      </section>

      <CallToAction />
    </main>
  );
}

export default RegionsPage;