"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="medium"
        background="noise"
        cardStyle="inset"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "The House",          id: "the-house"},
        {
          name: "Suites",          id: "suites"},
        {
          name: "One Day",          id: "one-day"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="SAKLI"
      bottomLeftText="Kaş, Türkiye"
      bottomRightText="stay@sakli.com"
      button={{
        text: "Enquire",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "plain"
      }}
      title="Above a hidden bay, nine suites keep the light."
      description="An adults-only house of stone and shadow on the Lycian coast. Forty metres above water you can swim in. Open April to November."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/screaming-face-hands-cloth_23-2148019445.jpg",          alt: "Screaming face and hands behind cloth"},
        {
          src: "http://img.b2bpic.net/free-photo/faces-couple-imprinted-fabric_23-2148019490.jpg",          alt: "Faces of couple imprinted on fabric"},
        {
          src: "http://img.b2bpic.net/free-photo/vague-silhouettes-human-faces_23-2148019526.jpg",          alt: "Vague silhouettes of human faces"},
        {
          src: "http://img.b2bpic.net/free-photo/spooky-face-hands-pressing-cloth_23-2148019439.jpg",          alt: "Spooky face and hands pressing to cloth"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-with-professional-make-up-close-up_23-2148932885.jpg",          alt: "Portrait young asian woman with professional make up close up"},
      ]}
      buttons={[
        {
          text: "Enquire",          href: "#contact"},
      ]}
      avatarText="Over 500 guests have found their hidden retreat."
      marqueeItems={[
        {
          type: "text",          text: "Unforgettable Stays"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/simple-travel-logo-template_742173-17619.jpg",          alt: "Simple travel logo template"},
        {
          type: "text",          text: "Mediterranean Serenity"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-vector/travel-logo-collection_23-2148614913.jpg",          alt: "Travel logo collection"},
        {
          type: "text",          text: "Cliffside Luxury"},
      ]}
      marqueeSpeed={25}
      showMarqueeCard={true}
    />
  </div>

  <div id="the-house" data-section="the-house">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",          content: "Built into the cliff, not on top of it."},
        {
          type: "text",          content: "Saklı means hidden. The house sits where the old sponge divers kept their boats, in a fold of the coast you cannot see from the road. Ninety-two stone steps lead down to the water; there is no other way."},
        {
          type: "text",          content: "Suites — Nine | Guests — 18 at most | To the water — 92 steps | Season — April to November | Age — 16 and over"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/lonely-stone-house-with-trees_23-2148249147.jpg",          alt: "Stone architecture built into a cliffside at dusk"
        }
      ]}
    />
  </div>

  <div id="suites" data-section="suites">
      <FeatureCardTen
      animationType="none"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Dawn — 38 m²",          description: "East-facing; first light falls on the bed. A bath carved from a single block of stone. From €380.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/beautiful-dreamy-aesthetic-landscape_23-2151445734.jpg",            imageAlt: "east-facing hotel suite morning light"},
          items: [],
          reverse: false
        },
        {
          title: "Noon — 42 m²",          description: "Deep shade against the midday heat. A private terrace under the carob tree, made for resting. From €410.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698284.jpg",            imageAlt: "private terrace carob tree shade"},
          items: [],
          reverse: true
        },
        {
          title: "Dusk — 45 m²",          description: "The sunset room. West windows the full width of the wall repaint it every evening. From €450.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/red-kayaks-sunset_1258-13.jpg",            imageAlt: "sunset room hotel interior"},
          items: [],
          reverse: false
        },
        {
          title: "Moonlight — 54 m²",          description: "The highest room. A roof bed for clear nights, and the moon's path on the water below. From €520.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-posing-sitting-surfboard-ocean_72229-727.jpg",            imageAlt: "hotel roof bed clear night"},
          items: [],
          reverse: true
        },
      ]}
      title="Rooms named after the light."
      description="Four suites only:"
    />
  </div>

  <div id="one-day" data-section="one-day">
      <MetricCardSeven
      animationType="none"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "swim-breakfast",          value: "07:00",          title: "Swim before breakfast",          items: [
            "The bay belongs to the early. Coffee waits on the lower terrace when you climb back up."],
        },
        {
          id: "boat-coves",          value: "13:00",          title: "Boat to the coves",          items: [
            "Our wooden gulet leaves when you are ready, not on a schedule. Lunch is grilled on board."],
        },
        {
          id: "one-table",          value: "19:30",          title: "One table, eight seats",          items: [
            "The kitchen cooks a single menu from whatever the Kaş market had that morning."],
        },
        {
          id: "night-swim",          value: "23:00",          title: "The night swim",          items: [
            "On moonless nights the bay glows where you move. We leave towels and a lantern on the steps."],
        },
      ]}
      title="The hours decide for you."
      description="A curated flow for immersion and discovery."
      tag="A DAY AT SAKLI"
    />
  </div>

  <div id="recognition" data-section="recognition">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Condé Nast Traveler",        "Architectural Digest",        "World Travel Awards",        "Luxury Lifestyle",        "National Geographic"]}
      title="Recognized Excellence"
      description="Praised by leading travel publications and architectural critics for our unique design and unforgettable experiences."
      tag="ACCOLADES"
    />
  </div>

  <div id="quote" data-section="quote">
      <TestimonialCardSixteen
      animationType="none"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Guest book, September",          role: "Previous Guest",          company: "Sakli",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/shadow-leaves-blue-surface_23-2151988772.jpg"},
        {
          id: "2",          name: "Evelyn K.",          role: "Travel Blogger",          company: "Luxury Escapes",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-woman-looking-camera_23-2148092897.jpg"},
        {
          id: "3",          name: "Marcus T.",          role: "Photographer",          company: "World Views",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/girl-nude-face-steam-blure-shadow_114579-9287.jpg"},
        {
          id: "4",          name: "Sophia L.",          role: "Architect",          company: "Design Studio",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/bw-crowded-with-prism-kaleidoscope-effect_53876-126896.jpg"},
        {
          id: "5",          name: "Liam R.",          role: "Writer",          company: "Wanderlust Mag",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/terrifying-hand-silhouettes-studio_23-2150711060.jpg"},
      ]}
      kpiItems={[
        {
          value: "92%",          label: "Repeat Bookings"},
        {
          value: "5",          label: "Star Rating"},
        {
          value: "Luxury",          label: "Experience"},
      ]}
      title="Guest Reflections"
      description="“We came for three nights and stayed for nine. The sea glowed, and so did we.”"
      tag="WHAT GUESTS SAY"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain"
      }}
      tag="Direct Bookings"
      title="Nine rooms, one bay."
      description="Email stay@sakli.com. Replies within a day."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Stay",          items: [
            {
              label: "Enquire",              href: "#contact"},
            {
              label: "The House",              href: "#the-house"},
            {
              label: "Suites",              href: "#suites"},
            {
              label: "One Day",              href: "#one-day"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Instagram",              href: "https://instagram.com/sakli"},
            {
              label: "Journal",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="SAKLI"
      bottomRightText="Kaş, Antalya, Türkiye"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}