"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Island Haven"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Amenities", id: "features" },
            { name: "Testimonials", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Island Haven"
          description="Experience luxury hospitality on a pristine Caribbean island. Discover our world-class amenities and breathtaking vistas."
          imageSrc="https://img.b2bpic.net/free-photo/umbrella-chair-around-swimming-pool-resort-hotel-leisure-travel-vacation_74190-8222.jpg"
          imageAlt="Sunset view of Island Haven Hotel beach"
          showDimOverlay={true}
          buttons={[
            { text: "Reserve Your Stay", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Our Story"
          title="Caribbean Elegance Meets Contemporary Luxury"
          description="Island Haven is a boutique luxury resort nestled on an exclusive stretch of beach in St. Barth. Since opening our doors, we've been dedicated to providing guests with an unforgettable experience that combines world-class service, sophisticated design, and authentic Caribbean hospitality. Every detail is carefully curated to ensure your stay is nothing short of extraordinary."
          metrics={[
            { value: "25+", title: "Years of Excellence" },
            { value: "500+", title: "5-Star Reviews" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
          imageAlt="Ocean view from Island Haven resort"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="World-Class Amenities"
          description="Discover the exceptional facilities and services that make Island Haven your ultimate Caribbean destination."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="blur-reveal"
          features={[
            {
              title: "Infinity Pool",              description: "Overlook the ocean while enjoying our stunning clifftop infinity pool",              bentoComponent: "media-stack",              items: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/silhouette-woman-walking-water-surface-infinity-pool-expensive-rich-luxury-villa-mountain-with-sea-view_343596-2993.jpg",                  imageAlt: "infinity pool resort luxury hotel summer vacation"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/silhouette-woman-walking-water-surface-infinity-pool-expensive-rich-luxury-villa-mountain-with-sea-view_343596-2993.jpg",                  imageAlt: "infinity pool resort luxury hotel summer vacation"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/silhouette-woman-walking-water-surface-infinity-pool-expensive-rich-luxury-villa-mountain-with-sea-view_343596-2993.jpg",                  imageAlt: "infinity pool resort luxury hotel summer vacation"
                }
              ]
            },
            {
              title: "Wellness Spa",              description: "Rejuvenate with our full-service spa offering traditional and modern treatments",              bentoComponent: "media-stack",              items: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-smile-happy-relax-around-swimming-pool-hotel-resort-leisure_74190-8389.jpg",                  imageAlt: "spa wellness relaxation massage luxury resort tropical"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-smile-happy-relax-around-swimming-pool-hotel-resort-leisure_74190-8389.jpg",                  imageAlt: "spa wellness relaxation massage luxury resort tropical"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-smile-happy-relax-around-swimming-pool-hotel-resort-leisure_74190-8389.jpg",                  imageAlt: "spa wellness relaxation massage luxury resort tropical"
                }
              ]
            },
            {
              title: "Gourmet Dining",              description: "Savor exquisite cuisine at our fine dining restaurant with ocean views",              bentoComponent: "media-stack",              items: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/senior-man-chilling-swimming-pool_53876-15224.jpg",                  imageAlt: "restaurant fine dining luxury coastal food elegant"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/senior-man-chilling-swimming-pool_53876-15224.jpg",                  imageAlt: "restaurant fine dining luxury coastal food elegant"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/senior-man-chilling-swimming-pool_53876-15224.jpg",                  imageAlt: "restaurant fine dining luxury coastal food elegant"
                }
              ]
            },
            {
              title: "Private Beach",              description: "Access to an exclusive stretch of pristine white-sand beach",              bentoComponent: "media-stack",              items: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-reflection-tropical-coastline-generated-by-ai_188544-36460.jpg",                  imageAlt: "private beach island ocean tropical sand paradise"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-reflection-tropical-coastline-generated-by-ai_188544-36460.jpg",                  imageAlt: "private beach island ocean tropical sand paradise"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/tranquil-sunset-reflection-tropical-coastline-generated-by-ai_188544-36460.jpg",                  imageAlt: "private beach island ocean tropical sand paradise"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Hear from travelers who've experienced the magic of Island Haven."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarajohnson",              testimonial: "Island Haven exceeded all my expectations. The service was impeccable, the views were breathtaking, and I felt completely at peace. I'm already planning my return visit!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiley-business-woman-with-tablet-side-view_23-2149442245.jpg",              imageAlt: "portrait woman happy professional headshot business"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@mchen_travel",              testimonial: "A truly luxurious escape. The attention to detail is remarkable, from the room design to the personalized service. Worth every penny for a Caribbean paradise experience.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",              imageAlt: "portrait man smiling professional headshot business"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmarod",              testimonial: "The spa was heavenly, the food was incredible, and the staff treated us like family. Island Haven is now our favorite vacation destination!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-attractive-caucasian-smiling-woman_93675-135824.jpg",              imageAlt: "portrait woman smiling professional headshot business"
            },
            {
              id: "4",              name: "David Thompson",              handle: "@dthompson",              testimonial: "Perfect for a romantic getaway. The sunset from our balcony was unforgettable, and the beach is absolutely pristine. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg",              imageAlt: "portrait man happy professional headshot business"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Plan Your Escape"
          description="Contact our reservations team to book your stay at Island Haven. We'll be delighted to help you create your perfect Caribbean vacation."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "arrival", type: "date", placeholder: "Arrival Date", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your ideal stay...",            rows: 4,
            required: false
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/travel-sea-tropical-island-coconut_1203-5231.jpg"
          imageAlt="Sunset beach at Island Haven"
          mediaPosition="right"
          buttonText="Request Reservation"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Island Haven"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "About", href: "about" },
                { label: "Amenities", href: "features" }
              ]
            },
            {
              items: [
                { label: "Testimonials", href: "testimonial" },
                { label: "Book Now", href: "contact" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cancellation Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}