"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>
  );
}