"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import {
  BarChart3,
  Users,
  Building2,
  TrendingUp,
  BookOpen,
  Heart,
} from "lucide-react";

export default function AboutPage() {
  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"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Learninglee"
          navItems={[
            { name: "About", id: "about" },
            { name: "Programs", id: "programs" },
            { name: "Impact", id: "metrics" },
            { name: "Get Involved", id: "contact" },
            { name: "Contact", id: "footer" },
          ]}
        />
      </div>

      {/* About Detail Section */}
      <div id="about-detail" data-section="about-detail" className="py-20 md:py-24 lg:py-32">
        <MediaAbout
          title="Our Mission & Vision"
          description="Learninglee is committed to transforming education in Jammu & Kashmir by providing equitable access to quality learning opportunities. We work directly with underserved communities, local schools, and educational institutions to create sustainable solutions that address systemic barriers to education. Our vision is a future where every child, regardless of their background, has the tools, confidence, and opportunity to reach their full potential and contribute meaningfully to society."
          tag="Who We Are"
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/teacher-with-children-looking-screen-lesson_259150-60331.jpg?_wi=3"
          imageAlt="Learninglee mission in action with students"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Back to Home",
              href: "/",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Impact Metrics Section */}
      <div id="metrics" data-section="metrics" className="py-20 md:py-24 lg:py-32">
        <MetricCardOne
          title="Our Track Record"
          description="Over years of dedicated work, Learninglee has built a strong foundation of impact and trust with measurable outcomes in educational transformation."
          tag="Proven Results"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={[
            {
              id: "1",
              value: "12500",
              title: "Children Impacted",
              description: "Direct and indirect beneficiaries of our programs",
              icon: Users,
            },
            {
              id: "2",
              value: "85",
              title: "Partner Schools",
              description: "Educational institutions actively collaborating",
              icon: Building2,
            },
            {
              id: "3",
              value: "92",
              title: "% Retention Rate",
              description: "Students staying engaged in our programs",
              icon: TrendingUp,
            },
            {
              id: "4",
              value: "1200",
              title: "Educators Trained",
              description: "Teaching professionals equipped with new skills",
              icon: BookOpen,
            },
          ]}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      {/* Community Testimonials */}
      <div id="testimonials" data-section="testimonials" className="py-20 md:py-24 lg:py-32">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Aisha Khan",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg?_wi=2",
              imageAlt: "Aisha Khan",
            },
            {
              id: "2",
              name: "Rajesh Sharma",
              imageSrc: "http://img.b2bpic.net/free-photo/young-adults-meeting-up-study_23-2149064520.jpg?_wi=2",
              imageAlt: "Rajesh Sharma",
            },
            {
              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?_wi=2",
              imageAlt: "Dr. Priya Gupta",
            },
            {
              id: "4",
              name: "Vikram Patel",
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg?_wi=2",
              imageAlt: "Vikram Patel",
            },
          ]}
          cardTitle="Community voices: How Learninglee is making a real difference in Jammu & Kashmir"
          cardTag="Stories from Our Impact"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer" className="py-16 md:py-20">
        <FooterBase
          logoText="Learninglee"
          copyrightText="© 2025 Learninglee | Education for Every Child"
          columns={[
            {
              title: "Quick Links",
              items: [
                {
                  label: "About Us",
                  href: "/about",
                },
                {
                  label: "Our Programs",
                  href: "/",
                },
                {
                  label: "Impact Stories",
                  href: "/",
                },
                {
                  label: "Get Involved",
                  href: "/",
                },
              ],
            },
            {
              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: "/",
                },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}