"use client";

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import MediaAbout from '@/components/sections/about/MediaAbout';
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 { Heart } from 'lucide-react';

export default function ContactPage() {
  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="about" data-section="about" className="py-20 md:py-24 lg:py-32">
        <MediaAbout
          title="Let's Transform Education Together"
          description="At Learninglee, we believe every question matters. Whether you're interested in supporting our programs, learning more about our impact, or exploring partnership opportunities, our team is here to connect with you. Reach out and let's discuss how we can work together to create lasting educational change in Jammu & Kashmir."
          tag="Contact Us"
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/teacher-with-children-looking-screen-lesson_259150-60331.jpg?_wi=5"
          imageAlt="Learninglee team members engaging with children in educational programs"
          useInvertedBackground={false}
          buttons={[
            { text: "Email Us", href: "mailto:hello@learninglee.org" },
            { text: "Schedule a Call", href: "#contact-form" },
          ]}
          buttonAnimation="slide-up"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-gray-700"
        />
      </div>

      <div id="contact-form" data-section="contact" className="py-20 md:py-24 lg:py-32">
        <ContactSplit
          tag="Get in Touch"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Join Our Community"
          description="Connect with us today. Whether you want to volunteer, donate, partner with us, or simply learn more about how Learninglee is transforming education, we're excited to hear from you. Leave your email and we'll respond within 24 hours."
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/volunteers-preparing-boxes-with-food-donations-using-tablet_23-2148732714.jpg?_wi=5"
          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>
  );
}