"use client";

import Link from "next/link";
import { useEffect } from "react";
import BackButton from "../components/layout/BackButton";
import Image from "next/image";
import { withCDN } from "@/src/lib/utils";
import Footer from "../components/layout/Footer";


/**
 * Route-level error boundary. Catches failures thrown from any page or client
 * component below the root layout, so a single broken section degrades to this
 * panel instead of blanking the whole site.
 *
 * The root layout (navbar, providers, fonts, globals.css) stays mounted here —
 * unlike `global-error.tsx`, which replaces it entirely and is reserved for
 * failures in the layout itself.
 */
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[RouteError]", error);
  }, [error]);

  return (
    <main className="min-h-[100vh]">
          <section
                  className="relative w-full overflow-hidden py-20 md:py-22 lg:py-25 
                    min-h-[280px] md:min-h-[300px] lg:min-h-[320px] min-[106rem]:h-[340px]
                    px-4 md:px-8 sm:p b-0 max-[767px]:h-[250px]"
                >
                  {/* Background */}
                  <div className="absolute inset-0 -z-10">
                    <div
                      className="block md:hidden w-full h-full bg-cover bg-[position:50%_-6%]"
                      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">
                     <BackButton />
                  </div>
        </section>
           
         <section className="relative w-full overflow-hidden pt-[100px] pb-10 md:pb-16 lg:pb-20 px-4 md:px-8 lg:px-18 xl:px-34 z-10
         mt-[-188px] z-[10] min-[106rem]:mt-[-220px] max-[767px]:mt-[-110px]">
          <div className="absolute inset-0 -z-10 max-[767px]:mt-[-50px]">
            <div
              className="block md:hidden w-full h-full bg-cover bg-top"
              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>

          <div className="flex items-center justify-center max-[767px]:flex-col md:justify-between text-center w-full max-w-[1300px] md:max-h-[400px] lg:max-h-[564px] mx-auto box-border bg-white  border-2 border-[#0097DC] rounded-[30px] p-5 sm:p-10 lg:p-16 shadow-[6px_6px_14px_#00000010] mt-[-88px] md:mt-[-58px] lg:mt-[-68px]">
             <div className="w-full md:w-[420px]">
                <h2 className="text-[50px] md:text-[50px] lg:text-[60px] leading-[60px] font-bold uppercase text-[#58585a]">OOOPS...</h2>
               <h3 className="text-[20px] md:text-[24px] lg:text-[30px] leading-[50px] font-bold uppercase text-[#58585a]">Something went wrong</h3>
               <p className="text-[16px] lg:text-[18px] leading-[28px] font-normal mt-2 text-[#58585a]">We're having trouble loading this section right now. This is usually temporary — please try again in a moment.</p>
               <div className="mt-3">
                   <Link
                     href="/"
                     className="rounded-full border border-[#0097DC] px-7 py-3 text-[15px] font-semibold text-[#fff] bg-[#0097DC] w-full flex items-center justify-center gap-2"
                    >
                      <Image src={withCDN("/gear.png")} alt="Gear" width={20} height={20} className="w-5.5 h-5.5 2xl:h-6 2xl:w-6 md:w-6 md:h-6" priority />  
                     Go to HOME page
                    </Link>
                </div>
             </div>

             <div className="w-full md:w-[50%] md:max-w-[540px] xl:max-w-[740px] ">
                 <div className="relative w-full h-[260px] sm:h-[360px] md:h-[560px] rounded-[40px] error-image-wrapper">
                    <Image
                        src="https://yefranchisees.b-cdn.net/frontend/utills/Patrol%20Police%201.png"
                        alt="Success Child"
                        width={500} 
                        height={560}
                        className="object-contain xl:object-cover w-full h-[260px] sm:h-[360px] md:h-[560px]"
                        priority
                    />
                 </div>
             </div>
          </div>
          </section>  

    </main>
  );
}