"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { BookOpen, Sparkles, Star } from 'lucide-react';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="medium"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="JCode"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Enroll Now", href: "/contact" }}
        />
      </div>

      <div id="courses-hero" data-section="courses-hero">
        <HeroOverlay 
          title="Explore Our Courses"
          description="Choose the perfect learning path for your IT career. From beginner to advanced, we have programs for everyone."
          tag="Comprehensive Tech Education"
          tagIcon={BookOpen}
          imageSrc="https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg"
          imageAlt="JCode courses showcase"
          textPosition="center"
          showBlur={true}
          showDimOverlay={true}
          buttons={[{ text: "Browse Courses", href: "#courses-grid" }]}
        />
      </div>

      <div id="courses-grid" data-section="courses-grid">
        <ProductCardOne 
          title="Featured Courses"
          description="Our most popular and comprehensive IT training programs"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",
              name: "Full Stack Web Development",
              price: "Starting $999",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html_23-2150038852.jpg",
              imageAlt: "Full Stack Web Development course"
            },
            {
              id: "2",
              name: "Data Science & Analytics",
              price: "Starting $1,199",
              imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations-his-laptop_23-2148820170.jpg",
              imageAlt: "Data Science course"
            },
            {
              id: "3",
              name: "Mobile App Development",
              price: "Starting $899",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",
              imageAlt: "Mobile App Development course"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne 
          title="Flexible Learning Plans"
          description="Choose a plan that fits your schedule and budget. All plans include lifetime access and community support."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "1",
              badge: "Starter",
              price: "$999",
              subtitle: "Perfect for beginners",
              features: [
                "12-week self-paced curriculum",
                "Access to course materials",
                "Email support",
                "Certificate of completion"
              ],
              badgeIcon: BookOpen
            },
            {
              id: "2",
              badge: "Professional",
              price: "$1,899",
              subtitle: "Most popular choice",
              features: [
                "12-week instructor-led program",
                "Live coding sessions",
                "Weekly mentorship",
                "Job placement assistance",
                "Career coaching"
              ],
              badgeIcon: Sparkles
            },
            {
              id: "3",
              badge: "Enterprise",
              price: "$2,999",
              subtitle: "Complete bootcamp experience",
              features: [
                "16-week immersive bootcamp",
                "Daily instructor sessions",
                "1-on-1 mentorship",
                "Real projects with industry partners",
                "Guaranteed job interview",
                "Lifetime career support"
              ],
              badgeIcon: Star
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia 
          imageSrc="https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010129.jpg"
          imageAlt="JCode IT School footer background"
          logoText="JCode"
          copyrightText="© 2024 JCode IT School. All rights reserved."
          columns={[
            {
              title: "Courses",
              items: [
                { label: "Web Development", href: "/courses" },
                { label: "Data Science", href: "/courses" },
                { label: "Mobile Development", href: "/courses" },
                { label: "DevOps", href: "/courses" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Support", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "Twitter", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}