"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Heart, MapPin, Users, Trophy, Star, Badge, Lightbulb, Crown, Target, CheckCircle, Zap } from 'lucide-react';

export default function ZootopiaCityPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Zootopia City"
          navItems={[
            { name: "About", id: "about" },
            { name: "Attractions", id: "attractions" },
            { name: "Characters", id: "characters" },
            { name: "Visit", id: "contact" },
            { name: "Community", id: "testimonials" },
          
            { name: "Blog", id: "/blog" },
]}
          button={{
            text: "Explore Now",            href: "#attractions"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Welcome to Zootopia City"
          description="A thriving metropolis where predators and prey live together in perfect harmony. Explore diverse districts, meet amazing characters, and discover why Zootopia is the most inclusive city on Earth."
          background={{ variant: "radial-gradient" }}
          tag="Explore the City"
          tagIcon={Sparkles}
          buttons={[
            { text: "Visit Now", href: "#attractions" },
            { text: "Learn More", href: "#about" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/new-york-city-central-park-dusk-panorama_649448-2420.jpg",              imageAlt: "Zootopia Downtown District"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-vector/cute-mascots-pet-shop-icons_24877-51209.jpg",              imageAlt: "Rainforest District"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/new-york-city-central-park-dusk-panorama_649448-1038.jpg",              imageAlt: "Savanna Outback"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/chicago-skyline_649448-1462.jpg",              imageAlt: "Arctic District"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/central-park-spring-flower-with-skyline-midtown-manhattan-new-york-city_649448-1963.jpg",              imageAlt: "Entertainment District"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/chicago-night-panorama_649448-3345.jpg",              imageAlt: "Police Precinct"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="What is Zootopia?"
          description="Zootopia is a progressive metropolis where animals of all shapes, sizes, and species coexist peacefully. From the glittering towers of downtown to the lush rainforests and frozen arctic tundra, our city celebrates diversity and inclusion. Every citizen, from ambitious rabbits to cunning foxes, has a place in our thriving community."
          metrics={[
            { value: "1000+", title: "Animal Species" },
            { value: "100%", title: "Predator-Prey Harmony" }
          ]}
          tag="About Our City"
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-smiley-friends-outdoors_23-2149073452.jpg"
          imageAlt="Diverse community in Zootopia"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="attractions" data-section="attractions">
        <ProductCardOne
          title="City Attractions"
          description="Explore the incredible districts and attractions that make Zootopia the most unique city in the world."
          tag="Experience"
          tagIcon={MapPin}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "downtown",              name: "Downtown Zootopia",              price: "Must-See",              imageSrc: "https://img.b2bpic.net/free-photo/modern-tokyo-street-background_23-2149394942.jpg",              imageAlt: "Downtown District with modern architecture"
            },
            {
              id: "rainforest",              name: "Rainforest District",              price: "Lush & Wild",              imageSrc: "https://img.b2bpic.net/free-photo/census-concept-photographed-town_23-2148993178.jpg",              imageAlt: "Tropical rainforest ecosystem"
            },
            {
              id: "arctic",              name: "Arctic District",              price: "Frozen Wonder",              imageSrc: "https://img.b2bpic.net/free-photo/census-concept-photographed-town_23-2148993146.jpg",              imageAlt: "Arctic tundra and ice landscape"
            }
          ]}
        />
      </div>

      <div id="characters" data-section="characters">
        <TeamCardTwo
          title="Meet the Characters"
          description="Get to know the beloved residents who make Zootopia special."
          tag="Community Leaders"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="scale-rotate"
          gridVariant="four-items-2x2-equal-grid"
          members={[
            {
              id: "judy",              name: "Officer Judy Hopps",              role: "Police Officer",              description: "An ambitious and dedicated rabbit who breaks stereotypes and pursues justice with determination and heart.",              imageSrc: "https://img.b2bpic.net/free-photo/african-american-bodyguard-posing-with-baton-uniform-studio_482257-122275.jpg",              imageAlt: "Officer Judy Hopps",              socialLinks: [
                { icon: Badge, url: "#police" },
                { icon: Heart, url: "#community" }
              ]
            },
            {
              id: "nick",              name: "Nick Wilde",              role: "Con Artist Turned Detective",              description: "A sly and clever fox with a heart of gold who becomes an unlikely partner in solving the city's greatest mysteries.",              imageSrc: "https://img.b2bpic.net/free-photo/easter-celebration-with-bunny_23-2151198647.jpg",              imageAlt: "Nick Wilde",              socialLinks: [
                { icon: Lightbulb, url: "#detective" },
                { icon: Sparkles, url: "#friendship" }
              ]
            },
            {
              id: "mayor",              name: "Mayor Lionheart",              role: "Mayor",              description: "The majestic lion who leads Zootopia with vision, compassion, and commitment to equality for all citizens.",              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-businessman-works-desk-with-pet-rabbit-generated-by-ai_188544-30814.jpg",              imageAlt: "Mayor Lionheart",              socialLinks: [
                { icon: Crown, url: "#leadership" },
                { icon: Target, url: "#vision" }
              ]
            },
            {
              id: "assistant",              name: "Assistant Mayor Bellwether",              role: "Assistant Mayor",              description: "A sheep who works tirelessly to support the mayor and ensure smooth city operations for all residents.",              imageSrc: "https://img.b2bpic.net/free-photo/easter-bunny-wearing-costume-fantasy-world_23-2151258257.jpg",              imageAlt: "Assistant Mayor Bellwether",              socialLinks: [
                { icon: CheckCircle, url: "#operations" },
                { icon: Zap, url: "#efficiency" }
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Zootopia by the Numbers"
          description="Discover the impressive statistics that showcase our thriving community and achievements."
          tag="City Achievements"
          tagIcon={Trophy}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "12M+",              title: "Population",              description: "Citizens from across the world",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-people-getting-stronger-together_23-2149125960.jpg",              imageAlt: "Diverse population"
            },
            {
              id: "2",              value: "5M+",              title: "Annual Visitors",              description: "Tourists discovering paradise",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-smiley-friends-outdoors_23-2149073452.jpg",              imageAlt: "Visitors and tourists"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Visitors Say"
          description="Experience the magic of Zootopia through the words of our beloved guests and citizens."
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="scale-rotate"
          gridVariant="three-columns-all-equal-width"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Travel Blogger",              company: "Wanderlust Adventures",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-pretty-female-manager-from-sales-department-indoor-photo-smiling-woman-working-office-with-discussing-people_197531-3752.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Family Traveler",              company: "Happy Families",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-blond-girl-happy-expression_1194-4509.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Adventure Seeker",              company: "Explorer's Guild",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",              name: "James Patterson",              role: "Cultural Enthusiast",              company: "World Culture Magazine",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/thumbs-up-spa-smiling-girl-white-robe-good-wellness-vibes_169016-69478.jpg",              imageAlt: "James Patterson"
            },
            {
              id: "5",              name: "Amara Okafor",              role: "Community Leader",              company: "Global Unity Network",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-adult-daughter-mature-father-meeting-with-family-consultant-co-working-shaking-hands_74855-15154.jpg",              imageAlt: "Amara Okafor"
            },
            {
              id: "6",              name: "David Kim",              role: "Photographer",              company: "Lens & Light Studios",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/student-showing-ok-sign_1149-179.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to experience the wonder of Zootopia? Join millions of visitors who have discovered the magic of our inclusive city where everyone belongs. Start your journey today and become part of our thriving community."
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Plan Your Visit", href: "https://zootopia.local/book" },
            { text: "Contact Us", href: "mailto:info@zootopia.local" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Zootopia City"
        />
      </div>
    </ThemeProvider>
  );
}