import SideNav from '@/components/SideNav'
import { fetchChemicalsAndOrganics, fetchCrescentGroupData } from '@/services/crescent-group.service';
import Image from 'next/image';
import React from 'react'


interface BannerData {
  id: number;
  title?: string;
  description?: string;
  cover_image_url?: string;
}

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

interface PageData {
  title?: string;
  shortDescription?: string;
}

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

  try {
    const response = await fetchCrescentGroupData("566997e2-e512-441d-91e3-6d089ad17015");
    bannerData = response?.pagedata;
  } catch (error) {
    console.error("Error fetching banner data:", error);
  }

  try {
    const response = await fetchChemicalsAndOrganics("1236398c-5255-4186-a6fa-2dfa9ab281c2");
    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={bannerData?.cover_image_url || "/assets/images/crescent.webp"}
          alt={bannerData?.title || "Banner"}
          fill
          className="w-full h-full object-cover opacity-80"
        />

        <div className="absolute inset-0 bg-black/40 z-10 flex items-center justify-center">
          <div className="text-center text-white px-4 container">
            <h1 className="pb-0 w-full block text-3xl sm:text-5xl md:text-[60px] leading-[100%] font-normal mb-10">{bannerData?.title}</h1>
            {bannerData?.description && (
              <div
                className="
                      prose 
                      prose-invert 
                      max-w-none 
                      font-thin sm:font-light md:font-light
                      text-[18px] sm:text-[20px] md:text-[22px] 
                      leading-[150%] 
                      font-['Roboto']
                      [&_p]:text-[#f4f4ff] 
                      [&_p]:m-0 
                      [&_p]:mb-[15px] 
                      [&_p]:leading-[24px]
                      "
                dangerouslySetInnerHTML={{ __html: bannerData.description }}
              />

            )}
          </div>
        </div>
      </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>
  )
}