"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { CreditCard, Crown, Github, Heart, Lightbulb, Linkedin, Mail, Sparkles, Star, Twitter, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ProductHub"
          navItems={[
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "/signup" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Experience Products in 3D"
          description="Immerse yourself in next-generation product exploration with stunning 3D animations and interactive visualization technology"
          tag="3D Innovation"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/a-stunning-3d-rendered-product-showcase--1772525727026-a35ca072.png?_wi=1"
          imageAlt="3D Product Showcase"
          mediaAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          testimonials={[
            {
              name: "Sarah Johnson",              handle: "CEO, TechCorp",              testimonial: "The 3D visualization completely transformed how we present our products to customers.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/professional-headshot-of-a-confident-tec-1772525725773-8d347ae6.png?_wi=1",              imageAlt: "Sarah Johnson"
            },
            {
              name: "Michael Chen",              handle: "Product Director",              testimonial: "Outstanding interactive experience that drives engagement and conversions like never before.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/professional-business-portrait-of-a-crea-1772525725576-c26b1a34.png?_wi=1",              imageAlt: "Michael Chen"
            }
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Explore Products", href: "#products" },
            { text: "Learn More", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Products"
          description="Discover our premium collection of innovative 3D-enabled products designed for modern creators"
          tag="New Arrivals"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="bento-grid"
          products={[
            {
              id: "1",              name: "Eclipse Motion Pro",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/premium-3d-product-visualization-with-sm-1772525725971-386568de.png",              imageAlt: "Eclipse Motion Pro"
            },
            {
              id: "2",              name: "Quantum Sphere",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/sleek-3d-tech-product-in-isometric-view--1772525725898-63969380.png",              imageAlt: "Quantum Sphere"
            },
            {
              id: "3",              name: "Nexus Flow",              price: "$249",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/interactive-3d-product-demonstration-wit-1772525726077-8047bdb3.png",              imageAlt: "Nexus Flow"
            }
          ]}
          buttons={[
            { text: "Browse All", href: "/products" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="How 3D Animation Works"
          description="Discover the seamless process behind our cutting-edge product visualization technology"
          tag="The Process"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              tag: "Step 1",              title: "Model Creation",              subtitle: "Build precision 3D models",              description: "Advanced 3D modeling techniques create accurate, detailed product representations with photorealistic materials and precision geometry.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/abstract-3d-visualization-showing-design-1772525726173-67c5445f.png",              imageAlt: "3D Model Creation"
            },
            {
              id: 2,
              tag: "Step 2",              title: "Animation Setup",              subtitle: "Define dynamic motion",              description: "Set up smooth, fluid animations with physics-based interactions, particle systems, and procedural animation to bring products to life.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/3d-animated-concept-showing-data-flow-an-1772525726905-6b9df35e.png",              imageAlt: "Animation Setup"
            },
            {
              id: 3,
              tag: "Step 3",              title: "Interactive Viewer",              subtitle: "Engage users dynamically",              description: "Deliver immersive interactive experiences where users rotate, zoom, and explore products with real-time 3D rendering and smooth performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/complex-3d-animation-showing-interconnec-1772525726290-bb81d849.png",              imageAlt: "Interactive Viewer"
            }
          ]}
          buttons={[
            { text: "See Demo", href: "/demo" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Plan"
          description="Flexible pricing designed for creators, agencies, and enterprises of all sizes"
          tag="Pricing"
          tagIcon={CreditCard}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Star,
              price: "$99/mo",              subtitle: "Perfect for creators",              buttons: [
                { text: "Get Started", href: "/signup?plan=starter" }
              ],
              features: [
                "Up to 10 3D products",                "Interactive viewer",                "Basic animations",                "Email support",                "Monthly updates"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$299/mo",              subtitle: "For growing agencies",              buttons: [
                { text: "Start Free Trial", href: "/signup?plan=pro" }
              ],
              features: [
                "Unlimited 3D products",                "Advanced animations",                "Custom branding",                "Priority support",                "Analytics dashboard",                "API access"
              ]
            },
            {
              id: "enterprise",              badge: "Custom",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For enterprises",              buttons: [
                { text: "Contact Sales", href: "/contact" }
              ],
              features: [
                "Everything in Pro",                "Dedicated support",                "Custom development",                "White-label option",                "SLA guarantee",                "Training included"
              ]
            }
          ]}
          buttons={[
            { text: "View All Plans", href: "/pricing" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Customers Say"
          description="Hear from companies transforming their product showcase with 3D animation technology"
          tag="Testimonials"
          tagIcon={Heart}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          speed={40}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahj",              testimonial: "The 3D animation capabilities completely transformed how we present products to clients. Absolutely game-changing!",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/professional-headshot-of-a-confident-tec-1772525725773-8d347ae6.png?_wi=2",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@mchen",              testimonial: "Incredible quality and so easy to use. Our conversion rates increased 45% after implementing this solution.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/professional-business-portrait-of-a-crea-1772525725576-c26b1a34.png?_wi=2",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              handle: "@emilyrodriguez",              testimonial: "The support team is fantastic and the technology is cutting-edge. Highly recommend to any product-focused business.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/corporate-headshot-of-a-successful-produ-1772525725997-357ffcc4.png",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkim",              testimonial: "Outstanding performance and beautiful animations. This is the future of e-commerce product visualization.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/professional-business-headshot-with-mode-1772525725599-cfd78c9a.png",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Martinez",              handle: "@jmartinez",              testimonial: "Best investment we made this year. The ROI on conversion improvements has been exceptional.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/executive-headshot-with-professional-lig-1772525726128-3b14ed74.png",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              name: "Alex Thompson",              handle: "@athompson",              testimonial: "The technology is mature, reliable, and the team behind it truly understands customer needs.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/creative-professional-portrait-with-warm-1772525726047-a5b5e5a4.png",              imageAlt: "Alex Thompson"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Stay Updated"
          description="Subscribe to our newsletter for the latest 3D animation techniques, product launches, and exclusive insider tips"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQUvG7UHHYgJ6tZ0pGIZ4IInAH/a-stunning-3d-rendered-product-showcase--1772525727026-a35ca072.png?_wi=2"
          imageAlt="Newsletter Signup"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy and send updates monthly. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="ProductHub"
          copyrightText="© 2025 ProductHub. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
