"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, GraduationCap } from 'lucide-react';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Courses", id: "courses" },
            { name: "About", id: "about" },
            { name: "Instructors", id: "instructors" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Enroll Now", href: "contact" }}
          brandName="Engineer"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Comprehensive Learning Paths"
          description="Our structured curriculum covers everything from fundamentals to advanced concepts"
          tag="Core Features"
          tagIcon={Sparkles}
          features={[
            {
              id: "1",              title: "Web Development",              description: "Master frontend and backend technologies including React, Node.js, and modern frameworks",              tag: "Full Stack",              imageSrc: "https://img.b2bpic.net/free-photo/html-css-collage-concept_23-2150061960.jpg",              imageAlt: "web development coding HTML CSS JavaScript",              buttons: [
                { text: "Learn More", href: "courses" }
              ]
            },
            {
              id: "2",              title: "Mobile Application Development",              description: "Build native and cross-platform applications for iOS and Android with industry best practices",              tag: "Mobile First",              imageSrc: "https://img.b2bpic.net/free-photo/people-working-with-ai-operated-devices_23-2151922479.jpg",              imageAlt: "mobile app iOS Android development design",              buttons: [
                { text: "Learn More", href: "courses" }
              ]
            },
            {
              id: "3",              title: "Data Science & AI",              description: "Explore machine learning, data analytics, and artificial intelligence with hands-on projects",              tag: "Advanced",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010127.jpg",              imageAlt: "data science analytics Python machine learning AI",              buttons: [
                { text: "Learn More", href: "courses" }
              ]
            },
            {
              id: "4",              title: "Cloud & DevOps",              description: "Learn cloud deployment, containerization, and infrastructure automation on AWS and Azure",              tag: "Cloud",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010129.jpg",              imageAlt: "cloud computing AWS database server infrastructure",              buttons: [
                { text: "Learn More", href: "courses" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardOne
          title="Featured Courses"
          description="Start your journey with our most popular and transformative programs"
          tag="Curriculum"
          tagIcon={GraduationCap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Full Stack Web Development",              price: "6-Week Intensive",              imageSrc: "https://img.b2bpic.net/free-photo/team-database-admins-analyzing-source-code-wall-screen-tv-comparing-errors-using-digital-tablet-busy-server-room-two-cloud-programers-debugging-algorithm-software-innovation-office_482257-43976.jpg",              imageAlt: "Full Stack Web Development Course"
            },
            {
              id: "2",              name: "Mobile App Mastery",              price: "8-Week Program",              imageSrc: "https://img.b2bpic.net/free-photo/turned-gray-laptop-computer_400718-47.jpg",              imageAlt: "Mobile App Development Course"
            },
            {
              id: "3",              name: "Data Science Bootcamp",              price: "10-Week Course",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-collage_23-2149901771.jpg",              imageAlt: "Data Science Bootcamp"
            }
          ]}
        />
      </div>

      <FooterBase
        logoText="Engineer"
        copyrightText="© 2025 Engineer IT School. All rights reserved."
        columns={[
          {
            title: "Programs",            items: [
              { label: "Web Development", href: "courses" },
              { label: "Mobile Development", href: "courses" },
              { label: "Data Science", href: "courses" },
              { label: "Cloud & DevOps", href: "courses" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About", href: "about" },
              { label: "Team", href: "instructors" },
              { label: "Blog", href: "blog" },
              { label: "Careers", href: "careers" }
            ]
          },
          {
            title: "Resources",            items: [
              { label: "FAQ", href: "faq" },
              { label: "Contact Us", href: "contact" },
              { label: "Alumni", href: "alumni" },
              { label: "Support", href: "support" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}
