"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSmall"
        background="aurora"
        cardStyle="outline"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Attractions",
          id: "#features",
        },
        {
          name: "Tickets",
          id: "#pricing",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Magic City"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Where Wonder Comes to Life"
      description="Experience thrilling attractions, magical shows, and unforgettable family moments. From rides to entertainment, Magic City delivers joy for every age."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@HappyFamily",
          testimonial: "Magic City was the highlight of our family vacation! So much to do for every age.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-happy-people-funfair_23-2149748564.jpg",
          imageAlt: "Happy family",
        },
        {
          name: "Mark D.",
          handle: "@AdventureSeeker",
          testimonial: "The rides are incredible, and the shows are truly spectacular. A must-visit!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-hanging-out_23-2148287922.jpg",
          imageAlt: "Smiling couple",
        },
        {
          name: "Emily R.",
          handle: "@MomOfTwo",
          testimonial: "My kids absolutely loved it! Safe, clean, and endless fun. We can't wait to go back.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blond-girl-denim-overall-with-backpack-posing-amusement-park_1321-359.jpg",
          imageAlt: "Excited child",
        },
        {
          name: "David K.",
          handle: "@ThrillHunter",
          testimonial: "The roller coasters are world-class, and the atmosphere is pure magic. 10/10 experience!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-company-friends-sitting-park-man-women-having-fun-together-traveling-with-camera_285396-8661.jpg",
          imageAlt: "Teenagers on a ride",
        },
        {
          name: "Linda P.",
          handle: "@GrandmaFun",
          testimonial: "Even our grandkids had a blast! A wonderful day out for the whole family.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/adorable-senior-couple-having-picnic-outdoors_23-2149109380.jpg",
          imageAlt: "Grandparents with grandchildren",
        },
      ]}
      buttons={[
        {
          text: "Book Your Adventure",
          href: "#pricing",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/little-boy-expressing-pure-happiness_23-2148244742.jpg",
          alt: "Happy child",
        },
        {
          src: "http://img.b2bpic.net/free-photo/positive-family-selfie-with-young-mommy-toothless-kid-smiling-together-white-wall-playful-state-mind-happy-mood-attractive-woman-makes-this-shot-fabulous-heartwarming_273609-5705.jpg",
          alt: "Parent and child",
        },
        {
          src: "http://img.b2bpic.net/free-photo/friends-having-crowded-party-home_23-2149203571.jpg",
          alt: "Young couple",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-loving-senior-couple_1398-4256.jpg",
          alt: "Senior couple",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-pleasant-looking-woman-with-curly-hair-being-good-mood-smiles-satisfied-wears-casual-turtleneck-earrings_273609-46782.jpg",
          alt: "Smiling person portrait",
        },
      ]}
      avatarText="Join over a million happy visitors each year!"
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-couple-with-carnival-wheel_23-2148311342.jpg"
      imageAlt="Amusement park at sunset with rides and people"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Discover the Enchantment of Magic City: Your Ultimate Family Destination",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/rendering-cartoon-fantasy-scene-illustration_23-2151150749.jpg",
          alt: "Magic City Castle",
        },
      ]}
      buttons={[
        {
          text: "Learn More About Us",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Thrill Rides & Coasters",
          description: "Experience the rush with our state-of-the-art roller coasters and high-speed attractions designed for ultimate excitement.",
          imageSrc: "http://img.b2bpic.net/free-photo/rollercoaster-park_1203-7168.jpg",
          imageAlt: "Roller coaster looping",
        },
        {
          title: "Spectacular Live Shows",
          description: "Be captivated by dazzling magical performances, acrobatic feats, and enchanting parades that bring stories to life.",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-having-fun-zumba_23-2149047668.jpg",
          imageAlt: "Circus performers on stage",
        },
        {
          title: "Interactive Family Fun",
          description: "Engage in exciting carnival games, immersive experiences, and meet-and-greet with beloved characters.",
          imageSrc: "http://img.b2bpic.net/free-photo/kids-participating-treasure-hunt_23-2149042855.jpg",
          imageAlt: "Family playing a carnival game",
        },
      ]}
      title="Unforgettable Attractions for All Ages"
      description="Dive into a world of excitement with our diverse range of rides, shows, and interactive experiences, designed to create lasting memories."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          brand: "Magic City",
          name: "Fantasy Forest",
          price: "$0",
          rating: 5,
          reviewCount: "500+",
          imageSrc: "http://img.b2bpic.net/free-photo/mountain-landscape-with-fantasy-style-scene_23-2151124989.jpg",
          imageAlt: "Enchanted forest path",
        },
        {
          id: "p2",
          brand: "Magic City",
          name: "Aqua Kingdom",
          price: "$0",
          rating: 4,
          reviewCount: "320+",
          imageSrc: "http://img.b2bpic.net/free-photo/view-aqua-park-summer_23-2151160001.jpg",
          imageAlt: "Water park slides",
        },
        {
          id: "p3",
          brand: "Magic City",
          name: "Galactic Odyssey",
          price: "$0",
          rating: 5,
          reviewCount: "480+",
          imageSrc: "http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591402.jpg",
          imageAlt: "Futuristic space theme",
        },
        {
          id: "p4",
          brand: "Magic City",
          name: "Dinosaur Domain",
          price: "$0",
          rating: 4,
          reviewCount: "290+",
          imageSrc: "http://img.b2bpic.net/free-photo/sauropod-dinosaur-nature_23-2151535138.jpg",
          imageAlt: "Dinosaur statue in jungle",
        },
        {
          id: "p5",
          brand: "Magic City",
          name: "Fairytale Village",
          price: "$0",
          rating: 5,
          reviewCount: "410+",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-medieval-fantasy-landscape-with-city_23-2150916228.jpg",
          imageAlt: "Charming village houses",
        },
        {
          id: "p6",
          brand: "Magic City",
          name: "Adventure Island",
          price: "$0",
          rating: 4,
          reviewCount: "350+",
          imageSrc: "http://img.b2bpic.net/free-photo/kids-participating-treasure-hunt_23-2149042861.jpg",
          imageAlt: "Tropical island with pirate ship",
        },
      ]}
      title="Discover Our Themed Worlds"
      description="Explore unique lands within Magic City, each offering its own special magic and adventure for every visitor."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "day-pass",
          badge: "Standard",
          badgeIcon: Sparkles,
          price: "$79",
          subtitle: "Per Person",
          buttons: [
            {
              text: "Buy Day Pass",
              href: "#",
            },
          ],
          features: [
            "Access to all rides",
            "Access to all shows",
            "Complimentary parking",
            "Valid for one day",
          ],
        },
        {
          id: "family-pack",
          badge: "Best Value",
          badgeIcon: Sparkles,
          price: "$249",
          subtitle: "For up to 4 People",
          buttons: [
            {
              text: "Buy Family Pack",
              href: "#",
            },
          ],
          features: [
            "Access to all rides & shows",
            "Complimentary parking",
            "10% off merchandise",
            "Valid for one day",
          ],
        },
        {
          id: "season-pass",
          badge: "Unlimited Fun",
          badgeIcon: Sparkles,
          price: "$199",
          subtitle: "Per Person",
          buttons: [
            {
              text: "Buy Season Pass",
              href: "#",
            },
          ],
          features: [
            "Unlimited access for one year",
            "Free parking",
            "15% off food & merchandise",
            "Exclusive event access",
          ],
        },
      ]}
      title="Choose Your Magic City Adventure"
      description="Find the perfect ticket or package for your visit, offering the best value for endless fun and unforgettable moments."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "10M+",
          description: "Visitors Annually",
        },
        {
          id: "m2",
          value: "50+",
          description: "Thrilling Attractions",
        },
        {
          id: "m3",
          value: "12",
          description: "Spectacular Live Shows",
        },
      ]}
      title="Magic City by the Numbers"
      description="Celebrating years of joy and countless smiles, our park continues to grow and enchant visitors from around the world."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "test1",
          name: "Jessica L.",
          role: "Parent",
          company: "Family Fun Day",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-people-funfair-front-view_23-2149748561.jpg",
          imageAlt: "Happy family",
        },
        {
          id: "test2",
          name: "Michael S.",
          role: "Tourist",
          company: "Vacation Memories",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/80-s-inspired-summer-activities-with-retro-aesthetic_23-2151425779.jpg",
          imageAlt: "Smiling couple",
        },
        {
          id: "test3",
          name: "Sophia G.",
          role: "Child",
          company: "Kid's Favorite",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-sitting-sofa-reading-scripts-against-glowing-star-background_23-2147883004.jpg",
          imageAlt: "Excited child",
        },
        {
          id: "test4",
          name: "Chris B.",
          role: "Student",
          company: "Friends Outing",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/boyfriends-taking-their-girlfriends-piggyback-ride_23-2147883640.jpg",
          imageAlt: "Teenagers on a ride",
        },
        {
          id: "test5",
          name: "Patricia M.",
          role: "Grandparent",
          company: "Generational Joy",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-family-havinf-dinner-together_23-2149117543.jpg",
          imageAlt: "Grandparents with grandchildren",
        },
      ]}
      title="Hear From Our Happy Visitors"
      description="Families, couples, and adventurers share their magical moments and unforgettable experiences at Magic City."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "What are Magic City's operating hours?",
          content: "Magic City is open daily from 10 AM to 8 PM. Extended hours apply on weekends and holidays. Please check our calendar for specific dates.",
        },
        {
          id: "q2",
          title: "Are there dining options available inside the park?",
          content: "Yes, Magic City offers a wide variety of dining options, from quick snacks and fast food to sit-down restaurants. Vegetarian and gluten-free options are available.",
        },
        {
          id: "q3",
          title: "Is Magic City accessible for guests with disabilities?",
          content: "Magic City is committed to providing an inclusive experience. Many attractions are accessible, and wheelchairs are available for rent. Please visit guest services for more information.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/little-kids-trick-treating_53876-48974.jpg"
      imageAlt="Amusement park information desk"
      mediaAnimation="opacity"
      title="Your Questions Answered"
      description="Everything you need to know to plan your perfect day at Magic City, from tickets to attractions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Plan Your Magical Visit"
      description="Reach out to us for any questions, special requests, or group bookings. We're here to help make your Magic City experience perfect."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Your Phone Number (Optional)",
          required: false,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your Message",
        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591382.jpg"
      imageAlt="Magic City entrance illuminated at night"
      mediaAnimation="none"
      mediaPosition="right"
      buttonText="Send Your Inquiry"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Explore",
          items: [
            {
              label: "Attractions",
              href: "#features",
            },
            {
              label: "Shows & Events",
              href: "#",
            },
            {
              label: "Themed Worlds",
              href: "#products",
            },
            {
              label: "Dining",
              href: "#",
            },
          ],
        },
        {
          title: "Plan Your Visit",
          items: [
            {
              label: "Tickets & Passes",
              href: "#pricing",
            },
            {
              label: "Park Map",
              href: "#",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Accessibility",
              href: "#",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Press",
              href: "#",
            },
            {
              label: "Social Media",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Magic City"
      copyrightText="© 2024 Magic City. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
