"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 PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

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: "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={[
              { name: "Alice Film", handle: "@alice", testimonial: "The fastest upload speed I've encountered.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-3843.jpg" },
              { name: "Bob Cine", handle: "@bob", testimonial: "Incredible quality for 2026 releases.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-working-her-laptop-camera-with-lens_23-2148424437.jpg" },
              { name: "Charlie Direct", handle: "@charlie", testimonial: "Built for filmmakers by filmmakers.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-peaceful-man-with-headphones-looking-away_23-2148205434.jpg" },
              { name: "Dana Edit", handle: "@dana", testimonial: "My go-to platform for premieres.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/redhead-bearded-freelance-photographer-with-tripod-backpack_613910-1572.jpg" },
              { name: "Evan Camera", handle: "@evan", testimonial: "Exceptional reliability and service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg" }
            ]}
            buttons={[{ text: "Start Uploading", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098552.jpg"
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/traveler-photographer-studio-portrait-handsome-bearded_613910-1606.jpg", alt: "Portrait of filmmaker 1" },
              { src: "http://img.b2bpic.net/free-photo/male-white-shirt-holds-photo-camera-isolated-grey_613910-463.jpg", alt: "Portrait of filmmaker 2" },
              { src: "http://img.b2bpic.net/free-photo/pensive-tailor-sitting-table-with-hand-chin-sewing-workshop_613910-5306.jpg", alt: "Portrait of filmmaker 3" },
              { src: "http://img.b2bpic.net/free-photo/bearded-black-man-wearing-suit-felt-hat_613910-16012.jpg", alt: "Portrait of filmmaker 4" },
              { src: "http://img.b2bpic.net/free-photo/content-creator-analyzing-newly-released-gaming-tablet-received-from-sponsor_482257-128495.jpg", alt: "Portrait of filmmaker 5" }
            ]}
            marqueeItems={[{ type: "text", text: "High Speed" }, { type: "text", text: "4K Ultra" }, { type: "text", text: "Secure Cloud" }, { type: "text", text: "Global CDN" }, { type: "text", text: "Direct Upload" }]}
          />
        </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="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", buttons: [{ text: "Learn more" }] },
              { id: "2", title: "Instant Upload", subtitle: "Lightning fast speed", category: "Speed", value: "Performance", buttons: [{ text: "Learn more" }] },
              { id: "3", title: "Global CDN", subtitle: "Worldwide access", category: "Reach", value: "Universal", buttons: [{ text: "Learn more" }] }
            ]}
            title="Cutting-Edge Streaming Tech"
            description="Advanced tools for the modern filmmaker."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            animationType="scale-rotate"
            textboxLayout="default"
            gridVariant="two-columns-alternating-heights"
            useInvertedBackground={false}
            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" },
              { id: "4", name: "Broken Sky", price: "$14", imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-with-map-inside-car-going-road-trip-together_23-2148783429.jpg" },
              { id: "5", name: "Neo Realm", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-representing-capricorn-zodiac-sign-with-ram_23-2151006318.jpg" },
              { id: "6", name: "Documentary 2026", price: "$8", imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-with-visual-metaphor-memory_23-2151240851.jpg" }
            ]}
            title="Trending 2026 Releases"
            description="Explore the most anticipated movies this year."
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            plans={[
              { id: "basic", price: "$29/mo", name: "Basic", buttons: [{ text: "Sign Up" }], features: ["100GB Storage", "1080p Streaming"] },
              { id: "pro", price: "$99/mo", name: "Professional", buttons: [{ text: "Sign Up" }], features: ["1TB Storage", "4K Streaming"] },
              { id: "ent", price: "$299/mo", name: "Enterprise", buttons: [{ text: "Sign Up" }], features: ["Unlimited Storage", "8K Streaming"] }
            ]}
            title="Simple Pricing for Everyone"
            description="Scale your movie distribution easily."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwelve
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Alice Film", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-posing_23-2149213187.jpg" },
              { id: "2", name: "Bob Cine", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg" },
              { id: "3", name: "Charlie Direct", imageSrc: "http://img.b2bpic.net/free-photo/karate-player-man-posing-looking_107420-64916.jpg" },
              { id: "4", name: "Dana Edit", imageSrc: "http://img.b2bpic.net/free-photo/cool-young-man-with-clapper_1149-1829.jpg" },
              { id: "5", name: "Evan Camera", imageSrc: "http://img.b2bpic.net/free-photo/female-filmmaker-editing-montage-video-clips-with-creative-software_482257-119137.jpg" }
            ]}
            cardTitle="Loved by the community"
            cardTag="Reviews"
            cardAnimation="blur-reveal"
          />
        </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="blog" data-section="blog">
          <BlogCardThree
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            title="Latest Cinema Insights"
            description="Expert tips for 2026 film creators."
            blogs={[
              { id: "b1", category: "Film", title: "Future of Cinema", excerpt: "What to expect in 2026.", imageSrc: "http://img.b2bpic.net/free-photo/charming-young-woman-looks-old-photoalbums-sitting-cafe_8353-1394.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/low-view-smiley-photographer-photography-umbrella_23-2148424404.jpg", date: "Jan 2026" },
              { id: "b2", category: "Tech", title: "Streaming Tech", excerpt: "Optimizing your uploads.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-retro-camera-necktie_23-2147624716.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/medium-shot-young-man-recording-podcast_23-2149386521.jpg", date: "Feb 2026" },
              { id: "b3", category: "Story", title: "Storytelling Tips", excerpt: "Crafting great scripts.", imageSrc: "http://img.b2bpic.net/free-photo/female-photographer-blurred-models_23-2148565568.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/man-with-popcorn-one-hand-package-other_1187-1637.jpg", date: "Mar 2026" }
            ]}
          />
        </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>
  );
}
