"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="inset"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Packages",
          id: "#packages",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Nosok Hajj & Umrah"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Your Trusted Hajj & Umrah Partner in Qatar"
      description="Seamless spiritual journeys with premium service, care, and reliability."
      testimonials={[
        {
          name: "Mohamed Adel",
          handle: "@traveler",
          testimonial: "Highly professional company that handled everything perfectly.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-making-selfie_23-2147767357.jpg",
        },
        {
          name: "Nauman",
          handle: "@traveler",
          testimonial: "Everything was arranged with speed and reliability.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-business-man-standing-office-cafe-leaning-counter-holding-jacket-shoulder-showing-thumb-up-like_74855-10007.jpg",
        },
        {
          name: "Aslam",
          handle: "@traveler",
          testimonial: "Excellent service. Very professional and caring team.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/blissful-young-man-trendy-sunglasses-posing-with-smile-hiking-trip-italian-alps-showing-peace-sign_197531-4385.jpg",
        },
        {
          name: "AJ Aldous",
          handle: "@traveler",
          testimonial: "Best hotel rates near Makkah with excellent support.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-with-beautiful-smile_23-2148336915.jpg",
        },
        {
          name: "Khaled S.",
          handle: "@traveler",
          testimonial: "A truly seamless spiritual journey. Highly recommended.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-happy-young-man-dancing-white-t-shirt-grey-wall_176420-21702.jpg",
        },
      ]}
      buttons={[
        {
          text: "Book Your Umrah",
          href: "#packages",
        },
        {
          text: "Contact on WhatsApp",
          href: "https://wa.me/97450900567",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-architecture-through-little-hole-window-fence_181624-531.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/successful-businessman_1098-18155.jpg",
          alt: "Client 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-taking-selfie_23-2148586166.jpg",
          alt: "Client 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiley-businesswoman-taking-selfie-city_23-2148767021.jpg",
          alt: "Client 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-florist-posing-smiling-flowers_176420-2057.jpg",
          alt: "Client 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-businessman-library_1262-2398.jpg",
          alt: "Client 5",
        },
      ]}
      avatarText="Trusted by 5,000+ satisfied pilgrims"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="About Nosok Hajj and Umrah"
      buttons={[
        {
          text: "Learn More",
          href: "#contact",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Hajj Packages",
          description: "Expertly guided Hajj journeys with luxury amenities.",
          buttonIcon: "Plane",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-world-tourism-day-concept_23-2148608818.jpg",
        },
        {
          title: "Umrah Packages",
          description: "Customized Umrah packages for families and individuals.",
          buttonIcon: "Heart",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-travel-icon-with-airplane_23-2151037378.jpg",
        },
        {
          title: "Visa Processing",
          description: "Fast and reliable visa assistance for Qatar residents.",
          buttonIcon: "CheckCircle",
          imageSrc: "http://img.b2bpic.net/free-vector/ecology-elements-black-line-icon_1057-10033.jpg",
        },
        {
          title: "VIP Transportation",
          description: "Seamless private transfers and Haramain train bookings.",
          buttonIcon: "Train",
          imageSrc: "http://img.b2bpic.net/free-vector/electric-train-line-art-sticker_271628-498.jpg",
        },
      ]}
      title="Our Premium Services"
      description="Comprehensive travel and pilgrimage support for guests of the Most Merciful."
    />
  </div>

  <div id="packages" data-section="packages">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "economy",
          badge: "Economy",
          price: "From QAR 3,500",
          subtitle: "Affordable Umrah",
          features: [
            "3-Star Hotel",
            "Bus Transfers",
            "Visa Help",
          ],
        },
        {
          id: "premium",
          badge: "Premium",
          price: "From QAR 6,200",
          subtitle: "Comfort Focused",
          features: [
            "4-Star Hotel",
            "Train Tickets",
            "Guidance",
          ],
        },
        {
          id: "vip",
          badge: "VIP",
          price: "From QAR 9,500",
          subtitle: "Luxury Journey",
          features: [
            "5-Star Hotel",
            "Private Car",
            "VIP Guide",
          ],
        },
      ]}
      title="Featured Pilgrimage Packages"
      description="Choose the journey that suits your spiritual needs."
    />
  </div>

  <div id="why" data-section="why">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "300+",
          title: "Verified Reviews",
          description: "Genuine feedback from happy clients.",
          imageSrc: "http://img.b2bpic.net/free-photo/famous-abu-dhabi-sheikh-zayed-mosque-by-night-uae_268835-1068.jpg",
        },
        {
          id: "m2",
          value: "4.6★",
          title: "Google Rating",
          description: "Consistently high standards.",
          imageSrc: "http://img.b2bpic.net/free-photo/luxury-architecture-exterior-design_23-2151920926.jpg",
        },
        {
          id: "m3",
          value: "10k+",
          title: "Pilgrims Served",
          description: "Trusted spiritual partners.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-holding-their-backpaks-up_23-2148714937.jpg",
        },
      ]}
      title="Why Choose Nosok"
      description="Trusted by thousands of pilgrims in Doha."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Mohamed Adel",
          role: "Pilgrim",
          company: "Nosok Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-women-posing-pointing-fingers-camera-while-sitting-table-with-coffee-cups-documents_74855-9959.jpg",
        },
        {
          id: "t2",
          name: "Nauman",
          role: "Pilgrim",
          company: "Nosok Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-old-man-with-tablet_23-2148997187.jpg",
        },
        {
          id: "t3",
          name: "Aslam",
          role: "Pilgrim",
          company: "Nosok Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",
        },
        {
          id: "t4",
          name: "AJ Aldous",
          role: "Pilgrim",
          company: "Nosok Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-caucasian-traveler-man-with-straw-beach-hat-with-backpack-standing-sideways-pretending-run-isolated-purple-wall-with-copy-space_141793-106447.jpg",
        },
        {
          id: "t5",
          name: "Khaled S.",
          role: "Pilgrim",
          company: "Nosok Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1675.jpg",
        },
      ]}
      title="What Our Clients Say"
      description="Trusted by families across Qatar."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <FeatureCardTwentySix
      textboxLayout="inline-image"
      useInvertedBackground={false}
      features={[
        {
          title: "Masjid Al Haram",
          description: "View of the holy site.",
          imageSrc: "http://img.b2bpic.net/free-photo/night-covers-beautiful-shekh-zayed-grand-mosque-illuminated-with-yellow-lights_1304-3216.jpg",
          buttonIcon: "Camera",
        },
        {
          title: "Luxury Hotels",
          description: "Comfortable accommodation.",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-minimal-scandinavian-wood-walk-closet-with-wardrobe_105762-2300.jpg",
          buttonIcon: "Bed",
        },
        {
          title: "Travel Team",
          description: "Our support in action.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-male-priest-woman-talking-church-while-holding-bible_23-2149298378.jpg",
          buttonIcon: "Users",
        },
        {
          title: "Haramain Train",
          description: "Fast transfers.",
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065384.jpg",
          buttonIcon: "Train",
        },
      ]}
      title="Gallery & Moments"
      description="Highlights from our recent pilgrimage groups."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in touch"
      title="Start Your Spiritual Journey"
      description="We are ready to assist with your Hajj or Umrah planning. WhatsApp or visit us today."
      buttons={[
        {
          text: "WhatsApp Consultation",
          href: "https://wa.me/97450900567",
        },
        {
          text: "Email Inquiry",
          href: "mailto:info@nosok-hajj.qa",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Services",
              href: "#services",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "+974 5090 0567",
              href: "tel:+97450900567",
            },
            {
              label: "Al Markazy, Doha, Qatar",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Nosok Hajj and Umrah."
      bottomRightText="Serving the Guests of Rahman with Care & Excellence"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
