"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { TrendingUp, UserPlus, Share2, DollarSign, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="fluid"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={[
            { name: "Courses", id: "courses" },
            { name: "How It Works", id: "howitworks" },
            { name: "Commissions", id: "commissions" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="AffiliateHub"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Earn While You Share Knowledge"
          description="Join thousands of successful affiliates earning recurring commissions by promoting premium digital courses. Turn your influence into sustainable income with our transparent, high-paying affiliate program."
          background={{ variant: "plain" }}
          tag="Affiliate Program"
          tagIcon={TrendingUp}
          buttons={[
            { text: "Become an Affiliate", href: "https://example.com/signup" },
            { text: "View Courses", href: "courses" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/rear-view-young-college-student-paying-attention-listening-her-online-teacher-laptop-home_662251-2487.jpg"
          imageAlt="Digital courses learning platform"
          mediaAnimation="slide-up"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Why AffiliateHub"
          title="The most trusted platform for course affiliates. Earn up to 40% commission per referral with lifetime payouts and dedicated support."
          useInvertedBackground={false}
          buttons={[
            { text: "Start Earning Today", href: "https://example.com/register" }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <FeatureCardThree
          title="Featured Courses to Promote"
          description="Promote from our curated catalog of top-performing digital courses across business, design, technology, and more."
          tag="High Commission Opportunities"
          features={[
            {
              id: "01",              title: "Business Mastery",              description: "Complete entrepreneurship and business strategy courses with 35% affiliate commission per sale",              imageSrc: "http://img.b2bpic.net/free-photo/young-asia-financial-student-ladies-watching-lesson-online-studying-with-laptop-tablet-living-room-from-home-night_7861-3429.jpg",              imageAlt: "Business course"
            },
            {
              id: "02",              title: "Design & Creative",              description: "Professional design and UX/UI training programs offering 40% recurring commission for affiliates",              imageSrc: "http://img.b2bpic.net/free-vector/web-design-instagram-stories-template_23-2150921564.jpg",              imageAlt: "Design course"
            },
            {
              id: "03",              title: "Technology & Dev",              description: "Comprehensive coding and web development bootcamps with competitive 38% commission structure",              imageSrc: "http://img.b2bpic.net/free-photo/am-i-doing-it-right-group-young-people-casual-clothes-working-modern-office_146671-16514.jpg",              imageAlt: "Technology course"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="howitworks" data-section="howitworks">
        <PricingCardOne
          title="How It Works"
          description="Three simple steps to start earning with AffiliateHub's transparent affiliate program"
          tag="Simple Process"
          plans={[
            {
              id: "step1",              badge: "Step 1",              badgeIcon: UserPlus,
              price: "Sign Up",              subtitle: "Join our affiliate network in minutes",              features: [
                "Free account creation",                "Instant approval process",                "Access to course catalog",                "Custom marketing materials"
              ]
            },
            {
              id: "step2",              badge: "Step 2",              badgeIcon: Share2,
              price: "Promote",              subtitle: "Share your unique affiliate links",              features: [
                "Personalized tracking links",                "Email templates included",                "Social media assets provided",                "Real-time analytics dashboard"
              ]
            },
            {
              id: "step3",              badge: "Step 3",              badgeIcon: DollarSign,
              price: "Earn",              subtitle: "Get paid recurring commissions",              features: [
                "35-40% per referral",                "Lifetime payouts",                "Monthly payments",                "Dedicated affiliate support"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="commissions" data-section="commissions">
        <ProductCardThree
          title="Commission Tiers"
          description="Earn more as you grow. Our tiered commission structure rewards top performers with increasing rates."
          tag="Performance Bonuses Available"
          products={[
            {
              id: "tier1",              name: "Starter Tier",              price: "35%",              imageSrc: "http://img.b2bpic.net/free-photo/word-money-with-silver-coins_23-2147965715.jpg?_wi=1",              imageAlt: "Starter affiliate tier"
            },
            {
              id: "tier2",              name: "Pro Tier",              price: "38%",              imageSrc: "http://img.b2bpic.net/free-photo/word-money-with-silver-coins_23-2147965715.jpg?_wi=2",              imageAlt: "Professional affiliate tier"
            },
            {
              id: "tier3",              name: "Elite Tier",              price: "40%",              imageSrc: "http://img.b2bpic.net/free-photo/word-money-with-silver-coins_23-2147965715.jpg?_wi=3",              imageAlt: "Elite affiliate tier"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Success Stories from Our Top Affiliates"
          description="Hear from affiliates who are earning substantial passive income by promoting quality courses"
          tag="Real Affiliate Results"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Content Creator",              company: "Tech & Marketing Blog",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "Professional portrait business person headshot professional photo"
            },
            {
              id: "2",              name: "Michael Chen",              role: "YouTube Educator",              company: "Dev Learning Channel",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Professional portrait business person headshot professional photo"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Podcast Host",              company: "Business Success Daily",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Professional portrait business person headshot professional photo"
            },
            {
              id: "4",              name: "David Kim",              role: "Email Newsletter",              company: "Design Tips Weekly",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",              imageAlt: "Professional portrait business person headshot professional photo"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted by Leading Educational Platforms"
          description="Our affiliates promote courses from the world's most respected online learning providers"
          names={[
            "Udemy",            "Coursera",            "Skillshare",            "MasterClass",            "Pluralsight",            "LinkedIn Learning",            "Teachable"
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Earn?"
          tagIcon={Zap}
          title="Start Your Affiliate Journey Today"
          description="Join hundreds of successful affiliates earning recurring income. Sign up now and get instant access to our course catalog, marketing materials, and real-time analytics."
          buttons={[
            { text: "Apply Now", href: "https://example.com/affiliate-application" },
            { text: "Learn More", href: "#howitworks" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="AffiliateHub"
          copyrightText="© 2025 AffiliateHub. All rights reserved."
          columns={[
            {
              title: "Program",              items: [
                { label: "How It Works", href: "#howitworks" },
                { label: "Commissions", href: "#commissions" },
                { label: "Courses", href: "#courses" },
                { label: "Resources", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Contact", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Career", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Affiliate Agreement", href: "#" },
                { label: "Disclaimer", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
