"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardThree from '@/components/sections/team/TeamCardThree';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Star, Heart, Home, Mountain, Sparkles, Crown, Linkedin, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="noiseGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Alpine Luxury"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Dining", id: "dining" },
            { name: "Experiences", id: "experiences" },
            { name: "Reviews", id: "reviews" }
          ]}
          button={{
            text: "Reserve Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Alpine Luxury in the Heart of Switzerland"
          description="Experience unparalleled elegance nestled among snow-capped peaks. World-class hospitality, stunning vistas, and unforgettable mountain moments await."
          tag="Luxury Resort"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767541466932-12betsq2.jpg",
              imageAlt: "Alpine mountain vista with luxury resort"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556190908-llv80fhw.jpg",
              imageAlt: "Mountain hotel exterior with snow peaks"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767541468070-xdixbpm2.jpg",
              imageAlt: "Swiss alpine scenery and resort view"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556191544-1tq5lm8v.jpg",
              imageAlt: "Mountain lodge with panoramic landscape"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556191988-ml5lcx25.jpg",
              imageAlt: "Alpine luxury retreat in winter"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767541467258-pga2yaw8.jpg",
              imageAlt: "Mountain sunset view from resort"
            }
          ]}
          buttons={[
            { text: "Reserve Your Stay", href: "contact" },
            { text: "Explore Amenities", href: "amenities" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Guest Testimonial"
          tagIcon={Star}
          title="A sanctuary where Alpine grandeur meets Swiss hospitality perfection."
          description="Margaret & Thomas"
          subdescription="London, United Kingdom"
          icon={Heart}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556190908-llv80fhw.jpg"
          imageAlt="Luxurious mountain resort setting"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardTwentyOne
          title="World-Class Amenities"
          description="Discover an extensive range of premium facilities designed to elevate your Alpine escape. From rejuvenating wellness to culinary excellence."
          tag="Facilities"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556193442-etd1bm8w.jpg"
          imageAlt="Luxury spa facility"
          accordionItems={[
            {
              id: "1",
              title: "Spa & Wellness Center",
              content: "Indulge in our award-winning spa featuring Alpine-inspired treatments, thermal pools, sauna facilities, and personalized wellness programs designed by world-renowned therapists."
            },
            {
              id: "2",
              title: "Fine Dining Restaurants",
              content: "Savor exquisite cuisine at our Michelin-recognized restaurants. Experience Alpine gastronomy blending traditional Swiss specialties with contemporary culinary innovation and mountain-fresh ingredients."
            },
            {
              id: "3",
              title: "Outdoor Adventures",
              content: "Explore pristine Alpine terrain with guided hiking, skiing, mountaineering, and seasonal activities. Our expert guides ensure unforgettable mountain experiences for all skill levels."
            },
            {
              id: "4",
              title: "Business & Events",
              content: "Host prestigious conferences and celebrations in our elegant mountain venues. State-of-the-art technology meets breathtaking views for memorable corporate and private events."
            }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <PricingCardTwo
          title="Room & Suite Collections"
          description="Choose from our exquisitely appointed accommodations, each offering panoramic mountain views and uncompromising luxury."
          tag="Accommodation"
          tagIcon={Home}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "deluxe",
              badge: "Mountain View",
              badgeIcon: Mountain,
              price: "CHF 450",
              subtitle: "Per night, perfect for romantic escapes",
              buttons: [
                { text: "Select Room", href: "contact" }
              ],
              features: [
                "Panoramic mountain views",
                "Premium bedding & linens",
                "Heated marble bathroom",
                "WiFi & entertainment system",
                "Spa access included"
              ]
            },
            {
              id: "suite",
              badge: "Peak Suite",
              badgeIcon: Sparkles,
              price: "CHF 750",
              subtitle: "For discerning travelers seeking ultimate luxury",
              buttons: [
                { text: "Select Suite", href: "contact" }
              ],
              features: [
                "360° Alpine panoramas",
                "Separate living area",
                "Private spa soaking tub",
                "Gourmet minibar",
                "Concierge 24/7",
                "Spa credits CHF 200"
              ]
            },
            {
              id: "penthouse",
              badge: "Presidential",
              badgeIcon: Crown,
              price: "CHF 1,200",
              subtitle: "The ultimate Alpine residence",
              buttons: [
                { text: "Inquire Now", href: "contact" }
              ],
              features: [
                "Private Alpine sanctuary",
                "Infinity pool & sauna",
                "Personal chef services",
                "Helicopter landing available",
                "Full concierge team",
                "Exclusive access to all amenities"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Alpine Legacy"
          description="Trusted by discerning travelers worldwide for exceptional mountain hospitality and service excellence."
          tag="Excellence"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "2,500m+",
              title: "Peak Elevation",
              description: "Nestled among Alpine grandeur above sea level",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556192565-v2ciek1f.jpg",
              imageAlt: "Alpine mountain peak elevation"
            },
            {
              id: "2",
              value: "5★★★★★",
              title: "Guest Satisfaction",
              description: "Consistently rated highest in luxury Swiss hospitality",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556200634-1wk6m0kn.jpg",
              imageAlt: "Happy luxury hotel guests"
            },
            {
              id: "3",
              value: "45+",
              title: "Years Excellence",
              description: "Four decades of uninterrupted luxury service tradition",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556191544-1tq5lm8v.jpg",
              imageAlt: "Historic luxury resort exterior"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardThree
          title="Meet Our Hospitality Team"
          description="Dedicated professionals committed to creating your perfect Alpine experience."
          tag="Staff"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          members={[
            {
              id: "1",
              name: "Samuel Eicher",
              role: "General Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556199718-irvjkbto.jpg",
              imageAlt: "General Manager Samuel Eicher",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "2",
              name: "Marta Rossi",
              role: "Head Concierge",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556198938-sapad5cn.jpg",
              imageAlt: "Head Concierge Marta Rossi",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" }
              ]
            },
            {
              id: "3",
              name: "Chef Andreas Müller",
              role: "Executive Chef",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556200257-fw1n6fwc.jpg",
              imageAlt: "Executive Chef Andreas Müller",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardEight
          title="Guest Testimonials"
          description="Hear from travelers who have experienced our Alpine luxury firsthand."
          tag="Reviews"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Victoria Laurent",
              role: "CEO, Luxury Travel Magazine",
              company: "Luxury Travel Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556194899-33n0vonz.jpg",
              imageAlt: "Victoria Laurent"
            },
            {
              id: "2",
              name: "James Richardson",
              role: "Investment Banker",
              company: "New York",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556197950-ygtyy086.jpg",
              imageAlt: "James Richardson"
            },
            {
              id: "3",
              name: "Sophie Beaumont",
              role: "Interior Designer",
              company: "Paris",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556198234-m2msdlmb.jpg",
              imageAlt: "Sophie Beaumont"
            },
            {
              id: "4",
              name: "David Chen",
              role: "Entrepreneur",
              company: "Singapore",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556198552-xacdcut0.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "5",
              name: "Elena Moretti",
              role: "Artist",
              company: "Milan",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556194899-33n0vonz.jpg",
              imageAlt: "Elena Moretti"
            },
            {
              id: "6",
              name: "Christopher Davies",
              role: "Physician",
              company: "London",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556197950-ygtyy086.jpg",
              imageAlt: "Christopher Davies"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to escape to Alpine luxury?"
          inputPlaceholder="Your email address"
          buttonText="Get Exclusive Offers"
          useInvertedBackground="noInvert"
          animationType="background-highlight"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Alpine Luxury"
          columns={[
            {
              items: [
                { label: "Rooms & Suites", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "Dining", href: "dining" }
              ]
            },
            {
              items: [
                { label: "Activities", href: "experiences" },
                { label: "Spa & Wellness", href: "amenities" },
                { label: "Events", href: "contact" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}