"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Award, CheckCircle, Clock, Download, Film, Hand, Music, Share2, Smile, Sparkles, Star, TrendingUp, Upload, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Helloads"
          navItems={[
            { name: "Features", id: "features" },
            { name: "How It Works", id: "howItWorks" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{ text: "Start Creating", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="HELLOADS"
          description="Create stunning creative videos in seconds. Harness the power of AI-driven video production to bring your ideas to life faster than ever before."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#contact" },
            { text: "Watch Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/a-modern-clean-creative-video-production-1772493355019-9e4dc606.png"
          imageAlt="Helloads creative video dashboard interface"
          mediaAnimation="slide-up"
          frameStyle="browser"
          ariaLabel="Helloads hero section - create videos in seconds"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Why Choose Helloads"
          description="Everything you need to create professional video content at lightning speed"
          tag="Features"
          features={[
            {
              id: "1",              title: "Lightning-Fast Creation",              description: "Generate complete, polished videos in mere seconds with our AI-powered engine. No technical expertise required—just your creative vision.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/a-visual-representation-of-speed-and-eff-1772493355585-680b5f31.png"
              },
              items: [
                { icon: Zap, text: "Videos created in seconds" },
                { icon: Sparkles, text: "AI-powered automation" },
                { icon: CheckCircle, text: "Zero technical skills needed" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Professional Quality Output",              description: "Deliver broadcast-quality videos that rival those created by professional studios. Every frame is optimized for maximum impact and engagement.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/a-professional-quality-badge-or-star-ico-1772493355465-26710760.png"
              },
              items: [
                { icon: Star, text: "Studio-grade quality" },
                { icon: Award, text: "Professional effects included" },
                { icon: CheckCircle, text: "Optimized for all platforms" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Intuitive & Easy to Use",              description: "A clean, user-friendly interface that makes video creation accessible to everyone. Drag, drop, and create—it's that simple.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/a-simple-intuitive-icon-showing-ease-of--1772493353869-8947d104.png"
              },
              items: [
                { icon: Hand, text: "Drag-and-drop simplicity" },
                { icon: Smile, text: "Beginner-friendly design" },
                { icon: CheckCircle, text: "No learning curve required" }
              ],
              reverse: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="howItWorks" data-section="howItWorks">
        <FeatureCardTen
          title="How Helloads Works"
          description="Simple, straightforward steps to create your first professional video"
          tag="Process"
          features={[
            {
              id: "1",              title: "Upload Your Content",              description: "Choose your media files, stock footage, or images. Upload single or batch files to get started instantly.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/visual-representation-of-step-one-upload-1772493354469-8d670769.png"
              },
              items: [
                { icon: Upload, text: "Multiple format support" },
                { icon: Zap, text: "Instant cloud processing" },
                { icon: CheckCircle, text: "Secure file storage" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Apply AI Magic",              description: "Let our AI analyze your content and automatically apply effects, transitions, music, and text. Customize everything in seconds.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/visual-representation-of-step-two-applyi-1772493355684-ec5c2e36.png"
              },
              items: [
                { icon: Sparkles, text: "AI-driven enhancement" },
                { icon: Music, text: "Royalty-free music library" },
                { icon: CheckCircle, text: "Real-time preview" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Export & Share",              description: "Download your finished video or share directly to social media platforms. One click to reach your audience.",              media: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/visual-representation-of-step-three-expo-1772493355422-451d983f.png"
              },
              items: [
                { icon: Download, text: "Multiple export formats" },
                { icon: Share2, text: "Direct platform sharing" },
                { icon: CheckCircle, text: "Optimized for each platform" }
              ],
              reverse: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Helloads by the Numbers"
          description="Join thousands of creators already making professional videos in seconds"
          tag="Impact"
          metrics={[
            { id: "1", icon: Film, title: "Videos Created", value: "500K+" },
            { id: "2", icon: Clock, title: "Avg Creation Time", value: "12 sec" },
            { id: "3", icon: Users, title: "Active Creators", value: "50K+" }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Loved by Creative Professionals"
          description="See what creators and brands are saying about their Helloads experience"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Creative Director",              company: "Design Studios Co.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/professional-portrait-photo-of-a-female--1772493356460-008c2a1b.png"
            },
            {
              id: "2",              name: "James Chen",              role: "Marketing Manager",              company: "TechVision Inc.",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/professional-portrait-photo-of-a-male-ma-1772493354274-f5ffd434.png"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Content Creator",              company: "Digital Dreams",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/professional-portrait-photo-of-a-female--1772493354410-fa82183a.png"
            },
            {
              id: "4",              name: "David Kim",              role: "Startup Founder",              company: "Creative Ventures",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APTN1KaIn9YOJChZfNs1G8WyW1/professional-portrait-photo-of-a-male-st-1772493354026-2883dcb1.png"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Create Amazing Videos?"
          description="Join thousands of creators making professional videos in seconds. Start your free trial today—no credit card required."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Start Free Trial"
          termsText="We respect your privacy. Unsubscribe anytime from our mailing list."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Helloads"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "How It Works", href: "#howItWorks" },
                { label: "Pricing", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Tutorials", href: "#" },
                { label: "Support", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Helloads. All rights reserved. Create videos in seconds."
        />
      </div>
    </ThemeProvider>
  );
}
