"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Phone, Mountain, ChefHat, Smile } from "lucide-react";

export default function HvacPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            brandName="مطعم بانوراما الجبال"
            navItems={[
              { name: "القائمة", id: "services" },
              { name: "عنّا", id: "about" },
              { name: "آراء الزوار", id: "testimonials" },
              { name: "اتصل بنا", id: "contact" }
            ]}
            button={{ text: "احجز طاولتك", href: "#contact" }}
            animateOnLoad={false}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlay
            title="مطعم بانوراما الجبال: حيث تلتقي النكهة الرائعة بالجمال الطبيعي في الزرقاء"
            description="استمتع بتجربة طعام لا تُنسى مع إطلالات خلابة على الجبال المحيطة. أطباقنا الأصيلة والمبتكرة تنتظرك."
            buttons={[
              { text: "تصفح القائمة", href: "#services" },
              { text: "احجز طاولتك الآن", href: "#contact" }
            ]}
            buttonAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-photo/wooden-letter-m_1232-702.jpg"
            imageAlt="منظر بانورامي لمطعم مطل على الجبال"
            showDimOverlay={true}
          />
        </div>

        <div id="about" data-section="about">
          <MetricSplitMediaAbout
            tag="عنّا"
            title="تجربة طعام استثنائية في قلب الزرقاء"
            description="منذ عام 2010، يقدم مطعم بانوراما الجبال لزواره تجربة طعام فريدة تجمع بين الأجواء الساحرة والأطباق الشهية. نحن نؤمن بتقديم المأكولات الأصيلة المحضرة من أجود المكونات المحلية، مع خدمة دافئة وودودة تليق بكم."
            metrics={[
              {
                value: "15+",                title: "عاماً من الخبرة"
              },
              {
                value: "100K+",                title: "زائر سعيد"
              }
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/dripping-paint-letter-l_23-2148185102.jpg"
            imageAlt="تصميم داخلي لمطعم بانوراما الجبال مع إطلالة"
            mediaAnimation="slide-up"
            metricsAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>
        <div id="services" data-section="services">
          <FeatureCardOne
            title="قائمة طعامنا الشهية"
            description="مزيج من الأطباق التقليدية والعصرية، مُعدة بعناية لترضي جميع الأذواق."
            buttons={[{ text: "احجز طاولتك", href: "#contact" }]}
            buttonAnimation="slide-up"
            features={[
              {
                title: "الأطباق الرئيسية",                description: "استمتع بمجموعة متنوعة من الأطباق الرئيسية، من المشاوي الطازجة إلى المأكولات البحرية اللذيذة.",                imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter-p_53876-63693.jpg",                imageAlt: "أطباق رئيسية متنوعة"
              },
              {
                title: "المقبلات والشوربات",                description: "ابدأ وجبتك بمقبلات شهية وشوربات دافئة محضرة يومياً.",                imageSrc: "http://img.b2bpic.net/free-photo/rag-doll-with-symbol_1156-146.jpg",                imageAlt: "مقبلات و شوربات شهية"
              },
              {
                title: "السلطات الطازجة",                description: "استمتع بتشكيلة واسعة من السلطات الطازجة والصحية، المحضرة من خضروات الموسم.",                imageSrc: "http://img.b2bpic.net/free-photo/fantastic-mosque-architecture-islamic-new-year-celebration_23-2151457419.jpg",                imageAlt: "سلطات طازجة متنوعة"
              },
              {
                title: "الحلويات والمشروبات",                description: "اختتم وجبتك بتحلية مميزة أو استمتع بمشروباتنا المنعشة والساخنة.",                imageSrc: "http://img.b2bpic.net/free-photo/dripping-paint-letter-b_23-2148185115.jpg",                imageAlt: "حلويات ومشروبات منعشة"
              },
              {
                title: "قائمة الأطفال",                description: "أطباق خاصة مُعدة بحب لأصدقائنا الصغار.",                imageSrc: "http://img.b2bpic.net/free-photo/modelling-clay-network-tower_23-2148295806.jpg",                imageAlt: "قائمة طعام للأطفال"
              },
              {
                title: "وجبات الإفطار",                description: "ابدأ يومك بوجبة إفطار شهية مع إطلالة لا مثيل لها.",                imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-letter-u_1187-2117.jpg",                imageAlt: "وجبات إفطار متنوعة"
              }
            ]}
            gridVariant="uniform-all-items-equal"
            uniformGridCustomHeightClasses="aspect-square"
            gridClassName="md:!grid-cols-3"
            carouselThreshold={7}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
        <FeatureBorderGlow
          title="لماذا تختار مطعم بانوراما الجبال؟"
          description="ما يميزنا ويجعل تجربتك لا تُنسى."
          features={[
            {
              icon: Mountain,
              title: "إطلالة ساحرة",              description: "استمتع بمناظر طبيعية خلابة لجبال الزرقاء أثناء تناول طعامك."
            },
            {
              icon: ChefHat,
              title: "نكهات أصيلة",              description: "أطباق معدة بعناية من أجود المكونات الطازجة والوصفات الأصيلة."
            },
            {
              icon: Smile,
              title: "خدمة مميزة",              description: "فريق عمل ودود ومحترف لضمان تجربة طعام مريحة وممتعة."
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />

        <FeatureCardEight
          title="تجربة طعامك لدينا خطوة بخطوة"
          description="لنجعل زيارتك أسهل وأمتع."
          features={[
            {
              title: "ترحيب حار",              description: "يستقبلك فريقنا بابتسامة ويرافقك إلى طاولتك المختارة.",              imageSrc: "http://img.b2bpic.net/free-photo/realistic-r-letter-with-plants_23-2150458493.jpg",              imageAlt: "استقبال الضيوف في المطعم"
            },
            {
              title: "اكتشف قائمتنا",              description: "استعرض قائمتنا الغنية بالأطباق المتنوعة واختر ما يناسب ذوقك.",              imageSrc: "http://img.b2bpic.net/free-photo/male-cook-showing-stop-gesture-shirt-apron-looking-strict-front-view_176474-22497.jpg",              imageAlt: "تصفح قائمة الطعام"
            },
            {
              title: "استمتع بوجبتك",              description: "نقدم لك أطباقك الطازجة والمحضرة بعناية لتستمتع بكل لقمة.",              imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-letter_53876-63663.jpg",              imageAlt: "ضيوف يستمتعون بوجبتهم"
            },
            {
              title: "شاركنا رأيك",              description: "نحن نقدر رأيك! شاركنا تجربتك لمساعدتنا على التحسين الدائم.",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-letter-l_53876-47227.jpg",              imageAlt: "العملاء يقدمون ملاحظاتهم"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            title="ماذا يقول زوارنا عنّا"
            description="آراء وشهادات من ضيوفنا الكرام."
            testimonials={[
              {
                id: "1",                name: "أحمد خالد",                handle: "عائلة العبدلات، الزرقاء",                testimonial: "المكان رائع جداً، الإطلالة خرافية والطعام لا يعلى عليه. بالتأكيد سنعود مرة أخرى!",                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4lj03",                imageAlt: "صورة زبون أحمد خالد"
              },
              {
                id: "2",                name: "ليلى علي",                handle: "سيدة أعمال، عمان",                testimonial: "أجواء المطعم هادئة ومريحة، مثالية لاجتماعات العمل أو عشاء رومانسي. الخدمة كانت ممتازة.",                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rg0af6",                imageAlt: "صورة زبونة ليلى علي"
              },
              {
                id: "3",                name: "محمد سعيد",                handle: "زائر، إربد",                testimonial: "تجربة مميزة بكل معنى الكلمة. من جودة الطعام إلى جمال المكان، كل شيء كان متقناً. أنصح به بشدة.",                rating: 5,
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ehz0rm",                imageAlt: "صورة زبون محمد سعيد"
              }
            ]}
            showRating={true}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
        <div id="faq" data-section="faq">
          <FaqSplitText
            sideTitle="أسئلة متكررة"
            buttons={[{ text: "اتصل بنا", href: "#contact" }]}
            buttonAnimation="slide-up"
            faqsAnimation="slide-up"
            textPosition="left"
            useInvertedBackground={false}
            faqs={[
              {
                id: "1",                title: "هل أحتاج إلى حجز مسبق؟",                content: "يُنصح بالحجز المسبق خاصة في عطلات نهاية الأسبوع والأعياد لضمان توفر الطاولة المفضلة لديك، خصوصاً إذا كنت ترغب في طاولة بإطلالة."
              },
              {
                id: "2",                title: "ما هي ساعات عمل المطعم؟",                content: "نحن نفتح أبوابنا يومياً من الساعة 9 صباحاً حتى الساعة 12 منتصف الليل."
              },
              {
                id: "3",                title: "ما هو موقع المطعم تحديداً في الزرقاء؟",                content: "يقع مطعم بانوراما الجبال في منطقة حيوية مطلة على جبال الزرقاء. يمكنك العثور على الموقع الدقيق على خرائط جوجل من خلال الرابط في قسم الاتصال."
              },
              {
                id: "4",                title: "هل توفرون خيارات طعام للنباتيين أو لمن لديهم حساسيات؟",                content: "نعم، لدينا خيارات متنوعة للنباتيين ويسعدنا تلبية طلباتكم الخاصة قدر الإمكان بخصوص الحساسيات الغذائية. يرجى إبلاغ فريق العمل عند الطلب."
              },
              {
                id: "5",                title: "هل يمكن استضافة مناسبات خاصة أو حفلات؟",                content: "بالتأكيد! مطعم بانوراما الجبال هو المكان المثالي لمناسباتكم الخاصة. يرجى الاتصال بنا لمناقشة التفاصيل وترتيب حجز قاعتنا."
              }
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            tag="تواصل معنا"
            tagIcon={Phone}
            title="نحن هنا لخدمتكم!"
            description="للحجز، الاستفسارات، أو لتنظيم مناسبة خاصة، لا تترددوا في الاتصال بنا. فريقنا مستعد للمساعدة."
            buttons={[
              { text: "احجز طاولتك الآن", href: "tel:+9627XXXXXXXX" },
              { text: "تصفح الموقع على الخريطة", href: "https://maps.app.goo.gl/ZarqaRestaurantLocation" }
            ]}
            background={{ variant: "plain" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            logoText="بانوراما الجبال"
            imageSrc="http://img.b2bpic.net/free-photo/letter-l-blue-color_1232-686.jpg"
            imageAlt="منظر ليلي لمطعم بانوراما الجبال"
            columns={[
              {
                title: "القائمة",                items: [
                  { label: "الأطباق الرئيسية", href: "#services" },
                  { label: "المقبلات", href: "#services" },
                  { label: "الحلويات", href: "#services" },
                  { label: "المشروبات", href: "#services" }
                ]
              },
              {
                title: "الشركة",                items: [
                  { label: "عنّا", href: "#about" },
                  { label: "آراء الزوار", href: "#testimonials" },
                  { label: "الأسئلة المتكررة", href: "#faq" },
                  { label: "اتصل بنا", href: "#contact" }
                ]
              },
              {
                title: "تواصل معنا",                items: [
                  { label: "+962 7XXXXXXXX", href: "tel:+9627XXXXXXXX" },
                  { label: "info@panoramamountains.com", href: "mailto:info@panoramamountains.com" },
                  { label: "الزرقاء، الأردن" }
                ]
              }
            ]}
            copyrightText="© 2024 | مطعم بانوراما الجبال"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}