"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Flame, ChefHat, Sparkles, Calendar, Linkedin, Globe } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Kuro Gyu"
          navItems={[
            { name: "About", id: "about" },
            { name: "Cuts", id: "cuts" },
            { name: "Experience", id: "experience" },
            { name: "Team", id: "team" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Reserve Table",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Premium Japanese Steakhouse"
          description="Experience the art of Wagyu perfection. Authentic Japanese steakhouse craftsmanship with the finest cuts, prepared with precision and served in an atmosphere of refined elegance."
          tag="Est. 2020"
          tagIcon={Flame}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Reserve Now", href: "contact" },
            { text: "View Menu", href: "cuts" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/premium-photo/sushi-chef-carefully-prepares-plate-fresh-sushi_14117-1112407.jpg?id=293519047",
              imageAlt: "Master Chef Preparing Premium Wagyu"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-rare-steak-wooden-board_181624-59117.jpg",
              imageAlt: "A5 Wagyu Ribeye"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-friends-having-lunch-luxury-restaurant_23-2151081502.jpg?id=94766451",
              imageAlt: "Elegant Dining Room"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-raw-steak-with-barbecue-rosemary_176474-3197.jpg",
              imageAlt: "Japanese Prime Filet"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-meat-with-salt-cleaver_23-2148610980.jpg",
              imageAlt: "Aged Bone-In Ribeye"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          tagIcon={ChefHat}
          title="Mastery Through Tradition"
          description="For over two decades, Kuro Gyu has been dedicated to bringing authentic Japanese steakhouse excellence to discerning diners. Our head chef trained in Tokyo's most prestigious establishments, perfecting the art of Wagyu preparation. Every cut is carefully selected, aged to perfection, and prepared with meticulous attention to detail."
          metrics={[
            { value: "25+", title: "Years of Excellence" },
            { value: "100%", title: "Premium Wagyu" }
          ]}
          imageSrc="https://img.b2bpic.net/premium-photo/sushi-chef-carefully-prepares-plate-fresh-sushi_14117-1112407.jpg?id=293519047"
          imageAlt="Master chef preparing premium steakhouse cuisine"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="cuts" data-section="cuts">
        <ProductCardTwo
          title="Signature Cuts"
          description="Handpicked premium Wagyu selections, aged to perfection and prepared by our master chefs"
          tag="Premium Selection"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",
              brand: "Kuro Gyu",
              name: "A5 Wagyu Ribeye",
              price: "$125",
              rating: 5,
              reviewCount: "312",
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-rare-steak-wooden-board_181624-59117.jpg",
              imageAlt: "A5 Wagyu Ribeye"
            },
            {
              id: "2",
              brand: "Kuro Gyu",
              name: "Japanese Prime Filet",
              price: "$145",
              rating: 5,
              reviewCount: "287",
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-raw-steak-with-barbecue-rosemary_176474-3197.jpg",
              imageAlt: "Japanese Prime Filet"
            },
            {
              id: "3",
              brand: "Kuro Gyu",
              name: "Aged Bone-In Ribeye",
              price: "$135",
              rating: 5,
              reviewCount: "256",
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-meat-with-salt-cleaver_23-2148610980.jpg",
              imageAlt: "Aged Bone-In Ribeye"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="experience" data-section="experience">
        <FeatureCardNineteen
          title="The Kuro Gyu Experience"
          description="Every visit is a masterclass in Japanese steakhouse tradition"
          tag="Fine Dining"
          features={[
            {
              tag: "Selection",
              title: "Premium Sourcing",
              subtitle: "Authentic Wagyu Excellence",
              description: "We source only A5 grade Wagyu beef directly from Japan's most prestigious ranches. Every cut undergoes rigorous quality inspection to ensure perfection for your table.",
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-rare-steak-wooden-board_181624-59117.jpg",
              imageAlt: "Premium Wagyu selection"
            },
            {
              tag: "Preparation",
              title: "Master Craftsmanship",
              subtitle: "Traditional Techniques",
              description: "Our chefs employ traditional Japanese grilling methods perfected over decades. Each steak is cooked to precise temperatures, seared at optimal heat, and finished with meticulous timing.",
              imageSrc: "https://img.b2bpic.net/premium-photo/sushi-chef-carefully-prepares-plate-fresh-sushi_14117-1112407.jpg?id=293519047",
              imageAlt: "Chef preparing premium steak"
            },
            {
              tag: "Ambiance",
              title: "Refined Atmosphere",
              subtitle: "Elegant Minimalism",
              description: "Our dining space reflects Japanese design principles: clean lines, sophisticated minimalism, and an intimate atmosphere that honors the meal. Every detail is curated for your comfort.",
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-friends-having-lunch-luxury-restaurant_23-2151081502.jpg?id=94766451",
              imageAlt: "Fine dining restaurant interior"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Master Chefs"
          description="The culinary masters behind Kuro Gyu's exceptional cuisine"
          tag="Our Leadership"
          members={[
            {
              id: "1",
              name: "Chef Hiroshi Nakamura",
              role: "Executive Chef",
              description: "25 years of experience perfecting the art of Wagyu preparation. Trained at Michelin-starred establishments in Tokyo. Specializes in traditional Japanese grilling techniques.",
              imageSrc: "https://img.b2bpic.net/premium-photo/sushi-chef-carefully-prepares-plate-fresh-sushi_14117-1112407.jpg?id=293519047",
              imageAlt: "Chef Hiroshi Nakamura",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "2",
              name: "Chef Yuki Tanaka",
              role: "Head Sous Chef",
              description: "Master of knife work and precision cuts. Studied under legendary Tokyo chefs. Ensures every plate meets our exacting standards of excellence.",
              imageSrc: "https://img.b2bpic.net/free-photo/expert-male-chef-crafting-fresh-meal-indoors-generated-by-ai_188544-26105.jpg?id=41571811",
              imageAlt: "Chef Yuki Tanaka",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Guest Testimonials"
          description="Hear what our patrons say about their Kuro Gyu experience"
          tag="Reviews"
          testimonials={[
            {
              id: "1",
              name: "Kenji Yamamoto",
              handle: "@michelin_critic",
              testimonial: "The finest Wagyu I've experienced outside of Tokyo. Every element is executed with extraordinary precision and respect for the ingredient.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-asian-man-sitting-restaurant_1262-1558.jpg",
              imageAlt: "Kenji Yamamoto"
            },
            {
              id: "2",
              name: "Sarah Chen",
              handle: "@food_writer",
              testimonial: "Kuro Gyu isn't just a steakhouse—it's a culinary journey. The attention to detail, from ingredient selection to presentation, is unparalleled.",
              imageSrc: "https://img.b2bpic.net/free-photo/confident-businessman_1098-16852.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "3",
              name: "Marcus Rivera",
              handle: "@execute_dining",
              testimonial: "This is where I bring clients for important celebrations. The experience is impeccable, the meat is transcendent, and the service is flawless.",
              imageSrc: "https://img.b2bpic.net/free-photo/expert-male-chef-crafting-fresh-meal-indoors-generated-by-ai_188544-26105.jpg?id=41571811",
              imageAlt: "Marcus Rivera"
            },
            {
              id: "4",
              name: "Yuki Tanaka",
              handle: "@tokyo_chef",
              testimonial: "As someone trained in traditional Japanese cuisine, I can authenticate: this is authentic excellence. The respect for Wagyu here mirrors the finest establishments in Japan.",
              imageSrc: "https://img.b2bpic.net/free-photo/senior-asian-boss-standing-with-arms-crossed_1262-2405.jpg",
              imageAlt: "Yuki Tanaka"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about Kuro Gyu"
          tag="Help"
          faqs={[
            {
              id: "1",
              title: "What is the difference between A5 and lower grades of Wagyu?",
              content: "A5 is the highest grade in the Japanese Beef Marbling Standard. It features the most intricate marbling patterns, which means superior tenderness, flavor, and the signature melting quality that makes Wagyu exceptional. We exclusively serve A5 grade beef."
            },
            {
              id: "2",
              title: "How should I prepare my palate for a Wagyu experience?",
              content: "We recommend arriving with an empty or lightly satisfied stomach. The richness of A5 Wagyu is best appreciated when you can fully concentrate on the flavors. Our sommelier team can pair wines that complement the meal perfectly."
            },
            {
              id: "3",
              title: "Do you accommodate dietary restrictions?",
              content: "Absolutely. Please inform us of any dietary requirements or allergies when making your reservation. Our culinary team can customize your experience while maintaining the integrity of our preparation techniques."
            },
            {
              id: "4",
              title: "What is your reservation policy?",
              content: "Reservations are recommended for weekend service and large groups. We offer a 48-hour cancellation policy. Walk-ins are welcome based on availability, though during peak hours seating may require a brief wait."
            },
            {
              id: "5",
              title: "Do you offer private dining options?",
              content: "Yes, we have a private dining room suitable for 12-20 guests. We offer customized multi-course tasting menus and curated wine pairings for special events. Contact our events team for details."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/wine-glass_74190-1311.jpg"
          imageAlt="Elegant Kuro Gyu dining room"
          mediaPosition="left"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Reservations"
          title="Reserve Your Experience"
          description="Secure your table at Kuro Gyu and prepare for an unforgettable evening of premium Japanese steakhouse cuisine."
          tagIcon={Calendar}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="your@email.com"
          buttonText="Get Updates"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Kuro Gyu"
          copyrightText="© 2024 Kuro Gyu Pemium Steakhouse. All rights reserved."
          columns={[
            {
              title: "Dining",
              items: [
                { label: "Menu", href: "cuts" },
                { label: "Reservations", href: "contact" },
                { label: "Private Events", href: "contact" }
              ]
            },
            {
              title: "Experience",
              items: [
                { label: "About Us", href: "about" },
                { label: "Our Story", href: "about" },
                { label: "Team", href: "team" },
                { label: "Testimonials", href: "testimonials" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Phone: (555) 123-4567", href: "#" },
                { label: "Email: reserve@kurogyu.com", href: "#" },
                { label: "Hours: 5PM - 11PM", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
