"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Award, CheckCircle, Star, Waves } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Menu",
          id: "#menu",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="El Kahina"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Une expérience marine unique"
      description="Découvrez la fraîcheur authentique de la mer Méditerranée au cœur d'Aïn Bénian. Chez El Kahina, votre poisson est choisi à la source."
      buttons={[
        {
          text: "Voir le Menu",
          href: "#menu",
        },
        {
          text: "Réserver",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-view-asian-dish_23-2147681089.jpg?_wi=1"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/jam-sliced-bread-sliced-egg-cucumber-plate-burlap-napkin-blue_114579-42463.jpg",
          alt: "Client satisfied 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/lavash-baked-drumsticks-pepper-plate-sauce-bowls-blue-background_114579-45634.jpg",
          alt: "Client satisfied 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/wooden-plate-fresh-chopped-various-vegetables-towel_114579-86390.jpg",
          alt: "Client satisfied 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/lobster-with-parsley-round-white-plate-near-other-dishes_181624-3250.jpg",
          alt: "Client satisfied 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/people-cheering-with-wine-glasses-luxurious-restaurant_23-2150517422.jpg",
          alt: "Client satisfied 5",
        },
      ]}
      avatarText="Plus de 1000 gourmets convaincus"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="La fraîcheur en direct"
      description="Chez El Kahina, nous privilégions l'authenticité. De notre aquarium de langoustes à votre assiette, vivez une expérience marine inégalée où la qualité est une promesse."
      bulletPoints={[
        {
          title: "Arrivage Quotidien",
          description: "Sélection rigoureuse des meilleurs produits de la mer.",
        },
        {
          title: "Choix Personnalisé",
          description: "Sélectionnez votre pièce et le mode de cuisson idéal.",
        },
        {
          title: "Atmosphère Marine",
          description: "Un cadre raffiné et convivial face à la mer.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/panoramic-view-fish-stall-market-sanarysurmer_268835-3784.jpg"
    />
  </div>

  <div id="feature" data-section="feature">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Poisson Frais",
          description: "Un large choix sélectionné chaque matin.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/person-squeezing-lemon-soup-black-bowl-with-dark-wall_181624-4772.jpg",
          },
          items: [
            {
              text: "Espadon",
              icon: CheckCircle,
            },
            {
              text: "Mérou",
              icon: CheckCircle,
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-asian-dish_23-2147681089.jpg?_wi=2",
          imageAlt: "fresh grilled prawns plating",
        },
      ]}
      title="Nos spécialités culinaires"
      description="Chaque plat est une célébration de saveurs marines."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",
          value: "897+",
          title: "Avis Clients",
          description: "Notes excellentes et retours positifs.",
          icon: Star,
        },
        {
          id: "2",
          value: "4.3",
          title: "Note Moyenne",
          description: "Une satisfaction marine confirmée.",
          icon: Award,
        },
        {
          id: "3",
          value: "100%",
          title: "Fraîcheur",
          description: "Produits du jour, pêche locale.",
          icon: Waves,
        },
      ]}
      title="Notre engagement en chiffres"
      description="Des milliers de clients satisfaits par notre exigence marine."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Yazan",
          handle: "@yazan_guide",
          testimonial: "Superbe spot de fruits de mer.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517424.jpg",
        },
        {
          id: "2",
          name: "Rabah Chebout",
          handle: "@rabah_guide",
          testimonial: "Expérience raffinée au bord de la mer.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/waitress-arranging-oyster-plate_23-2147830604.jpg",
        },
        {
          id: "3",
          name: "jr t",
          handle: "@jrt_guide",
          testimonial: "Endroit agréable, service irréprochable.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-frozen-sea-food-table_23-2148969382.jpg",
        },
        {
          id: "4",
          name: "Amira M.",
          handle: "@amira_foodie",
          testimonial: "Fraîcheur incroyable.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-having-lunch-together-restaurant_23-2150520109.jpg",
        },
        {
          id: "5",
          name: "Karim B.",
          handle: "@karim_cuisine",
          testimonial: "Cadre magnifique et cuisine savoureuse.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-conversating-restaurant_23-2148006712.jpg",
        },
      ]}
      showRating={true}
      title="Ce que disent nos clients"
      description="Le partage de nos convives sur leur expérience marine chez nous."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Merlon",
          price: "Prix selon arrivage",
          imageSrc: "http://img.b2bpic.net/free-photo/tuna-meat-steak_1203-8961.jpg",
        },
        {
          id: "2",
          name: "Crevettes Grillées",
          price: "Excellent",
          imageSrc: "http://img.b2bpic.net/free-photo/seafood-soup-wooden-table_123827-27601.jpg",
        },
        {
          id: "3",
          name: "Soupe de Poisson",
          price: "Signature",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-grilled-steak-with-zucchini-bell-pepper-tomato-mushrooms-sauce-salt-black-pepper-board_141793-3814.jpg",
        },
        {
          id: "4",
          name: "Calamar Frit",
          price: "Classique",
          imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-boiled-fish-buckwheat-meal-served-with-vegetables-green-white-plate-nude-towel-wooden-cutting-board-ice-surface_179666-42519.jpg",
        },
        {
          id: "5",
          name: "Crevettes Sauce Hollandaise",
          price: "Raffiné",
          imageSrc: "http://img.b2bpic.net/free-photo/salmon-with-sushi_1203-697.jpg",
        },
        {
          id: "6",
          name: "Espadon Grillé",
          price: "Grillé",
          imageSrc: "http://img.b2bpic.net/free-photo/fresh-raw-seafoods-spices_1398-3685.jpg",
        },
      ]}
      title="Notre Menu"
      description="Découvrez une sélection de plats savoureux."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",
          title: "Quels sont vos horaires ?",
          content: "Nous sommes ouverts tous les jours jusqu'à 23h.",
        },
        {
          id: "2",
          title: "Est-ce qu'il y a un parking ?",
          content: "Oui, nous vous conseillons d'arriver tôt.",
        },
        {
          id: "3",
          title: "Peut-on réserver ?",
          content: "Oui, contactez-nous par téléphone.",
        },
      ]}
      title="Questions Fréquentes"
      description="Tout ce que vous devez savoir avant votre visite."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "canvas-reveal",
      }}
      text="Réservez votre table dès maintenant pour une expérience marine inoubliable."
      buttons={[
        {
          text: "+213 551 15 18 66",
          href: "tel:+213551151866",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Accueil",
              href: "#hero",
            },
            {
              label: "Menu",
              href: "#menu",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "02 rue des Dunes, Aïn Bénian",
              href: "#",
            },
            {
              label: "+213 551 15 18 66",
              href: "tel:+213551151866",
            },
          ],
        },
      ]}
      logoText="El Kahina"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
