"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="outline"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Features", id: "features" },
        { name: "Products", id: "products" },
        { name: "About", id: "about" },
        { name: "FAQ", id: "faq" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Aura Wear"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "gradient-bars" }}
      title="Timeless Elegance, Modern Comfort."
      description="Discover our curated collection of premium apparel, designed for those who appreciate the finer details in life."
      kpis={[
        { value: "100+", label: "Styles" },
        { value: "10k+", label: "Customers" },
        { value: "5.0", label: "Rating" },
      ]}
      enableKpiAnimation={true}
      buttons={[{ text: "Shop Collection", href: "#products" }]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-gorgeous-girl-lace-dress-bending-backward_7502-9033.jpg?_wi=1"
      imageAlt="Elegance collection"
      mediaAnimation="blur-reveal"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275094.jpg", alt: "Portrait of beautiful woman" },
        { src: "http://img.b2bpic.net/free-photo/blonde-girl-with-short-blonde-hair-poses-white-suit-by-ladder_8353-5468.jpg", alt: "Blonde girl in white suit" },
        { src: "http://img.b2bpic.net/free-photo/gorgeous-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5485.jpg", alt: "Fashion model in armchair" },
        { src: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-jacket-suit-with-tie-new-feminity-concept_23-2148951010.jpg", alt: "Elegant model in suit" },
        { src: "http://img.b2bpic.net/free-photo/stylish-woman-having-happy-excited-smile-while-standing-fashionable-summer-clothes-enjoying-sale-prices-shopping-city-mall-style-fashion-consumerism-purchase-concept_273609-820.jpg", alt: "Woman holding shopping bags" },
      ]}
      marqueeItems={[
        { type: "text", text: "Sustainable" },
        { type: "text", text: "Premium Quality" },
        { type: "text", text: "Worldwide Shipping" },
        { type: "text", text: "Ethically Sourced" },
        { type: "text", text: "Modern Timeless" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Premium Fabrics",          description: "Sourced from the finest natural fibers.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/i-need-write-it-down-until-it-slipped-my-mind-focused-creative-clothes-designer-sitting-workshop-drawing-new-project-garment-she-will-sew-sewing-machine-first-is-plan-action_176420-14584.jpg?_wi=1" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-tailor-makes-measurements-jeans-with-meter-sewing-workshop_613910-19033.jpg" }
        },
        {
          title: "Ethical Sourcing",          description: "Crafted with respect for the planet.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379216.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/first-some-sketches-must-be-done_329181-13629.jpg" }
        },
        {
          title: "Swift Delivery",          description: "From our atelier to your doorstep.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448765.jpg?_wi=1" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/pretty-young-woman-looking-camera_23-2148273263.jpg" }
        }
      ]}
      showStepNumbers={true}
      title="Quality at Every Stitch"
      description="We prioritize craftsmanship and sustainable materials in everything we create."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        { id: "1", name: "Essential Tee", price: "$45", variant: "Cotton", imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448765.jpg?_wi=2" },
        { id: "2", name: "Silk Blouse", price: "$120", variant: "Silk", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-girl-with-makeup-elegantly-straightens-her-long-chestnut-hair-with-hand_132075-9063.jpg" },
        { id: "3", name: "Classic Denim", price: "$90", variant: "Denim", imageSrc: "http://img.b2bpic.net/free-photo/collection-beige-tone-colored-pants_23-2150773386.jpg" },
        { id: "4", name: "Leather Belt", price: "$60", variant: "Leather", imageSrc: "http://img.b2bpic.net/free-photo/view-toilet-bag-products_23-2149879474.jpg" },
        { id: "5", name: "Cashmere Knit", price: "$150", variant: "Knit", imageSrc: "http://img.b2bpic.net/free-photo/closeup-textured-knitted-blankets-stack_169016-16558.jpg" },
        { id: "6", name: "Wool Coat", price: "$250", variant: "Wool", imageSrc: "http://img.b2bpic.net/free-photo/woman-black-jacket-walking-through-bridge_1303-25985.jpg" },
      ]}
      title="Current Collection"
      description="Explore the season's latest designs."
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Our Story"
      description={[
        "Founded with a passion for minimalism, Aura Wear creates clothing that feels as good as it looks.",        "We believe that premium apparel should be accessible, durable, and timeless."]}
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Sarah", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-with-clothes_23-2149241337.jpg" },
        { id: "2", name: "Mark", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-is-looking-far-away-put-his-palms-closer-eyes-protect-them-from-wind_613910-14509.jpg" },
        { id: "3", name: "Emily", imageSrc: "http://img.b2bpic.net/free-photo/shopping-day-international-girlfriends-women-mall_1157-46836.jpg" },
        { id: "4", name: "David", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-excited-woman-holding-smartphone_23-2149313451.jpg" },
        { id: "5", name: "Jane", imageSrc: "http://img.b2bpic.net/free-photo/smiling-positive-curly-woman-keeps-thumb-up-recommends-something-uses-modern-cellular-selling-clothes-online-internet-store-poses-against-white-background-with-clothes-hanging_273609-60491.jpg" },
      ]}
      cardTitle="Loved by Our Community"
      cardTag="Reviews"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "p1",          title: "Basic",          price: "$10",          period: "/mo",          features: ["Early access", "Free shipping"],
          button: { text: "Join" },
          imageSrc: "http://img.b2bpic.net/free-photo/worker-closing-buttons-blazer-shop_482257-96910.jpg",          imageAlt: "fashion studio interior design"},
        {
          id: "p2",          title: "Pro",          price: "$25",          period: "/mo",          features: ["Exclusive items", "Free shipping", "Priority support"],
          button: { text: "Join" },
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-gorgeous-girl-lace-dress-bending-backward_7502-9033.jpg?_wi=2",          imageAlt: "fashion studio interior design"},
        {
          id: "p3",          title: "Elite",          price: "$50",          period: "/mo",          features: ["Personal stylist", "Unlimited returns", "VIP access"],
          button: { text: "Join" },
          imageSrc: "http://img.b2bpic.net/free-photo/i-need-write-it-down-until-it-slipped-my-mind-focused-creative-clothes-designer-sitting-workshop-drawing-new-project-garment-she-will-sew-sewing-machine-first-is-plan-action_176420-14584.jpg?_wi=2",          imageAlt: "fashion studio interior design"},
      ]}
      title="Membership Plans"
      description="Unlock exclusive access to early collections."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "q1", title: "Shipping?", content: "We ship globally." },
        { id: "q2", title: "Returns?", content: "Easy returns within 30 days." },
        { id: "q3", title: "Sizing?", content: "Check our detailed size guide." },
      ]}
      title="Need Help?"
      description="Answers to common questions."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      tag="Newsletter"
      title="Stay Updated"
      description="Get early access to our drops."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1171.jpg"
      logoText="Aura Wear"
      columns={[
        {
          title: "Shop",          items: [
            { label: "New Arrivals", href: "#" },
            { label: "Best Sellers", href: "#" },
          ],
        },
        {
          title: "Company",          items: [
            { label: "About", href: "#" },
            { label: "Careers", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
