"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactText from '@/components/sections/contact/ContactText';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function DonatePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Adopt", id: "/adopt" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
    { name: "Donate", id: "/donate" },
    { name: "Shop", id: "/shop" },
    { name: "Blog", id: "/blog" }
  ];

  const navButton = { text: "Donate", href: "/donate" };

  const footerColumns = [
    {
      title: "About Us",      items: [
        { label: "Our Mission", href: "/about" },
        { label: "Meet the Team", href: "/about" },
        { label: "Impact Report", href: "/about" }
      ]
    },
    {
      title: "Get Involved",      items: [
        { label: "Adopt a Pet", href: "/adopt" },
        { label: "Volunteer", href: "/contact" },
        { label: "Foster a Pet", href: "/contact" }
      ]
    },
    {
      title: "Resources",      items: [
        { label: "FAQs", href: "/contact" },
        { label: "Pet Care Tips", href: "/" },
        { label: "Contact Us", href: "/contact" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant={"hover-bubble"}
      defaultTextAnimation={"background-highlight"}
      borderRadius={"sharp"}
      contentWidth={"mediumSmall"}
      sizing={"largeSmall"}
      background={"aurora"}
      cardStyle={"subtle-shadow"}
      primaryButtonStyle={"inset-glow"}
      secondaryButtonStyle={"solid"}
      headingFontWeight={"light"}
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems} button={navButton} brandName="Hope Haven" className="py-4" />
      </div>

      <div id="get-involved" data-section="get-involved">
        <ContactText
          text="Your generosity changes lives. Every donation brings us closer to a world where every animal has a home."
          animationType="background-highlight"
          buttons={[{ text: "Donate Now", href: "#" }, { text: "Learn More", href: "/about" }]}
          background={{ variant: "aurora" }}
          useInvertedBackground={false}
          ariaLabel="Call to action for donations"
          textClassName="font-light"
        />
      </div>

      <div id="our-impact" data-section="our-impact">
        <MetricCardSeven
          title="Where Your Support Goes"
          description="See how your contributions directly benefit animals in need."
          metrics={[
            { id: "1", value: "5,000+", title: "Pets Rehomed", items: ["Successfully placed in loving families", "Reduced shelter population"] },
            { id: "2", value: "2,500+", title: "Medical Procedures", items: ["Life-saving surgeries & treatments", "Routine check-ups & vaccinations"] },
            { id: "3", value: "10,000+", title: "Volunteer Hours", items: ["Dedicated individuals giving back", "Essential support for daily operations"] }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Making a Difference"
          titleClassName="font-light"
          textBoxDescriptionClassName="font-light"
          metricTitleClassName="font-light"
        />
      </div>

      <div id="happy-stories" data-section="happy-stories">
        <TestimonialCardFifteen
          testimonial="\"My donation to Hope Haven helped cover medical costs for a dog that was hit by a car. Knowing I made a direct impact on saving a life is incredibly rewarding.\""
          rating={5}
          author="Emily Rodriguez, Donor"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-smiling-beautiful-girl-her-handsome-boyfriend-woman-casual-summer-jeans-clothes_158538-5514.jpg", alt: "Emily Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/man-woman-posing-together_23-2148618938.jpg", alt: "Sarah Johnson" },
            { src: "https://img.b2bpic.net/free-photo/self-portrait-cheerful-modern-couple-love_1262-12888.jpg", alt: "Michael Chen" },
            { src: "https://img.b2bpic.net/free-photo/outdoor-shot-pleasant-looking-smiling-dark-skinned-girl-leans-shoulder-her-cauasian-bearded-boyfriend_273609-44315.jpg", alt: "David Kim" }
          ]}
          ratingAnimation="blur-reveal"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          testimonialClassName="font-light"
          authorClassName="font-light"
        />
      </div>

      <FooterBase
        columns={footerColumns}
        logoText="Hope Haven"
        copyrightText="© 2024 Hope Haven Animal Shelter. All rights reserved."
        useInvertedBackground={false}
      />
    </ThemeProvider>
  );
}