"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import { Home, HeartHandshake, Stethoscope, Family } from "lucide-react";
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function AdoptPage() {
  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="adoptable-pets" data-section="adoptable-pets">
        <ProductCardTwo
          title="Meet Our Adoptable Pets"
          description="These wonderful animals are looking for their forever homes. Browse our current residents and find your perfect companion."
          products={[
            { id: "dog-1", brand: "Hope Haven", name: "Buddy the Golden Retriever", price: "Adoption Fee: $350", rating: 5, reviewCount: "25 reviews", imageSrc: "https://img.b2bpic.net/free-photo/female-dog-owner-walking-with-french-bulldog-park_7502-8277.jpg", imageAlt: "Buddy, a friendly Golden Retriever" },
            { id: "cat-1", brand: "Hope Haven", name: "Luna the Tabby Cat", price: "Adoption Fee: $200", rating: 4, reviewCount: "18 reviews", imageSrc: "https://img.b2bpic.net/free-photo/woman-brown-sweater-lady-with-labrador_1157-42396.jpg", imageAlt: "Luna, a playful Tabby Cat" },
            { id: "dog-2", brand: "Hope Haven", name: "Max the Beagle", price: "Adoption Fee: $300", rating: 5, reviewCount: "32 reviews", imageSrc: "https://img.b2bpic.net/free-photo/happy-african-american-sportswoman-cuddling-her-small-dog-while-being-nature_637285-4485.jpg", imageAlt: "Max, an energetic Beagle" },
            { id: "cat-2", brand: "Hope Haven", name: "Cleo the Siamese", price: "Adoption Fee: $250", rating: 4, reviewCount: "12 reviews", imageSrc: "https://img.b2bpic.net/free-photo/cute-black-hamilton-hound-dog-playing-park-sunny-day_181624-42680.jpg", imageAlt: "Cleo, an elegant Siamese cat" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Adopt Now"
          titleClassName="font-light"
          textBoxDescriptionClassName="font-light"
          cardBrandClassName="font-light"
          cardNameClassName="font-light"
          cardPriceClassName="font-light"
        />
      </div>

      <div id="why-adopt" data-section="why-adopt">
        <FeatureHoverPattern
          title="Why Adopt from Hope Haven?"
          description="Discover the unique benefits and comprehensive support you receive when you adopt from our shelter."
          features={[
            { icon: Home, title: "A Loving Home Awaits", description: "Provide a deserving animal with a warm, safe, and permanent home. You change a life forever." },
            { icon: HeartHandshake, title: "Comprehensive Support", description: "We offer post-adoption resources, training tips, and a community network to ensure a smooth transition for you and your new pet." },
            { icon: Stethoscope, title: "Healthy & Happy Pets", description: "All our animals receive thorough veterinary check-ups, vaccinations, and spay/neuter services before adoption." },
            { icon: Family, title: "Matching Perfect Pairs", description: "Our experienced team helps you find the ideal companion whose personality and needs align with your lifestyle." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Promise"
          titleClassName="font-light"
          textBoxDescriptionClassName="font-light"
          cardTitleClassName="font-light"
        />
      </div>

      <div id="get-involved" data-section="get-involved">
        <ContactText
          text="Ready to open your home? Start your adoption journey with Hope Haven today."
          animationType="background-highlight"
          buttons={[{ text: "View All Pets", href: "/adopt" }, { text: "Contact Us", href: "/contact" }]}
          background={{ variant: "aurora" }}
          useInvertedBackground={false}
          ariaLabel="Call to action for adoption"
          textClassName="font-light"
        />
      </div>

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