"use client";

import ContactCtaSection from "@/app/home/components/ContactCtaSection";
import { useState, type FC } from "react";
import { PRODUCT_GALLERY_IMAGES, PRODUCT_TITLE, QUANTITY_TIERS, type QuantityTier } from "../constants";
import ProductBreadcrumb from "./ProductBreadcrumb";
import ProductGallery from "./ProductGallery";
import ProductOrderActions from "./ProductOrderActions";
import ProductPurchaseOptions from "./ProductPurchaseOptions";
import ProductRelated from "./ProductRelated";
import ProductTabs from "./ProductTabs";

const ProductDetail: FC = () => {
  const [selectedTier, setSelectedTier] = useState<QuantityTier>(QUANTITY_TIERS[0]);

  return (
    <>
      <ProductBreadcrumb />

      <div className="pb-28 lg:pb-0">
        <div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
          <div className="flex flex-col items-start gap-6 sm:gap-8 lg:flex-row lg:items-start lg:gap-10">
            <ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} />
            <div className="flex w-full min-w-0 flex-1 flex-col">
              <ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
              <ProductOrderActions selectedTier={selectedTier} />
            </div>
          </div>
        </div>

        <ProductTabs />
        <ProductRelated />
        <ContactCtaSection />
      </div>
    </>
  );
};

export default ProductDetail;
