"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Sparkles, Bell } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          brandName="Safe Haven Shelter"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Available Pets", id: "available" },
            { name: "Adopt", id: "adopt" },
            { name: "Stories", id: "stories" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Love saves lives"
          bottomRightText="contact@safehaven.org"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Every Animal Deserves a Loving Home"
          description="Welcome to Safe Haven Shelter, where compassion meets action. Meet the wonderful animals waiting for their forever families and be part of their journey to happiness."
          background={{ variant: "plain" }}
          tag="Rescue & Adopt"
          tagIcon={Heart}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/mother-with-kids-dog-autumn-park_1303-17174.jpg", alt: "Adopted family with dog" },
            { src: "https://img.b2bpic.net/free-photo/mother-with-kids-dog-autumn-park_1303-17173.jpg", alt: "Child with rescued cat" },
            { src: "https://img.b2bpic.net/free-photo/happy-parents-their-daughters-enjoying-home-having-fun-with-their-dog_637285-2878.jpg", alt: "Couple with rescue dog" }
          ]}
          avatarText="Thousands of happy adoptions"
          imageSrc="https://img.b2bpic.net/free-photo/smiley-woman-playing-with-cute-dog-up-adoption_23-2148682991.jpg"
          imageAlt="Happy animals at shelter"
          buttons={[
            { text: "Meet Available Pets", href: "available" },
            { text: "Start Adoption Process", href: "adopt" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Saving lives, one pet at a time through" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/smiley-woman-spending-time-with-cute-rescue-dogs-shelter_23-2148682966.jpg", alt: "Dedicated shelter team caring for animals" },
            { type: "text", content: "dedicated rescue and adoption services" }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Our Mission", href: "#" }
          ]}
        />
      </div>

      <div id="available" data-section="available">
        <ProductCardFour
          title="Meet Available Pets"
          description="Browse our wonderful animals waiting for their forever homes. Each profile includes important information to help you find the perfect companion."
          tag="Available Now"
          tagIcon={Sparkles}
          products={[
            {
              id: "max",              name: "Max",              price: "Golden Retriever",              variant: "3 years • Friendly • House trained",              imageSrc: "https://img.b2bpic.net/free-photo/cute-fluffy-golden-retriever-sitting-grass-park_181624-40167.jpg",              imageAlt: "Max, golden retriever available for adoption"
            },
            {
              id: "luna",              name: "Luna",              price: "Tabby Cat",              variant: "2 years • Playful • Indoor",              imageSrc: "https://img.b2bpic.net/free-photo/direct-look-into-face-duck-tolling-retriever-dog_493961-1048.jpg",              imageAlt: "Luna, tabby cat available for adoption"
            },
            {
              id: "hoppy",              name: "Hoppy",              price: "Holland Lop Rabbit",              variant: "1 year • Gentle • Quiet",              imageSrc: "https://img.b2bpic.net/free-photo/happy-pet-dogs-playing-park_1359-280.jpg",              imageAlt: "Hoppy, rabbit available for adoption"
            },
            {
              id: "bella",              name: "Bella",              price: "German Shepherd",              variant: "4 years • Loyal • Trained",              imageSrc: "https://img.b2bpic.net/free-photo/cute-fluffy-golden-retriever-sitting-grass-park_181624-40167.jpg",              imageAlt: "Bella, german shepherd available for adoption"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Pets", href: "#" }
          ]}
        />
      </div>

      <div id="adopt" data-section="adopt">
        <FeatureCardSix
          title="How to Adopt"
          description="Our adoption process is simple, transparent, and designed with both you and your future pet in mind."
          tag="Step by Step"
          features={[
            {
              id: 1,
              title: "Visit & Meet",              description: "Come explore our facility, meet the animals, and spend time with the ones that capture your heart.",              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-puppy-vaccination-schedule-template_23-2150730623.jpg"
            },
            {
              id: 2,
              title: "Complete Application",              description: "Fill out our adoption application to ensure the best match between you and your new pet.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-reading-book-cafe-with-her-pet-french-bulldog_1303-32215.jpg"
            },
            {
              id: 3,
              title: "Welcome Home",              description: "After approval, take your new companion home and begin your amazing journey together.",              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-puppy-vaccination-schedule-template_23-2150730620.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Start Application", href: "#contact" }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <TestimonialCardOne
          title="Success Stories"
          description="Read heartwarming tales of animals who found their forever homes and the families who opened their hearts."
          tag="Happy Endings"
          testimonials={[
            {
              id: "1",              name: "The Johnson Family",              role: "Max's Family",              company: "Portland, Oregon",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/mother-with-kids-dog-autumn-park_1303-17174.jpg",              imageAlt: "Johnson family with Max the golden retriever"
            },
            {
              id: "2",              name: "Sarah Chen",              role: "Luna's Owner",              company: "Seattle, Washington",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/mother-with-kids-dog-autumn-park_1303-17173.jpg",              imageAlt: "Sarah Chen with Luna the tabby cat"
            },
            {
              id: "3",              name: "Marcus & Devon",              role: "Hoppy's Parents",              company: "Vancouver, BC",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-parents-their-daughters-enjoying-home-having-fun-with-their-dog_637285-2878.jpg",              imageAlt: "Marcus and Devon with Hoppy the rabbit"
            },
            {
              id: "4",              name: "Eleanor Mitchell",              role: "Bella's Companion",              company: "Tacoma, Washington",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/cute-family-playing-park_1157-21589.jpg",              imageAlt: "Eleanor Mitchell with Bella the German Shepherd"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="impact" data-section="impact">
        <MetricCardTwo
          title="Our Impact"
          description="Making a real difference in animal welfare across our community every single day."
          tag="By The Numbers"
          metrics={[
            {
              id: "1",              value: "2,847",              description: "Animals Rescued & Rehomed"
            },
            {
              id: "2",              value: "95%",              description: "Successful Adoptions"
            },
            {
              id: "3",              value: "12,000+",              description: "Hours of Volunteer Service"
            },
            {
              id: "4",              value: "24/7",              description: "Emergency Care Available"
            }
          ]}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="volunteers" data-section="volunteers">
        <TeamCardTen
          title="Join Our Team of Animal Lovers"
          tag="Volunteers Needed"
          members={[
            {
              id: "1",              name: "Rebecca Torres",              imageSrc: "https://img.b2bpic.net/free-photo/woman-playing-with-rescue-dogs-shelter_23-2148682984.jpg"
            },
            {
              id: "2",              name: "James Anderson",              imageSrc: "https://img.b2bpic.net/free-photo/woman-playing-with-rescue-dogs-shelter_23-2148682984.jpg"
            }
          ]}
          memberVariant="card"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Involved"
          title="Stay Connected"
          description="Subscribe to our newsletter for adoption updates, animal care tips, and ways to support our mission."
          tagIcon={Bell}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/doctor-asking-client-from-queue_329181-10374.jpg"
          imageAlt="Safe Haven Shelter"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/elegant-fashion-girls-summer-park_1157-21448.jpg"
          imageAlt="Happy rescued animals"
          logoText="Safe Haven Shelter"
          copyrightText="© 2024 Safe Haven Shelter. Saving lives, one pet at a time."
          columns={[
            {
              title: "Adopt",              items: [
                { label: "Available Pets", href: "available" },
                { label: "Adoption Process", href: "adopt" },
                { label: "Success Stories", href: "stories" }
              ]
            },
            {
              title: "Get Involved",              items: [
                { label: "Volunteer", href: "volunteers" },
                { label: "Donate", href: "#" },
                { label: "Sponsor", href: "#" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "About Us", href: "#" },
                { label: "Email Us", href: "mailto:contact@safehaven.org" },
                { label: "Visit Us", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}