"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Lightbulb, BarChart3, Heart, Users, Building2, TrendingUp, BookOpen } from "lucide-react";
import Link from "next/link";

export default function ProgramsPage() {
  const navItems = [
    { name: "About", id: "about" },
    { name: "Programs", id: "programs" },
    { name: "Impact", id: "metrics" },
    { name: "Get Involved", id: "contact" },
    { name: "Contact", id: "footer" },
  ];

  const footerColumns = [
    {
      title: "Quick Links",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Programs", href: "/programs" },
        { label: "Impact Stories", href: "/impact" },
        { label: "Get Involved", href: "/get-involved" },
      ],
    },
    {
      title: "How to Help",      items: [
        { label: "Donate Now", href: "#" },
        { label: "Become a Volunteer", href: "#" },
        { label: "Corporate Partnership", href: "#" },
        { label: "Institutional Collaboration", href: "#" },
      ],
    },
    {
      title: "Resources",      items: [
        { label: "Blog & Insights", href: "#" },
        { label: "Annual Report", href: "#" },
        { label: "Impact Dashboard", href: "#" },
        { label: "Contact Us", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Learninglee" navItems={navItems} />
      </div>

      <div id="programs" data-section="programs" className="py-20 md:py-24 lg:py-32">
        <ProductCardFour
          products={[
            {
              id: "1",              name: "Early Literacy & Numeracy",              price: "Foundation",              variant: "Ages 4-8 | Primary Focus",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-old-female-teacher-class_23-2148925500.jpg",              imageAlt: "Young children engaged in literacy activities"},
            {
              id: "2",              name: "Child Safety & Awareness",              price: "Protection",              variant: "Ages 6-14 | Comprehensive Program",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-old-female-teacher-class_23-2148925500.jpg",              imageAlt: "Child safety education and awareness session"},
            {
              id: "3",              name: "Vocational & Life Skills",              price: "Empowerment",              variant: "Ages 14-18 | Career Pathways",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-old-female-teacher-class_23-2148925500.jpg",              imageAlt: "Youth learning vocational and life skills"},
            {
              id: "4",              name: "Teacher Development",              price: "Excellence",              variant: "Professional | Ongoing Training",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-old-female-teacher-class_23-2148925500.jpg",              imageAlt: "Educators engaged in professional development"},
          ]}
          title="Our Programs"
          description="Comprehensive, community-centered initiatives designed to address educational inequities and empower underserved children and youth in Jammu & Kashmir."
          tag="Education Solutions"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      <div id="metrics" data-section="metrics" className="py-20 md:py-24 lg:py-32">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "12500",              title: "Children Reached",              description: "Direct beneficiaries across our education programs",              icon: Users,
            },
            {
              id: "2",              value: "85",              title: "Schools Partnered",              description: "Educational institutions collaborating with Learninglee",              icon: Building2,
            },
            {
              id: "3",              value: "92",              title: "% Enrollment Rate",              description: "Program participants enrolled in formal education",              icon: TrendingUp,
            },
            {
              id: "4",              value: "1200",              title: "Teachers Trained",              description: "Educators equipped with modern teaching methodologies",              icon: BookOpen,
            },
          ]}
          title="Our Measurable Impact"
          description="Learninglee's data-driven approach ensures transparency and accountability. Here's how we're creating change in Jammu & Kashmir."
          tag="Impact Statistics"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-gray-600"
        />
      </div>

      <div id="contact" data-section="contact" className="py-20 md:py-24 lg:py-32">
        <ContactSplit
          tag="Get Involved"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Join the Movement for Educational Equity"
          description="Whether you're a passionate donor, dedicated volunteer, or strategic partner, your involvement creates lasting change. Connect with us today to discuss how you can support Learninglee's mission."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/fighting-hunger-poverty-together_482257-84897.jpg"
          imageAlt="Diverse team of volunteers and educators collaborating"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email to get started"
          buttonText="Let's Connect"
          termsText="We respect your privacy. Unsubscribe anytime. By joining, you'll receive updates on our programs and impact."
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-gray-700"
        />
      </div>

      <div id="footer" data-section="footer" className="py-16 md:py-20">
        <FooterBase
          columns={footerColumns}
          logoText="Learninglee"
          copyrightText="© 2025 Learninglee | Education for Every Child"
        />
      </div>
    </ThemeProvider>
  );
}