"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Code, Layers, Zap, Palette, Smartphone, Eye, BarChart3, Brain, TrendingUp, Shield, Lock, Key, Sparkles } from "lucide-react";

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="TechAcademy"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Enroll Now",            href: "/pricing"
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Our Comprehensive Course Catalog"
          description="Explore our full range of professional IT courses designed by industry experts. Each track includes hands-on projects, real-world applications, and career-focused training."
          tag="Courses"
          features={[
            {
              id: "1",              title: "Full-Stack Development Bootcamp",              description: "Complete web development training covering frontend frameworks (React, Vue), backend technologies (Node.js, Python), databases, and deployment. Build 10+ real-world projects and graduate job-ready.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg" },
              items: [
                { icon: Code, text: "React, Vue, Node.js" },
                { icon: Layers, text: "API Development & Databases" },
                { icon: Zap, text: "10+ Portfolio Projects" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "UI/UX Design Mastery",              description: "Master user experience design from research to prototyping. Learn Figma, Adobe Creative Suite, user research methodologies, and design thinking principles used by top tech companies.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/guy-girl-are-sitting-table-african-girl-computer-science-class-kids-playing-computer-games_1157-42298.jpg" },
              items: [
                { icon: Palette, text: "Figma & Adobe Creative Suite" },
                { icon: Smartphone, text: "Mobile-First Design" },
                { icon: Eye, text: "User Research & Testing" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Advanced Data Science Program",              description: "Deep dive into machine learning, AI, and data analysis. Master Python, R, TensorFlow, and big data technologies. Work with real datasets and build predictive models.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-two-students-looking-tablet_259150-60236.jpg" },
              items: [
                { icon: BarChart3, text: "Python, R, TensorFlow" },
                { icon: Brain, text: "Machine Learning & AI" },
                { icon: TrendingUp, text: "Big Data Analytics" }
              ],
              reverse: false
            },
            {
              id: "4",              title: "Cybersecurity Professional Track",              description: "Comprehensive security training covering ethical hacking, penetration testing, network security, and compliance frameworks. Prepare for industry certifications.",              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-looking-into-tablet-happy-girl_259150-60239.jpg" },
              items: [
                { icon: Shield, text: "Penetration Testing" },
                { icon: Lock, text: "Network Security" },
                { icon: Key, text: "Security Certifications" }
              ],
              reverse: true
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Course Pricing Options"
          description="Flexible payment plans for individual courses or comprehensive learning tracks. All options include lifetime access and ongoing support."
          tag="Pricing"
          plans={[
            {
              id: "individual",              badge: "Single Course",              price: "$299",              subtitle: "Per course - Perfect for specific skills",              buttons: [{ text: "Choose Course", href: "/contact" }],
              features: [
                "Individual course access",                "Course materials & videos",                "Community forum support",                "Course completion certificate",                "6 months instructor support"
              ]
            },
            {
              id: "track",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$799",              subtitle: "Full learning track - Best value",              buttons: [{ text: "Start Track", href: "/contact" }],
              features: [
                "Complete learning track (3-4 courses)",                "Live mentoring sessions",                "Project feedback & reviews",                "Industry portfolio development",                "Job placement assistance",                "Lifetime access to all materials"
              ]
            },
            {
              id: "unlimited",              badge: "All Access",              price: "$1299",              subtitle: "All courses & tracks - Maximum learning",              buttons: [{ text: "Get All Access", href: "/contact" }],
              features: [
                "Access to all current courses",                "Access to all future courses",                "Priority mentoring & support",                "Advanced project collaborations",                "Direct instructor access",                "Career coaching sessions",                "Corporate partnership opportunities"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Course Information FAQ"
          description="Common questions about our course structure, requirements, and learning experience"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What are the course prerequisites?",              content: "Most beginner courses require no prior experience. Intermediate and advanced tracks may require completion of foundational courses or equivalent knowledge. Each course page lists specific prerequisites."
            },
            {
              id: "2",              title: "How are courses structured?",              content: "Courses combine video lectures, hands-on coding exercises, real-world projects, and peer collaboration. Most tracks include 8-12 weeks of content with 10-15 hours per week commitment."
            },
            {
              id: "3",              title: "Can I switch between courses?",              content: "Yes! If you have an active subscription or track enrollment, you can switch between courses within your plan. Individual course purchases are specific to that course only."
            },
            {
              id: "4",              title: "What software/tools do I need?",              content: "Most courses use free, open-source tools. We provide detailed setup guides and may offer cloud-based development environments. Some specialized courses may require specific software."
            },
            {
              id: "5",              title: "Are there live sessions?",              content: "Yes! Track enrollments and higher tiers include weekly live mentoring sessions, Q&A with instructors, and collaborative project reviews."
            },
            {
              id: "6",              title: "How is progress tracked?",              content: "Our learning platform tracks your progress through modules, assignments, and projects. You'll receive regular feedback and can see detailed analytics of your learning journey."
            }
          ]}
        />
      </div>

      <FooterLogoReveal
        logoText="TechAcademy"
        logoLineHeight={1.2}
      />
    </ThemeProvider>
  );
}