"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Award, Home, Sparkles, Star, TrendingUp, Users, Globe, Calendar } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="fluid"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxe Haven"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Book Now", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Welcome to Luxe Haven"
          description="Experience unparalleled luxury and comfort in the heart of paradise. Our five-star resort offers world-class amenities, breathtaking views, and exceptional service for the perfect getaway."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "25+", label: "Years of Excellence" },
            { value: "500+", label: "Luxury Rooms" },
            { value: "98%", label: "Guest Satisfaction" }
          ]}
          enableKpiAnimation={true}
          tag="Award-Winning Resort"
          tagIcon={Award}
          tagAnimation="slide-up"
          imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
          imageAlt="Luxe Haven Hotel Exterior"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          buttons={[
            { text: "Book Your Stay", href: "#contact" },
            { text: "Explore Rooms", href: "#rooms" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Where Elegance Meets Serenity at" },
            { type: "image", src: "https://img.b2bpic.net/free-vector/luxury-golden-hotels-logos-pack_23-2147532121.jpg", alt: "Luxe Haven Logo" }
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Discover Our Story", href: "#" },
            { text: "View Gallery", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardOne
          title="Luxury Room Collection"
          description="Choose from our stunning selection of elegantly appointed rooms and suites, each designed with your comfort in mind."
          tag="Premium Accommodations"
          tagIcon={Home}
          tagAnimation="slide-up"
          buttons={[
            { text: "View All Rooms", href: "#" }
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "1",              name: "Deluxe Room",              price: "$299/night",              imageSrc: "https://img.b2bpic.net/free-photo/aerial-shot-aria-hotel-las-vegas_181624-42881.jpg",              imageAlt: "Deluxe Room with King Bed"
            },
            {
              id: "2",              name: "Ocean View Suite",              price: "$499/night",              imageSrc: "https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg",              imageAlt: "Ocean View Suite with Balcony"
            },
            {
              id: "3",              name: "Presidential Suite",              price: "$899/night",              imageSrc: "https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg",              imageAlt: "Presidential Suite with Panoramic Views"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardNine
          title="Premium Amenities"
          description="Indulge in world-class facilities designed for your ultimate relaxation and enjoyment."
          tag="Guest Experience"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Infinity Pool",              description: "Overlook panoramic ocean vistas while enjoying our heated infinity pool with premium cabanas and cocktail service.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/swimming-pool_74190-1977.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/elegant-wedding-venue-with-swimming-pool_637285-5705.jpg" }
            },
            {
              id: 2,
              title: "Spa & Wellness",              description: "Rejuvenate with our full-service spa offering world-renowned treatments, yoga classes, and holistic wellness programs.",              phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/modern-villa-with-multiple-lights-sun-loungers-asprovalta-greece_1268-16093.jpg" },
              phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/hotel-resort-palm-trees-summer-time_116348-4.jpg" }
            }
          ]}
          showStepNumbers={false}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Guest Experiences"
          description="Hear from our satisfied guests who have experienced the magic of Luxe Haven."
          tag="5-Star Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Travel Blogger",              company: "Wanderlust Magazine",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-female-photographer-exploring-city-with-her-camera_23-2149186643.jpg"
            },
            {
              id: "2",              name: "David Chen",              role: "CEO",              company: "Fortune 500 Tech",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/journalist-sea-front-view_23-2148568134.jpg"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Event Planner",              company: "Luxury Events Co",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-photo-camera_23-2148700793.jpg"
            },
            {
              id: "4",              name: "James Thompson",              role: "Luxury Consultant",              company: "Travel & Leisure",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-brunette-female-photographer-holding-phone-smiling_176420-6924.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="By The Numbers"
          description="Our commitment to excellence reflected in meaningful statistics."
          tag="Our Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Happy Guests",              value: "150K+"
            },
            {
              id: "2",              icon: Award,
              title: "Awards Won",              value: "45+"
            },
            {
              id: "3",              icon: Globe,
              title: "Countries Visited",              value: "87"
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Reserve Your Escape"
          tagIcon={Calendar}
          tagAnimation="slide-up"
          title="Book Your Dream Vacation Today"
          description="Secure your room now and experience the pinnacle of luxury hospitality. Limited availability during peak season."
          buttons={[
            { text: "Book Now", href: "#" },
            { text: "Contact Concierge", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Rooms", href: "#rooms" },
                { label: "Amenities", href: "#amenities" },
                { label: "About", href: "#about" }
              ]
            },
            {
              title: "Guest Services",              items: [
                { label: "Reservations", href: "#" },
                { label: "Concierge", href: "#" },
                { label: "Room Service", href: "#" }
              ]
            },
            {
              title: "Information",              items: [
                { label: "Policies", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Luxe Haven Resort. All rights reserved."
          bottomRightText="Designed for luxury travel experiences"
        />
      </div>
    </ThemeProvider>
  );
}