"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 Link from "next/link";
import { Lightbulb, BarChart3, Heart } from "lucide-react";

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" },
      ],
    },
  ];

  const programsData = [
    {
      id: "1",
      name: "Early Literacy & Numeracy",
      price: "Foundation",
      variant: "Ages 4-8 | Primary Focus",
      imageSrc: "http://img.b2bpic.net/free-photo/workers-looking-tablet_1170-69.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/workers-looking-tablet_1170-69.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/workers-looking-tablet_1170-69.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/workers-looking-tablet_1170-69.jpg",
      imageAlt: "Educators engaged in professional development",
    },
  ];

  const metricsData = [
    {
      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",
    },
  ];

  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
          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}
          products={programsData}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-gray-700"
        />
      </div>

      <div id="metrics" data-section="metrics" className="py-20 md:py-24 lg:py-32">
        <MetricCardOne
          title="Program Impact Metrics"
          description="Our data-driven approach ensures transparency and accountability. Here's the real-world impact of our educational initiatives."
          tag="Impact Statistics"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={metricsData}
          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="Support Our Programs Today"
          description="Your involvement directly impacts the lives of children in underserved communities. Whether through donations, volunteering, or partnerships, you can make a meaningful difference in their educational journey."
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/volunteers-preparing-boxes-with-food-donations-using-tablet_23-2148732714.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
          logoText="Learninglee"
          copyrightText="© 2025 Learninglee | Education for Every Child"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}