"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Award, Book, BookOpen, GraduationCap, HelpCircle, Laptop, Lightbulb, LineChart, MessageCircle, Sparkles, TrendingUp, User, UserCheck, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="solid"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Courses",
          id: "#products",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQs",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/3d-rendered-blue-menu-icon-within-circle_187299-47754.jpg"
      logoAlt="EduSpark App Logo"
      brandName="EduSpark App"
      button={{
        text: "Sign Up",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      imagePosition="right"
      title="Unlock Your Learning Potential"
      description="Interactive courses, expert instructors, and a vibrant community to help you master new skills and achieve your goals faster."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@sarahj_learns",
          testimonial: "EduSpark transformed my career! The courses are engaging and the instructors are truly experts.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-university-library_23-2148844669.jpg",
          imageAlt: "Sarah J.",
        },
        {
          name: "Michael C.",
          handle: "@mikec_dev",
          testimonial: "I finally understood complex topics with EduSpark's clear explanations. Highly recommend!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-hispanic-man-wearing-casual-sweater-glasses-looking-side-relax-profile-pose-with-natural-face-with-confident-smile_839833-28023.jpg",
          imageAlt: "Michael C.",
        },
        {
          name: "Emily R.",
          handle: "@emilyr_design",
          testimonial: "The community support is amazing. I never felt alone on my learning journey.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-with-headphones-city-terrace-with-laptop_23-2148573056.jpg",
          imageAlt: "Emily R.",
        },
        {
          name: "David L.",
          handle: "@davidl_data",
          testimonial: "Flexibility and quality combined. EduSpark is the best platform for busy professionals.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-woman-talking-video-chat-with-laptop-sitting-bench-having-online-conference_1258-199099.jpg",
          imageAlt: "David L.",
        },
        {
          name: "Jessica T.",
          handle: "@jess_tech",
          testimonial: "The interactive labs and practical projects made learning so much more effective. Gained real skills!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-curly-hair_273609-12029.jpg",
          imageAlt: "Jessica T.",
        },
      ]}
      testimonialRotationInterval={5000}
      tag="Your Learning Journey Starts Here"
      tagIcon={Zap}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg",
          alt: "Learner Avatar 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-businesswomen-working-her-office_1301-6893.jpg",
          alt: "Learner Avatar 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/thoughtful-young-pretty-female-student-holding-book-note-pad-touching-face_141793-31522.jpg",
          alt: "Learner Avatar 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/virtual-classroom-study-space_23-2149178651.jpg",
          alt: "Learner Avatar 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-female-t-shirt-jacket-looking-camera-looking-cheerful-front-view_176474-85411.jpg",
          alt: "Happy learner avatar",
        },
      ]}
      avatarText="Join 50,000+ happy learners!"
      imageSrc="http://img.b2bpic.net/free-photo/young-man-with-laptop-headphones_23-2148205659.jpg"
      imageAlt="Student engaging with educational app on laptop"
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text-icon",
          text: "Skill Development",
          icon: GraduationCap,
        },
        {
          type: "text-icon",
          text: "Expert Instructors",
          icon: Users,
        },
        {
          type: "text-icon",
          text: "Interactive Learning",
          icon: Lightbulb,
        },
        {
          type: "text-icon",
          text: "Global Community",
          icon: MessageCircle,
        },
        {
          type: "text-icon",
          text: "Career Growth",
          icon: TrendingUp,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="About EduSpark: Empowering Minds Globally"
      description="EduSpark is dedicated to making high-quality education accessible and engaging for everyone, everywhere. Our platform combines cutting-edge technology with expert-led content to provide a seamless and effective learning experience, fostering a global community of curious minds."
      tag="Our Mission"
      tagIcon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-queer-students-outdoors_23-2150405187.jpg"
      imageAlt="Group of students collaborating around a laptop"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: BookOpen,
          title: "Comprehensive Course Catalog",
          description: "Access thousands of courses across diverse subjects, from STEM to arts, tailored for all skill levels.",
        },
        {
          icon: UserCheck,
          title: "Expert-Led Instruction",
          description: "Learn from industry leaders and passionate educators with real-world experience and deep knowledge.",
        },
        {
          icon: Laptop,
          title: "Interactive Learning Experience",
          description: "Engage with hands-on projects, quizzes, and live sessions that make learning fun and effective.",
        },
        {
          icon: Users,
          title: "Supportive Global Community",
          description: "Connect with fellow learners, share insights, and collaborate on projects in a thriving online environment.",
        },
      ]}
      title="Key Features of Our Learning Platform"
      description="Experience a new way of learning with our innovative features designed to boost your knowledge retention and skill development, empowering you to reach your full potential."
      tag="Innovation in Education"
      tagIcon={Lightbulb}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      carouselMode="buttons"
      products={[
        {
          id: "course-1",
          name: "Full-Stack Web Development",
          price: "$299",
          imageSrc: "http://img.b2bpic.net/free-photo/colorful-website-hosting-concept_23-2149525687.jpg",
          imageAlt: "Full-Stack Web Development Course",
        },
        {
          id: "course-2",
          name: "UI/UX Design Masterclass",
          price: "$199",
          imageSrc: "http://img.b2bpic.net/free-photo/cropped-front-end-developers-designing-mobile-application-interface_1098-20471.jpg",
          imageAlt: "UI/UX Design Masterclass Course",
        },
        {
          id: "course-3",
          name: "Data Science with Python",
          price: "$249",
          imageSrc: "http://img.b2bpic.net/free-photo/bussines-woman-with-papers_1150-178.jpg",
          imageAlt: "Data Science with Python Course",
        },
        {
          id: "course-4",
          name: "Advanced Digital Marketing",
          price: "$179",
          imageSrc: "http://img.b2bpic.net/free-photo/mother-helping-son-with-homework_23-2148622804.jpg",
          imageAlt: "Advanced Digital Marketing Course",
        },
        {
          id: "course-5",
          name: "Creative Writing Fundamentals",
          price: "$129",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-man-looking-camera-photos_23-2148532473.jpg",
          imageAlt: "Creative Writing Fundamentals Course",
        },
        {
          id: "course-6",
          name: "Mobile App Development (iOS/Android)",
          price: "$289",
          imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-drawing-sketchbook_23-2147770069.jpg",
          imageAlt: "Mobile App Development Course",
        },
      ]}
      title="Explore Our Popular Courses"
      description="Dive into a diverse range of subjects, from coding and design to business and arts, all taught by industry professionals dedicated to your success."
      tag="Top Rated Programs"
      tagIcon={Award}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      carouselMode="buttons"
      testimonials={[
        {
          id: "1",
          name: "Olivia Smith",
          role: "Software Engineer",
          testimonial: "EduSpark helped me land my dream job. The curriculum is incredibly relevant and the projects prepared me for real-world challenges.",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-motivation-business-notes-with-pen-dark-background-business-marketing-work-success-job-strategy-teamwork-office-leadership_179666-18247.jpg",
          imageAlt: "Olivia Smith",
        },
        {
          id: "2",
          name: "Daniel Kim",
          role: "Marketing Specialist",
          testimonial: "The digital marketing course transformed my understanding of online campaigns. My skills are now cutting-edge thanks to EduSpark.",
          imageSrc: "http://img.b2bpic.net/free-photo/picture-man-blackboard-with-crown-text-successful_176420-2919.jpg",
          imageAlt: "Daniel Kim",
        },
        {
          id: "3",
          name: "Sophia Rodriguez",
          role: "UI/UX Designer",
          testimonial: "As a designer, continuous learning is key. EduSpark's masterclasses are inspiring and packed with actionable insights.",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-betrayal-concept_23-2149369240.jpg",
          imageAlt: "Sophia Rodriguez",
        },
        {
          id: "4",
          name: "Noah Brown",
          role: "Data Analyst",
          testimonial: "The data science program was challenging but incredibly rewarding. I now feel confident tackling complex datasets.",
          imageSrc: "http://img.b2bpic.net/free-photo/celebration-labour-day-with-monochrome-view-woman-working-her-job_23-2151295976.jpg",
          imageAlt: "Noah Brown",
        },
        {
          id: "5",
          name: "Isabella Garcia",
          role: "Content Creator",
          testimonial: "EduSpark unlocked my creative writing potential. The feedback from instructors was invaluable.",
          imageSrc: "http://img.b2bpic.net/free-photo/funny-smiling-woman-with-ringlets-wears-glasses-blue-jacket-poses-pink_291650-1102.jpg",
          imageAlt: "Isabella Garcia",
        },
      ]}
      title="What Our Learners Are Saying"
      description="Hear directly from students who have transformed their careers, personal growth, and skill sets with the support of EduSpark."
      tag="Success Stories"
      tagIcon={MessageCircle}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",
          value: "50K+",
          title: "Active Learners",
          description: "Our vibrant community is growing daily, fostering collaboration and shared knowledge.",
          icon: Users,
        },
        {
          id: "2",
          value: "200+",
          title: "Expert Instructors",
          description: "Learn from the best in the field, with real-world experience and a passion for teaching.",
          icon: User,
        },
        {
          id: "3",
          value: "1000+",
          title: "Courses & Programs",
          description: "A continuously expanding library of high-quality content across all disciplines.",
          icon: Book,
        },
      ]}
      title="Our Impact in Numbers"
      description="We are proud to be a leading platform empowering thousands of learners worldwide to achieve their educational and career milestones."
      tag="Making a Difference"
      tagIcon={LineChart}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",
          title: "How do I enroll in a course?",
          content: "Enrolling is simple! Browse our course catalog, select your desired course, and follow the prompts to register and make payment. You'll get instant access to your learning materials.",
        },
        {
          id: "faq-2",
          title: "Are there any prerequisites for courses?",
          content: "Most courses are designed for beginners, but some advanced programs may have recommended prerequisites. These are clearly listed in the course description.",
        },
        {
          id: "faq-3",
          title: "What if I need help with a course?",
          content: "Our platform offers various support options, including Q&A forums, direct messaging with instructors, and a dedicated support team available to assist you.",
        },
        {
          id: "faq-4",
          title: "Can I access courses on mobile devices?",
          content: "Yes, EduSpark is fully optimized for mobile. You can access all your courses and learning materials on your smartphone or tablet through our responsive web app.",
        },
        {
          id: "faq-5",
          title: "Do I get a certificate upon completion?",
          content: "Many of our courses offer a certificate of completion upon successful mastery of the course material and final assessment. Check individual course details for specifics.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our platform, courses, and the overall learning experience at EduSpark."
      tag="Quick Answers"
      tagIcon={HelpCircle}
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in Touch"
      title="Ready to Start Learning?"
      description="Join thousands of learners and unlock your potential today. Have questions? Reach out to our support team, we're here to help you every step of the way."
      inputPlaceholder="Your email address"
      buttonText="Join EduSpark"
      termsText="By clicking Join EduSpark you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-digital-particles-design_1048-15444.jpg"
      imageAlt="Abstract tech background for footer"
      logoText="EduSpark"
      columns={[
        {
          title: "Courses",
          items: [
            {
              label: "Web Development",
              href: "#products",
            },
            {
              label: "Design",
              href: "#products",
            },
            {
              label: "Data Science",
              href: "#products",
            },
            {
              label: "Marketing",
              href: "#products",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Team",
              href: "#",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Help Center",
              href: "#",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 EduSpark App. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
