"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, Smile, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="medium"
        background="circleGradient"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "الرئيسية",
          id: "hero",
        },
        {
          name: "عن الفندق",
          id: "about",
        },
        {
          name: "المرافق",
          id: "features",
        },
        {
          name: "الغرف",
          id: "products",
        },
        {
          name: "تواصل معنا",
          id: "contact",
        },
      ]}
      brandName="Mira Hotel"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars",
      }}
      title="فندق ميرا: وجهتك للرفاهية والاسترخاء"
      description="استمتع بتجربة إقامة استثنائية في قلب المدينة، حيث يلتقي الرقي بالخدمة الراقية لنقدم لك ذكريات لا تُنسى."
      kpis={[
        {
          value: "٥ نجوم",
          label: "تصنيف فندقي",
        },
        {
          value: "٢٤/٧",
          label: "خدمة عملاء",
        },
        {
          value: "١٠٠+",
          label: "غرفة فاخرة",
        },
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/elegant-black-minimal-interior-design_23-2151913264.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-young-woman-checking-her-phone_23-2149429382.jpg",
          alt: "Happy guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/black-hair-sexy-woman-glasses-coat-posed-against-building-with-modern-windows_627829-8622.jpg",
          alt: "Satisfied visitor",
        },
        {
          src: "http://img.b2bpic.net/free-photo/fashionable-young-woman-grey-coat-hat-walking-street-city-centre-smiling-true-emotions-stylish-lifestyle-luxury-clothes-elegant-look_197531-1885.jpg",
          alt: "Relaxed traveler",
        },
        {
          src: "http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692227.jpg",
          alt: "Content guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-funny-brunette-woman-wears-straw-hat-poses-selfie-shows-tongue-drinks-refreshing-cocktail-stands-against-cafe-interior-beautiful-young-female-model-enjoys-summer-holiday_273609-2356.jpg",
          alt: "Smiling tourist",
        },
      ]}
      avatarText="أكثر من ٥٠٠٠ ضيف سعيد"
      marqueeItems={[
        {
          type: "text",
          text: "خدمة ٥ نجوم",
        },
        {
          type: "text",
          text: "موقع مركزي",
        },
        {
          type: "text",
          text: "تصميم كلاسيكي",
        },
        {
          type: "text",
          text: "إفطار فاخر",
        },
        {
          type: "text",
          text: "نادي صحي",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="فلسفة الضيافة في ميرا"
      description="نحن نؤمن بأن الفندق هو أكثر من مجرد مكان للنوم؛ إنه ملاذ للراحة والإلهام. تم تصميم كل ركن في ميرا ليوفر لك الهدوء الذي تستحقه."
      imageSrc="http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692255.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "مسبح خارجي",
          descriptions: [
            "مسبح محاط بحدائق غناء للاسترخاء",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-chairs-hotel-landscape-sky_1203-4616.jpg",
        },
        {
          id: "f2",
          title: "سبا فاخر",
          descriptions: [
            "جلسات مساج وعلاجات استرخائية",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2810.jpg",
        },
        {
          id: "f3",
          title: "نادي رياضي",
          descriptions: [
            "تجهيزات رياضية حديثة ومتكاملة",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/dumbbell-lifestyle-active-athletic-sporty_1303-524.jpg",
        },
        {
          id: "f4",
          title: "مطعم عالمي",
          descriptions: [
            "أشهى الأطباق بلمسة محلية",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-relax-smile-leisure-vacation-around-swimming-pool-resort-hotel_74190-14520.jpg",
        },
        {
          id: "f5",
          title: "خدمة الغرف",
          descriptions: [
            "خدمة متاحة على مدار الساعة",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-hotel-swimming-pool-resort-with-umbrella-chair_1339-4241.jpg",
        },
      ]}
      title="خدماتنا المميزة"
      description="نوفر مجموعة واسعة من المرافق لضمان راحتكم الكاملة طوال فترة إقامتكم."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "الجناح الملكي",
          price: "٩٠٠ ر.س",
          rating: 5,
          reviewCount: "٥٠",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2063.jpg",
        },
        {
          id: "p2",
          name: "جناح الأعمال",
          price: "٦٠٠ ر.س",
          rating: 4,
          reviewCount: "٣٠",
          imageSrc: "http://img.b2bpic.net/free-photo/mix-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160128.jpg",
        },
        {
          id: "p3",
          name: "غرفة مزدوجة",
          price: "٤٠٠ ر.س",
          rating: 4,
          reviewCount: "٢٠",
          imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-with-cereals_23-2148877646.jpg",
        },
        {
          id: "p4",
          name: "غرفة ديلوكس",
          price: "٥٥٠ ر.س",
          rating: 5,
          reviewCount: "٤٥",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326546.jpg",
        },
        {
          id: "p5",
          name: "جناح العائلة",
          price: "٨٠٠ ر.س",
          rating: 5,
          reviewCount: "٣٥",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bed-arrangement-with-magazine-mug_23-2150326158.jpg",
        },
        {
          id: "p6",
          name: "غرفة كلاسيكية",
          price: "٣٠٠ ر.س",
          rating: 4,
          reviewCount: "١٥",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-after-waking-up_1163-1473.jpg",
        },
      ]}
      title="أجنحتنا وغرفنا"
      description="اختر الغرفة التي تناسب ذوقك وتطلعاتك في فندق ميرا."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Star,
          title: "تقييم العملاء",
          value: "٤.٩/٥",
        },
        {
          id: "m2",
          icon: Award,
          title: "جوائز التميز",
          value: "١٢",
        },
        {
          id: "m3",
          icon: Smile,
          title: "ضيوف سعداء",
          value: "١٠٠٠٠+",
        },
      ]}
      title="أرقامنا في عام"
      description="نفخر بثقة ضيوفنا الكرام خلال رحلتنا."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "محمد العتيبي",
          handle: "@mohammed",
          testimonial: "تجربة رائعة وفندق مميز بكل معنى الكلمة.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-blonde-with-blue-suitcase-sitting-chair-near-cafe-purple-pullover-jeans-makeup-hair-style-emotions-autumn-blonde-happy-knitted-smiling-model-beauty_343629-42.jpg",
        },
        {
          id: "t2",
          name: "سارة الراجحي",
          handle: "@sarah",
          testimonial: "الخدمة كانت استثنائية ونظافة المكان لا توصف.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-tablet-hotel-room_23-2148095197.jpg",
        },
        {
          id: "t3",
          name: "خالد المنصور",
          handle: "@khalid",
          testimonial: "فندق هادئ ومريح جداً، سأكرر الزيارة حتماً.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/group-young-three-stylish-friends-posing-street-fashion-man-two-cute-girls-dressed-casual-summer-clothes-smiling-models-having-fun-sunglasses-cheerful-women-guy-outdoors_158538-16325.jpg",
        },
        {
          id: "t4",
          name: "ليلى الفهد",
          handle: "@layla",
          testimonial: "موقع الفندق مثالي وقريب من كل شيء.",
          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280708.jpg",
        },
        {
          id: "t5",
          name: "أحمد العمري",
          handle: "@ahmed",
          testimonial: "طاقم العمل متعاون جداً والابتسامة لا تفارقهم.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-holding-orange-juice-cafe-with-man-background_1170-551.jpg",
        },
      ]}
      showRating={true}
      title="تجربة ضيوفنا"
      description="ماذا يقول النزلاء عن إقامتهم في ميرا؟"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "ما هو وقت تسجيل الوصول؟",
          content: "تسجيل الوصول يبدأ من الساعة ٣ مساءً.",
        },
        {
          id: "q2",
          title: "هل يتوفر واي فاي مجاني؟",
          content: "نعم، نوفر واي فاي عالي السرعة في كافة مرافق الفندق.",
        },
        {
          id: "q3",
          title: "هل الفندق صديق للعائلات؟",
          content: "بكل تأكيد، فندقنا مصمم لاستقبال العائلات وتوفير كافة احتياجاتهم.",
        },
      ]}
      title="أسئلة شائعة"
      description="نحن هنا للإجابة على كافة استفساراتكم لضمان راحتكم."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/interior-modern-comfortable-hotel-room_1232-1822.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      tag="احجز إقامتك الآن"
      title="نحن في انتظارك"
      description="تواصل معنا للاستفسار أو لإتمام عملية الحجز بكل سهولة."
      imageSrc="http://img.b2bpic.net/free-photo/hotel-guest-getting-access-room-card_482257-76274.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Mira Hotel"
      columns={[
        {
          title: "حول ميرا",
          items: [
            {
              label: "عنا",
              href: "#about",
            },
            {
              label: "سياسة الخصوصية",
              href: "#",
            },
          ],
        },
        {
          title: "اتصل بنا",
          items: [
            {
              label: "الاستعلامات",
              href: "#contact",
            },
            {
              label: "الموقع",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© ٢٠٢٤ فندق ميرا. جميع الحقوق محفوظة."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}