"use client";

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

export default function HomePage() {
  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>

      {/* Hero Section */}
      <div id="hero" data-section="hero" className="py-20 md:py-24 lg:py-32">
        <HeroSplitDualMedia
          title="Every Child Deserves to Learn"
          description="Learninglee transforms education in Jammu & Kashmir through grassroots programs that reach underserved communities. We believe equitable learning is the foundation for generational change and human dignity."
          tag="Impact-Driven Education"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "circleGradient" }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/teacher-helping-her-pupil-with-her-homework_329181-10526.jpg",
              imageAlt: "Children learning in a classroom in Jammu & Kashmir",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/teacher-with-children-looking-screen-lesson_259150-60331.jpg",
              imageAlt: "Teacher engaging students in educational activities",
            },
          ]}
          mediaAnimation="slide-up"
          rating={5}
          ratingText="Trusted by 5000+ families and institutions"
          buttons={[
            {
              text: "Join the Movement",
              href: "#contact",
            },
            {
              text: "Learn More",
              href: "/about",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about" className="py-20 md:py-24 lg:py-32">
        <MediaAbout
          title="Transforming Lives Through Education"
          description="At Learninglee, we envision a world where every child in Jammu & Kashmir, regardless of socioeconomic background, has access to quality education. Our comprehensive programs address critical gaps in literacy, numeracy, child safety, and vocational skills. We partner with local communities, schools, and institutions to create sustainable, locally-led solutions that empower children and their families."
          tag="Our Story"
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/teacher-with-children-looking-screen-lesson_259150-60331.jpg"
          imageAlt="Learninglee team members engaging with children in educational programs"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Explore Our Programs",
              href: "/about",
            },
            {
              text: "See Our Impact",
              href: "/about",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Metrics Section */}
      <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={[
            {
              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,
            },
          ]}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      {/* Programs Section */}
      <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={[
            {
              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",
            },
          ]}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
        />
      </div>

      {/* Social Proof Section */}
      <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={[
            "UNICEF",
            "Save the Children",
            "World Bank Education",
            "Microsoft Education",
            "Google for Education",
            "UNESCO",
            "Teach for India",
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      {/* Testimonials Section */}
      <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",
              imageAlt: "Aisha Khan",
            },
            {
              id: "2",
              name: "Rajesh Sharma",
              imageSrc: "http://img.b2bpic.net/free-photo/young-adults-meeting-up-study_23-2149064520.jpg",
              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",
              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",
              imageAlt: "Vikram Patel",
            },
          ]}
          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}
        />
      </div>

      {/* Contact Section */}
      <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: "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."
        />
      </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: "/about",
                },
                {
                  label: "Impact Stories",
                  href: "/about",
                },
                {
                  label: "Get Involved",
                  href: "/about",
                },
              ],
            },
            {
              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: "/about",
                },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}