"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Phone, Twitter, Linkedin, Facebook, Youtube } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="AffiliateHub"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoCarousel
          logoText="AffiliateHub"
          description="Unlock your earning potential with our cutting-edge affiliate marketing platform. Get real-time tracking, advanced analytics, and dedicated support to scale your affiliate business."
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983288368-py19hzaj.jpg",
              imageAlt: "Affiliate marketing success dashboard"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
              imageAlt: "Marketing analytics and performance metrics"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983289277-elw8ical.jpg",
              imageAlt: "Collaborative marketing team working together"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983290082-rq47q3ut.jpg",
              imageAlt: "Earning potential and financial growth"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983291397-8uh3i1cf.jpg",
              imageAlt: "Network and partnership connections"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Empowering Marketers Since 2015" },
            { 
              type: "image", 
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787044450-9f4y10ts.jpg", 
              alt: "AffiliateHub team" 
            },
            { type: "text", content: "to maximize their earnings" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "#features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardFifteen
          title="Everything You Need to Succeed"
          description="Our comprehensive platform provides all the tools and features you need to build, manage, and scale your affiliate marketing business."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",
              title: "Real-Time Analytics",
              description: "Track every click, conversion, and commission in real-time with our advanced analytics dashboard.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983292413-wq7r64pm.jpg",
              imageAlt: "Analytics dashboard interface"
            },
            {
              id: "2",
              title: "Marketing Automation",
              description: "Automate your campaigns and reach your audience at scale with our intelligent marketing tools.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
              imageAlt: "Marketing automation workflow"
            },
            {
              id: "3",
              title: "Commission Tracking",
              description: "Transparent commission tracking with instant payouts and detailed payment history.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983293269-qul9w8a9.jpg",
              imageAlt: "Commission tracking system"
            },
            {
              id: "4",
              title: "24/7 Support",
              description: "Dedicated support team available round the clock to help you succeed.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766983294082-ngjm8l0d.jpg",
              imageAlt: "Customer support team"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Success Stories from Our Affiliates"
          description="See how our platform has helped thousands of marketers grow their income and build sustainable businesses."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Digital Marketer",
              company: "Growth Marketing Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
              imageAlt: "Sarah Mitchell portrait"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Marketing Manager",
              company: "Tech Solutions Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
              imageAlt: "James Chen portrait"
            },
            {
              id: "3",
              name: "Emma Johnson",
              role: "Affiliate Director",
              company: "Online Ventures",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg",
              imageAlt: "Emma Johnson portrait"
            },
            {
              id: "4",
              name: "Michael Rodriguez",
              role: "Independent Affiliate",
              company: "Digital Entrepreneurs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
              imageAlt: "Michael Rodriguez portrait"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions About Affiliate Marketing"
          description="Find answers to frequently asked questions about our platform and affiliate program."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg"
          imageAlt="Customer support team helping affiliates"
          mediaPosition="left"
          faqs={[
            {
              id: "1",
              title: "How much can I earn as an affiliate?",
              content: "Earnings depend on your marketing efforts and the products you promote. Our top affiliates earn $5,000+ per month. We offer competitive commission rates ranging from 15% to 40% depending on the product tier."
            },
            {
              id: "2",
              title: "How often do I get paid?",
              content: "We offer flexible payment schedules. Choose weekly, bi-weekly, or monthly payouts. Payments are processed automatically to your preferred payment method with no hidden fees."
            },
            {
              id: "3",
              title: "What marketing materials are provided?",
              content: "We provide banners, landing pages, email templates, social media graphics, and video assets. All materials are professionally designed and ready to use."
            },
            {
              id: "4",
              title: "Do I need experience to get started?",
              content: "No experience necessary! We provide training, resources, and dedicated support to help you succeed, whether you're a seasoned marketer or just starting out."
            },
            {
              id: "5",
              title: "What's your cookie duration?",
              content: "We offer a 45-day cookie window, giving you plenty of time to convert your referred customers. This is one of the longest in the industry."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Start Earning?"
          ctaDescription="Join thousands of successful affiliates. Book a call with our team to discuss your affiliate marketing goals."
          ctaButton={{
            text: "Book a Free Call",
            href: "contact"
          }}
          ctaIcon={Phone}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          faqs={[
            {
              id: "1",
              title: "What's the application process?",
              content: "Simply fill out our affiliate application form. We review applications within 24 hours. Most qualified marketers are approved immediately."
            },
            {
              id: "2",
              title: "Are there any fees to join?",
              content: "Absolutely not! Joining our affiliate program is completely free. There are no setup fees, monthly fees, or hidden charges."
            },
            {
              id: "3",
              title: "Can I promote multiple products?",
              content: "Yes! We encourage our affiliates to promote multiple products from our catalog. This diversifies your income streams and maximizes earning potential."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="AffiliateHub"
          description="Empower your affiliate marketing business with tools designed for success. Join our community of top earners today."
          columns={[
            {
              title: "Platform",
              items: [
                { label: "Dashboard", href: "#" },
                { label: "Analytics", href: "#" },
                { label: "Resources", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
          ]}
          copyrightText="© 2025 AffiliateHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}