"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

const assetMap = {
  "logo": "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105286.jpg",  "hero-model": "http://img.b2bpic.net/free-photo/young-woman-with-red-lips-wavy-hairstyle_158538-10397.jpg",  "phone-authentic": "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896824.jpg",  "phone-fast-delivery": "http://img.b2bpic.net/free-photo/happy-delivery-man-holding-box-smartphone-with-blank-screen_23-2148073118.jpg",  "product-1": "http://img.b2bpic.net/free-photo/serum-bottle-balanced-smooth-white-stones_9975-135599.jpg",  "product-2": "http://img.b2bpic.net/free-photo/close-up-floating-water_23-2150963070.jpg",  "product-3": "http://img.b2bpic.net/free-photo/professional-makeup-palette_1385-1564.jpg",  "product-4": "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105251.jpg",  "product-5": "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-bottle-splashes_23-2148775391.jpg",  "product-6": "http://img.b2bpic.net/free-photo/woman-showing-hands-form-support_23-2150693575.jpg",  "product-7": "http://img.b2bpic.net/free-photo/line-metallic-lipsticks-white-background_23-2148210665.jpg",  "product-8": "http://img.b2bpic.net/free-photo/brushes-nail-polishes_23-2147778932.jpg",  "testimonial-1": "http://img.b2bpic.net/free-photo/excited-joyful-beautiful-woman-gesturing-with-hand_74855-2753.jpg",  "testimonial-2": "http://img.b2bpic.net/free-photo/front-view-woman-hand-shaking-human-resources-person_23-2148507819.jpg",  "testimonial-3": "http://img.b2bpic.net/free-photo/front-view-woman-with-shopping-bags_23-2148225585.jpg",  "testimonial-4": "http://img.b2bpic.net/free-photo/young-charismatic-beauty-blogger-teenage-girl-records-video-her-applying-mascara-reviewing-makeup_1258-254506.jpg",  "testimonial-5": "http://img.b2bpic.net/free-photo/expressing-brightful-emotions-stylish-pretty-model-with-luxury-coiffure-beautiful-makeup-glass-champagne-hairdresser-salon_197531-3678.jpg",  "testimonial-6": "http://img.b2bpic.net/free-photo/business-woman-evening-street_1303-3828.jpg",  "blog-1": "http://img.b2bpic.net/free-photo/beauty-stylish-asian-girl-with-bright-glamour-makeup-touching-soft-shiny-facial-skin-smiling-hap_1258-164862.jpg",  "blog-author-1": "http://img.b2bpic.net/free-photo/front-view-woman-working-as-interior-designer_23-2150346485.jpg",  "blog-2": "http://img.b2bpic.net/free-photo/compact-face-powder-palette-rose-nail-polish-bottle-oval-makeup-brush-perfume-bottle-coffee-white-background_23-2148074018.jpg",  "blog-author-2": "http://img.b2bpic.net/free-photo/her-predictions-are-going-good-direction_329181-18104.jpg",  "blog-3": "http://img.b2bpic.net/free-photo/arrangement-skin-care-cream_23-2148761493.jpg",  "blog-author-3": "http://img.b2bpic.net/free-photo/young-beautiful-blonde-woman-wearing-casual-striped-tshirt-isolated-white-background-looking-away-side-with-smile-face-natural-expression-laughing-confident_839833-30463.jpg"
};

function getAssetUrl(id) {
  return assetMap[id] || "#";
}

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Walmart Store"
          logoSrc={getAssetUrl("logo")}
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "Shop", id: "#products" },
            { name: "Reviews", id: "#reviews" },
            { name: "Blog", id: "#blog" },
            { name: "Contact", id: "#contact" }
          ]}
          button={{
            text: "My Cart",            href: "#"
          }}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroSplit
          title="Discover Beauty From Pakistan & Korea"
          description="Authentic skincare, makeup, and beauty essentials delivered to your doorstep. Experience radiant beauty with Walmart Store."
          background={{
            variant: "radial-gradient"
          }}
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Explore Korean Beauty", href: "#kbeauty" }
          ]}
          imageSrc={getAssetUrl("hero-model")}
          imageAlt="beautiful female model glowing skin"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>
      <div id="features" data-section="features">
        <FeatureCardNine
          title="Why Choose Walmart Store Beauty?"
          description="Experience unparalleled quality and convenience tailored for your beauty journey."
          features={[
            {
              title: "100% Authentic Products",              description: "We guarantee genuine Pakistani and Korean beauty products, directly sourced from trusted brands.",              phoneOne: { imageSrc: getAssetUrl("phone-authentic"), imageAlt: "secure online shopping phone display" },
              phoneTwo: { imageSrc: getAssetUrl("phone-fast-delivery"), imageAlt: "fast delivery mobile app tracking" }
            },
            {
              title: "Fast Delivery Across Pakistan",              description: "Get your beauty essentials delivered swiftly and securely to any corner of Pakistan.",              phoneOne: { imageSrc: getAssetUrl("phone-fast-delivery"), imageAlt: "fast delivery mobile app tracking" },
              phoneTwo: { imageSrc: getAssetUrl("phone-authentic"), imageAlt: "secure online shopping phone display" }
            },
            {
              title: "Secure Payments & Easy Returns",              description: "Shop with confidence with our secure payment gateways and hassle-free return policy.",              phoneOne: { imageSrc: getAssetUrl("phone-authentic"), imageAlt: "Secure payment confirmation on phone" },
              phoneTwo: { imageSrc: getAssetUrl("phone-fast-delivery"), imageAlt: "Easy returns process on phone" }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="products" data-section="products">
        <ProductCardFour
          title="Best Sellers & Featured Categories"
          description="Explore our most loved products and discover top categories from Pakistani and Korean beauty."
          products={[
            { id: "p1", name: "Vitamin C Glow Serum", price: "PKR 2,499", variant: "Korean Skincare", imageSrc: getAssetUrl("product-1"), imageAlt: "pakistani skincare product bottle mockup" },
            { id: "p2", name: "Ubtan Radiance Face Mask", price: "PKR 1,200", variant: "Pakistani Skincare", imageSrc: getAssetUrl("product-2"), imageAlt: "korean sheet mask packaging design" },
            { id: "p3", name: "Hydrating Sheet Mask Pack", price: "PKR 1,599", variant: "Korean Skincare", imageSrc: getAssetUrl("product-3"), imageAlt: "beauty blender set soft pink background" },
            { id: "p4", name: "Long-Lasting Matte Lipstick", price: "PKR 1,850", variant: "Makeup", imageSrc: getAssetUrl("product-4"), imageAlt: "korean ampoule serum dropper bottle" },
            { id: "p5", name: "Gentle Cleansing Oil", price: "PKR 2,100", variant: "Korean Skincare", imageSrc: getAssetUrl("product-5"), imageAlt: "bb cream tube natural finish" },
            { id: "p6", name: "Rosewater Facial Mist", price: "PKR 899", variant: "Pakistani Skincare", imageSrc: getAssetUrl("product-6"), imageAlt: "vitamin C serum glowing skin bottle" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="flash-sale" data-section="flash-sale">
        <ProductCardFour
          title="Flash Sale & New Arrivals"
          description="Don't miss out on limited-time offers and discover the latest additions to our collection. Sale ends in: [Countdown Timer Placeholder]"
          products={[
            { id: "p7", name: "Anti-Aging Retinol Cream", price: "PKR 3,500", variant: "New Arrival", imageSrc: getAssetUrl("product-7"), imageAlt: "hyaluronic acid serum clear bottle" },
            { id: "p8", name: "Glow Boosting Primer", price: "PKR 1,950", variant: "Flash Sale", imageSrc: getAssetUrl("product-8"), imageAlt: "retinol serum elegant dark bottle" },
            { id: "p9", name: "Watermelon Sleeping Mask", price: "PKR 2,200", variant: "New Arrival", imageSrc: getAssetUrl("product-1"), imageAlt: "pakistani skincare product bottle mockup" },
            { id: "p10", name: "Velvet Lip Tint Set", price: "PKR 2,800", variant: "Flash Sale", imageSrc: getAssetUrl("product-2"), imageAlt: "korean sheet mask packaging design" },
            { id: "p11", name: "Exfoliating Toner Pads", price: "PKR 2,750", variant: "New Arrival", imageSrc: getAssetUrl("product-3"), imageAlt: "beauty blender set soft pink background" },
            { id: "p12", name: "Luxury Perfume Eau de Parfum", price: "PKR 4,500", variant: "Flash Sale", imageSrc: getAssetUrl("product-4"), imageAlt: "korean ampoule serum dropper bottle" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="kbeauty" data-section="kbeauty">
        <ProductCardFour
          title="Trending Korean Beauty"
          description="Immerse yourself in the world of K-Beauty with our selection of trending and innovative products."
          products={[
            { id: "k1", name: "Glass Skin Essence", price: "PKR 3,100", variant: "K-Beauty", imageSrc: getAssetUrl("product-5"), imageAlt: "bb cream tube natural finish" },
            { id: "k2", name: "Snail Mucin Repair Cream", price: "PKR 2,999", variant: "K-Beauty", imageSrc: getAssetUrl("product-6"), imageAlt: "vitamin C serum glowing skin bottle" },
            { id: "k3", name: "Centella Soothing Gel", price: "PKR 1,750", variant: "K-Beauty", imageSrc: getAssetUrl("product-7"), imageAlt: "hyaluronic acid serum clear bottle" },
            { id: "k4", name: "Propolis Blemish Ampoule", price: "PKR 2,600", variant: "K-Beauty", imageSrc: getAssetUrl("product-8"), imageAlt: "retinol serum elegant dark bottle" },
            { id: "k5", name: "Rice Water Cleansing Foam", price: "PKR 1,400", variant: "K-Beauty", imageSrc: getAssetUrl("product-1"), imageAlt: "pakistani skincare product bottle mockup" },
            { id: "k6", name: "Lip Sleeping Mask", price: "PKR 1,650", variant: "K-Beauty", imageSrc: getAssetUrl("product-2"), imageAlt: "korean sheet mask packaging design" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="reviews" data-section="reviews">
        <TestimonialCardSix
          title="What Our Customers Say"
          description="Hear from our happy customers who experienced true beauty with Walmart Store."
          testimonials={[
            { id: "t1", name: "Ayesha Khan", handle: "@AyeshaK_Beauty", testimonial: "Absolutely love the Korean skincare range! My skin has never felt this hydrated and glowing. Fast delivery to Lahore too!", imageSrc: getAssetUrl("testimonial-1"), imageAlt: "smiling woman happy customer review" },
            { id: "t2", name: "Fatima Rizvi", handle: "@FatimaRizvi", testimonial: "The Pakistani Ubtan mask is a game-changer. Authentic products and excellent customer service. Highly recommend Walmart Store!", imageSrc: getAssetUrl("testimonial-2"), imageAlt: "confident woman beauty product review" },
            { id: "t3", name: "Sara Ali", handle: "@SaraAliBeauty", testimonial: "Found all my favorite K-Beauty serums here. The variety is amazing and prices are competitive. Plus, secure checkout is a big win for me.", imageSrc: getAssetUrl("testimonial-3"), imageAlt: "happy woman natural beauty makeup" },
            { id: "t4", name: "Hina Imtiaz", handle: "@HinaImtiaz", testimonial: "My go-to for all things beauty! The makeup selection is fantastic, and the new arrivals always keep me excited. Five stars!", imageSrc: getAssetUrl("testimonial-4"), imageAlt: "smiling dark-haired woman beauty product" },
            { id: "t5", name: "Zainab Malik", handle: "@ZainabM_Glow", testimonial: "Trustworthy brand with authentic products. The shipping was surprisingly fast, and my order was perfectly packed.", imageSrc: getAssetUrl("testimonial-5"), imageAlt: "beautiful young woman elegant smile" },
            { id: "t6", name: "Nida Farooq", handle: "@NidaF_Skincare", testimonial: "This store brings the best of both worlds – high-quality Pakistani and Korean beauty right to my doorstep. Seamless shopping experience!", imageSrc: getAssetUrl("testimonial-6"), imageAlt: "confident woman looking at camera" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Beauty Blog & Guides"
          description="Stay updated with the latest skincare tips, makeup tutorials, and product reviews from our experts."
          blogs={[
            { id: "b1", category: "Skincare Tips", title: "Achieve Glass Skin: Your Ultimate K-Beauty Routine", excerpt: "Discover the step-by-step Korean beauty routine to get that coveted glass skin look.", imageSrc: getAssetUrl("blog-1"), imageAlt: "skincare routine flat lay products", authorName: "Samina Begum", authorAvatar: getAssetUrl("blog-author-1"), date: "July 10, 2024" },
            { id: "b2", category: "Product Reviews", title: "Top Pakistani Skincare Products You Need to Try", excerpt: "We review the best local skincare brands that are making waves in the beauty industry.", imageSrc: getAssetUrl("blog-2"), imageAlt: "korean beauty products shelf display", authorName: "Aisha Sohail", authorAvatar: getAssetUrl("blog-author-2"), date: "July 05, 2024" },
            { id: "b3", category: "Makeup Tutorials", title: "Master the No-Makeup Makeup Look", excerpt: "Learn how to create a natural, effortless makeup look perfect for everyday wear.", imageSrc: getAssetUrl("blog-3"), imageAlt: "makeup application beauty tools tutorial", authorName: "Zara Khan", authorAvatar: getAssetUrl("blog-author-3"), date: "June 28, 2024" }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Stay Connected"
          title="Get Exclusive Beauty Deals"
          description="Join our newsletter for special promotions, new product alerts, and expert beauty tips."
          buttons={[
            { text: "Sign Up Now", href: "#" }
          ]}
          background={{
            variant: "sparkles-gradient"
          }}
          useInvertedBackground={true}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Walmart Store"
          logoSrc={getAssetUrl("logo")}
          columns={[
            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact Us", href: "#contact" }, { label: "Blog", href: "#blog" }] },
            { title: "Customer Service", items: [{ label: "FAQs", href: "#" }, { label: "Shipping Policy", href: "#" }, { label: "Return Policy", href: "#" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }] }
          ]}
          copyrightText="© 2024 Walmart Store. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
