"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { BarChart3, Heart } from "lucide-react";

export default function ImpactPage() {
  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 metricsData = [
    {
      id: "1",
      value: "12500",
      title: "Children Reached",
      description: "Direct beneficiaries across our education programs since inception",
      icon: "Users",
    },
    {
      id: "2",
      value: "85",
      title: "Schools Partnered",
      description: "Educational institutions collaborating with Learninglee in J&K",
      icon: "Building2",
    },
    {
      id: "3",
      value: "92",
      title: "% Enrollment Rate",
      description: "Program participants successfully enrolled in formal education",
      icon: "TrendingUp",
    },
    {
      id: "4",
      value: "1200",
      title: "Teachers Trained",
      description: "Educators equipped with modern, child-centered teaching methodologies",
      icon: "BookOpen",
    },
  ];

  const testimonials = [
    {
      id: "1",
      name: "Aisha Khan",
      imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg",
    },
    {
      id: "2",
      name: "Rajesh Sharma",
      imageSrc: "http://img.b2bpic.net/free-photo/young-adults-meeting-up-study_23-2149064520.jpg",
    },
    {
      id: "3",
      name: "Dr. Priya Gupta",
      imageSrc: "http://img.b2bpic.net/free-photo/collaborative-work-group-young-project-managers-working-new-startup-analysis-plans-three-perspective-professional-young-people-sitting-modern-library-meeting_176420-8280.jpg",
    },
    {
      id: "4",
      name: "Vikram Patel",
      imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg",
    },
  ];

  const partnerNames = [
    "UNICEF",
    "Save the Children",
    "World Bank Education",
    "Microsoft Education",
    "Google for Education",
    "UNESCO",
    "Teach for India",
  ];

  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="metrics" data-section="metrics" className="py-20 md:py-24 lg:py-32">
        <MetricCardOne
          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}
          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="testimonials" data-section="testimonials" className="py-20 md:py-24 lg:py-32">
        <TestimonialCardTwelve
          testimonials={testimonials}
          cardTitle="Thousands of families and institutions trust Learninglee to create transformational educational experiences"
          cardTag="Real Stories from Our Community"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={true}
          cardClassName="testimonial-card"
        />
      </div>

      <div id="social-proof" data-section="social-proof" className="py-20 md:py-24 lg:py-32">
        <SocialProofOne
          title="Trusted by Global Leaders"
          description="Learninglee collaborates with international and national organizations committed to educational excellence and child welfare."
          tag="Our Partners"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={partnerNames}
          speed={40}
          showCard={true}
          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>
  );
}