"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import { Sparkles, Heart, Lightbulb } from 'lucide-react';

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

  const footerColumns = [
    {
      title: "Quick Links",
      items: [
        { label: "About Us", href: "/" },
        { 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="hero" data-section="hero" className="py-20 md:py-24 lg:py-32">
        <HeroSplitDualMedia
          title="Join Our Movement for Educational Equity"
          description="Make a meaningful impact by supporting Learninglee's mission to transform education in Jammu & Kashmir. Whether you donate, volunteer, or partner with us, your contribution creates lasting change for thousands of children and families."
          tag="Get Involved"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "circleGradient" }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/volunteers-preparing-boxes-with-food-donations-using-tablet_23-2148732714.jpg",
              imageAlt: "Volunteers collaborating on education programs",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/teacher-with-children-looking-screen-lesson_259150-60331.jpg",
              imageAlt: "Educators engaging with children in learning activities",
            },
          ]}
          mediaAnimation="slide-up"
          rating={5}
          ratingText="Join 1000+ active volunteers and supporters"
          buttons={[
            { text: "Explore Opportunities", href: "#programs" },
            { text: "Contact Our Team", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          className="hero-section"
          titleClassName="text-5xl md:text-6xl font-bold"
          descriptionClassName="text-lg md:text-xl text-gray-700"
        />
      </div>

      <div id="programs" data-section="programs" className="py-20 md:py-24 lg:py-32">
        <ProductCardFour
          title="Ways to Get Involved"
          description="Discover the different ways you can support Learninglee and create meaningful impact in the lives of underserved children and families."
          tag="Contribution Paths"
          tagIcon={Lightbulb}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "1",
              name: "Make a Donation",
              price: "Financial Support",
              variant: "Fund programs, resources, teacher training",
              imageSrc: "http://img.b2bpic.net/free-photo/young-adults-meeting-up-study_23-2149064520.jpg",
              imageAlt: "Donors supporting educational initiatives",
            },
            {
              id: "2",
              name: "Become a Volunteer",
              price: "Time & Expertise",
              variant: "Teach, mentor, organize events, help locally",
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-with-arms-crossed_1170-2381.jpg",
              imageAlt: "Volunteers engaged in community service",
            },
            {
              id: "3",
              name: "Corporate Partnership",
              price: "Business Collaboration",
              variant: "Employee programs, sponsorships, resources",
              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: "Corporate team collaborating on social initiatives",
            },
            {
              id: "4",
              name: "Institutional Partnership",
              price: "Educational Collaboration",
              variant: "Schools, colleges, research institutions",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg",
              imageAlt: "Educational institution supporting learning programs",
            },
          ]}
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-gray-700"
        />
      </div>

      <div id="contact" data-section="contact" className="py-20 md:py-24 lg:py-32">
        <ContactSplit
          tag="Let's Connect"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Ready to Make a Difference?"
          description="Whether you have questions about our programs, want to explore partnership opportunities, or simply wish to learn more about Learninglee's impact, we'd love to hear from you. Fill in your email to get started."
          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>
  );
}