"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 TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
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="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Movie Play absolutely transformed my cinema experience. The picture quality is stunning, the seats are incredibly comfortable, and the entire atmosphere is just perfect. I've been coming here every weekend!"
          rating={5}
          author="Sarah Mitchell, Movie Enthusiast"
          useInvertedBackground="noInvert"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer 1" },
            { src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Customer 2" },
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Customer 3" },
            { src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", alt: "Customer 4" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "Customer 5" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", alt: "Customer 6" }
          ]}
        />
      </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>
  );
}