"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Film, Star, Eye, Zap, Gauge, Volume2, Music, Waves, Armchair, Maximize, Thermometer, Calendar, MessageCircle, Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Freedom Bee"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Movies", id: "products" },
            { name: "Experience", id: "feature" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Tickets",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Experience Cinema Like Never Before"
          description="Discover the magic of storytelling on the big screen. Freedom Bee Cinema brings premium entertainment to life with cutting-edge technology and unforgettable moments."
          background={{
            variant: "sparkles-gradient"
          }}
          kpis={[
            {
              value: "4K+",              label: "Ultra HD Experience"
            },
            {
              value: "50+",              label: "Movies Annually"
            },
            {
              value: "5★",              label: "Guest Satisfaction"
            }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/young-friends-having-fun-cinema-open-air_23-2149477089.jpg"
          imageAlt="Freedom Bee Cinema entrance with modern architecture"
          imagePosition="right"
          tag="Premium Cinema Experience"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "Book Now",              href: "contact"
            },
            {
              text: "View Schedule",              href: "products"
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Movies This Week"
          description="Discover our latest theatrical releases and blockbuster films now showing at Freedom Bee Cinema"
          tag="Now Showing"
          tagIcon={Film}
          products={[
            {
              id: "1",              name: "Epic Adventure Quest",              price: "Starting $12",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-minimalist-space-movie-poster_742173-6466.jpg",              imageAlt: "Epic Adventure Quest movie poster"
            },
            {
              id: "2",              name: "Stellar Action Series",              price: "Starting $14",              imageSrc: "https://img.b2bpic.net/free-vector/festival-poster-flat-style_23-2147844095.jpg",              imageAlt: "Stellar Action Series movie poster"
            },
            {
              id: "3",              name: "Heartfelt Drama Tales",              price: "Starting $12",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-cinema-festival-poster_23-2149934011.jpg",              imageAlt: "Heartfelt Drama Tales movie poster"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Movies",              href: "contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",              content: "Where Cinema Meets"
            },
            {
              type: "image",              src: "https://img.b2bpic.net/free-photo/group-young-people-cinema_23-2148115364.jpg",              alt: "Cinema marquee"
            },
            {
              type: "text",              content: "Innovation"
            }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Learn Our Story",              href: "contact"
            },
            {
              text: "Visit Us",              href: "contact"
            }
          ]}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardTen
          title="The Freedom Bee Experience"
          description="From premium seating to immersive sound, we deliver every element of cinema perfection"
          tag="Our Features"
          tagIcon={Star}
          features={[
            {
              id: "1",              title: "4K Projection Technology",              description: "Experience crystal-clear visuals with our state-of-the-art 4K projection systems that bring every scene to life with stunning detail and vibrant colors.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/striped-popcorn-bucket-cinema_23-2147698963.jpg"
              },
              items: [
                {
                  icon: Eye,
                  text: "Ultra HD clarity"
                },
                {
                  icon: Zap,
                  text: "Instant response time"
                },
                {
                  icon: Gauge,
                  text: "Peak brightness"
                }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Immersive Sound Design",              description: "Surround yourself with premium audio engineering. Our theater features cutting-edge sound systems that transport you into the heart of every story.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/striped-popcorn-bucket-cinema_23-2147698963.jpg"
              },
              items: [
                {
                  icon: Volume2,
                  text: "Surround sound"
                },
                {
                  icon: Music,
                  text: "Dolby Atmos"
                },
                {
                  icon: Waves,
                  text: "Crystal clarity"
                }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Luxury Seating Comfort",              description: "Sink into premium recliners with spacious legroom, perfect sightlines, and climate control. Your comfort is our priority for an unforgettable viewing experience.",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/striped-popcorn-bucket-cinema_23-2147698963.jpg"
              },
              items: [
                {
                  icon: Armchair,
                  text: "Electric recliners"
                },
                {
                  icon: Maximize,
                  text: "Spacious legroom"
                },
                {
                  icon: Thermometer,
                  text: "Climate control"
                }
              ],
              reverse: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Upcoming Releases"
          description="Mark your calendar for these highly anticipated films coming soon to Freedom Bee Cinema"
          tag="Coming Soon"
          tagIcon={Calendar}
          plans={[
            {
              id: "1",              price: "Opens Next Week",              name: "Cosmic Journey Chronicles",              buttons: [
                {
                  text: "Set Reminder",                  href: "contact"
                },
                {
                  text: "View Trailer",                  href: "contact"
                }
              ],
              features: [
                "Sci-fi adventure",                "4K screening",                "Premium sound",                "Luxury seating"
              ]
            },
            {
              id: "2",              badge: "Most Anticipated",              badgeIcon: Zap,
              price: "Opens in 2 Weeks",              name: "Legacy of the Legends",              buttons: [
                {
                  text: "Set Reminder",                  href: "contact"
                },
                {
                  text: "View Trailer",                  href: "contact"
                }
              ],
              features: [
                "Epic drama",                "Director's cut",                "Best cinematography",                "VIP experience"
              ]
            },
            {
              id: "3",              price: "Opens in 3 Weeks",              name: "Mystery & Intrigue",              buttons: [
                {
                  text: "Set Reminder",                  href: "contact"
                },
                {
                  text: "View Trailer",                  href: "contact"
                }
              ],
              features: [
                "Thriller suspense",                "4K presentation",                "Dolby Atmos",                "Luxury comfort"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Hear from cinema enthusiasts who've experienced the Freedom Bee difference"
          tag="Reviews"
          tagIcon={MessageCircle}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahcinema",              testimonial: "The best cinema experience I've had! The 4K projection is absolutely stunning, and the comfort of those recliners is unmatched. I'm coming back every weekend.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@moviebuff",              testimonial: "Freedom Bee Cinema sets the bar for what a modern theater should be. The sound system is incredible, and the staff is always helpful. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@filmfanatic",              testimonial: "Every detail is perfected here. The picture quality, the audio, the seating—it's like experiencing cinema for the first time. Worth every penny!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@screengeek",              testimonial: "This is what cinema was meant to be. Freedom Bee has transformed my movie-watching experience. Can't wait for the next big release!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              imageAlt: "David Kim"
            }
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready for an unforgettable cinematic journey? Book your tickets now and experience the magic of Freedom Bee Cinema."
          animationType="entrance-slide"
          useInvertedBackground="invertDefault"
          buttons={[
            {
              text: "Book Tickets Now",              href: "contact"
            },
            {
              text: "View Schedule",              href: "products"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Freedom Bee"
          copyrightText="© 2025 Freedom Bee Cinema. All rights reserved."
          socialLinks={[
            {
              icon: Facebook,
              href: "https://facebook.com/freedombeec",              ariaLabel: "Facebook"
            },
            {
              icon: Instagram,
              href: "https://instagram.com/freedombeec",              ariaLabel: "Instagram"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/freedombeec",              ariaLabel: "Twitter"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}