a6013017-e578-42ac-9bdf-a450a0c4cee2/src/app/page.tsx

"use client";

import React from "react";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Sparkles, Heart, PawPrint, MapPin, Star } from "lucide-react";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Mission", id: "/mission" },
    { name: "Adopt", id: "/adopt" },
    { name: "Contact", id: "/contact" }
  ];

  const footerColumns = [
    { title: 'Adopt', items: [{ label: 'Available Dogs', href: '/adopt' }, { label: 'Available Cats', href: '/adopt' }, { label: 'Process', href: '/adopt' }] },
    { title: 'Support', items: [{ label: 'Volunteer', href: '/contact' }, { label: 'Donate', href: '#' }] },
    { title: 'Company', items: [{ label: 'Our Mission', href: '/mission' }, { label: 'Contact Us', href: '/contact' }] }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay 
          brandName="Golden Paws"
          navItems={navItems}
          button={{ text: "Adopt Now", href: "/adopt" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup 
          title="Finding Forever Homes for Every Golden Paw"
          description="Join our community of animal lovers. Sign up to get updates on new arrivals, adoption events, and ways you can help rescue animals in need."
          tag="Rescue. Rehabilitate. Rehome."
          tagIcon={Sparkles}
          background={{ variant: 'sparkles-gradient' }}
          buttonText="Join the Pack"
          inputPlaceholder="Enter your email for updates"
        />
      </div>

      <div id="mission" data-section="mission">
        <MediaAbout 
          title="Our Mission to Save Every Life" 
          description="At Golden Paws, we believe every animal deserves a second chance. Since 2010, we have provided medical care, love, and shelter to thousands of abandoned pets."
          tag="Who We Are" 
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/hipster-woman-smile-enjoy-playing-with-her-puppy-summer-field-vintage-tone-filter_1150-1188.jpg" 
          imageAlt="Volunteer caring for a shelter dog" 
          buttons={[{ text: 'Our Story', href: '/mission' }, { text: 'Volunteer', href: '/contact' }]} 
          useInvertedBackground={true} 
        />
      </div>

      <div id="impact" data-section="impact">
        <MetricCardFourteen 
          title="A Decades Worth of Compassion in Numbers" 
          tag="Impact" 
          metrics={[
            { id: 'm1', value: '2.5k+', description: 'Animals rescued from high-risk situations across the region.' },
            { id: 'm2', value: '98%', description: 'Successful adoption rate with zero return policy success.' },
            { id: 'm3', value: '150+', description: 'Dedicated volunteers working round the clock for welfare.' },
            { id: 'm4', value: '500k', description: 'Meals provided to homeless pets in the last year alone.' }
          ]} 
          metricsAnimation="blur-reveal"
          useInvertedBackground={false} 
        />
      </div>

      <div id="adopt" data-section="adopt">
        <ProductCardFour 
          products={[
            { id: 'p1', name: 'Cooper', price: '$150 Fee', variant: 'Golden Retriever Mix • 2 Years', imageSrc: 'https://img.b2bpic.net/free-photo/poor-stray-dog-road-funny_1153-2174.jpg' },
            { id: 'p2', name: 'Luna', price: '$75 Fee', variant: 'Calico Domestic • 6 Months', imageSrc: 'https://img.b2bpic.net/free-photo/selective-focus-shot-cute-black-cat-with-green-angry-eyes_181624-39013.jpg' },
            { id: 'p3', name: 'Bear', price: '$125 Fee', variant: 'German Shepherd • 4 Years', imageSrc: 'https://img.b2bpic.net/free-photo/cute-golden-retriever-puppy-resting-couch_181624-26198.jpg' },
            { id: 'p4', name: 'Shadow', price: '$75 Fee', variant: 'Short Hair Domestic • 1 Year', imageSrc: 'https://img.b2bpic.net/free-photo/adorable-little-baby-kitten-walking_658552-2.jpg' }
          ]} 
          title="Meet Your Future Best Friend" 
          description="Browse our current residents waiting for their forever homes." 
          tag="Available Pets" 
          tagIcon={PawPrint}
          gridVariant="four-items-2x2-equal-grid" 
          animationType="slide-up" 
          textboxLayout="default" 
          useInvertedBackground={true} 
        />
      </div>

      <div id="stories" data-section="stories">
        <TestimonialCardFive 
          testimonials={[
            { id: 't1', name: 'Sarah & Mike Thompson', date: 'Date: 12 Nov 2024', title: 'Life is better with Cooper', quote: 'Adopting Cooper was the best decision we ever made. The shelter team helped us every step of the way.', tag: 'Dog Adoption', avatarSrc: 'https://img.b2bpic.net/free-photo/cheerful-romantic-couple_1098-2321.jpg', imageSrc: 'https://img.b2bpic.net/free-photo/portrait-smiling-family-dog_329181-20491.jpg' },
            { id: 't2', name: 'Emily Chen', date: 'Date: 05 Jan 2025', title: 'Luna is my constant companion', quote: 'I was looking for a quiet companion and Luna has exceeded all expectations.', tag: 'Cat Adoption', avatarSrc: 'https://img.b2bpic.net/free-photo/woman-with-hat-hugging-her-beloved_1098-2310.jpg', imageSrc: 'https://img.b2bpic.net/free-photo/couple-with-their-kitten-celebrating-christmas_1303-30192.jpg' }
          ]} 
          title="Heartwarming Adoption Stories" 
          description="See the joy that a rescued pet can bring to a household." 
          tag="Success Stories" 
          tagIcon={Star}
          textboxLayout="split-description" 
          useInvertedBackground={false} 
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Visit Our Shelter"
          ctaDescription="We are open for visits Tuesday through Sunday. Come meet our residents in person."
          ctaButton={{ text: "Get Directions", href: "/contact" }}
          ctaIcon={MapPin}
          faqs={[
            { id: 'c1', title: 'Shelter Hours', content: 'Tuesday - Friday: 11am - 6pm<br/>Saturday - Sunday: 10am - 5pm' },
            { id: 'c2', title: 'Volunteer Inquiries', content: 'We are always looking for dog walkers and cat socializers.' }
          ]}
          useInvertedBackground={true}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard 
          logoText="Golden Paws"
          columns={footerColumns}
          copyrightText="© 2025 | Golden Paws Animal Shelter"
        />
      </div>
    </ThemeProvider>
  );
}