"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function ProgramsPage() {
  return (
    <ThemeProvider>
      <NavbarLayoutFloatingOverlay
        navItems={[
          { name: "Home", id: "/" },
          { name: "Academics", id: "/academics" },
          { name: "Programs", id: "/programs" },
          { name: "About", id: "/about" },
          { name: "Contact", id: "/contact" },
        ]}
        brandName="SJHN"
      />
      <div className="pt-32">
        <FeatureCardTwelve
          title="Extracurricular Activities & Clubs"
          description="Beyond the classroom, we foster personal growth through various clubs and activities."
          textboxLayout="split"
          animationType="slide-up"
          features={[
            { id: "c1", label: "Sports", title: "Athletics", items: ["Netball", "Football", "Swimming", "Basketball"] },
            { id: "c2", label: "Clubs", title: "Leadership & Arts", items: ["Debating Club", "Drama Society", "Science Club", "Young Farmers"] },
          ]}
        />
      </div>
      <FooterBaseReveal
        logoText="SJHN"
        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
      />
    </ThemeProvider>
  );
}