"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Award, Sparkles, Waves } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmall"
        background="floatingGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Fleet", id: "fleet" },
        { name: "Experiences", id: "services" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Best Yachts"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "glowing-orb" }}
      title="Experience Luxury at Sea with Best Yachts"
      description="Exclusive yacht charter experiences across the Turkish Riviera. Discover unparalleled comfort, privacy, and service."
      kpis={[
        { value: "20+", label: "Luxury Yachts" },
        { value: "150+", label: "Happy Clients" },
        { value: "10+", label: "Years Experience" },
      ]}
      enableKpiAnimation={true}
      buttons={[
        { text: "Book Now", href: "#contact" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/boats-south-atlantic-ocean-near-shore-florianopolis-brazil_181624-55870.jpg?_wi=1"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="fleet" data-section="fleet">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        { id: "1", brand: "Luxury", name: "Motor Yachts", price: "$500", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-representation-fast-water-vehicle_23-2151048089.jpg?_wi=1" },
        { id: "2", brand: "Exclusive", name: "Mega Yachts", price: "Contact Us", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/summer-terrace-landscape-wooden-building_1203-4725.jpg?_wi=1" },
        { id: "3", brand: "VIP", name: "VIP Yachts", price: "$1200", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/scenic-view-sandy-beach-beach-with-sun-beds-umbrellas-open-against-sea-mountains-hotel-resort-tekirova-kemer-turkey_146671-18877.jpg?_wi=1" },
      ]}
      title="Our Exclusive Fleet"
      description="From sophisticated day cruisers to majestic mega yachts."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        { icon: Sparkles, title: "Yacht Weddings", description: "Unforgettable ceremonies with a stunning sea backdrop." },
        { icon: Award, title: "Birthday Parties", description: "Celebrate in style with full DJ setups and catering." },
        { icon: Waves, title: "Sunset Cruises", description: "Experience the magic of Turkish sunsets on water." },
      ]}
      title="Luxury Experiences & Services"
      description="Custom curated events on the Mediterranean sea."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Our Global Reach"
      tag="Performance"
      metrics={[
        { id: "m1", value: "98%", description: "Client Satisfaction" },
        { id: "m2", value: "450+", description: "Successfully Hosted Events" },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", name: "Sarah Johnson", date: "Oct 2023", title: "Unforgettable", quote: "The best experience on the Aegean sea.", tag: "Wedding", avatarSrc: "http://img.b2bpic.net/free-photo/girl-with-cocktails_1157-8896.jpg" },
        { id: "t2", name: "Michael Chen", date: "Sep 2023", title: "Luxury defined", quote: "Top-tier crew and stunning vessel.", tag: "Holiday", avatarSrc: "http://img.b2bpic.net/free-photo/young-smiling-happy-man-woman-traveling-bicycles-taking-selfie-photo-phone-camera_285396-655.jpg" },
      ]}
      title="Client Reviews"
      description="What our guests say about Best Yachts."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "What's included in the charter?", content: "Our charters include captain, crew, fuel, and premium amenities." },
        { id: "f2", title: "Can I request catering?", content: "Yes, we offer premium catering packages for all yacht types." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/details-yacht-deck-reflection-sky_72229-283.jpg"
      mediaAnimation="slide-up"
      title="Frequently Asked Questions"
      description="Common inquiries about our luxury charters."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={["Teos Marina", "Aegean Yachting", "Riviera Luxury", "Marine Experts"]}
      title="Trusted Partners"
      description="Collaborating with premium marine brands and local marinas."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Ready to Sail?"
      title="Book Your Charter Today"
      description="Get an instant quote or reach out on WhatsApp."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Motor Yachts", href: "#" }, { label: "Mega Yachts", href: "#" }] },
        { items: [{ label: "About", href: "#" }, { label: "Services", href: "#" }] },
      ]}
      logoText="Best Yachts"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
