f09c3ea4-aabe-4476-8de7-9798de7eb471/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Shield, Sparkles, Zap, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "About", id: "about" },
        { name: "Experience", id: "features" },
        { name: "Menu", id: "menu" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Lumière Cafe"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{ variant: "sparkles-gradient" }}
      title="Your Private Sanctuary"
      description="Experience curated coffee moments in our serene, members-only space. Where quality meets tranquility."
      buttons={[{ text: "Book Table", href: "#contact" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/person-cafe-enjoying-book_23-2150064701.jpg", imageAlt: "Cafe ambiance" },
        { imageSrc: "http://img.b2bpic.net/free-photo/two-men-cafe_23-2147775893.jpg", imageAlt: "Barista detail" },
      ]}
    />
  </div>

  <div id="socialProof" data-section="socialProof">
    <SocialProofOne
      title="Trusted by Connoisseurs"
      description="Our private members come from leading creative and architectural firms worldwide."
      names={["Architectural Digest", "Monocle", "Kinfolk", "Wallpaper*", "Dezeen"]}
      textboxLayout="default"
      useInvertedBackground={false}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Designed for Discretion"
      tag="Our Philosophy"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        { title: "Rare Origins", description: "Micro-lot coffee beans sourced from single estates.", bentoComponent: "reveal-icon", icon: Sparkles },
        { title: "Artisan Craft", description: "Hand-poured extraction methods for perfect clarity.", bentoComponent: "reveal-icon", icon: Zap },
        { title: "Private Ambiance", description: "Sound-dampened spaces for focus and conversation.", bentoComponent: "reveal-icon", icon: Shield },
      ]}
      title="Exquisite Offerings"
      description="More than just a cup—a ritual."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Etiopian Yirgacheffe", price: "$8", imageSrc: "http://img.b2bpic.net/free-photo/view-coffee-cup-with-pastel-colored-background_23-2151753019.jpg" },
        { id: "p2", name: "Cold Brew Reserve", price: "$10", imageSrc: "http://img.b2bpic.net/free-photo/top-view-female-barista-pouring-frothed-milk-cup_23-2148824452.jpg" },
        { id: "p3", name: "Single Origin Pour-over", price: "$12", imageSrc: "http://img.b2bpic.net/free-photo/closeup-coffee-wooden-table-cafe_53876-31852.jpg" },
      ]}
      title="The Daily Selection"
      description="Rotating seasonal menu crafted for the discerning palate."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", title: "Exquisite", quote: "The most peaceful place to start my day.", name: "Elena R.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-30888.jpg?_wi=1" },
        { id: "t2", title: "Refined", quote: "Truly unique beans, impeccably served.", name: "Marcus W.", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-resting-home-after-difficult-day_1163-5490.jpg" },
      ]}
      title="Quiet Praise"
      description="What our guests say about their retreat."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
        title="Our Impact"
        tag="Excellence"
        metrics={[
          { id: "m1", value: "15+", description: "Origin Countries" },
          { id: "m2", value: "48h", description: "Slow-Brew Process" },
          { id: "m3", value: "100%", description: "Member Satisfaction" }
        ]}
        metricsAnimation="slide-up"
        useInvertedBackground={false}
      />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Do I need a membership?", content: "The cafe is exclusive to our members for a quiet experience." },
        { id: "f2", title: "How do I join?", content: "Application is by invite-only or waitlist submission." },
        { id: "f3", title: "Can I bring guests?", content: "Yes, members may bring one guest per visit." },
      ]}
      title="Common Inquiries"
      faqsAnimation="slide-up"
      description="Everything you need to know about your visit."
      imageSrc="http://img.b2bpic.net/free-photo/woman-model-demonstrating-cloths_1303-30888.jpg?_wi=2"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
        tag="Join Us"
        title="Apply for Membership"
        description="Access a sanctuary curated for those who appreciate the finer things."
        buttons={[{ text: "Submit Application", href: "#" }]}
        useInvertedBackground={false}
        background={{ variant: "plain" }}
      />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoText="Lumière Cafe"
      columns={[
        { items: [{ label: "Philosophy", href: "#" }, { label: "Members", href: "#" }] },
        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}