import { fetchHeaderFooterHomeData } from "../../lib/serverFetch";
import Image from "next/image";
import { withCDN } from "@/src/lib/utils";
import LanguageAwareLink from "@/src/lib/utils/LanguageAwareLink";

import Footer from "../../components/layout/Footer";
import ClassListing from "../../components/classes/ClassListing"
import Breadcrumbs from "../../components/layout/Breadcrumbs";
import BackButton from "../../components/layout/BackButton";
import { SelectedClassProvider } from "@/src/lib/context/SelectedClassContext";

export default async function ClassRegisterPages({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[]>>;
}) {
  const params = await searchParams;
  const headerFooterHomeData = await fetchHeaderFooterHomeData(params);

  return (
    <SelectedClassProvider>
      <main>
        {/*==============Hero-banner================*/}
        <section
          className="relative w-full overflow-hidden py-10 md:py-16 lg:py-25 
             min-h-[380px] xl:min-h-[360px] min-[106rem]:h-[400px]
            px-4 md:px-8 sm:p b-0 max-[767px]:h-[440px]"
        >
          {/* Background */}
          <div className="absolute inset-0 -z-10">
            <div
              className="block md:hidden w-full h-full bg-cover bg-[position:50%_-36%]"
              style={{ backgroundImage: `url('${withCDN("/About/bg_hero%20screen%20(2).png")}')` }}
            />
            <div
              className="hidden md:block w-full h-full bg-cover bg-[position:50%_0%]"
              style={{ backgroundImage: `url('${withCDN("/About/hero%20section.png")}')` }}
            />
          </div>

          {/* Overlay */}
          <div className="pointer-events-none absolute inset-0" />
          <div className="max-w-[1300px] mx-auto w-full relative z-10 px-0 lg:px-10 xl:px-0 mt-12 md:mt-5 lg:mt-0">
             <BackButton />
          </div>
          <div className="max-w-[1300px] mx-auto w-full relative z-10 flex flex-col justify-center gap-8 px-5 w-full px-4 lg:px-10 xl:px-0 lg:px-10 max-[991]:mt-[20px] max-[991]:px-0 max-[767px]:mt-[0px] class-heading-wrapper">
            <Breadcrumbs />

            {/* Welcome text */}
            <div className="flex flex-col gap-3 leading-none mt-0 lg:mt-5">
              <h1
                className="
                    heading-hero text-[30px] md:text-[50px] lg:text-[50px] max-[767px]:text-[50px]
                    text-white uppercase font-bold leading-tight tracking-wide md:whitespace-nowrap
                  "
              >
                Current classes
              </h1>
              <p className="text-[20px] md:text-[18px] lg:text-[25px] text-[#fff] uppercase max-[767px]:text-[25px] max-[767px]:leading-8">
                Choose the best one for your child
              </p>
            </div>
          </div>
        </section>

        <section className="relative w-full overflow-hidden 
          pb-10 pt-50  md:pb-10 min-h-[600px] min-[106rem]:pt-60
          px-4 md:px-8 lg:px-18 xl:px-34 mt-[-210px] z-[10] min-[106rem]:mt-[-260px] max-[767px]:mt-[-70px] max-[767px]:pt-15">

          {/* Background */}
          <div className="absolute inset-0 -z-10 max-[767px]:mt-[-220px]">
            <div
              className="block md:hidden w-full h-full bg-cover bg-center"
              style={{ backgroundImage: `url('${withCDN("/form-footer.png")}')` }}
            />
            <div
              className="hidden md:block w-full h-full bg-cover bg-top"
              style={{ backgroundImage: `url('${withCDN("/form-footer.png")}')` }}
            />
          </div>

          <ClassListing tenant={headerFooterHomeData.tenant} />
        </section>

        {/* bottom sections */}
        <section className="relative w-full overflow-hidden mt-[-45px] xl:mt-0 pt-[40px] lg:pt-[80px] max-[767px]:pt-[0px]">
          <Footer footerData={headerFooterHomeData} />
        </section>
      </main>
    </SelectedClassProvider>
  );
}