"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Compass } from "lucide-react";

export default function ProgramsPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "about" },
    { name: "Programs", id: "programs" },
    { name: "Admissions", id: "admissions" },
    { name: "Campus Life", id: "campus" },
    { name: "Contact", id: "contact" },
  ];

  const handleNavClick = (id: string) => {
    const routes: Record<string, string> = {
      home: "/",
      about: "/about",
      programs: "/programs",
      admissions: "/admissions",
      campus: "/campus-life",
      contact: "/contact",
    };
    if (routes[id]) {
      window.location.href = routes[id];
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={navItems}
          brandName="Richfield College"
          button={{
            text: "Apply Now",
            href: "/admissions",
          }}
          animateOnLoad={true}
          className="backdrop-blur-md bg-opacity-80"
          navItemClassName="text-sm font-semibold hover:text-var(--primary-cta)"
          buttonClassName="bg-var(--primary-cta) text-var(--primary-cta-text) px-6 py-2 rounded-soft"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="programs-page-hero" data-section="programs-page-hero">
        <HeroSplitKpi
          title="Our Programs"
          description="Career-focused programs designed to prepare you for success in today's dynamic professional landscape."
          background={{ variant: "radial-gradient" }}
          kpis={[
            { value: "4", label: "Program Types" },
            { value: "50+", label: "Industry Partners" },
            { value: "95%", label: "Placement Rate" },
          ]}
          enableKpiAnimation={true}
          tag="Explore Opportunities"
          tagIcon={Compass}
          tagAnimation="slide-up"
          buttons={[{ text: "Discover Programs", href: "#programs-list" }]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg"
          imageAlt="Campus Learning Facilities"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          className="w-full"
          containerClassName="max-w-7xl mx-auto"
          titleClassName="text-5xl md:text-6xl font-bold text-var(--foreground)"
          descriptionClassName="text-lg text-var(--foreground) opacity-90"
        />
      </div>

      <div id="programs-page-products" data-section="programs-page-products">
        <ProductCardThree
          title="Explore Our Programs"
          description="Each program is designed with industry input to ensure you graduate career-ready."
          products={[
            {
              id: "program-business",
              name: "Business Management",
              price: "From R35,000/semester",
              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
              imageAlt: "Business Management Program",
            },
            {
              id: "program-it",
              name: "Information Technology",
              price: "From R38,000/semester",
              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
              imageAlt: "IT Program",
            },
            {
              id: "program-marketing",
              name: "Marketing & Entrepreneurship",
              price: "From R33,000/semester",
              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
              imageAlt: "Marketing Program",
            },
            {
              id: "program-finance",
              name: "Finance & Accounting",
              price: "From R36,000/semester",
              imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
              imageAlt: "Finance Program",
            },
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Academic Offerings"
          tagIcon={Compass}
          tagAnimation="slide-up"
          className="w-full"
          containerClassName="max-w-7xl mx-auto"
          cardClassName="bg-var(--card) rounded-soft overflow-hidden hover:shadow-xl transition-all"
          imageClassName="w-full h-64 object-cover"
          cardNameClassName="text-2xl font-bold text-var(--foreground) mt-4"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold text-var(--foreground) mb-4"
          textBoxDescriptionClassName="text-lg text-var(--foreground) opacity-80 mb-8"
        />
      </div>

      <div id="footer-programs" data-section="footer-programs">
        <FooterBaseCard
          logoText="Richfield College"
          columns={[
            {
              title: "Programs",
              items: [
                { label: "Business Management", href: "/programs" },
                { label: "Information Technology", href: "/programs" },
                { label: "Marketing & Entrepreneurship", href: "/programs" },
                { label: "Finance & Accounting", href: "/programs" },
              ],
            },
            {
              title: "Student Life",
              items: [
                { label: "Campus Experience", href: "/campus-life" },
                { label: "Student Support", href: "/#" },
                { label: "Internships", href: "/#" },
                { label: "Clubs & Events", href: "/#" },
              ],
            },
            {
              title: "About",
              items: [
                { label: "Our Mission", href: "/about" },
                { label: "Faculty", href: "/#" },
                { label: "Careers", href: "/#" },
                { label: "News & Blog", href: "/#" },
              ],
            },
            {
              title: "Contact",
              items: [
                { label: "Admissions", href: "/admissions" },
                { label: "Email: info@richfield.edu.za", href: "mailto:info@richfield.edu.za" },
                { label: "Phone: +27 (11) 234-5678", href: "tel:+27112345678" },
                { label: "Bryanston, Johannesburg", href: "/#" },
              ],
            },
          ]}
          copyrightText="© 2025 Richfield College. All rights reserved. Premium education for ambitious futures."
          className="w-full"
          containerClassName="max-w-7xl mx-auto"
          cardClassName="bg-var(--foreground) text-white rounded-soft p-12"
          logoTextClassName="text-2xl font-bold text-var(--primary-cta) mb-8"
          columnsClassName="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"
          columnClassName="flex flex-col"
          columnTitleClassName="font-bold text-lg mb-4 text-var(--primary-cta)"
          columnItemClassName="text-white opacity-80 hover:opacity-100 transition-opacity mb-3 text-sm"
          copyrightTextClassName="text-center text-white opacity-60 text-xs"
        />
      </div>
    </ThemeProvider>
  );
}