"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Calendar, DollarSign, Star, Headphones, MapPin, Heart, Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="medium"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="VacationStays"
          navItems={[
            { name: "Properties", id: "properties" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "#properties" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Discover Your Perfect Getaway Destination"
          description="Handpicked vacation rentals with everything you need. Browse five unique properties, check real-time availability, and book instantly."
          tag="Vacation Rentals"
          tagIcon={MapPin}
          tagAnimation="slide-up"
          background={{ variant: "noise" }}
          buttons={[
            { text: "Explore Properties", href: "#properties" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=1", imageAlt: "Beachfront luxury resort" },
            { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-cabins-forest_181624-42640.jpg?_wi=1", imageAlt: "Mountain cabin retreat" },
            { imageSrc: "http://img.b2bpic.net/free-photo/amazing-view-downtown-with-buildings-partially-covered-with-glass_181624-23808.jpg?_wi=1", imageAlt: "Modern urban apartment" },
            { imageSrc: "http://img.b2bpic.net/free-photo/brown-wooden-house-green-grass-field-near-green-trees-daytime_414077-63.jpg?_wi=1", imageAlt: "Countryside cottage" },
            { imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg?_wi=1", imageAlt: "Elegant villa property" }
          ]}
          ariaLabel="Hero section showcasing vacation rental properties"
        />
      </div>

      <div id="properties" data-section="properties">
        <ProductCardOne
          title="Our Exclusive Properties"
          description="Carefully curated vacation homes designed for unforgettable getaways. Each property offers unique charm and premium amenities."
          tag="Featured Listings"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          products={[
            { id: "1", name: "Beachfront Paradise", price: "$2,500/week", imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=2", imageAlt: "Luxury beachfront property with ocean view" },
            { id: "2", name: "Mountain Retreat", price: "$1,800/week", imageSrc: "http://img.b2bpic.net/free-photo/people-traveling-winter_52683-161152.jpg", imageAlt: "Cozy mountain cabin with scenic views" },
            { id: "3", name: "Urban Sanctuary", price: "$1,500/week", imageSrc: "http://img.b2bpic.net/free-photo/amazing-view-downtown-with-buildings-partially-covered-with-glass_181624-23808.jpg?_wi=2", imageAlt: "Modern downtown apartment with city access" },
            { id: "4", name: "Countryside Escape", price: "$1,200/week", imageSrc: "http://img.b2bpic.net/free-photo/brown-wooden-house-green-grass-field-near-green-trees-daytime_414077-63.jpg?_wi=2", imageAlt: "Charming cottage in peaceful countryside" },
            { id: "5", name: "Luxury Villa", price: "$3,200/week", imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=3", imageAlt: "Premium villa with private pool and gardens" }
          ]}
          ariaLabel="Property listings showcase"
        />
      </div>

      <div id="about" data-section="about">
        <FeatureCardTwentyFive
          title="Why Choose Our Properties"
          description="Experience the difference with our carefully vetted vacation rentals"
          tag="Benefits"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              title: "Real-Time Availability",              description: "Check live availability and book your perfect dates instantly without waiting for confirmation.",              icon: Calendar,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=4", imageAlt: "Calendar booking interface" },
                { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-cabins-forest_181624-42640.jpg?_wi=2", imageAlt: "Available dates overview" }
              ]
            },
            {
              title: "Transparent Pricing",              description: "No hidden fees. See exact costs upfront including cleaning, service fees, and taxes all included.",              icon: DollarSign,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/amazing-view-downtown-with-buildings-partially-covered-with-glass_181624-23808.jpg?_wi=3", imageAlt: "Pricing breakdown display" },
                { imageSrc: "http://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg?_wi=2", imageAlt: "Transparent cost details" }
              ]
            },
            {
              title: "Authentic Reviews",              description: "Read verified guest experiences from real travelers to make informed decisions about your stay.",              icon: Star,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/brown-wooden-house-green-grass-field-near-green-trees-daytime_414077-63.jpg?_wi=3", imageAlt: "Guest review testimonials" },
                { imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=5", imageAlt: "Rating and feedback system" }
              ]
            },
            {
              title: "Expert Support",              description: "24/7 customer support team ready to help with bookings, questions, and any special requests.",              icon: Headphones,
              mediaItems: [
                { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-cabins-forest_181624-42640.jpg?_wi=3", imageAlt: "Customer support team" },
                { imageSrc: "http://img.b2bpic.net/free-photo/amazing-view-downtown-with-buildings-partially-covered-with-glass_181624-23808.jpg?_wi=4", imageAlt: "Help and assistance services" }
              ]
            }
          ]}
          ariaLabel="Key benefits section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Track Record"
          description="Trusted by thousands of travelers worldwide for unforgettable vacation experiences"
          tag="Achievements"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "12,000+", description: "Happy Guests" },
            { id: "2", value: "98%", description: "Guest Satisfaction" },
            { id: "3", value: "5", description: "Premium Properties" },
            { id: "4", value: "150+", description: "5-Star Reviews" }
          ]}
          ariaLabel="Metrics and achievements"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-copy-space_23-2148422282.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "David Kim" }
          ]}
          cardTitle="Thousands of satisfied travelers have experienced their perfect getaway with our properties"
          cardTag="Guest Testimonials"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={true}
          ariaLabel="Customer testimonials section"
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted By Leading Travel Organizations"
          description="Featured in major travel platforms and recommended by industry experts"
          tag="Partners"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Travel Magazine", "Booking Platform", "Tourism Board", "Luxury Rentals", "Travel Guide", "Holiday Advisors", "Vacation Experts"]}
          speed={40}
          showCard={true}
          ariaLabel="Social proof and partner logos"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Book Your Getaway?"
          description="Have questions about our properties or need help planning your perfect vacation? Get in touch with our expert team. We're here to help you find your ideal rental and answer any questions."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your ideal getaway and any special requests...", rows: 5, required: true }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/happy-african-american-businesswoman-drinking-coffee-conference-call-laptop_637285-12927.jpg"
          imageAlt="Contact our vacation rental team"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Message"
          ariaLabel="Contact form section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="VacationStays"
          copyrightText="© 2025 VacationStays | Handpicked Vacation Rentals"
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/vacationstays", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/vacationstays", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/vacationstays", ariaLabel: "Twitter" }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
