"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, ChefHat, Users, Sparkles } from "lucide-react";
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Omakase Niseko"
          navItems={[
            { name: "Experience", id: "experience" },
            { name: "About", id: "about" },
            { name: "Reservations", id: "contact" },
            { name: "Gallery", id: "testimonials" }
          ]}
          button={{
            text: "Book Now",            href: "#contact"
          }}
          className="backdrop-blur-md bg-black/40 border border-red-900/30"
          navItemClassName="text-white hover:text-red-400 transition-colors"
          buttonClassName="bg-red-600 hover:bg-red-700 text-white"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Omakase Niseko"
          description="Experience the pinnacle of Japanese culinary artistry. An intimate omakase journey featuring the finest seasonal ingredients, expertly prepared by our master sushi chef in the heart of Niseko's mountain paradise."
          buttons={[
            { text: "Reserve Your Seat", href: "#contact" },
            { text: "Our Philosophy", href: "#about" }
          ]}
          background={{ variant: "glowing-orb" }}
          imageSrc="https://img.b2bpic.net/free-photo/sushi-roll_1203-3647.jpg"
          imageAlt="Premium omakase sushi presentation"
          frameStyle="card"
          className="w-full"
          logoClassName="text-white text-7xl md:text-8xl font-extrabold"
          descriptionClassName="text-red-100 text-base md:text-xl"
          buttonClassName="bg-red-600 hover:bg-red-700 text-white font-bold"
          buttonTextClassName="font-extrabold"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="The Omakase Experience"
          description="Discover what makes Omakase Niseko an unforgettable culinary destination."
          tabs={[
            {
              id: "craftsmanship",              label: "Master Craftsmanship",              description: "Our chef trained for over 20 years in Tokyo's most prestigious omakase restaurants. Every piece is crafted with meticulous attention to detail, showcasing decades of tradition and innovation combined."
            },
            {
              id: "ingredients",              label: "Finest Ingredients",              description: "We source premium fish daily from Japan's leading distributors, ensuring only the finest seasonal ingredients reach your plate. Each piece is selected for texture, flavor, and perfection."
            },
            {
              id: "philosophy",              label: "Our Philosophy",              description: "Omakase means 'trust the chef.' We believe in creating an intimate experience where the chef's expertise guides you through a carefully curated journey of flavors, textures, and traditions."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/sushi-set-with-gold-color-table_140725-5505.jpg"
          imageAlt="Master sushi chef in preparation"
          imagePosition="right"
          useInvertedBackground="noInvert"
          className="w-full"
          titleClassName="text-white text-4xl md:text-5xl font-extrabold"
          descriptionClassName="text-gray-300 text-base md:text-lg"
          tabClassName="text-gray-400 hover:text-red-400 transition-colors px-4 py-2 font-semibold border-b border-transparent hover:border-red-600"
          activeTabClassName="text-red-500 border-b-2 border-red-600"
        />
      </div>

      <div id="experience" data-section="experience">
        <FeatureCardTwentyThree
          title="The Journey"
          description="Each course is a masterpiece, carefully orchestrated to showcase the season's finest ingredients and the chef's creative vision."
          features={[
            {
              id: "1",              title: "Seasonal Selection",              tags: ["Premium", "Curated"],
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-fresh-tuna-salmon-scallop-nigiri-shrimp-sushi-chopsticks_181624-50855.jpg",              imageAlt: "Fresh premium ingredients"
            },
            {
              id: "2",              title: "Intimate Counter Seating",              tags: ["Exclusive", "Limited"],
              imageSrc: "https://img.b2bpic.net/free-photo/empty-wood-chair_1339-6717.jpg",              imageAlt: "Intimate restaurant counter"
            },
            {
              id: "3",              title: "Personalized Menu",              tags: ["Bespoke", "Chef's Choice"],
              imageSrc: "https://img.b2bpic.net/free-photo/sushi-set-with-gold-color-table_140725-5505.jpg",              imageAlt: "Chef preparing personalized selection"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Experience"
          tagIcon={Sparkles}
          className="w-full"
          cardTitleClassName="text-white font-bold text-xl"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "20+",              title: "Years",              description: "Master chef experience in Tokyo's finest restaurants",              icon: Award
            },
            {
              id: "2",              value: "15",              title: "Courses",              description: "Average omakase journey with premium selections",              icon: ChefHat
            },
            {
              id: "3",              value: "8",              title: "Seats",              description: "Exclusive counter seating for intimate experiences",              icon: Users
            }
          ]}
          title="By The Numbers"
          description="Excellence defined by precision and tradition"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          className="w-full"
          valueClassName="text-red-500 text-8xl font-extrabold"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Guest Experiences"
          description="What our guests say about their omakase journey with us"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "Tokyo, Japan",              testimonial: "An absolutely transcendent experience. The chef's knowledge and passion for every piece was evident. This is omakase at its finest.",              imageSrc: "https://img.b2bpic.net/free-photo/lifestyle-people-learning-make-sushi_23-2149865319.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "Takeshi Yamamoto",              handle: "Osaka, Japan",              testimonial: "I've enjoyed omakase across Japan, and this is exceptional. The quality of the fish is outstanding and the presentation is impeccable.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-cutting-eggplant-into-slices-cutting-board-with-knife-white-table_176474-1565.jpg",              imageAlt: "Takeshi Yamamoto"
            },
            {
              id: "3",              name: "Emma Richardson",              handle: "London, UK",              testimonial: "Worth every penny. The intimate setting, the masterful preparation, and the personalized attention made this unforgettable.",              imageSrc: "https://img.b2bpic.net/free-photo/sushi-set-with-soybean-sauce_140725-4084.jpg",              imageAlt: "Emma Richardson"
            },
            {
              id: "4",              name: "James Chen",              handle: "Singapore",              testimonial: "A true celebration of Japanese culinary art. Each course tells a story. Highly recommend for anyone seeking an authentic omakase experience.",              imageSrc: "https://img.b2bpic.net/free-photo/view-people-learning-how-make-traditional-sushi-dish_23-2151186430.jpg",              imageAlt: "James Chen"
            },
            {
              id: "5",              name: "Yuki Nakamura",              handle: "Hokkaido, Japan",              testimonial: "The chef's technique is flawless. Every ingredient is treated with the respect it deserves. This is true omakase.",              imageSrc: "https://img.b2bpic.net/free-photo/lifestyle-people-learning-make-sushi_23-2149865319.jpg",              imageAlt: "Yuki Nakamura"
            },
            {
              id: "6",              name: "Alexandra Petrov",              handle: "Moscow, Russia",              testimonial: "An extraordinary dining experience in a stunning mountain setting. The combination of culinary excellence and ambiance is perfect.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-cutting-eggplant-into-slices-cutting-board-with-knife-white-table_176474-1565.jpg",              imageAlt: "Alexandra Petrov"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          speed={40}
          topMarqueeDirection="left"
          className="w-full"
          cardClassName="bg-red-950/20 border border-red-900/50 rounded-lg p-6"
          testimonialClassName="text-gray-100 text-sm line-clamp-2"
          nameClassName="text-white font-bold text-sm"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Reserve Your Experience"
          description="Book your intimate omakase journey. Our team will contact you to confirm your reservation and discuss any dietary preferences or special occasions."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "date", type: "date", placeholder: "Preferred Date", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Dietary preferences, special occasions, or questions...",            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/empty-wood-chair_1339-6716.jpg"
          imageAlt="Restaurant ambiance and setting"
          mediaPosition="right"
          buttonText="Confirm Reservation"
          className="w-full"
          titleClassName="text-white text-4xl md:text-5xl font-extrabold"
          descriptionClassName="text-gray-300 text-base md:text-lg mb-8"
          buttonClassName="bg-red-600 hover:bg-red-700 text-white font-bold w-full py-3 rounded-lg transition-all duration-300"
        />
      </div>

      <div id="ecommerce" data-section="ecommerce">
        <ProductCatalog
            layout="section"
            products={[
                {
                    id: "1",
                    name: "Sushi Platter",
                    price: 25.00,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Sushi Platter",
                    rating: 4.8,
                    reviewCount: 120,
                    category: "Appetizers",
                    onProductClick: () => {}
                },
                {
                    id: "2",
                    name: "Tempura Assortment",
                    price: 18.00,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Tempura Assortment",
                    rating: 4.7,
                    reviewCount: 95,
                    category: "Appetizers",
                    onProductClick: () => {}
                },
                {
                    id: "3",
                    name: "Sashimi Selection",
                    price: 35.00,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Sashimi Selection",
                    rating: 4.9,
                    reviewCount: 150,
                    category: "Main Course",
                    onProductClick: () => {}
                }
            ]}
            searchPlaceholder="Search Omakase Niseko menu..."
            emptyMessage="No items found in the menu"
            className="mt-10"
            gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
            cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
            imageClassName="w-full h-48 object-cover"
            searchClassName="mb-4"
            filterClassName="mb-4"
            toolbarClassName="mb-4"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Experience",              items: [
                { label: "The Omakase", href: "#experience" },
                { label: "Our Philosophy", href: "#about" },
                { label: "Reservations", href: "#contact" }
              ]
            },
            {
              title: "Location",              items: [
                { label: "Niseko, Hokkaido", href: "#" },
                { label: "Hours: 5:00 PM - 11:00 PM", href: "#" },
                { label: "Closed Mondays", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Contact", href: "#contact" },
                { label: "Inquiries", href: "mailto:info@omakaseniseko.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Omakase Niseko. All rights reserved."
          className="w-full"
          columnTitleClassName="text-white font-extrabold text-lg mb-4"
          columnItemClassName="text-gray-400 hover:text-red-400 transition-colors text-sm mb-2"
        />
      </div>
    </ThemeProvider>
  );
}