"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Cake, Coffee, Heart, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="noise"
        cardStyle="gradient-mesh"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Menu",          id: "#menu"},
        {
          name: "Offers",          id: "#offers"},
        {
          name: "Reviews",          id: "#reviews"},
        {
          name: "Loved By",          id: "#loved-by"},
        {
          name: "FAQs",          id: "#faqs"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="EL&N London"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient"}}
      imagePosition="right"
      title="EL&N London: The Most Instagrammable Cafe"
      description="Experience an enchanting blend of delightful pastries, gourmet coffees, and vibrant, picture-perfect settings. A taste of London's finest, designed for every moment."
      kpis={[
        {
          value: "4.3",          label: "Avg Rating"},
        {
          value: "3.6K",          label: "Reviews"},
        {
          value: "Open Daily",          label: "Closes 11pm"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "View Menu",          href: "#menu"},
        {
          text: "Make a Reservation",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/coffee-collage-with-plant_23-2151876131.jpg"
      imageAlt="Luxurious pink interior of EL&N London cafe"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-brunette-woman-drinks-morning-coffee-cafe_613910-12134.jpg",          alt: "Smiling brunette woman drinks morning coffee in a cafe."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-smiling-brunette-woman-drinks-morning-coffee-cafe_613910-12128.jpg",          alt: "Smiling brunette woman drinks morning coffee in a cafe."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-1386.jpg",          alt: "Redhead female in sunglasses, drinks coffee in a cafe on a street."},
        {
          src: "http://img.b2bpic.net/free-photo/woman-taking-coffee_329181-11917.jpg",          alt: "Woman taking a coffee"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positive-answer_1258-26715.jpg",          alt: "Satisfied bearded guy showing thumbs up"},
      ]}
      avatarText="Join our community of over 500k happy guests!"
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/coffee-collage-with-plant_23-2151876147.jpg",          alt: "Coffee collage with plant"},
        {
          type: "text",          text: "London's Favourite Spot"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/smartphone-with-cookies-camera-coffee-cup-table_23-2148043921.jpg",          alt: "Smartphone with cookies, camera and coffee cup on table"},
        {
          type: "text-icon",          text: "Pink Paradise",          icon: Heart,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/notebook-with-coffee-cup-flowers-bouquet-table_23-2148043916.jpg",          alt: "Notebook with coffee cup and flowers bouquet on table"},
      ]}
      marqueeSpeed={40}
      showMarqueeCard={true}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Our Story: Where Every Corner is a Wonderland"
      description="EL&N, short for 'Eat, Live & Nourish,' was born from a desire to create a space that inspires joy and beauty. Our iconic pink interiors and floral backdrops provide the perfect setting for unforgettable moments, while our carefully crafted menu offers a feast for all senses. Join us and discover why we're London's favorite destination."
      buttons={[
        {
          text: "Learn More"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/cute-stylish-family-summer-city_1157-19953.jpg"
      imageAlt="Exterior of EL&N London cafe with pink branding"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Ombré Passion Fruit Cooler",          description: "A vibrant and refreshing blend of passion fruit, perfect for a tropical escape.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-summer-hat-with-fresh-drink-background-palm-leaves-beach-girl-offers-drink-close-up-holiday-concept_169016-4465.jpg",            imageAlt: "Ombré Passion Fruit Cooler"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-foods-cocktails-tall-glass_23-2149064146.jpg",            imageAlt: "Ombré Passion Fruit Cooler on table"}
        },
        {
          title: "Artisan Bakery Selection",          description: "Indulge in our freshly baked pastries, cakes, and sweet treats made with love.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286445.jpg",            imageAlt: "Assorted bakery items"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/cake-decorated-with-berries-cream_140725-3108.jpg",            imageAlt: "Bakery display"}
        },
        {
          title: "Egg and Avocado Toast",          description: "A classic brunch favorite featuring creamy avocado and perfectly poached eggs on sourdough.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/top-view-sauced-meat-with-mushed-potatoes-sliced-bun-brown-wooden-table_140725-104355.jpg",            imageAlt: "Egg and Avocado Toast"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/cereals-with-berries-tray_23-2147678793.jpg",            imageAlt: "Egg and Avocado Toast close-up"}
        },
        {
          title: "Decadent Cheesecake",          description: "Rich, creamy cheesecake with a delicate crust, a perfect ending to any meal.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/side-view-classic-chocolate-fondant-plate_140725-10242.jpg",            imageAlt: "Cheesecake slice"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/eclairs-wooden-board-top-view_114579-13804.jpg",            imageAlt: "Cheesecake on pink table"}
        },
        {
          title: "Exquisite Pâtisserie",          description: "Explore our collection of delicate French-inspired pastries, each a work of art.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/healthy-drink-composition-table_23-2148890312.jpg",            imageAlt: "Assorted patisserie"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/lychee-jelly-seasonal-fruit-beautifully-decorated-thai-dessert-concept_1150-23468.jpg",            imageAlt: "Patisserie display"}
        },
        {
          title: "Sparkling Rose Lemonade",          description: "A refreshing and visually stunning pink lemonade with a hint of rose.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-delicious-breakfast-meal-assortment_23-2148833911.jpg?_wi=1",            imageAlt: "Rose Lemonade"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/homemade-smoothie-bowl-made-with-berries_1220-4560.jpg?_wi=1",            imageAlt: "Rose Lemonade with petals"}
        }
      ]}
      showStepNumbers={false}
      title="Popular Menu Highlights"
      description="Discover our guest favorites, from refreshing drinks to savory bites and decadent desserts."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "p-coffee",          name: "Signature Coffee",          price: "£4.50",          variant: "Hot/Cold",          imageSrc: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458036.jpg",          imageAlt: "Signature Coffee"},
        {
          id: "p-brunch",          name: "Classic Brunch Plate",          price: "£18.00",          variant: "All-day",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-delicious-breakfast-meal-assortment_23-2148833911.jpg?_wi=2",          imageAlt: "Classic Brunch Plate"},
        {
          id: "p-vegan",          name: "Vegan Delight Bowl",          price: "£14.50",          variant: "Plant-based",          imageSrc: "http://img.b2bpic.net/free-photo/homemade-smoothie-bowl-made-with-berries_1220-4560.jpg?_wi=2",          imageAlt: "Vegan Delight Bowl"},
        {
          id: "p-pink-latte",          name: "EL&N Pink Latte",          price: "£5.50",          variant: "Specialty",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-cup-with-heart-shape-latte-art-wood-table_23-2147908344.jpg",          imageAlt: "EL&N Pink Latte"},
        {
          id: "p-cake",          name: "EL&N Signature Cake",          price: "£8.50/slice",          variant: "Dessert",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cupcakes-paper-roses_23-2148815921.jpg",          imageAlt: "EL&N Signature Cake"},
        {
          id: "p-mocktail",          name: "Fruity Mocktail",          price: "£7.00",          variant: "Refreshing",          imageSrc: "http://img.b2bpic.net/free-photo/brine-cocktail-glass_658428-242.jpg",          imageAlt: "Fruity Mocktail"},
        {
          id: "p-smoothie",          name: "Berry Blast Smoothie",          price: "£6.50",          variant: "Healthy",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-banana-smoothie-composition_23-2148574204.jpg",          imageAlt: "Berry Blast Smoothie"},
        {
          id: "p-afternoon-tea",          name: "Afternoon Tea Set",          price: "£35.00",          variant: "Per Person",          imageSrc: "http://img.b2bpic.net/free-photo/italian-tuscan-traditional-cookies-cantuccini-with-almonds-cup-coffee-light_114579-8094.jpg",          imageAlt: "Afternoon Tea Set"},
      ]}
      title="Indulge in Our Full Selection"
      description="From our signature coffees to our delightful brunch and tempting desserts, there's something for everyone."
    />
  </div>

  <div id="offers" data-section="offers">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "p-brunch-affair",          tag: "For Two",          tagIcon: Sparkles,
          price: "£40",          period: "per couple",          description: "Enjoy a delightful brunch experience for two, including any two main courses and two specialty drinks.",          button: {
            text: "Book Brunch"},
          featuresTitle: "Includes:",          features: [
            "2 Main Courses",            "2 Specialty Drinks",            "Reserved Seating",            "Complimentary Dessert"],
        },
        {
          id: "p-celebration",          tag: "Group Fun",          tagIcon: Cake,
          price: "£25",          period: "per person",          description: "Celebrate with friends and family! Includes a selection of pastries, sandwiches, and drinks for groups of 4-8.",          button: {
            text: "Plan Your Celebration"},
          featuresTitle: "Includes:",          features: [
            "Assorted Pastries",            "Mini Sandwiches",            "Variety of Drinks",            "Custom Cake Option"],
        },
        {
          id: "p-afternoon-tea-indulgence",          tag: "Luxurious",          tagIcon: Coffee,
          price: "£35",          period: "per person",          description: "Experience our signature afternoon tea with an array of sweet and savory treats.",          button: {
            text: "Reserve Afternoon Tea"},
          featuresTitle: "Includes:",          features: [
            "Scones with Clotted Cream & Jam",            "Finger Sandwiches",            "Petit Fours",            "Choice of Teas/Coffee"],
        },
      ]}
      title="Curated Experiences & Group Packages"
      description="Beyond our daily delights, discover special offerings perfect for any occasion."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg"},
        {
          id: "2",          name: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113283.jpg"},
        {
          id: "3",          name: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-look-camera_197531-33377.jpg"},
        {
          id: "4",          name: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-afro-hairstyle_23-2150677138.jpg"},
        {
          id: "5",          name: "Jessica Lee",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-assertive-young-man-assuring-everything-ok-showing-okay-sign-smiling-yes-positive_1258-172817.jpg"},
        {
          id: "6",          name: "Chris Davis",          imageSrc: "http://img.b2bpic.net/free-photo/excited-joyful-beautiful-woman-gesturing-with-hand_74855-2753.jpg"},
      ]}
      cardTitle="What Our Guests Say"
      cardTag="Loved by thousands"
      cardTagIcon={Star}
      buttons={[
        {
          text: "Read All Reviews",          href: "https://www.google.com/search?q=EL%26N+London+reviews"},
      ]}
      cardAnimation="slide-up"
    />
  </div>

  <div id="loved-by" data-section="loved-by">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Vogue",        "Time Out London",        "Evening Standard",        "ELLE",        "Harper's Bazaar",        "The Guardian",        "Condé Nast Traveler"]}
      title="As Seen In & Loved By"
      description="Featured in leading publications and cherished by our patrons."
      speed={40}
      showCard={true}
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "Do you take reservations?",          content: "Yes, we highly recommend making a reservation, especially during peak hours and weekends, to ensure you get a table."},
        {
          id: "faq2",          title: "Do you offer vegan or gluten-free options?",          content: "Absolutely! We have a variety of delicious vegan and gluten-free options available. Please inform your server about any dietary requirements."},
        {
          id: "faq3",          title: "What are your opening hours?",          content: "Our cafe is open daily from 9:00 AM to 11:00 PM. Please check our 'Contact' section for any special holiday hours."},
        {
          id: "faq4",          title: "Can I host a private event at EL&N London?",          content: "Yes, our venues are perfect for private events. Please contact our events team through the 'Contact' form for more information and tailored packages."},
      ]}
      title="Your Questions, Answered"
      description="Find quick answers to common queries about EL&N London."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Visit Us or Make a Reservation"
      description="We look forward to welcoming you to EL&N London. For inquiries or to book a table, please use the form below."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Your Phone Number"},
        {
          name: "date",          type: "date",          placeholder: "Preferred Date"},
        {
          name: "time",          type: "time",          placeholder: "Preferred Time"},
        {
          name: "guests",          type: "number",          placeholder: "Number of Guests"},
      ]}
      textarea={{
        name: "message",        placeholder: "Your Message or Special Request",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-posing-night-with-flash_23-2150204419.jpg"
      imageAlt="Elegant pink cafe interior with seating for reservations"
      mediaPosition="left"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059673.jpg"
      logoAlt="EL&N London Logo"
      columns={[
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Menu",              href: "#menu"},
            {
              label: "Special Offers",              href: "#offers"},
            {
              label: "Reviews",              href: "#reviews"},
          ],
        },
        {
          items: [
            {
              label: "Careers",              href: "#"},
            {
              label: "Press",              href: "#loved-by"},
            {
              label: "Franchise",              href: "#"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "FAQ",              href: "#faqs"},
          ],
        },
        {
          items: [
            {
              label: "Instagram",              href: "https://www.instagram.com/elan_cafe"},
            {
              label: "Facebook",              href: "https://www.facebook.com/ELNCafe/"},
            {
              label: "TikTok",              href: "https://www.tiktok.com/@elancafe"},
          ],
        },
      ]}
      logoText="EL&N London"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}