import { useEffect } from "react";

import Footer from "@/components/Footer";
import Header from "@/components/Header";
// import ProductContactSection from "@/components/product/ProductContactSection";
import ProductDetailsSection from "@/components/product/ProductDetailsSection";
import ProductNotFoundSection from "./ProductNotFoundSection";
import ProductHeroSection from "@/components/product/ProductHeroSection";
import type { ProductItem } from "@/components/product/ProductServicesSection";

type ProductPageLayoutProps = {
  product?: ProductItem;
};

export default function ProductPageLayout({ product }: ProductPageLayoutProps) {
  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, []);

  return (
    <div className="min-h-screen bg-white text-slate-900">
      <Header />
      <main className="flex-1">
        {product ? (
          <>
            <ProductHeroSection title="Our Product and Services" />
            <ProductDetailsSection product={product} />
            {/* <ProductContactSection /> */}
          </>
        ) : (
          <ProductNotFoundSection />
        )}
      </main>
      <Footer />
    </div>
  );
}