"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Zap, Crown, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Rakei"
          navItems={[
            { name: "Courses", id: "courses" },
            { name: "E-Files", id: "efiles" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Started",            href: "pricing"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Master the Art of Motion Graphics"
          description="Learn industry-standard techniques from professional motion designers. Access exclusive courses and premium e-files to elevate your creative portfolio."
          background={{ variant: "sparkles-gradient" }}
          tag="Motion Design Mastery"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-vector/organic-flat-motiongraphics-landing-page_52683-60293.jpg"
          imageAlt="Motion graphics and animation design"
          buttons={[
            { text: "Explore Courses", href: "courses" },
            { text: "Browse E-Files", href: "efiles" }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardOne
          title="Featured Courses"
          description="Master motion graphics with our comprehensive, industry-led masterclasses. Each course includes video tutorials, project files, and lifetime access."
          products={[
            {
              id: "1",              name: "Motion Graphics Fundamentals",              price: "$149",              imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148903317.jpg",              imageAlt: "Motion Graphics Fundamentals course"
            },
            {
              id: "2",              name: "Advanced Animation Techniques",              price: "$199",              imageSrc: "https://img.b2bpic.net/free-vector/online-education_52683-6967.jpg",              imageAlt: "Advanced Animation Techniques course"
            },
            {
              id: "3",              name: "Professional VFX & Compositing",              price: "$249",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-business-workshop-youtube-thumbnail_23-2149405269.jpg",              imageAlt: "Professional VFX & Compositing course"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "View All Courses", href: "pricing" }
          ]}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardTwentyFour
          title="Why Choose Rakei"
          description="Industry expertise meets modern education. Transform your skills with resources designed for creators."
          features={[
            {
              id: "1",              title: "Expert-Led Training",              author: "By Industry Professionals",              description: "Learn from motion designers with 10+ years of experience creating stunning visuals for major brands and studios.",              tags: ["Education", "Professional"],
              imageSrc: "https://img.b2bpic.net/free-vector/organic-flat-motiongraphics-landing-page_52683-60293.jpg"
            },
            {
              id: "2",              title: "Lifetime Access",              author: "One-Time Investment",              description: "Purchase once and access course materials forever. Receive updates and new content at no additional cost.",              tags: ["Premium", "Lifetime"],
              imageSrc: "https://img.b2bpic.net/free-vector/online-education_52683-6967.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="efiles" data-section="efiles">
        <ProductCardOne
          title="Premium E-Files Library"
          description="Curated collection of motion graphics assets, templates, and project files ready to use in your creative projects."
          products={[
            {
              id: "1",              name: "Motion Graphics Templates Pack",              price: "$79",              imageSrc: "https://img.b2bpic.net/free-photo/travel-still-life-collection_23-2148837284.jpg"
            },
            {
              id: "2",              name: "VFX Elements Bundle",              price: "$99",              imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148903317.jpg"
            },
            {
              id: "3",              name: "Typography Animation Assets",              price: "$59",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-business-workshop-youtube-thumbnail_23-2149405269.jpg"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Success Stories"
          description="See how creators worldwide have transformed their skills and landed dream projects."
          testimonials={[
            {
              id: "1",              name: "Alex Rivera",              handle: "@alex_creates",              testimonial: "Rakei's courses completely leveled up my motion graphics skills. I landed a position at a top creative studio within 3 months!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "Jordan Lee",              handle: "@jordandesigns",              testimonial: "The e-files library is incredible. I've saved countless hours using these professional assets in my client projects.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg"
            },
            {
              id: "3",              name: "Maya Patel",              handle: "@maya.motion",              testimonial: "Best investment I've made in my creative career. The expertise and resources are worth every penny.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
            },
            {
              id: "4",              name: "Chris Thompson",              handle: "@cthompson.visual",              testimonial: "Rakei taught me techniques I couldn't find anywhere else. Highly recommended for serious motion designers.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg"
            },
            {
              id: "5",              name: "Sofia Martinez",              handle: "@sofia.fx",              testimonial: "The lifetime access and community support make this the best choice for ongoing professional development.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg"
            },
            {
              id: "6",              name: "David Kim",              handle: "@davidkim.studio",              testimonial: "Professional quality content at an accessible price. Rakei is reshaping motion graphics education.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Transparent Pricing"
          description="Choose the plan that fits your creative journey. All plans include lifetime access and regular updates."
          plans={[
            {
              id: "1",              badge: "Starter",              badgeIcon: Zap,
              price: "$149",              subtitle: "Perfect for beginners",              features: [
                "Motion Graphics Fundamentals course",                "Access to 50+ video tutorials",                "Basic project files",                "Community forum access",                "Lifetime access"
              ]
            },
            {
              id: "2",              badge: "Professional",              badgeIcon: Sparkles,
              price: "$449",              subtitle: "Most popular choice",              features: [
                "All Starter features",                "Advanced Animation Techniques",                "Professional VFX & Compositing course",                "150+ premium e-files",                "Priority support",                "Quarterly new content"
              ]
            },
            {
              id: "3",              badge: "Master",              badgeIcon: Crown,
              price: "$799",              subtitle: "For serious professionals",              features: [
                "All Professional features",                "One-on-one mentorship sessions",                "500+ complete asset library",                "Commercial license for e-files",                "Direct creator access",                "Custom project consultations"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Rakei courses and e-files."
          faqs={[
            {
              id: "1",              title: "Do I need experience to start?",              content: "No! Our Fundamentals course is designed for complete beginners. We start from the basics and build up to professional techniques. All you need is curiosity and dedication."
            },
            {
              id: "2",              title: "Can I use e-files in commercial projects?",              content: "Standard licenses allow personal and educational use. Master plan subscribers receive commercial licenses for all e-files, perfect for freelance and studio work."
            },
            {
              id: "3",              title: "Is there a refund policy?",              content: "We offer a 30-day money-back guarantee on all courses. If you're not satisfied, simply contact us and we'll process a full refund."
            },
            {
              id: "4",              title: "How long do I have access?",              content: "Forever! Lifetime access means you can revisit courses, download e-files, and receive new content updates indefinitely. It's a one-time investment in your skills."
            },
            {
              id: "5",              title: "Will the content be updated?",              content: "Yes! We continuously add new tutorials, techniques, and e-files. Professional and Master plan subscribers get quarterly content updates at no additional cost."
            },
            {
              id: "6",              title: "What software do I need?",              content: "Our courses focus on Adobe Creative Suite (After Effects, Premiere Pro). While we demonstrate these, the principles apply to any motion graphics software you prefer."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated with Rakei"
          description="Get exclusive tips, behind-the-scenes content, and early access to new courses and premium e-files. Join our creative community."
          inputPlaceholder="Your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, just quality motion graphics insights."
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Rakei"
          columns={[
            {
              title: "Courses",              items: [
                { label: "Motion Graphics 101", href: "#courses" },
                { label: "Advanced Techniques", href: "#courses" },
                { label: "VFX Masterclass", href: "#courses" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "E-Files Library", href: "#efiles" },
                { label: "Community", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" },
                { label: "Help Center", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Rakei", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Rakei. All rights reserved. Crafted for motion creators."
        />
      </div>
    </ThemeProvider>
  );
}