"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Clapperboard, Sparkles, Star, Package } from 'lucide-react';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';

export default function MoviePlayPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Movie Play"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Movies", id: "products" },
            { name: "About", id: "feature" },
            { name: "Reviews", id: "testimonial" }
          ]}
          button={{
            text: "Book Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
      <FeatureCardOne
      features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
      carouselMode="auto"
      gridVariant="uniform-all-items-equal"
      animationType="none"
      title="Experience Cinema Like Never Before"
      description="Immerse yourself in stunning visuals, premium sound, and unforgettable moments at Movie Play. The ultimate destination for movie lovers."
      tag="Premium Cinema Experience"
      buttons={[
      { text: "Book Tickets Now", href: "#contact" },
      { text: "View Schedule", href: "#products" }
      ]}
      textboxLayout="default"
      useInvertedBackground="noInvert"
      />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Now Showing"
          description="Check out our latest blockbuster releases and fan-favorite films"
          tag="Featured Movies"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
          products={[
            {
              id: "1",              name: "Epic Adventure",              price: "$15",              variant: "2D & IMAX",              imageSrc: "https://img.b2bpic.net/free-photo/musicial-music-live-band-performing-stage-with-different-lights_627829-10063.jpg",              imageAlt: "Epic Adventure movie poster"
            },
            {
              id: "2",              name: "Heart's Echo",              price: "$12",              variant: "Romantic Drama",              imageSrc: "https://img.b2bpic.net/free-photo/man-looking-cinema-screen_23-2147803840.jpg",              imageAlt: "Heart's Echo movie poster"
            },
            {
              id: "3",              name: "Laugh Riot",              price: "$12",              variant: "Comedy",              imageSrc: "https://img.b2bpic.net/free-photo/man-speaking-phone-cinema_23-2147803832.jpg",              imageAlt: "Laugh Riot movie poster"
            },
            {
              id: "4",              name: "Enchanted World",              price: "$13",              variant: "Family Animation",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-hand-holding-clapperboard-front-male-mime_23-2147891564.jpg",              imageAlt: "Enchanted World movie poster"
            }
          ]}
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardFourteen
          title="Movie Play has become the trusted choice for cinema enthusiasts across the region, delivering unforgettable entertainment experiences."
          tag="Our Impact"
          useInvertedBackground="invertDefault"
          metrics={[
            {
              id: "1",              value: "50,000+",              description: "Total satisfied customers who have experienced premium cinema at Movie Play"
            },
            {
              id: "2",              value: "98%",              description: "Customer satisfaction rate reflecting our commitment to excellence and quality service"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Quick Links",              items: [
                { label: "Home", href: "hero" },
                { label: "Now Showing", href: "products" },
                { label: "Features", href: "feature" },
                { label: "Reviews", href: "testimonial" }
              ]
            },
            {
              title: "Information",              items: [
                { label: "About Us", href: "#" },
                { label: "Contact", href: "contact" },
                { label: "Booking Policy", href: "#" },
                { label: "Member Benefits", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Facebook", href: "#" },
                { label: "Instagram", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "Subscribe", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Movie Play Cinema. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}