"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Smartphone, Zap, Globe, Film, Award, Clock, Users, Shield } from "lucide-react";
import FeatureBento from '@/components/sections/feature/FeatureBento';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="large"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Features", id: "features" },
              { name: "Apps & Features", id: "all-apps" },
              { name: "Movies", id: "products" },
              { name: "Pricing", id: "pricing" },
              { name: "Contact", id: "contact" }
            ]}
            brandName="Movie 2026"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardTestimonial
            useInvertedBackground={true}
            background={{ variant: "glowing-orb" }}
            title="Upload & Stream The Future of 2026 Cinema"
            description="The premier platform for high-definition 2026 movie uploads. Fast, secure, and cinematic."
            testimonials={[]}
            buttons={[{ text: "Start Uploading", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098552.jpg"
          />
        </div>

        <div id="about" data-section="about">
          <MetricSplitMediaAbout
            useInvertedBackground={false}
            title="Revolutionizing Film Distribution"
            description="We enable creators to bring their 2026 visions to the world without compromise."
            metrics={[{ value: "10TB+", title: "Daily Uploads" }, { value: "200+", title: "Countries Served" }, { value: "99.9%", title: "Uptime" }]}
            imageSrc="http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301538.jpg"
            mediaAnimation="slide-up"
            metricsAnimation="blur-reveal"
          />
        </div>

        <div id="all-apps" data-section="all-apps">
            <FeatureBento
                useInvertedBackground={false}
                animationType="slide-up"
                textboxLayout="default"
                title="All Apps & Features"
                description="Explore the full suite of tools designed for your cinematic journey."
                features={[
                    { title: "Mobile Streaming", description: "Watch anywhere, anytime.", bentoComponent: "phone", statusIcon: Smartphone, alertIcon: Shield, alertTitle: "Secure", alertMessage: "Encrypted streaming", apps: [{name: "CinemaGo", icon: Film}, {name: "EditorPro", icon: Award}, {name: "CloudSync", icon: Clock}, {name: "SocialLink", icon: Users}, {name: "QuickShare", icon: Zap}, {name: "MovieFix", icon: Globe}, {name: "StreamElite", icon: Film}, {name: "GlobalStream", icon: Globe}] }
                ]}
            />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyEight
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            features={[
              { id: "1", title: "8K Streaming", subtitle: "Ultra high resolution", category: "Engine", value: "Standard" },
              { id: "2", title: "Instant Upload", subtitle: "Lightning fast speed", category: "Speed", value: "Performance" },
              { id: "3", title: "Global CDN", subtitle: "Worldwide access", category: "Reach", value: "Universal" }
            ]}
            title="Cutting-Edge Streaming Tech"
            description="Advanced tools for the modern filmmaker."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardThree
            animationType="blur-reveal"
            gridVariant="two-columns-alternating-heights"
            textboxLayout="default"
            useInvertedBackground={false}
            title="Trending 2026 Releases"
            description="Explore the most anticipated movies this year."
            products={[
              { id: "1", name: "Star Horizon", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/woman-water-with-red-bookcase_1122-986.jpg" },
              { id: "2", name: "Velocity Run", price: "$15", imageSrc: "http://img.b2bpic.net/free-photo/abstract-vaporwave-portrait-man_23-2148950762.jpg" },
              { id: "3", name: "Silent Echo", price: "$10", imageSrc: "http://img.b2bpic.net/free-photo/halloween-party-illustration-poster_23-2151846236.jpg" }
            ]}
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardFive
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            title="Simple Pricing for Everyone"
            description="Scale your movie distribution easily."
            plans={[
              { id: "basic", tag: "Starter", price: "$29", period: "/mo", description: "Perfect for casual creators.", button: { text: "Buy Basic" }, featuresTitle: "Core Features", features: ["100GB Storage", "1080p Streaming"] },
              { id: "pro", tag: "Popular", price: "$99", period: "/mo", description: "For serious filmmakers.", button: { text: "Buy Pro" }, featuresTitle: "Pro Features", features: ["1TB Storage", "4K Streaming"] }
            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
            textboxLayout="split"
            useInvertedBackground={true}
            faqs={[
              { id: "1", title: "How to upload?", content: "Just drag and drop your files." },
              { id: "2", title: "What file formats?", content: "We support MP4, MOV, and MKV." },
              { id: "3", title: "Payment terms?", content: "We bill monthly or yearly." }
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/view-3d-button_23-2149917527.jpg"
            mediaAnimation="blur-reveal"
            title="Frequently Asked"
            description="Everything you need to know."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "sparkles-gradient" }}
            text="Ready to launch your 2026 masterpiece? Contact our team."
            buttons={[{ text: "Contact Support" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Movie 2026"
            columns={[
              { title: "Platform", items: [{ label: "Upload", href: "#" }, { label: "Stream", href: "#" }] },
              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}