"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Heart, Sparkles, Award, Search, ClipboardList, Users, CheckCircle, Home, TrendingUp } from "lucide-react";

export default function PawsAndLovePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Paws & Love"
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Pets", id: "pets" },
            { name: "Stories", id: "stories" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Adopt Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Give a Loving Pet a New Home"
          description="Every animal deserves a chance at happiness. Meet our incredible rescues and become part of their transformation story."
          tag="Find Your Perfect Match"
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg"
          imageAlt="Shelter animals waiting for loving homes"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Browse Pets", href: "#pets" },
            { text: "Learn More", href: "#about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Our Mission"
          description="We're dedicated to rescuing animals in need and finding them loving families."
          tabs={[
            {
              id: "mission",              label: "Our Mission",              description: "We rescue abandoned and injured animals, provide them with medical care, rehabilitation, and love. Every animal that comes through our doors receives a second chance at life. We believe every pet deserves a family, and every family deserves the joy of a pet."
            },
            {
              id: "care",              label: "Expert Care",              description: "Our dedicated team of veterinarians, trainers, and volunteers provides comprehensive medical care and behavioral support. From emergency rescue to specialized rehabilitation, we ensure each animal is healthy and happy before adoption."
            },
            {
              id: "support",              label: "Lifetime Support",              description: "Our commitment doesn't end at adoption. We provide ongoing support, training resources, and veterinary guidance to ensure successful matches between pets and families. Your adoption story is just the beginning."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/elderly-people-with-cat-pet_23-2150285636.jpg"
          imageAlt="Happy family with their adopted pet"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pets" data-section="pets">
        <ProductCardOne
          title="Meet Your New Best Friend"
          description="Browse our available animals and find the perfect companion for your home"
          tag="Available for Adoption"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Max - Golden Retriever",              price: "Adoption Fee: $150",              imageSrc: "https://img.b2bpic.net/free-photo/selective-focus-shot-adorable-kooikerhondje-dog_181624-55413.jpg",              imageAlt: "Golden Retriever Max looking happy"
            },
            {
              id: "2",              name: "Luna - Tabby Cat",              price: "Adoption Fee: $75",              imageSrc: "https://img.b2bpic.net/free-photo/cute-puppy-garden_181624-36640.jpg",              imageAlt: "Playful tabby cat Luna"
            },
            {
              id: "3",              name: "Snowball - Rabbit",              price: "Adoption Fee: $50",              imageSrc: "https://img.b2bpic.net/free-photo/selective-focus-shot-adorable-golden-retriever-outdoors_181624-45466.jpg",              imageAlt: "Cute white rabbit Snowball"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <TestimonialCardOne
          title="Life-Changing Adoptions"
          description="Real stories from real families about the joy of giving a rescue animal a home"
          tag="Success Stories"
          tagIcon={Award}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "New Dog Parent",              company: "Adopted Max in 2023",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/elderly-people-with-cat-pet_23-2150285636.jpg",              imageAlt: "Sarah with her rescued dog"
            },
            {
              id: "2",              name: "James Chen",              role: "Cat Enthusiast",              company: "Adopted Luna in 2024",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-husband-wife-play-with-dog-man-striped-shirt-hugs-labrador-with-tenderness_197531-13723.jpg",              imageAlt: "James with his rescued cat"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Family of Three",              company: "Adopted in 2023",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-boy-posing-park-with-dog-parents_23-2148647786.jpg",              imageAlt: "Emma's family with their rescued pet"
            },
            {
              id: "4",              name: "David Kumar",              role: "First-Time Pet Owner",              company: "Adopted Snowball",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-women-dog-posing_23-2148977468.jpg",              imageAlt: "David with his adopted rabbit"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureBorderGlow
          title="Simple Adoption Process"
          description="We've made adoption easy and transparent. Follow these straightforward steps to bring your new pet home."
          features={[
            {
              icon: Search,
              title: "Browse Our Animals",              description: "Explore our available pets and find one that matches your lifestyle and family needs. Each profile includes detailed information about personality and care requirements."
            },
            {
              icon: ClipboardList,
              title: "Complete Application",              description: "Fill out our adoption application to help us ensure the best match. We ask about your living situation, experience with pets, and expectations."
            },
            {
              icon: Users,
              title: "Meet & Greet",              description: "Spend time with your potential new pet. Our staff will answer questions and help ensure compatibility before finalizing adoption."
            },
            {
              icon: CheckCircle,
              title: "Finalize Adoption",              description: "Complete paperwork and receive care instructions, vaccination records, and ongoing support. Your new best friend is ready to go home!"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Impact"
          description="The difference we're making in the lives of animals and families every day"
          metrics={[
            {
              id: "1",              value: "2,847",              title: "Animals Rescued",              description: "Pets given a second chance at life",              icon: Heart
            },
            {
              id: "2",              value: "2,634",              title: "Successful Adoptions",              description: "Families and pets united",              icon: Home
            },
            {
              id: "3",              value: "1,250",              title: "Active Supporters",              description: "Volunteers and donors helping daily",              icon: Users
            },
            {
              id: "4",              value: "98%",              title: "Success Rate",              description: "Lasting, happy adoptions",              icon: TrendingUp
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Involved"
          tagIcon={Heart}
          title="Ready to Make a Difference?"
          description="Whether you're ready to adopt, donate, or volunteer, we'd love to hear from you. Join our community and help us save more lives."
          imageSrc="https://img.b2bpic.net/free-photo/top-view-women-working-together-outdoors_23-2148416454.jpg"
          imageAlt="Adoption process illustration"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Get Started"
          termsText="We respect your privacy. You can unsubscribe at any time. We'll send you updates about adoptable pets and ways to help."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/woman-interacting-with-rescue-dogs-shelter_23-2148682952.jpg"
          imageAlt="Happy animals at our shelter"
          logoText="Paws & Love Shelter"
          copyrightText="© 2025 Paws & Love Animal Shelter. All rights reserved."
          columns={[
            {
              title: "Quick Links",              items: [
                { label: "Browse Pets", href: "#pets" },
                { label: "Adoption Process", href: "#process" },
                { label: "Success Stories", href: "#stories" },
                { label: "About Us", href: "#about" }
              ]
            },
            {
              title: "Get Involved",              items: [
                { label: "Volunteer", href: "#contact" },
                { label: "Donate", href: "#contact" },
                { label: "Sponsor an Animal", href: "#contact" },
                { label: "Foster Program", href: "#contact" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "info@pawslove.org", href: "mailto:info@pawslove.org" },
                { label: "(555) 123-4567", href: "tel:+15551234567" },
                { label: "Hours: 9am - 5pm Daily", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}