"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Award, TrendingUp, Heart, Zap, Calendar } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="large"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Courses", id: "features" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="IT Academy"
          bottomLeftText="Education For Everyone"
          bottomRightText="hello@itacademy.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Master Technology. Transform Your Future."
          description="Learn industry-leading skills from expert instructors. Our comprehensive IT courses are designed to prepare you for real-world challenges and career growth."
          background={{ variant: "glowing-orb" }}
          tag="Join 10,000+ Students"
          tagIcon={Sparkles}
          imageSrc="http://img.b2bpic.net/free-photo/row-serious-focused-coworkers-sitting-table-typing-laptops_74855-10363.jpg"
          imageAlt="Students learning technology"
          imagePosition="right"
          buttons={[
            { text: "Explore Courses", href: "features" },
            { text: "Get Started Free", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="We believe everyone deserves access to quality technology education. Our mission is to empower the next generation of tech leaders with practical skills, mentorship, and career opportunities."
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Learn Our Story", href: "https://example.com" },
            { text: "Meet Our Team", href: "https://example.com" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Our Core Courses"
          description="Comprehensive programs designed to build industry-ready skills"
          tag="Industry-Approved Curriculum"
          tagIcon={Award}
          features={[
            {
              id: "01",              title: "Web Development",              description: "Master full-stack web development with modern frameworks, responsive design, and best practices for building scalable applications.",              imageSrc: "http://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg",              imageAlt: "Web development course"
            },
            {
              id: "02",              title: "UI/UX Design",              description: "Learn design principles, user research, and prototyping tools to create beautiful and functional digital experiences.",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",              imageAlt: "UI/UX design course"
            },
            {
              id: "03",              title: "Data Science",              description: "Analyze data, build machine learning models, and create data-driven solutions for real-world business problems.",              imageSrc: "http://img.b2bpic.net/free-photo/business-report-graphs-charts-business-reports-pile-documents-business-concept_1150-2254.jpg",              imageAlt: "Data science course"
            },
            {
              id: "04",              title: "Cloud Architecture",              description: "Master cloud platforms, infrastructure design, and deployment strategies for modern distributed systems.",              imageSrc: "http://img.b2bpic.net/free-photo/upset-data-center-worker-packing-desk-after-being-replaced-by-ai_482257-127245.jpg",              imageAlt: "Cloud architecture course"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="Our impact on student success and career development"
          tag="Proven Results"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", value: "10,000+", description: "Active Students Worldwide" },
            { id: "2", value: "95%", description: "Job Placement Rate" },
            { id: "3", value: "50+", description: "Expert Instructors" },
            { id: "4", value: "$75K", description: "Average Graduate Salary" }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Student Success Stories"
          description="Hear from graduates who transformed their careers"
          tag="Testimonials"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen_dev",              testimonial: "IT Academy completely transformed my career. Within 3 months of completing the web development course, I landed my dream job at a top tech company. The instructors are industry experts and genuinely care about your success.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-happy-young-woman-with-curly-hair-holds-notepad-pen-makes-notes-what-she-observes-around-city-dressed-casual-green-jumper-poses-outdoors-against-blurred-background_273609-56665.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Michael Rodriguez",              handle: "@mrodriguez_design",              testimonial: "The UI/UX design curriculum is incredibly comprehensive. I went from having zero design experience to building a professional portfolio. The mentorship I received was invaluable in landing my first design role.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Michael Rodriguez"
            },
            {
              id: "3",              name: "Emma Thompson",              handle: "@emmathompson_data",              testimonial: "The Data Science course exceeded my expectations. The hands-on projects and real-world case studies prepared me perfectly for my new role as a data analyst. Highly recommended!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg",              imageAlt: "Emma Thompson"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkim_cloud",              testimonial: "Outstanding learning experience. The cloud architecture course is well-structured with excellent practical labs. I passed my AWS certification on the first try thanks to this program.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-holding-book_23-2148396358.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Martinez",              handle: "@jmartinez_fullstack",              testimonial: "Best investment in my education. The community support, career services, and job placement assistance are top-notch. I'm now working as a senior full-stack developer.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "6",              name: "Alex Johnson",              handle: "@alexjohnson_tech",              testimonial: "The instructors are passionate about teaching and the curriculum stays up-to-date with industry standards. This course accelerated my transition into tech by months. Worth every penny.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg",              imageAlt: "Alex Johnson"
            }
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your learning goals and budget"
          tag="Flexible Plans"
          tagIcon={Zap}
          plans={[
            {
              id: "basic",              badge: "Starter",              price: "$99/mo",              subtitle: "Perfect for beginners exploring tech",              features: [
                "Access to 3 courses",                "Community support",                "Lifetime access to course materials",                "Basic progress tracking",                "Certificate of completion"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$199/mo",              subtitle: "Best for career changers",              features: [
                "Access to all courses",                "1-on-1 mentorship sessions",                "Priority support",                "Career coaching",                "Job placement assistance",                "Advanced projects"
              ]
            },
            {
              id: "enterprise",              badge: "Premium",              price: "$399/mo",              subtitle: "For serious developers",              features: [
                "Everything in Professional",                "Unlimited mentorship",                "Portfolio review sessions",                "Networking events access",                "Exclusive job board",                "Custom learning path"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about IT Academy and our courses"
          faqs={[
            {
              id: "1",              title: "What programming languages do you teach?",              content: "We teach Python, JavaScript, TypeScript, Java, and modern frameworks like React, Vue, and Angular. Our curriculum covers both frontend and backend development with industry best practices."
            },
            {
              id: "2",              title: "Do I need prior coding experience?",              content: "No! Our beginner courses start from the fundamentals. However, we also offer advanced courses for experienced developers. Choose the path that matches your current skill level."
            },
            {
              id: "3",              title: "How long does it take to complete a course?",              content: "Most courses are self-paced and take 8-12 weeks to complete if you dedicate 15-20 hours per week. You have lifetime access to course materials."
            },
            {
              id: "4",              title: "Are there job placement guarantees?",              content: "We offer comprehensive job placement assistance including resume reviews, interview prep, and access to our partner companies. Our Professional and Premium plans include dedicated career coaching."
            },
            {
              id: "5",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, and offer monthly payment plans. We also provide financial assistance options for eligible students."
            },
            {
              id: "6",              title: "Can I access courses on mobile?",              content: "Yes! Our platform is fully responsive and optimized for mobile devices. You can learn on your smartphone, tablet, or computer anytime, anywhere."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Start Learning?"
          ctaDescription="Schedule a free consultation with our advisors to find the perfect course for your goals."
          ctaButton={{
            text: "Book Free Consultation",            href: "https://example.com/booking"
          }}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",              title: "How do I enroll in a course?",              content: "Simply click 'Enroll Now' on any course page, complete your profile, and choose your payment plan. You'll have instant access to course materials after enrollment."
            },
            {
              id: "2",              title: "What if I'm not satisfied with the course?",              content: "We offer a 30-day money-back guarantee. If you're not satisfied, contact our support team for a full refund, no questions asked."
            },
            {
              id: "3",              title: "Do you offer scholarships or financial aid?",              content: "Yes, we offer merit-based scholarships and financial assistance for eligible students. Fill out our application form to learn about your options."
            },
            {
              id: "4",              title: "Is there a certificate upon completion?",              content: "Absolutely. You'll receive a recognized IT Academy certificate that you can showcase on LinkedIn and to potential employers."
            }
          ]}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="IT Academy"
          columns={[
            {
              items: [
                { label: "Courses", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Support", href: "https://support.example.com" },
                { label: "FAQ", href: "faq" }
              ]
            },
            {
              items: [
                { label: "Blog", href: "https://blog.example.com" },
                { label: "Community", href: "https://community.example.com" },
                { label: "Resources", href: "https://resources.example.com" }
              ]
            },
            {
              items: [
                { label: "Privacy", href: "https://example.com/privacy" },
                { label: "Terms", href: "https://example.com/terms" },
                { label: "Accessibility", href: "https://example.com/accessibility" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}