"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Heart, Phone, Award, Users, Clock, Utensils } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Menu", id: "menu" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book a Table",            href: "contact"
          }}
          brandName="Omega 3"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Experience Fresh Seafood Excellence in Tangier"
          description="Welcome to Omega 3 Restaurant, where Mediterranean tradition meets contemporary cuisine. Discover authentic seafood prepared with the freshest daily catch."
          tag="Premium Seafood"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Call Now", href: "tel:+212XXXXXXXXX" },
            { text: "Book a Table", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "http://img.b2bpic.net/free-photo/fish-with-lemon-pomegranate_140725-3604.jpg",              imageAlt: "Omega 3 Restaurant Interior"
            },
            {
              id: "2",              imageSrc: "http://img.b2bpic.net/free-photo/grilled-fish-with-french-fries_1150-18495.jpg",              imageAlt: "Friture de Poisson - Fried Fish Platter"
            },
            {
              id: "3",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-plated-fish-dish-with-lemon-garnish_23-2151991786.jpg",              imageAlt: "Pulpo a la Gallega - Grilled Octopus"
            },
            {
              id: "4",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-handmade-cake-table_23-2148461085.jpg",              imageAlt: "Flan Caramel - Traditional Dessert"
            },
            {
              id: "5",              imageSrc: "http://img.b2bpic.net/free-photo/supermarket-worker-arranging-frozen-fish-sale_342744-1070.jpg",              imageAlt: "Our Culinary Team"
            },
            {
              id: "6",              imageSrc: "http://img.b2bpic.net/free-photo/fish-with-lemon-pomegranate_140725-3604.jpg",              imageAlt: "Restaurant Ambiance"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="At Omega 3, we celebrate the finest seafood traditions of Tangier, blending fresh Mediterranean ingredients with contemporary culinary techniques to create unforgettable dining experiences for locals and visitors alike."
          metrics={[
            { icon: Award, label: "Customer Rating", value: "4.3★" },
            { icon: Users, label: "Happy Reviews", value: "2,578" },
            { icon: Clock, label: "Years of Excellence", value: "15+" },
            { icon: Utensils, label: "Signature Dishes", value: "50+" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardOne
          title="Our Featured Menu"
          description="Savor our most popular dishes, expertly prepared with the freshest Mediterranean seafood and authentic recipes passed down through generations."
          tag="Specialty Items"
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "Friture de Poisson",              price: "180 DH",              imageSrc: "http://img.b2bpic.net/free-photo/grilled-fish-with-french-fries_1150-18495.jpg",              imageAlt: "Fried Fish Platter"
            },
            {
              id: "2",              name: "Pulpo a la Gallega",              price: "220 DH",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-plated-fish-dish-with-lemon-garnish_23-2151991786.jpg",              imageAlt: "Grilled Octopus"
            },
            {
              id: "3",              name: "Flan Caramel",              price: "45 DH",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-delicious-handmade-cake-table_23-2148461085.jpg",              imageAlt: "Caramel Flan Dessert"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View Full Menu", href: "#" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081870.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-cozy-office_23-2149739353.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/couple-enjoying-food-restaurant_23-2149269175.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-white-female-smiling-front-festive-cheerful_181624-7962.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-male-friends-enjoying-restaurant_23-2147861914.jpg",              imageAlt: "James Wilson"
            }
          ]}
          cardTitle="Over 2,500 customers trust Omega 3 for exceptional seafood and unforgettable dining experiences"
          cardTag="Customer Reviews"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Featured On Trusted Platforms"
          description="Omega 3 is proudly listed and recommended on the world's leading restaurant and travel review platforms."
          tag="Verified Reviews"
          tagAnimation="slide-up"
          names={[
            "TripAdvisor",            "Google Maps",            "Instagram",            "Facebook",            "Yelp",            "Michelin Guide",            "Zomato",            "Booking.com"
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/flat-design-early-bird-design-template_23-2149601958.jpg",            "http://img.b2bpic.net/free-vector/flat-design-go-logo-template_23-2148977659.jpg",            "http://img.b2bpic.net/free-vector/orange-camera-logo-collection_23-2147643141.jpg",            "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148086879.jpg",            "http://img.b2bpic.net/free-photo/mobile-settings-closeup_116348-6.jpg",            "http://img.b2bpic.net/free-vector/retro-restaurant-logos-collection_23-2147529275.jpg",            "http://img.b2bpic.net/free-photo/front-view-male-courier-red-uniform-smiling-holding-delivery-coffee-cups-with-phone-pink-wall_140725-35787.jpg",            "http://img.b2bpic.net/free-vector/retro-menu-badges_23-2147508802.jpg"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Reserve Your Table Today"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Ready for an Unforgettable Dining Experience?"
          description="Contact Omega 3 Restaurant to make a reservation, place a catering order, or ask any questions about our menu and services. Our team is ready to welcome you."
          buttons={[
            { text: "Call: +212 XXX XXX XXX", href: "tel:+212XXXXXXXXX" },
            { text: "Send Inquiry", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Omega 3"
          columns={[
            {
              items: [
                { label: "Home", href: "#home" },
                { label: "Menu", href: "#menu" },
                { label: "About", href: "#about" }
              ]
            },
            {
              items: [
                { label: "Reservations", href: "#contact" },
                { label: "Contact", href: "#contact" },
                { label: "Reviews", href: "#testimonials" }
              ]
            },
            {
              items: [
                { label: "Address", href: "#" },
                { label: "Hours", href: "#" },
                { label: "Location", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookies", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
