"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";

export default function ProductDetailPage({ params }: { params: { productId: string } }) {
  const { productId } = params;

  // In a real application, you would fetch product details using productId
  const dummyProduct = {
    id: productId,
    name: "Luxury Product " + productId,
    description: `This is a placeholder for the detailed description of ${productId}. Discover its exquisite craftsmanship, premium materials, and timeless elegance.`,
    price: "$X,XXX",    imageSrc: "http://img.b2bpic.net/free-photo/fashionable-womens-accessories-pink-background-high-quality-photo_185193-108744.jpg"
  };

  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",          id: "/"},
              {
                name: "About",          id: "#about"},
              {
                name: "Products",          id: "#products"},
              {
                name: "Shop",          id: "/shop"},
              {
                name: "Features",          id: "#features"},
              {
                name: "Testimonials",          id: "#testimonials"},
              {
                name: "Contact",          id: "#contact"},
              {
                name: "Cart",          id: "/cart"},
              {
                name: "Signup",          id: "/signup"},
              {
                name: "Order History",          id: "/order-history"},
              {
                name: "Account",          id: "/account"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            brandName="Elegance Atelier"
            button={{
              text: "Login",        href: "/login"}}
            animateOnLoad={true}
          />
        </div>

        <main className="container mx-auto p-4 md:p-8 min-h-screen">
          <div className="flex flex-col md:flex-row gap-8 items-start">
            <div className="md:w-1/2">
              <img src={dummyProduct.imageSrc} alt={dummyProduct.name} className="w-full h-auto object-cover rounded-lg shadow-lg" />
            </div>
            <div className="md:w-1/2 flex flex-col gap-4">
              <h1 className="text-4xl font-light text-foreground">{dummyProduct.name}</h1>
              <p className="text-2xl font-semibold text-primary-cta">{dummyProduct.price}</p>
              <p className="text-foreground-secondary leading-relaxed">{dummyProduct.description}</p>
              <div className="mt-6 flex flex-col sm:flex-row gap-4">
                <button className="px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-full shadow-md hover:bg-opacity-90 transition-colors">Add to Cart</button>
                <button className="px-6 py-3 border border-secondary-cta text-secondary-cta rounded-full shadow-md hover:bg-secondary-cta hover:text-secondary-cta-foreground transition-colors">Buy Now</button>
              </div>
            </div>
          </div>
        </main>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            columns={[
              {
                items: [
                  {
                    label: "Home",              href: "/"},
                  {
                    label: "About Us",              href: "#about"},
                  {
                    label: "Collections",              href: "#products"},
                  {
                    label: "Shop",              href: "/shop"},
                  {
                    label: "Membership",              href: "#pricing"},
                ],
              },
              {
                items: [
                  {
                    label: "Contact",              href: "#contact"},
                  {
                    label: "FAQ",              href: "#faq"},
                  {
                    label: "Login",              href: "/login"},
                  {
                    label: "Signup",              href: "/signup"},
                  {
                    label: "Cart",              href: "/cart"},
                  {
                    label: "Order History",              href: "/order-history"},
                  {
                    label: "Account",              href: "/account"}
                ],
              },
              {
                items: [
                  {
                    label: "Privacy Policy",              href: "#"},
                  {
                    label: "Terms of Service",              href: "#"},
                  {
                    label: "Shipping & Returns",              href: "#"},
                ],
              },
            ]}
            logoText="Elegance Atelier"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}