"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Zap } from 'lucide-react';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Love Code"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Courses", id: "/courses" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",
            href: "/contact"
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Our Comprehensive Courses"
          description="Choose from our selection of industry-relevant courses designed to prepare you for a successful tech career"
          tag="Featured Programs"
          tagIcon={Zap}
          features={[
            {
              title: "Web Development",
              description: "Master HTML, CSS, JavaScript, React, and full-stack development. Build responsive, modern websites and web applications.",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html-text_23-2150040420.jpg",
              imageAlt: "Web development course",
              button: { text: "Learn More", href: "/contact" }
            },
            {
              title: "Mobile App Development",
              description: "Learn iOS and Android development. Create powerful native apps that reach millions of users worldwide.",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",
              imageAlt: "Mobile app development",
              button: { text: "Learn More", href: "/contact" }
            },
            {
              title: "Python & Backend",
              description: "Discover server-side programming with Python, databases, APIs, and cloud infrastructure. Build scalable applications.",
              imageSrc: "https://img.b2bpic.net/free-photo/person-front-computer-working-html_23-2150040416.jpg",
              imageAlt: "Python programming course",
              button: { text: "Learn More", href: "/contact" }
            },
            {
              title: "Game Development",
              description: "Create immersive 3D games using Unity and Unreal Engine. Learn game mechanics, physics, and interactive storytelling.",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010130.jpg",
              imageAlt: "Game development course",
              button: { text: "Learn More", href: "/contact" }
            }
          ]}
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal logoText="Love Code" />
    </ThemeProvider>
  );
}