import About from "@/components/home/about/About";
import HeroCarousel from "@/components/home/hero-carousel/HeroCarousel";
import Industries from "@/components/home/industries/Industries";
import Products from "@/components/products/Products";
import { fetchHomeData } from "@/services/home.service";

import Image from "next/image";
import React from "react";

export interface Subsection {
  id: number;
  title: string;
  description: string;
  image: string;
}

export interface HomeSection {
  id: number;
  website_id: number;
  page_id: number;
  sequence: number;
  title: string;
  shortDescription: string;
  longDescription: string;
  image: string;
  tumbImage: string | null;
  bannerImage: string | null;
  file: string | null;
  slug: string;
  metaTitle: string;
  metaKeyword: string;
  metaDescription: string;
  status: "active" | "inactive";
  createdAt: string;
  updatedAt: string;
  subsections: Subsection[];
}


export default async function Page() {
  let homeData: HomeSection[] = [];

  try {
    const response = await fetchHomeData(
      "7e8ebecf-4e28-4d80-a625-8a57a6b7ef00"
    );
    homeData = response?.pageItemdataWithSubsection ?? [];
  } catch (error) {
    console.log("Error fetching home data:", error);
    return (
      <div className="flex flex-col justify-center items-center min-h-screen bg-gray-100 text-center px-6">
        <h1 className="text-2xl sm:text-3xl font-semibold text-gray-800 mb-4">
          ❌ Something went wrong while loading the home page.
        </h1>
        <p className="text-lg text-gray-600 max-w-lg">
          There was an error fetching the home page data. Please try again
          later.
        </p>
      </div>
    );
  }

  const aboutData = homeData.find(
    (i) =>
      i.slug ===
      "independence-business-ethics-shapes-our-culture-and-is-firmly-rooted-in-our-internal-structures-and-mechanisms-12"
  );

  const industryData =
    homeData.find(
      (i) => i.slug === "crescent-chemicals-crescent-healthcare-12"
    );

  const productsData =
    homeData.find(
      (i) => i.slug === "key-products-and-brands-12"
    );

  return (
    <>
      <HeroCarousel />
      <About data={aboutData ?? null} />
      <section className="flex flex-col lg:flex-row flex-wrap w-full mb-12 sm:mb-[120px]">
        {/* Left (Orange) */}
        <div className="w-full lg:w-7/12 bg-[#fbb040] px-0 flex flex-row lg:flex-col items-center">
          <div className="headline pl-[8%] sm:pl-[4%] py-[40px]">
            <h3
              className="text-white text-2xl sm:text-3xl md:text-[36px] leading-[44px] font-normal bg-no-repeat  pb-[20px]"
              style={{
                backgroundImage: "url('/assets/images/white-underline.gif')",
                backgroundPosition: "left bottom",
              }}
            >
              Crescent Group of Industries
            </h3>
          </div>
        </div>

        {/* Right (Image) */}
        <div className="w-full hidden lg:block lg:w-5/12">
          <Image
            src="/assets/images/1643619105725.jpg"
            alt="Crescent Group of Industries"
            width={600}
            height={400}
            className="w-full h-full object-cover"
          />
        </div>
      </section>

      <Industries data={industryData} />
      <Products data={productsData} />
    </>
  );
}