"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 FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { BookOpen, Cloud } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="large"
        background="noise"
        cardStyle="gradient-radial"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Features",          id: "features"},
        {
          name: "Browse",          id: "products"},
        {
          name: "Support",          id: "faq"},
      ]}
      brandName="LibroCloud"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      background={{
        variant: "gradient-bars"}}
      title="Your Entire Library, Anywhere You Go."
      description="Access millions of books, audiobooks, and magazines across Android and iOS devices. Seamless syncing for the modern reader."
      buttons={[
        { text: "Get the App", href: "#" }
      ]}
      testimonials={[
        {
          name: "Alex R.",          handle: "@alexreads",          testimonial: "The best reading experience I've had on my iPhone. Everything syncs perfectly.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/old-russian-book_1385-1036.jpg"},
        {
          name: "Maria S.",          handle: "@mariaslibrary",          testimonial: "LibroCloud makes managing my digital collection so easy across my tablet and phone.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-book-still-life_52683-110305.jpg"},
        {
          name: "John K.",          handle: "@johnnybooks",          testimonial: "Finally, a library app that actually feels like a modern application.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/fairytale-scene-coming-out-book_23-2151778507.jpg"},
        {
          name: "Sarah P.",          handle: "@sarahreads",          testimonial: "The cross-platform sync is truly a game changer for my daily commute.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-rainbow-sunlight-closed-book_23-2148827253.jpg"},
        {
          name: "Tom B.",          handle: "@tombooks",          testimonial: "Beautifully designed and very intuitive. I highly recommend LibroCloud.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/ebook-reader-yellow-blue-background_58702-6560.jpg"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/from-old-book_23-2147767240.jpg"
      imageAlt="digital library interface modern"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-black-woman-with-afro-curls-hairstyle-smiling-model-sweater-jeans_158538-19077.jpg",          alt: "user avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-tablet_23-2148781081.jpg",          alt: "user avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-teenager-using-laptop_23-2147777282.jpg",          alt: "user avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-young-girl-with-her-digital-tablet_1301-4031.jpg",          alt: "user avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/front-view-senior-woman-living-modern-life_23-2148404456.jpg",          alt: "user avatar"},
      ]}
      marqueeItems={[
        {
          type: "text",          text: "5M+ Books Available"},
        {
          type: "text",          text: "Instant Cloud Sync"},
        {
          type: "text",          text: "Custom Reading Themes"},
        {
          type: "text",          text: "Cross-Platform Access"},
        {
          type: "text",          text: "Ad-Free Experience"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="A Smarter Way to Read"
      description="We are revolutionizing how people interact with literature by providing a seamless, cross-platform digital ecosystem."
      metrics={[
        {
          value: "5M+",          title: "Books Available"},
        {
          value: "200K+",          title: "Daily Users"},
      ]}
      mediaAnimation="slide-up"
      metricsAnimation="blur-reveal"
      imageSrc="http://img.b2bpic.net/free-photo/ebook-reader-paper-books_58702-6442.jpg"
      imageAlt="Ebook reader next to paper books"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Fluid Reading",          description: "Customizable typography and themes for maximum comfort.",          icon: BookOpen,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/world-mental-health-day-awareness-illustration_23-2151859110.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app_23-2148596035.jpg"},
          ],
        },
        {
          title: "Instant Sync",          description: "Your progress across Android and iOS is always perfectly synced.",          icon: Cloud,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/cloud-computing-illustration-icon_53876-65610.jpg"},
            {
              imageSrc: "http://img.b2bpic.net/free-vector/characters-couple-sharing-listening-music_53876-35230.jpg"},
          ],
        },
        {
          title: "Smart Organization",          description: "Auto-sort your books into collections and genres easily.",          icon: BookOpen,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-cover-design-collection_354956-297.jpg?_wi=1"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/ebook-reader-pink-background_58702-6518.jpg"},
          ],
        },
      ]}
      title="Built for Every Reader"
      description="Experience features that make reading comfortable and convenient on any device."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Quantum Echo",          price: "$12.99",          imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-cover-design-collection_354956-297.jpg?_wi=2"},
        {
          id: "2",          name: "Strategic Mind",          price: "$15.50",          imageSrc: "http://img.b2bpic.net/free-photo/ebook-reader-isolated-white-background_58702-6399.jpg"},
        {
          id: "3",          name: "The Dark Path",          price: "$9.99",          imageSrc: "http://img.b2bpic.net/free-vector/light-bulb-coffin-vector_53876-86351.jpg"},
        {
          id: "4",          name: "Culinary Art",          price: "$19.00",          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-surrounded-with-steamers-spring-onion-sesame-seeds-coriander-seeds-placemat_23-2148123615.jpg"},
        {
          id: "5",          name: "History of Ages",          price: "$14.25",          imageSrc: "http://img.b2bpic.net/free-vector/art-deco-style-wedding-invitation-template_23-2147941955.jpg"},
        {
          id: "6",          name: "Wanderlust Guide",          price: "$11.00",          imageSrc: "http://img.b2bpic.net/free-photo/yosemite-travel-poster_23-2151978030.jpg"},
      ]}
      title="Popular Collections"
      description="Explore our curated catalog across various genres."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          title: "Life changer",          quote: "LibroCloud has made reading on the bus so much easier.",          name: "Sarah",          role: "Student",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-talking-via-telecommunication-app-tablet_1262-20577.jpg"},
        {
          id: "2",          title: "Fantastic",          quote: "Clean UI and great selection of books.",          name: "Mike",          role: "Teacher",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-looking-digital-tablet-sitting-sofa_23-2148041312.jpg"},
        {
          id: "3",          title: "Highly Recommend",          quote: "The synchronization between my iPad and Android phone is flawless.",          name: "Emma",          role: "Writer",          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-mobile-phone_107420-12343.jpg"},
        {
          id: "4",          title: "Solid App",          quote: "Best digital library app I've used to date.",          name: "David",          role: "Architect",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-wearing-suit-posing-black-white_23-2149411391.jpg"},
        {
          id: "5",          title: "Love the features",          quote: "Customizing the font and spacing makes reading much more enjoyable.",          name: "Laura",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/male-hiker-takes-deep-breath-fresh-mountain-air-feeling-pleased_482257-120736.jpg"},
      ]}
      title="Loved by Readers"
      description="Hear what our community says about their experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Is it on Android and iOS?",          content: "Yes, LibroCloud is fully optimized for both platforms."},
        {
          id: "2",          title: "Can I read offline?",          content: "Absolutely. Download books directly to your device for offline reading."},
        {
          id: "3",          title: "How much does it cost?",          content: "We offer a free tier and a premium subscription with unlimited access."},
      ]}
      title="Frequently Asked Questions"
      description="Common inquiries about LibroCloud digital library."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/library-room-with-time-shine-note-sunset-art_23-2151970521.jpg"
      imageAlt="Library room with time to shine note and sunset art"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Get Started"
      title="Join the Library Today"
      description="Start your journey into millions of books now."
      buttons={[
        {
          text: "Start Your Free Trial",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="LibroCloud"
      columns={[
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
      ]}
      copyrightText="© 2024 LibroCloud. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}