"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="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
        <div className="flex flex-col items-start 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 items-end">
            <ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
            <ProductOrderActions selectedTier={selectedTier} />
          </div>
        </div>
      </div>

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

export default ProductDetail;