"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Coffee, Map, Navigation } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="floatingGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Menu",
          id: "dishes",
        },
        {
          name: "Experience",
          id: "terrace",
        },
        {
          name: "Location",
          id: "location",
        },
      ]}
      brandName="Café Restaurant Terrasse Jardin Farkla"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Café Restaurant Terrasse Jardin Farkla"
      description="A hidden oasis in Tinjdad. Experience authentic Berber hospitality and homemade Moroccan cuisine under the desert stars."
      buttons={[
        {
          text: "Reserve a Table",
          href: "#contact",
        },
        {
          text: "View Menu",
          href: "#dishes",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-blagoveshchensky-bridge-morning_1398-2788.jpg",
          imageAlt: "Cinematic moroccan terrace sunset view",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/seascape-with-reflecting-sky-sun-sets-city-near-mountains_169016-9951.jpg",
          imageAlt: "Luxurious moroccan restaurant rooftop atmosphere",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/sunset-santorini-modern-balcony-design-generated-by-ai_188544-34086.jpg",
          imageAlt: "Sunset over Santorini modern balcony design",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/traditional-house-architecture_23-2151050981.jpg",
          imageAlt: "Traditional house architecture",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/luxury-holiday-home_23-2151918223.jpg",
          imageAlt: "Luxury holiday home",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "The Heart of Berber Hospitality",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/side-view-wild-berries-clay-pot-table_141793-3800.jpg",
          alt: "Owner Mohammed at his oasis",
        },
      ]}
    />
  </div>

  <div id="dishes" data-section="dishes">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Kefta Tajine",
          price: "Homemade",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-silver-teapot-with-golden-glasses_181624-9065.jpg",
        },
        {
          id: "p2",
          name: "Traditional Berber Bread",
          price: "Fresh",
          imageSrc: "http://img.b2bpic.net/free-photo/hand-pouring-tea-into-glass_23-2147796766.jpg",
        },
        {
          id: "p3",
          name: "Moroccan Tea",
          price: "Traditional",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-fresh-bread-with-eggs-milk-dark-background-cake-pie-tea-sugar-bun-bake-biscuit-breakfast-dough_179666-46666.jpg",
        },
        {
          id: "p4",
          name: "Turkey Tajine",
          price: "Authentic",
          imageSrc: "http://img.b2bpic.net/free-photo/tea-concept-arab-restaurant_23-2147796954.jpg",
        },
        {
          id: "p5",
          name: "Vegetarian Tajine",
          price: "Organic",
          imageSrc: "http://img.b2bpic.net/free-photo/greenies-qutab-greens-herbs-dough-cook-brown-wood-rustic-desk_140725-14966.jpg",
        },
        {
          id: "p6",
          name: "Fresh Salad",
          price: "Garden",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-pouring-tea-teacup-using-strainer_23-2148567572.jpg",
        },
      ]}
      title="Signature Flavors"
      description="From our organic garden to your plate, savor the essence of Morocco."
    />
  </div>

  <div id="terrace" data-section="terrace">
      <FeatureBento
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Rooftop Terrace",
          description: "Unmatched desert horizon views.",
          bentoComponent: "media-stack",
          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/pensee-royal-azur-tourist-resort-pools_1385-3083.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-pillow-sofa_74190-2066.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-tea-cups-with-oriental-pattern-traditional-azerbaijani-sweetness-shekerbura-floral-wall_140725-12845.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-blagoveshchensky-bridge-morning_1398-2788.jpg",
          imageAlt: "rooftop terrace view at sunset tinjdad",
        },
      ]}
      title="A Garden Oasis"
      description="Escape the desert heat on our panoramic rooftop terrace."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="depth-3d"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah & Mark",
          role: "Travelers",
          company: "Road Trip Morocco",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/friends-toasting-with-glasses-wine-eating-barbeque-outdoor-party_23-2149366197.jpg",
        },
        {
          id: "2",
          name: "Thomas Dubois",
          role: "Photographer",
          company: "Global Explorers",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-using-smartphone-cafe_1170-719.jpg",
        },
        {
          id: "3",
          name: "Elena Martinez",
          role: "Foodie",
          company: "Sahara Tours",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/brazilian-family-enjoying-meal-together_23-2151156178.jpg",
        },
        {
          id: "4",
          name: "David W.",
          role: "Backpacker",
          company: "Desert Wanderer",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/muslim-woman-pouring-tea_23-2147796720.jpg",
        },
        {
          id: "5",
          name: "Anna K.",
          role: "Designer",
          company: "Creative Journeys",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-spending-time-outdoors_23-2150494479.jpg",
        },
      ]}
      title="Unforgettable Journeys"
      description="Voices from travelers who discovered our hidden gem."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="split-description"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "g1",
          name: "Sunset Dining",
          price: "Atmosphere",
          imageSrc: "http://img.b2bpic.net/free-photo/terracotta-vase-with-indigenous-pattern_23-2151585694.jpg",
        },
        {
          id: "g2",
          name: "Traditional Decor",
          price: "Culture",
          imageSrc: "http://img.b2bpic.net/free-photo/north-arabic-interior-living-decoration_1203-6347.jpg",
        },
        {
          id: "g3",
          name: "Fresh Tea",
          price: "Experience",
          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-concept-with-close-up-tea_23-2147791840.jpg",
        },
        {
          id: "g4",
          name: "Garden Fresh",
          price: "Organic",
          imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-composition-with-teapot-cup-tea-candles-knitted-element_169016-49261.jpg",
        },
        {
          id: "g5",
          name: "Tajine Detail",
          price: "Traditional",
          imageSrc: "http://img.b2bpic.net/free-photo/pumpkin-with-bow-ancient-kettle-marble_114579-30203.jpg",
        },
        {
          id: "g6",
          name: "Desert View",
          price: "Peaceful",
          imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-tea-tiny-cup-high-view_23-2148444084.jpg",
        },
      ]}
      title="The Art of Farkla"
      description="Moments of peace, culture, and flavor."
    />
  </div>

  <div id="location" data-section="location">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "Merzouga",
          title: "Sahara Gateway",
          description: "An essential stop on your desert route.",
          icon: Map,
        },
        {
          id: "m2",
          value: "Todra",
          title: "Gorge Route",
          description: "Refuel with authentic Moroccan hospitality.",
          icon: Navigation,
        },
        {
          id: "m3",
          value: "Tinjdad",
          title: "Oasis Oasis",
          description: "A hidden culinary destination.",
          icon: Coffee,
        },
      ]}
      title="Your Stop in Tinjdad"
      description="Perfectly positioned between the Sahara and the Atlas."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Ready to experience genuine Moroccan family hospitality? Mohammed and the team look forward to welcoming you home."
      buttons={[
        {
          text: "WhatsApp Reservation",
          href: "https://wa.me/yournumber",
        },
        {
          text: "Reserve Now",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Café Restaurant Terrasse Jardin Farkla"
      columns={[
        {
          title: "Explore",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Our Menu",
              href: "#dishes",
            },
            {
              label: "The Terrace",
              href: "#terrace",
            },
          ],
        },
        {
          title: "Reservations",
          items: [
            {
              label: "WhatsApp",
              href: "#",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Get Directions",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
