"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="noiseDiagonalGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Shop All", id: "featured" },
        { name: "Reviews", id: "testimonials" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="SparklesByAsh"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Because You Deserve Pretty Things ㅤ♡"
      description="Discover our collection of handpicked essentials designed to make you feel beautiful every single day."
      testimonials={[
        { name: "Aima", handle: "@aima", testimonial: "Obsessed with my order! Packaging so cute literally felt like a gift.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
        { name: "Zara", handle: "@zara", testimonial: "Quality is 10/10, will definitely order again!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
        { name: "Sana", handle: "@sana", testimonial: "So pretty, loved every single thing in my package.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
        { name: "Mina", handle: "@mina", testimonial: "My favorite store for pretty things, always satisfied.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
        { name: "Hina", handle: "@hina", testimonial: "Absolutely magical experience, everything is so aesthetic!", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink" },
      ]}
      buttons={[{ text: "Shop Now", href: "#featured" }]}
      imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
      imageAlt="Hero beauty aesthetic"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/high-angle-messy-makeup-products-table_23-2149363784.jpg", alt: "Customer 1" },
        { src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135758.jpg", alt: "Customer 2" },
        { src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217998.jpg", alt: "Customer 3" },
        { src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150218001.jpg", alt: "Customer 4" },
        { src: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17150.jpg", alt: "Customer 5" },
      ]}
      avatarText="Loved by 5,000+ sparkle enthusiasts"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={true}
      title="Our Vibe"
      description="We believe in bringing magic to your daily routine through curated beauty items that spark joy."
      bulletPoints={[
        { title: "Curated Quality", description: "Handpicked products for the best experience." },
        { title: "Cute Packaging", description: "Every order feels like a special gift." },
        { title: "Fast Shipping", description: "Delivering across Pakistan with love." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=2"
      imageAlt="About Sparkles by Ash"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "5000+", title: "Reviews", description: "Customer love shared daily", imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-showing-golden-star-rating-symbol_53876-71536.jpg" },
        { id: "m2", value: "115k+", title: "Followers", description: "Growing on Instagram", imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg" },
        { id: "m3", value: "8000+", title: "Shipped", description: "Happy orders delivered", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-with-boxes-conveyor-belt_23-2152001489.jpg" },
      ]}
      title="The Sparkle Family"
      description="Join our community of thousands of happy sparkle enthusiasts."
    />
  </div>

  <div id="featured" data-section="featured">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Soft Matte Lip Balm", price: "Rs. 650", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=2" },
        { id: "p2", name: "Peptide Lip Treatment", price: "Rs. 699", imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=2" },
        { id: "p3", name: "Aesthetic Hair Clip", price: "Rs. 450", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=2" },
      ]}
      title="New Arrivals"
      description="Pick your new obsession from our latest drops."
    />
  </div>

  <div id="best-selling" data-section="best-selling">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        { id: "p7", name: "Pink Blush Trio", price: "Rs. 950", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-beatufiul-woman-looking-mirror-fixing-her-makeup-put-lipstick-standing-beige-background-cosmetics-women-beauty-concept_1258-88511.jpg" },
        { id: "p8", name: "Hydrating Face Mask", price: "Rs. 550", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-red-lipstick-still-life_23-2149234375.jpg" },
        { id: "p9", name: "Crystal Facial Roller", price: "Rs. 1100", imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg" },
      ]}
      title="Best Selling"
      description="Loved by thousands, these essentials are must-haves."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      testimonial="Obsessed with my order! Packaging so cute literally felt like a gift."
      rating={5}
      author="Aima"
      avatars={[{ src: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg", alt: "Customer" }]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="blur-reveal"
      useInvertedBackground={true}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      title="Help Corner"
      description="Need assistance? We're here to help you out."
      faqs={[
        { id: "f1", title: "What are the delivery charges?", content: "Our delivery charges are Rs. 299 all over Pakistan." },
        { id: "f2", title: "How long does shipping take?", content: "Standard delivery takes 3-5 business days." },
        { id: "f3", title: "Can I return items?", content: "We offer returns for damaged products reported within 24 hours of delivery." },
      ]}
      faqsAnimation="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={false}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      text="Have questions or just want to say hi? We're here for you."
      buttons={[{ text: "Get in Touch", href: "#contact" }]}
      background={{ variant: "sparkles-gradient" }}
      useInvertedBackground={true}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
      logoText="SparklesByAsh"
      columns={[
        { title: "Links", items: [
            { label: "New Arrivals", href: "#featured" },
            { label: "Best Sellers", href: "#best-selling" },
            { label: "FAQ", href: "#faq" },
        ] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}