"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import SocialProofThree from '@/components/sections/socialProof/SocialProofThree';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="smallSizeLargeTitles"
      background="animatedAurora"
      cardStyle="solid-accent-light"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Wild Kingdom Zoo"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Animals", id: "animals" },
            { name: "Visit", id: "visit" },
            { name: "Conservation", id: "conservation" }
          ]}
          button={{
            text: "Book Tickets",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplitImage
          logoText="WILD KINGDOM"
          description="Discover the wonders of nature. Explore exotic animals from around the world and learn about conservation efforts that protect endangered species. Create unforgettable memories for your entire family."
          buttons={[
            { text: "Book Your Visit", href: "#contact" },
            { text: "Explore Animals", href: "#animals" }
          ]}
          layoutOrder="default"
          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153681163-oo6uvsub.jpg"
          splitImageAlt="Zoo entrance with wildlife signage"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153682786-jx3c9b1f.jpg"
          imageAlt="Wildlife conservation in action"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Our Mission"
          description="Wild Kingdom Zoo is dedicated to providing world-class animal care while promoting conservation and environmental education. Since 1985, we have been a sanctuary for animals and a center of learning for over 5 million visitors. Our commitment goes beyond exhibition—we actively support habitat preservation, wildlife research, and breeding programs for endangered species."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153682786-jx3c9b1f.jpg"
          imageAlt="Zoo staff with animals"
          buttons={[
            { text: "Learn About Conservation", href: "#conservation" }
          ]}
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="animals" data-section="animals">
        <FeatureCardEight
          title="Explore Our Animals"
          description="From majestic big cats to intelligent primates, discover the incredible biodiversity in our carefully curated exhibits."
          tag="Featured Exhibits"
          features={[
            {
              id: 1,
              title: "African Lions",
              description: "Experience the power and grace of these magnificent predators in our spacious savanna habitat.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153684172-732ws1nl.jpg"
            },
            {
              id: 2,
              title: "Elephant Kingdom",
              description: "Meet our gentle giants and learn about elephant intelligence, family bonds, and conservation efforts.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153686491-t08w9syu.jpg"
            },
            {
              id: 3,
              title: "Tropical Birds",
              description: "Soar through our vibrant aviary featuring exotic species from rainforests across the globe.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153686491-t08w9syu.jpg"
            },
            {
              id: 4,
              title: "Primate Plaza",
              description: "Observe our closest relatives in nature as they play, learn, and interact in their natural environment.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153687628-jvyq4n0r.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofThree
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153682786-jx3c9b1f.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153695988-9ztvems9.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153697267-y1mxbtpk.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153698468-djt40dhm.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153699717-6kvc6r70.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153700836-g2ngh8tj.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153702354-rtary3wa.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153703678-mfb7av0n.jpg"
          ]}
          animationType="slide-up"
          title="Trusted by Conservation Leaders"
          description="Wild Kingdom Zoo partners with global organizations dedicated to wildlife preservation and education."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          topMarqueeDirection="left"
          speed={40}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Visitor",
              company: "Family of 4",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153688909-2h8gv0mj.jpg",
              imageAlt: "Sarah with family"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "School Group Leader",
              company: "Lincoln Elementary",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153693121-f2haj0c6.jpg",
              imageAlt: "School group at zoo"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Annual Pass Holder",
              company: "Local Community",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153690653-0cadt9zb.jpg",
              imageAlt: "Emily enjoying zoo visit"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Tourist",
              company: "Visiting from Korea",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153691947-ox1wrwri.jpg",
              imageAlt: "David and family at zoo"
            }
          ]}
          title="What Our Visitors Say"
          description="Hear from families and groups who have experienced the magic of Wild Kingdom Zoo."
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Plan Your Visit"
          description="Ready for an adventure? Book your tickets or inquire about group visits, educational programs, and special events."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your visit... Group size, dates, special requests?",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766153694462-ce1flm12.jpg"
          imageAlt="Zoo location and directions"
          mediaPosition="right"
          buttonText="Request Information"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Wild Kingdom Zoo"
        />
      </div>
    </ThemeProvider>
  );
}