"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="TechAcademy"
          navItems={[
            { name: "Courses", id: "/courses" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="courses" data-section="courses">
        <ProductCardThree
          title="Featured Courses"
          description="Explore our most popular and impactful IT courses designed to accelerate your career"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Popular Courses"
          products={[
            {
              id: "1",
              name: "Python Fundamentals",
              price: "$149",
              imageSrc: "https://img.b2bpic.net/free-photo/html-css-collage-concept_23-2150061960.jpg",
              imageAlt: "Python programming course",
              initialQuantity: 1
            },
            {
              id: "2",
              name: "Web Development Bootcamp",
              price: "$299",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-concept_23-2150170131.jpg",
              imageAlt: "Web development course",
              initialQuantity: 1
            },
            {
              id: "3",
              name: "Data Science Mastery",
              price: "$249",
              imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18911.jpg",
              imageAlt: "Data science course",
              initialQuantity: 1
            },
            {
              id: "4",
              name: "Mobile App Development",
              price: "$299",
              imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18942.jpg",
              imageAlt: "Mobile development course",
              initialQuantity: 1
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          title="Course Learning Experience"
          description="Advanced learning methodologies that ensure maximum knowledge retention and skill development"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          showStepNumbers={true}
          features={[
            {
              id: 1,
              title: "Interactive Coding Environment",
              description: "Practice coding in real-time with our integrated development environment, complete with syntax highlighting and instant feedback",
              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18937.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18937.jpg"
              }
            },
            {
              id: 2,
              title: "Project-Based Learning",
              description: "Build real-world applications from day one, creating a portfolio that demonstrates your skills to potential employers",
              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-medium-shot_52683-99761.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/colleagues-working-together-medium-shot_52683-99761.jpg"
              }
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Course Success Metrics"
          description="Evidence of our commitment to student success and career advancement"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="scale-rotate"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",
              value: "100+",
              description: "Courses Available"
            },
            {
              id: "2",
              value: "4.9/5",
              description: "Average Course Rating"
            },
            {
              id: "3",
              value: "85%",
              description: "Complete Within 6 Months"
            },
            {
              id: "4",
              value: "10K+",
              description: "Course Completions"
            }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="https://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010118.jpg"
        imageAlt="Technology and digital transformation"
        logoText="TechAcademy"
        copyrightText="© 2025 TechAcademy. All rights reserved."
        columns={[
          {
            title: "Courses",
            items: [
              { label: "All Courses", href: "/courses" },
              { label: "Web Development", href: "/courses" },
              { label: "Data Science", href: "/courses" },
              { label: "Mobile Apps", href: "/courses" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "#" },
              { label: "Blog", href: "#" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Support",
            items: [
              { label: "Help Center", href: "#" },
              { label: "Community", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Privacy Policy", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}