"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { CheckCircle, Users, TrendingUp, Award } from "lucide-react";
import Link from "next/link";

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="TechAcademy"
          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="products" data-section="products">
        <ProductCardTwo
          products={[
            {
              id: "1",
              brand: "Beginner Track",
              name: "Web Development Fundamentals",
              price: "$299",
              rating: 5,
              reviewCount: "1.2k",
              imageSrc: "https://img.b2bpic.net/free-vector/realistic-responsive-website-design-collection_23-2149500090.jpg",
              imageAlt: "Web Development Course"
            },
            {
              id: "2",
              brand: "Intermediate Track",
              name: "Python Programming Mastery",
              price: "$399",
              rating: 5,
              reviewCount: "980",
              imageSrc: "https://img.b2bpic.net/free-vector/laptop-with-tablet-smartphone-website-information_24877-53528.jpg",
              imageAlt: "Python Programming Course"
            },
            {
              id: "3",
              brand: "Advanced Track",
              name: "Data Science & Machine Learning",
              price: "$599",
              rating: 5,
              reviewCount: "756",
              imageSrc: "https://img.b2bpic.net/free-photo/person-working-html-computer_23-2150038849.jpg",
              imageAlt: "Data Science Course"
            },
            {
              id: "4",
              brand: "Professional Track",
              name: "Cybersecurity Essentials",
              price: "$499",
              rating: 5,
              reviewCount: "543",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",
              imageAlt: "Cybersecurity Course"
            },
            {
              id: "5",
              brand: "Expert Track",
              name: "Full Stack Development",
              price: "$799",
              rating: 5,
              reviewCount: "432",
              imageSrc: "https://img.b2bpic.net/free-vector/realistic-responsive-website-design-collection_23-2149500090.jpg",
              imageAlt: "Full Stack Course"
            },
            {
              id: "6",
              brand: "Professional Track",
              name: "DevOps Engineering",
              price: "$699",
              rating: 5,
              reviewCount: "298",
              imageSrc: "https://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg",
              imageAlt: "DevOps Course"
            }
          ]}
          title="All Courses"
          description="Comprehensive collection of technology courses designed for career advancement"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",
              value: "50",
              title: "+",
              description: "Available courses across all tech domains",
              icon: Award
            },
            {
              id: "2",
              value: "500",
              title: "hrs",
              description: "Total learning content available",
              icon: TrendingUp
            },
            {
              id: "3",
              value: "24/7",
              title: "",
              description: "Access to course materials and support",
              icon: Users
            }
          ]}
          title="Course Statistics"
          description: "Everything you need to know about our course offerings"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Start Learning?"
          ctaDescription="Join thousands of students already transforming their tech careers with TechAcademy."
          ctaButton={{
            text: "Enroll Today",
            href: "/contact"
          }}
          ctaIcon={CheckCircle}
          faqs={[
            {
              id: "1",
              title: "How do I choose the right course?",
              content: "Our course advisors can help you select the perfect learning path based on your experience level, career goals, and interests. Schedule a free consultation to get personalized recommendations."
            },
            {
              id: "2",
              title: "Can I switch between courses?",
              content: "Yes! You can request a course change within the first 14 days of enrollment at no additional cost. We want to ensure you're on the right learning path."
            },
            {
              id: "3",
              title: "What if I need more time to complete?",
              content: "All our courses come with lifetime access, so you can learn at your own pace. There are no strict deadlines, and you can revisit materials anytime."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"
          imageAlt="Graduation and success celebration"
          logoText="TechAcademy"
          copyrightText="© 2025 TechAcademy. All rights reserved."
          columns={[
            {
              title: "Courses",
              items: [
                { label: "Web Development", href: "/courses" },
                { label: "Python Programming", href: "/courses" },
                { label: "Data Science", href: "/courses" },
                { label: "Cybersecurity", href: "/courses" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}