"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Linkedin } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="La Sqala"
          navItems={[
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Reserve Table", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="La Sqala"
          description="Experience authentic Moroccan cuisine in a stunning historic setting. Indulge in traditional flavors, warm hospitality, and an unforgettable dining journey."
          buttons={[
            { text: "Explore Menu", href: "#menu" },
            { text: "Book Now", href: "#contact" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/tea-set-with-baklava-jams-dried-fruits_140725-8095.jpg"
          imageAlt="La Sqala historic restaurant interior"
          mediaAnimation="blur-reveal"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Heritage Since 2005"
          title="Where Tradition Meets Culinary Excellence"
          buttons={[
            { text: "Learn Our Story", href: "#" },
            { text: "Visit Us", href: "#contact" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="menu" data-section="menu">
        <FeatureCardSeven
          title="Signature Moroccan Dishes"
          description="Discover our most celebrated dishes, each prepared with authentic techniques and the finest ingredients."
          tag="Our Specialties"
          features={[
            {
              id: 1,
              title: "Goat Tajine",              description: "Tender slow-cooked goat meat with preserved lemons, olives, and aromatic spices. A true Moroccan classic served with traditional bread.",              imageSrc: "http://img.b2bpic.net/free-photo/lamb-bone-sauteed-bone-broth-with-herbs-tomato-sauce_114579-1900.jpg"
            },
            {
              id: 2,
              title: "Pastilla with Milk",              description: "Delicate pastry layers filled with creamy milk custard and almonds, dusted with powdered sugar and cinnamon. A sweet Moroccan treasure.",              imageSrc: "http://img.b2bpic.net/free-photo/turkish-desserts-with-kadaif-cup-shape-filled-with-nuts_140725-6866.jpg"
            },
            {
              id: 3,
              title: "Couscous Royal",              description: "Fluffy steamed couscous topped with tender meat, vegetables, and rich broth. A complete and satisfying Moroccan experience.",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-arab-dish_23-2147794276.jpg"
            },
            {
              id: 4,
              title: "Spring Rolls",              description: "Crispy golden rolls filled with savory meat and vegetables, served with house-made sauce. Perfect as an appetizer or light meal.",              imageSrc: "http://img.b2bpic.net/free-photo/fried-spring-roll_74190-5831.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Guests Say"
          description="Real experiences from travelers and locals who have fallen in love with La Sqala"
          tag="Trusted Reviews"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Food Critic",              company: "Travel & Taste Magazine",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=1",              imageAlt: "professional portrait woman headshot profile"
            },
            {
              id: "2",              name: "Ahmed Hassan",              role: "Regular Guest",              company: "Casa Local",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=1",              imageAlt: "professional portrait man headshot profile"
            },
            {
              id: "3",              name: "Mariah Williams",              role: "Travel Blogger",              company: "Wanderlust Chronicles",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=2",              imageAlt: "professional portrait woman headshot profile"
            },
            {
              id: "4",              name: "Mohammed Benani",              role: "Chef",              company: "Culinary Academy",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=2",              imageAlt: "professional portrait man headshot profile"
            },
            {
              id: "5",              name: "Elena Rodriguez",              role: "Event Planner",              company: "Casablanca Events",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=3",              imageAlt: "professional portrait woman headshot profile"
            },
            {
              id: "6",              name: "David Thomson",              role: "Restaurant Owner",              company: "Gastro Group",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=3",              imageAlt: "professional portrait man headshot profile"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Featured In"
          description="La Sqala has been recognized by leading travel and dining publications"
          tag="Press & Recognition"
          names={[
            "Michelin Guide",            "TripAdvisor Excellence",            "Gastro Magazine",            "Travel & Leisure",            "Moroccan Tourism",            "Luxury Dining",            "Cultural Heritage Awards",            "Chef's Choice"
          ]}
          speed={40}
          showCard={true}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about dining at La Sqala"
          tag="Help & Information"
          faqs={[
            {
              id: "1",              title: "What are your operating hours?",              content: "La Sqala opens daily at 12:00 PM for lunch and remains open for dinner service. We are closed on major holidays. For special events and private bookings, please contact us in advance."
            },
            {
              id: "2",              title: "Can I make a reservation?",              content: "Yes! We highly recommend reservations, especially for weekends and evenings. You can book online through our website or call us directly. Group reservations receive special attention."
            },
            {
              id: "3",              title: "Do you accommodate dietary restrictions?",              content: "Absolutely. Our experienced chefs can prepare vegetarian, vegan, and gluten-free versions of our dishes. Please inform your server of any dietary requirements when ordering."
            },
            {
              id: "4",              title: "What is the dress code?",              content: "Smart casual is our recommendation. We welcome all guests who dress respectfully. Our elegant atmosphere is perfect for special occasions and celebrations."
            },
            {
              id: "5",              title: "Is parking available?",              content: "Yes, we have dedicated parking facilities for our guests. Valet parking services are also available for special occasions. Please ask our staff upon arrival."
            },
            {
              id: "6",              title: "Do you offer private events?",              content: "Yes, La Sqala is an ideal venue for private dinners, weddings, and corporate events. We offer customized menus and can accommodate groups up to 150 guests."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Reserve Your Table"
          description="Contact us to book your dining experience at La Sqala. Our team looks forward to welcoming you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "date", type: "date", placeholder: "Preferred Date", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your preferences or special requests...",            rows: 5,
            required: false
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/tables-chairs-arranged-empty-coffee-shop_107420-96463.jpg"
          imageAlt="La Sqala restaurant ambiance"
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          buttonText="Reserve Your Table"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="La Sqala"
          copyrightText="© 2025 La Sqala Restaurant. All rights reserved. Casablanca, Morocco."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/lasqalarestaurant", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/lasqalarestaurant", ariaLabel: "Instagram" },
            { icon: Linkedin, href: "https://linkedin.com/company/lasqala", ariaLabel: "LinkedIn" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}