"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { BookOpen } from 'lucide-react';

export default function CoursesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Learn", id: "/" },
            { name: "Courses", id: "/courses" },
            { name: "Community", id: "/" },
            { name: "FAQ", id: "/" },
            { name: "Login", id: "/login" },
          ]}
          button={{
            text: "Start Learning",            href: "/signup"
          }}
          brandName="FinHub"
        />
      </div>

      <div className="pt-20 pb-10">
        <div id="courses" data-section="courses" className="px-4 max-w-7xl mx-auto">
          <h1 className="text-4xl font-bold text-foreground mb-4">All Courses</h1>
          <p className="text-lg text-foreground opacity-75 mb-10">
            Explore our complete library of financial education courses
          </p>
        </div>
      </div>

      <div id="learning" data-section="learning">
        <ProductCardOne
          title="Browse All Courses"
          description="Find the perfect course to advance your financial knowledge"
          tag="Complete Library"
          tagIcon={BookOpen}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "Beginner's Guide to Stocks",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=2",              imageAlt: "Beginner stock market course"
            },
            {
              id: "2",              name: "Crypto 101 Course",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png",              imageAlt: "Cryptocurrency fundamentals"
            },
            {
              id: "3",              name: "Advanced Portfolio Management",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png",              imageAlt: "Portfolio management strategies"
            },
            {
              id: "4",              name: "Financial Independence Path",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Path to financial independence"
            },
            {
              id: "5",              name: "Real Estate Investment Basics",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png",              imageAlt: "Real estate investment course"
            },
            {
              id: "6",              name: "Tax Planning Essentials",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png",              imageAlt: "Tax planning course"
            },
            {
              id: "7",              name: "Retirement Planning Guide",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png",              imageAlt: "Retirement planning course"
            },
            {
              id: "8",              name: "Business Finance Fundamentals",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Business finance course"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: "Back to Home", href: "/" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
          imageAlt="FinHub gradient background"
          logoText="FinHub"
          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
          columns={[
            {
              title: "Learning",              items: [
                { label: "Courses", href: "/courses" },
                { label: "Lessons", href: "/" },
                { label: "Challenges", href: "#" },
                { label: "Resources", href: "#" },
              ],
            },
            {
              title: "Community",              items: [
                { label: "Forum", href: "#" },
                { label: "Discord", href: "#" },
                { label: "Leaderboard", href: "#" },
                { label: "Events", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "#" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
