"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import Link from "next/link";

const navItems = [
  { name: "Home", id: "/" },
];

export default function Page() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay navItems={navItems} />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel 
            title="Karthika Movies 4K 3D"
            description="Experience the future of entertainment in stunning clarity."
            background={{ variant: 'canvas-reveal' }}
            mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?q=80&w=2000&auto=format&fit=crop" }]}
        />
      </div>
      <div id="about" data-section="about">
        <TextAbout 
            title="About Karthika"
            buttons={[{ text: "Learn More", href: "#" }]}
            useInvertedBackground={false}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardMedia 
            title="Features"
            description="Why choose us?"
            animationType="blur-reveal"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
                { id: "1", title: "4K Quality", description: "High definition content", tag: "New" },
                { id: "2", title: "3D Experience", description: "Immersive visuals", tag: "Popular" }
            ]}
        />
      </div>
      <div id="products" data-section="products">
        <ProductCardThree 
            title="Our Collection"
            description="Browse our library"
            gridVariant="one-large-right-three-stacked-left"
            animationType="blur-reveal"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
                { id: "1", name: "Movie A", price: "$10", imageSrc: "https://images.unsplash.com/photo-1594909122845-11baa439b7bf?q=80&w=500&auto=format&fit=crop" },
                { id: "2", name: "Movie B", price: "$15", imageSrc: "https://images.unsplash.com/photo-1594909122845-11baa439b7bf?q=80&w=500&auto=format&fit=crop" },
                { id: "3", name: "Movie C", price: "$20", imageSrc: "https://images.unsplash.com/photo-1594909122845-11baa439b7bf?q=80&w=500&auto=format&fit=crop" }
            ]}
        />
      </div>
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
            title="What they say"
            description="Client feedback"
            gridVariant="timeline"
            animationType="blur-reveal"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
                { id: "1", name: "John Doe", role: "Critic", company: "Reviews Inc", rating: 5 },
                { id: "2", name: "Jane Smith", role: "User", company: "Cinema Fans", rating: 4 }
            ]}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase 
            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
        />
      </div>
    </ThemeProvider>
  );
}
