"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Coffee, Waves } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="medium"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Restaurant",
          id: "#restaurant",
        },
        {
          name: "Experience",
          id: "#experience",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Camping El Barco"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Escape to the Atlantic Soul of Sidi Ifni"
      description="Experience oceanfront camping, seaside apartments, authentic Moroccan cuisine, and unforgettable sunsets on the southern coast of Morocco."
      buttons={[
        {
          text: "Book Your Stay",
          href: "#contact",
        },
        {
          text: "View Restaurant",
          href: "#restaurant",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/scenic-view-sandy-beach-beach-with-sun-beds-umbrellas-open-against-sea-mountains-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18731.jpg"
      imageAlt="Breathtaking oceanfront view of Sidi Ifni coastline"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/tent-interor-with-bed-dishes-glamping_1268-18151.jpg",
          alt: "Tent interior",
        },
        {
          src: "http://img.b2bpic.net/free-photo/bed-beach_1203-3168.jpg",
          alt: "Beach bed",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-preparing-coffee-herself-her-lover-winter-trip_23-2149298503.jpg",
          alt: "Coffee morning",
        },
        {
          src: "http://img.b2bpic.net/free-photo/luxury-swimming-pool-beach_657883-734.jpg",
          alt: "Swimming pool",
        },
        {
          src: "http://img.b2bpic.net/free-photo/luxurious-terrace-with-coastal-views_23-2151986069.jpg",
          alt: "Coastal terrace",
        },
      ]}
      avatarText="Join our community of ocean lovers."
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="About Camping El Barco"
      title="Authentic Moroccan Hospitality"
      description="Nestled on the breathtaking coastline of Sidi Ifni, Camping El Barco offers a unique blend of relaxation, adventure, and Moroccan hospitality. Whether you arrive with a camper van, travel with family, or simply seek a peaceful ocean escape, our space welcomes you."
      subdescription="Every moment here feels connected to the rhythm of the ocean, from sunrise coffees to golden sunset dinners."
      icon={Coffee}
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-looking-sunrise_1163-3370.jpg"
      imageAlt="Moroccan hospitality meets ocean views"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      features={[
        {
          title: "Oceanfront Camping",
          description: "Wake up to the sound of waves in our dedicated camping area.",
          imageSrc: "http://img.b2bpic.net/free-photo/promenade-near-sea_1112-620.jpg",
          imageAlt: "Camping by the sea",
        },
        {
          title: "Seaside Apartments",
          description: "Comfortable living spaces with panoramic Atlantic ocean views.",
          imageSrc: "http://img.b2bpic.net/free-photo/pillow-decor-apartment-furniture-house_1203-4497.jpg",
          imageAlt: "Seaside apartment balcony",
        },
        {
          title: "Restaurant & Café",
          description: "Authentic Moroccan dishes and refreshing beverages served daily.",
          imageSrc: "http://img.b2bpic.net/free-photo/small-bowles-turshu-vegetable-snacks_114579-2353.jpg",
          imageAlt: "Our seaside restaurant terrace",
        },
      ]}
      title="Our Services"
      description="Enjoy a range of amenities designed to make your coastal escape comfortable and memorable."
    />
  </div>

  <div id="restaurant" data-section="restaurant">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "Signature",
          name: "Seafood Paella",
          price: "120 MAD",
          rating: 5,
          reviewCount: "120",
          imageSrc: "http://img.b2bpic.net/free-photo/roasted-seabass-with-vegetables_2829-14261.jpg",
        },
        {
          id: "p2",
          brand: "Traditional",
          name: "Moroccan Tajine",
          price: "90 MAD",
          rating: 5,
          reviewCount: "95",
          imageSrc: "http://img.b2bpic.net/free-photo/oriental-tea-concept_23-2148129881.jpg",
        },
        {
          id: "p3",
          brand: "Fresh",
          name: "Grilled Fish",
          price: "110 MAD",
          rating: 4,
          reviewCount: "80",
          imageSrc: "http://img.b2bpic.net/free-photo/grilled-fish-fillet-with-green-salad-lemon-slices_114579-4427.jpg",
        },
        {
          id: "p4",
          brand: "Café",
          name: "Moroccan Breakfast",
          price: "60 MAD",
          rating: 5,
          reviewCount: "60",
          imageSrc: "http://img.b2bpic.net/free-photo/breakfast-wooden-table_23-2147667231.jpg",
        },
        {
          id: "p5",
          brand: "Fresh",
          name: "Orange Juice",
          price: "25 MAD",
          rating: 5,
          reviewCount: "45",
          imageSrc: "http://img.b2bpic.net/free-photo/mid-shot-young-woman-holding-fresh-drink-sitting-table_23-2148784277.jpg",
        },
        {
          id: "p6",
          brand: "Signature",
          name: "Seafood Pizza",
          price: "100 MAD",
          rating: 4,
          reviewCount: "55",
          imageSrc: "http://img.b2bpic.net/free-photo/fried-fish-with-lemon-slices_140725-8439.jpg",
        },
      ]}
      title="Dine by the Ocean"
      description="Fresh seafood, Moroccan flavors, and relaxed seaside dining."
    />
  </div>

  <div id="experience" data-section="experience">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Our Essence"
      title="A Coastal Experience"
      description="More than a stay, Camping El Barco is a coastal experience inspired by the peaceful rhythm of the Atlantic Ocean. Enjoy surf vibes, breathtaking sunsets, relaxing walks, and authentic Moroccan hospitality in the heart of Sidi Ifni."
      subdescription="Whether it's surf or soul-soothing sunsets, we have it all."
      icon={Waves}
      imageSrc="http://img.b2bpic.net/free-photo/woman-walking-along-seashore_23-2148134671.jpg"
      imageAlt="Surfing and relaxation in Sidi Ifni"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Johnson",
          role: "Traveler",
          testimonial: "Amazing location, perfect ocean views and hospitality.",
          imageSrc: "http://img.b2bpic.net/free-photo/guitarist-sitting-tent_23-2148223438.jpg",
        },
        {
          id: "t2",
          name: "Michael Chen",
          role: "Camper",
          testimonial: "The best seafood I've had in Morocco. Highly recommended!",
          imageSrc: "http://img.b2bpic.net/free-photo/family-sitting-sand-tent_1304-4222.jpg",
        },
        {
          id: "t3",
          name: "Emily Rodriguez",
          role: "Surfer",
          testimonial: "Perfect surf vibes and super friendly staff. Will return.",
          imageSrc: "http://img.b2bpic.net/free-photo/male-surfer-wetsuit-polishing-surfboard-with-wax-sand_74855-16407.jpg",
        },
        {
          id: "t4",
          name: "David Kim",
          role: "Family",
          testimonial: "Great experience for the whole family, loved the sunsets.",
          imageSrc: "http://img.b2bpic.net/free-photo/couple-looking-each-other-by-tent_23-2148223519.jpg",
        },
        {
          id: "t5",
          name: "Laura Smith",
          role: "Blogger",
          testimonial: "A hidden gem in Sidi Ifni. Absolutely loved the atmosphere.",
          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-handsome-african-male-wearing-stylish-clothing-shades-relaxing-bench-hotel-beach-vacations-tropical-country-using-notebook-computer-talking-mobile_273609-758.jpg",
        },
      ]}
      title="Guest Stories"
      description="Hear what our guests have to say about their stay at Camping El Barco."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Is there Wi-Fi available?",
          content: "Yes, we provide free Wi-Fi for all our guests.",
        },
        {
          id: "f2",
          title: "Do you have private parking?",
          content: "Yes, private parking is available for our guests.",
        },
        {
          id: "f3",
          title: "Can I bring my pet?",
          content: "Please contact us directly to discuss our pet policy.",
        },
        {
          id: "f4",
          title: "Do you serve vegetarian food?",
          content: "Yes, our restaurant offers vegetarian-friendly options.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about our campsite and services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get In Touch"
      description="Have questions or want to book? Reach out to us directly."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your Message",
        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-walking-outdoors_23-2149123045.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Services",
              href: "#services",
            },
          ],
        },
        {
          items: [
            {
              label: "Restaurant",
              href: "#restaurant",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      logoText="Camping El Barco"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
