"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="noiseGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Koko"
          button={{ text: "Reserve Table", href: "#contact" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplitImage
          logoText="KOKO"
          description="Experience culinary excellence at Koko, where fine dining meets warm hospitality. Discover our thoughtfully curated menu showcasing seasonal ingredients and bold flavors."
          buttons={[
            { text: "Make Reservation", href: "#contact" },
            { text: "Explore Menu", href: "#menu" }
          ]}
          layoutOrder="default"
          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762603989-3tcb4zsk.jpg"
          splitImageAlt="Elegant Koko restaurant dining experience"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762603989-3tcb4zsk.jpg"
          imageAlt="Koko restaurant ambiance"
          frameStyle="card"
        />
      </div>
      
      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="Our Story"
          title="Crafted with passion. Served with care."
          description="Koko is dedicated to bringing you an unforgettable dining experience. From our open kitchen to your table, every dish is prepared with meticulous attention to detail and the finest ingredients. We believe in celebrating local flavors while embracing global influences."
          textboxLayout="default"
          phoneOne={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766915460515-mb858co5.jpg" }}
          phoneTwo={{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766915460515-mb858co5.jpg" }}
          useInvertedBackground="noInvert"
          buttons={[{ text: "Learn More", href: "#menu" }]}
        />
      </div>
      
      <div id="menu" data-section="menu">
        <ProductCardFive
          title="Signature Dishes"
          description="Discover our most beloved creations, crafted to showcase the art of fine dining"
          tag="Menu Highlights"
          products={[
            {
              id: "dish-1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766915461682-xkfyiuzw.jpg",
              imageAlt: "Koko signature dish one",
              button: { text: "View Details" }
            },
            {
              id: "dish-2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766915462711-kbixbk5b.jpg",
              imageAlt: "Koko signature dish two",
              button: { text: "View Details" }
            },
            {
              id: "dish-3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416781771-y722e2uo.jpg",
              imageAlt: "Koko signature dish three",
              button: { text: "View Details" }
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Loved by our guests"
          description="See what makes Koko a destination restaurant"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              quote: "Koko exceeded every expectation. The food was exquisite, the service impeccable, and the atmosphere truly magical. We've already booked our next visit.",
              name: "Sarah Johnson",
              role: "Food Critic",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",
              quote: "An absolutely unforgettable evening. Every dish told a story and the chef's creativity is remarkable. This is fine dining done right.",
              name: "Michael Chen",
              role: "Restaurant Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              quote: "The attention to detail is unmatched. From presentation to taste, everything was perfect. Koko is now my go-to for special occasions.",
              name: "Emma Rodriguez",
              role: "Hospitality Professional",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              quote: "We celebrated our anniversary here and it was the perfect choice. The personalized service and exceptional cuisine made it truly special.",
              name: "David Kim",
              role: "Valued Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg",
              imageAlt: "David Kim"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready for your next culinary journey?"
          description="Reserve your table at Koko today. Our team will ensure your dining experience is nothing short of exceptional."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762603989-3tcb4zsk.jpg"
          imageAlt="Koko restaurant"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We'll send you updates about our seasonal menus and special events."
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Koko"
          description="Experience fine dining at its finest. Koko is your destination for unforgettable culinary moments."
          copyrightText="© 2025 Koko Restaurant. All rights reserved."
          columns={[
            {
              title: "Restaurant",
              items: [
                { label: "Menu", href: "#menu" },
                { label: "Reservations", href: "#contact" },
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "terms" },
                { label: "Privacy Policy", href: "privacy" },
                { label: "Cookie Policy", href: "cookies" }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Twitter"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}