import SideNav from '@/components/SideNav'
import { fetchContactUsData } from '@/services/contact-us.service';
import Image from 'next/image';
import React from 'react'


interface NavItem {
  id: string | number;
  title: string;
  shortDescription: string;
}

interface PageData {
 d: number;
  title?: string;
  description?: string;
  cover_image_url?: string;
}

export default async function page() {
  let sideNavData: NavItem[] = [];
  let pageData: PageData |  undefined;

  try {
    const response = await fetchContactUsData("8e8c5975-e398-4817-80eb-7c04d86d6dbb");
    pageData = response?.pagedata;
    sideNavData = response?.pageItemdataWithSubsection ?? [];
  } catch (error) {
    console.error("Error fetching banner data:", error);
  }

  if (!pageData) return null;

  return (
    <div>
      <div className="relative w-full h-[350px] md:h-[450px] lg:h-[500px] bg-gray-800 overflow-hidden">
        <Image
          src={pageData?.cover_image_url || "/assets/images/crescent.webp"}
          alt={pageData?.title || "Banner"}
          fill
          className="w-full h-full object-cover opacity-80"
        />
      </div>


      <section className="container mx-auto px-4 py-4 sm:py-12 grid gap-8 md:grid-cols-3">

        <section className="md:col-span-2 sm:pr-8">
          <div className="grid gap-8 lg:gap-12 items-start">
            <div className="space-y-6">
              <h2 className="text-[28px] md:text-[42px] font-semibold leading-8 md:leading-11 tracking-tight text-gray-800">
                {pageData.title}
              </h2>
            </div>
          </div>
        </section>


        <aside className="md:col-span-1 border-l border-l-gray-200">
          <SideNav navData={sideNavData} />
        </aside>
      </section>
    </div>
  )
}