"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Flame, Heart, Lightbulb, Music, Palette, Shield, Utensils, Wine, Wind, Zap } from "lucide-react";
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="OMAKASE NISEKO"
          navItems={[
            { name: "Experience", id: "experience" },
            { name: "Menu", id: "menu" },
            { name: "Ambiance", id: "ambiance" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Reserve",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          tag="Premium Omakase Experience"
          title="Masterful Sushi Crafted in Niseko"
          description="Experience the art of authentic Japanese omakase dining at our exclusive counter in Niseko. Watch master chefs craft each piece with precision, passion, and the finest ingredients from Japan and around the world."
          background={{ variant: "canvas-reveal" }}
          imageSrc="https://img.b2bpic.net/free-photo/sushi-set-with-gold-color-table_140725-5505.jpg"
          imageAlt="Master sushi chef preparing omakase"
          buttons={[
            { text: "Reserve Your Experience", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          title="Tradition Meets Elevation in Niseko"
          description="Nestled in the snow-capped mountains of Niseko, our omakase restaurant honors centuries of Japanese sushi-making tradition while embracing innovative techniques. We source the finest ingredients from premium suppliers across Japan, ensuring every piece represents our commitment to excellence and authentic flavor."
          metrics={[
            { value: "20+", title: "Years of Mastery" },
            { value: "100%", title: "Premium Japanese Sourcing" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/frozen-lake-winter-time_1232-2188.jpg"
          imageAlt="Niseko mountain landscape"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="experience" data-section="experience">
        <FeatureBento
          title="The Omakase Experience"
          description="Discover what makes our omakase journey unforgettable—from intimate counter seating to personalized selections curated by our head chef."
          tag="Exceptional Dining"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Chef's Selection",              description: "Let our master chef guide you through 15-20 carefully selected pieces showcasing seasonal ingredients and traditional techniques.",              bentoComponent: "globe"
            },
            {
              title: "Intimate Counter Seating",              description: "Experience the performance of sushi craftsmanship from our private counter, where you can interact directly with our chefs.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Premium Beverage Pairings",              description: "Curated sake, wine, and Japanese spirits selected to complement each course of your omakase journey.",              bentoComponent: "line-chart"
            }
          ]}
        />
      </div>

      <div id="menu" data-section="menu">
        <MetricCardEleven
          title="Menu Highlights"
          description="Seasonal selections featuring premium cuts, rare fish, and traditional preparations that define omakase excellence."
          tag="Chef's Selection"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "Nigiri",              title: "Hand-pressed perfection",              description: "Each piece hand-formed to the perfect ratio of rice and fish, showcasing texture and flavor.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-cutting-eggplant-into-slices-cutting-board-with-knife-white-table_176474-1565.jpg",              imageAlt: "Premium nigiri sushi selection"
            },
            {
              id: "2",              value: "Sashimi",              title: "Pristine slices",              description: "Ultra-fresh raw fish selected for optimal marbling, color, and delicate flavor profiles.",              imageSrc: "https://img.b2bpic.net/free-photo/sushi-set-with-soybean-sauce_140725-4084.jpg",              imageAlt: "Premium sashimi platter"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Guest Experiences"
          description="Hear from those who have experienced the artistry and excellence of our omakase."
          tag="Reviews"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Yuki Tanaka",              handle: "@yuki_travels",              testimonial: "The finest omakase experience I've had outside of Tokyo. Every piece was a masterpiece of flavor and technique.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "Yuki Tanaka"
            },
            {
              id: "2",              name: "James Mitchell",              handle: "@chef_james",              testimonial: "As a professional chef, I was impressed by their attention to detail and ingredient quality. A true gem in Niseko.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg",              imageAlt: "James Mitchell"
            },
            {
              id: "3",              name: "Akiko Suzuki",              handle: "@akiko_foodie",              testimonial: "An unforgettable evening celebrating our anniversary. The chef remembered our preferences and created a personalized journey.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1633.jpg",              imageAlt: "Akiko Suzuki"
            },
            {
              id: "4",              name: "David Chen",              handle: "@david_explores",              testimonial: "Outstanding service, premium ingredients, and an intimate atmosphere. Worth every moment and every yen spent.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/thumbs-up-spa-smiling-girl-white-robe-good-wellness-vibes_169016-69478.jpg",              imageAlt: "David Chen"
            },
            {
              id: "5",              name: "Emma Rosewood",              handle: "@emma_cuisine",              testimonial: "The balance of tradition and innovation is perfect. Each course told a story of Japanese culinary excellence.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",              imageAlt: "Emma Rosewood"
            },
            {
              id: "6",              name: "Hiroshi Nakamura",              handle: "@hiroshi_sake",              testimonial: "As a sake connoisseur, their pairings were exceptional. Truly a celebration of Japanese culture and craftsmanship.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              imageAlt: "Hiroshi Nakamura"
            }
          ]}
        />
      </div>

      <div id="ambiance" data-section="ambiance">
        <FeatureBento
          title="The Perfect Setting"
          description="Our intimate space is designed to enhance the omakase experience with elegant Japanese aesthetics and premium comfort."
          tag="Ambiance"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Private Counter",              description: "An exclusive counter seating area where you sit directly before the chef, experiencing sushi craftsmanship in real-time.",              bentoComponent: "orbiting-icons",              centerIcon: Utensils,
              items: [
                { icon: Flame, ring: 1 },
                { icon: Wine, ring: 2 },
                { icon: Heart, ring: 3 }
              ]
            },
            {
              title: "Minimalist Elegance",              description: "Japanese-inspired design with natural materials, soft lighting, and thoughtful spatial arrangement creating tranquil refinement.",              bentoComponent: "3d-stack-cards",              items: [
                {
                  icon: Lightbulb,
                  title: "Subtle Lighting",                  subtitle: "Warm ambiance",                  detail: "Creating intimate dining atmosphere"
                },
                {
                  icon: Wind,
                  title: "Natural Flow",                  subtitle: "Spatial design",                  detail: "Harmony with traditional aesthetics"
                },
                {
                  icon: Music,
                  title: "Curated Soundscape",                  subtitle: "Japanese jazz",                  detail: "Enhancing the sensory experience"
                }
              ]
            },
            {
              title: "Elements",              description: "Hand-selected cypress wood counter, natural stone accents, and traditional Japanese architectural elements.",              bentoComponent: "3d-task-list",              items: [
                { icon: Palette, label: "Cypress Counter", time: "Imported" },
                { icon: Zap, label: "Stone Accents", time: "Natural" },
                { icon: Shield, label: "Artisan Details", time: "Crafted" }
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to experience the art of omakase? Reserve your exclusive dining experience with our master chefs in Niseko today."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Make a Reservation", href: "https://example.com/reserve" },
            { text: "Contact Us", href: "mailto:reservations@omakase-niseko.jp" }
          ]}
        />
      </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: "Miso Soup",
                    price: 8.00,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Miso Soup",
                    rating: 4.7,
                    reviewCount: 95,
                    category: "Soups",
                    onProductClick: () => {}
                },
                {
                    id: "3",
                    name: "Tempura Vegetables",
                    price: 15.00,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Tempura Vegetables",
                    rating: 4.9,
                    reviewCount: 110,
                    category: "Appetizers",
                    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">
        <FooterBase
          logoText="OMAKASE NISEKO"
          copyrightText="© 2025 Omakase Niseko | All Rights Reserved"
          columns={[
            {
              title: "Experience",              items: [
                { label: "Our Omakase", href: "experience" },
                { label: "Menu", href: "menu" },
                { label: "Ambiance", href: "ambiance" }
              ]
            },
            {
              title: "Dining",              items: [
                { label: "Reservations", href: "contact" },
                { label: "Group Bookings", href: "contact" },
                { label: "Private Events", href: "contact" }
              ]
            },
            {
              title: "Niseko",              items: [
                { label: "About Us", href: "about" },
                { label: "Location", href: "about" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}