"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Star, Camera, Map, Globe, BarChart3, TrendingUp } from 'lucide-react';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Animals", id: "/animals" },
    { name: "Visit", id: "/visit" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Happy Three Friends"
          button={{
            text: "Buy Tickets",
            href: "https://happythreefriends-tickets.example.com"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Welcome to Happy Three Friends Zoo"
          description="Discover an amazing world of wildlife, interactive experiences, and unforgettable family memories. Explore over 500 species in their natural habitats."
          background={{ variant: "sparkles-gradient" }}
          tag="Family-Friendly Adventure"
          tagIcon={Star}
          imageSrc="https://img.b2bpic.net/free-photo/spending-day-with-family-zoo_329181-13795.jpg"
          imageAlt="Happy Three Friends Zoo entrance with vibrant wildlife"
          buttons={[
            { text: "Buy Tickets Now", href: "https://happythreefriends-tickets.example.com" },
            { text: "Learn More", href: "/about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About Happy Three Friends Zoo"
          description="For over 30 years, Happy Three Friends Zoo has been dedicated to wildlife conservation, education, and providing world-class experiences for families. Our mission is to inspire a love for animals and nature while supporting critical conservation efforts globally."
          tag="Our Story"
          tagIcon={Camera}
          imageSrc="https://img.b2bpic.net/free-photo/deer-eating-nature_1161-251.jpg"
          imageAlt="Happy Three Friends Zoo wildlife habitats and conservation efforts"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Explore Conservation", href: "/conservation" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Meet Our Amazing Animals"
          description="Explore interactive exhibits featuring creatures from around the world, each with fascinating facts and enriching habitats designed for their wellbeing."
          tag="Wildlife Collection"
          tagIcon={Globe}
          features={[
            {
              title: "Majestic Lions",
              description: "Learn about the kings of the savanna and their fascinating social behaviors in our African Pride exhibit.",
              bentoComponent: "globe"
            },
            {
              title: "Gentle Giants - Elephants",
              description: "Discover the intelligence and grace of these remarkable creatures in our Asian Heritage habitat.",
              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Playful Penguins",
              description: "Experience the charm of penguin colonies in our polar wonder showcase with interactive underwater viewing.",
              bentoComponent: "map"
            },
            {
              title: "Towering Giraffes",
              description: "Meet our beautiful giraffes and learn about their unique adaptations and conservation status.",
              bentoComponent: "line-chart"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardOne
          title="Unforgettable Experiences"
          description="Create lasting memories with our exciting visitor programs and interactive wildlife encounters designed for all ages."
          tag="Visitor Experiences"
          tagIcon={Map}
          products={[
            {
              id: "1",
              name: "Guided Safari Tour",
              price: "From $35",
              imageSrc: "https://img.b2bpic.net/free-photo/mother-little-girl-feeding-petting-bunny_1150-47066.jpg",
              imageAlt: "Guided safari tour through zoo habitats"
            },
            {
              id: "2",
              name: "Animal Feeding Experience",
              price: "From $25",
              imageSrc: "https://img.b2bpic.net/free-photo/spending-day-with-family-zoo_329181-13795.jpg",
              imageAlt: "Interactive animal feeding activity"
            },
            {
              id: "3",
              name: "Educational Workshops",
              price: "From $15",
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-kids-playing-with-dog_23-2148990420.jpg",
              imageAlt: "Educational wildlife workshop for children"
            },
            {
              id: "4",
              name: "Animal Show",
              price: "Included",
              imageSrc: "https://img.b2bpic.net/free-photo/young-caucasian-girl-taking-selfie-with-deers-zoo_53876-47002.jpg",
              imageAlt: "Interactive animal show and performance"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Happy Three Friends by the Numbers"
          description="Our impact and legacy in wildlife conservation and visitor education."
          tag="Our Impact"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "30+",
              title: "Years of Conservation Excellence",
              items: [
                "Dedicated to protecting endangered species",
                "Global partnerships with wildlife organizations",
                "Award-winning conservation programs"
              ]
            },
            {
              id: "2",
              value: "500+",
              title: "Species in Our Care",
              items: [
                "Animals from every continent",
                "Natural habitat recreation",
                "Breeding programs for endangered species"
              ]
            },
            {
              id: "3",
              value: "2M+",
              title: "Visitors Annually",
              items: [
                "Families creating lasting memories",
                "Educational programs for schools",
                "Diverse visitor experiences"
              ]
            }
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/landscape-forest-covered-greenery-with-pelicans-standing-ground-sunlight_181624-16435.jpg"
          imageAlt="Happy Three Friends Zoo wildlife habitats"
          logoText="Happy Three Friends Zoo"
          copyrightText="© 2025 Happy Three Friends Zoo. All rights reserved. Protecting wildlife for future generations."
          columns={[
            {
              title: "Visit",
              items: [
                { label: "Hours & Admission", href: "/visit/hours" },
                { label: "Plan Your Visit", href: "/visit/planning" },
                { label: "Directions", href: "/visit/directions" },
                { label: "Facilities", href: "/visit/facilities" }
              ]
            },
            {
              title: "Animals",
              items: [
                { label: "Animal Directory", href: "/animals/directory" },
                { label: "Conservation", href: "/animals/conservation" },
                { label: "Behind the Scenes", href: "/animals/behind-scenes" },
                { label: "Wildlife Facts", href: "/animals/facts" }
              ]
            },
            {
              title: "About",
              items: [
                { label: "Our Mission", href: "/about/mission" },
                { label: "Team", href: "/about/team" },
                { label: "Careers", href: "/about/careers" },
                { label: "Contact Us", href: "/contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}