"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

const assetMap = {
  "logo-light": {
    "url": "http://img.b2bpic.net/free-vector/illustration-business-shop-logo-stamp-banner_53876-3734.jpg",    "alt": "luxury dropshipping logo elegant"
  },
  "hero-avatar-1": {
    "url": "http://img.b2bpic.net/free-photo/happy-young-shopper-satisfied-with-discount_1262-14986.jpg",    "alt": "woman enjoying luxury product"
  },
  "hero-avatar-2": {
    "url": "http://img.b2bpic.net/free-photo/blond-man-with-coffee-shopping-bags_23-2148316534.jpg",    "alt": "man with luxury watch smile"
  },
  "hero-avatar-3": {
    "url": "http://img.b2bpic.net/free-photo/portrait-rich-woman-with-luxurious-jewelry_23-2149548566.jpg",    "alt": "woman smiling with elegant jewelry"
  },
  "hero-avatar-4": {
    "url": "http://img.b2bpic.net/free-photo/close-up-slender-model-with-gift_132075-7621.jpg",    "alt": "person holding premium skincare"
  },
  "about-luxury-item": {
    "url": "http://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808016.jpg",    "alt": "exquisite handcrafted luxury item"
  },
  "feature-curated-selection": {
    "url": "http://img.b2bpic.net/free-photo/two-young-beautiful-girls-making-shopping-mall_176420-5782.jpg",    "alt": "hand selecting luxury items showcase"
  },
  "feature-fast-shipping": {
    "url": "http://img.b2bpic.net/free-photo/happy-couple-home-office-with-online-business-marketing-online-freelance-job_1150-4975.jpg",    "alt": "luxury package delivery speed"
  },
  "feature-quality-assurance": {
    "url": "http://img.b2bpic.net/free-photo/mature-blonde-business-woman-work_23-2149100296.jpg",    "alt": "hand inspecting luxury product quality"
  },
  "product-1": {
    "url": "http://img.b2bpic.net/free-photo/black-cup-tea-with-headphones-red-background_185193-163975.jpg",    "alt": "sleek modern wireless headphones luxury"
  },
  "product-2": {
    "url": "http://img.b2bpic.net/free-photo/hand-bag-layout-with-place-text-women-s-accessories-jewellery-background-mockup-banner-fashion-accessories_460848-13220.jpg",    "alt": "elegant leather handbag luxury brand"
  },
  "product-3": {
    "url": "http://img.b2bpic.net/free-photo/crop-hand-coffee-machine_23-2147775909.jpg",    "alt": "gourmet coffee maker luxury kitchen"
  },
  "product-4": {
    "url": "http://img.b2bpic.net/free-photo/side-view-young-man-listening-music-earphones-outside_23-2148381751.jpg",    "alt": "minimalist smart watch luxury timepiece"
  },
  "product-5": {
    "url": "http://img.b2bpic.net/free-photo/blonde-woman-awaking-her-bed-home_1398-1383.jpg",    "alt": "luxurious silk pillowcase anti-aging"
  },
  "product-6": {
    "url": "http://img.b2bpic.net/free-photo/home-still-life-interior-with-beautiful-candles-table-cozy-home-decor_169016-1311.jpg",    "alt": "artisan scented candle luxury aroma"
  },
  "testimonial-1": {
    "url": "http://img.b2bpic.net/free-photo/young-woman-shopping-clothes_23-2149187303.jpg",    "alt": "happy woman holding luxury item"
  },
  "testimonial-2": {
    "url": "http://img.b2bpic.net/free-photo/five-golden-stars-inside-white-message-box-client-excellent-evaluation-by-3d-render_616485-27.jpg",    "alt": "man enjoying luxury product experience"
  },
  "testimonial-3": {
    "url": "http://img.b2bpic.net/free-photo/young-people-having-fun-white-party_23-2149429859.jpg",    "alt": "woman delighted with elegant packaging"
  },
  "testimonial-4": {
    "url": "http://img.b2bpic.net/free-photo/girls-with-coffee_1157-16533.jpg",    "alt": "man smiling with a luxury accessory"
  },
  "testimonial-5": {
    "url": "http://img.b2bpic.net/free-photo/close-up-woman-decorating-her-home-with-orchids_23-2150960617.jpg",    "alt": "woman happy with a luxury home decor item"
  },
  "faq-customer-service": {
    "url": "http://img.b2bpic.net/free-photo/businessman-provides-information-front-desk-check-procedure-travelling-work-purposes-attend-official-conference-receptionist-greeting-professional-client-lobby_482257-65299.jpg",    "alt": "elegant customer service desk"
  },
  "contact-luxury-desk": {
    "url": "http://img.b2bpic.net/free-photo/warm-lighting-drawer-row-blue-fronts_169016-68933.jpg",    "alt": "sleek modern executive desk"
  }
};

function resolveAsset(id) {
  return assetMap[id];
}

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxuria Finds"
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "About", id: "#about" },
            { name: "Products", id: "#products" },
            { name: "Reviews", id: "#testimonials" },
            { name: "FAQ", id: "#faq" },
            { name: "Contact", id: "#contact" }
          ]}
          button={{
            text: "Shop Now",            href: "#products"
          }}
          logoSrc={resolveAsset("logo-light")?.url}
          logoAlt={resolveAsset("logo-light")?.alt}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Discover Exquisite Living, Delivered to Your Door"
          description="Curated luxury products for an elevated lifestyle. Experience seamless shopping and unparalleled quality, meticulously sourced for you."
          background={{ variant: "sparkles-gradient" }}
          avatars={[
            { src: resolveAsset("hero-avatar-1")?.url, alt: resolveAsset("hero-avatar-1")?.alt || "Happy customer Sarah" },
            { src: resolveAsset("hero-avatar-2")?.url, alt: resolveAsset("hero-avatar-2")?.alt || "Satisfied customer Mike" },
            { src: resolveAsset("hero-avatar-3")?.url, alt: resolveAsset("hero-avatar-3")?.alt || "Pleased customer Emily" },
            { src: resolveAsset("hero-avatar-4")?.url, alt: resolveAsset("hero-avatar-4")?.alt || "Delighted customer David" }
          ]}
          avatarText="Trusted by a global community of discerning buyers"
          buttons={[
            { text: "Shop Collections", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="text-stagger"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Our Commitment to Elevated Experiences"
          description="At Luxuria Finds, we meticulously source unique, high-quality products from around the globe. Our passion is to bring luxury, convenience, and exceptional design directly to you, ensuring every purchase enriches your lifestyle with unparalleled craftsmanship and thoughtful curation."
          metrics={[
            { value: "1000+", title: "Exclusive Products" },
            { value: "10K+", title: "Happy Customers" },
            { value: "50+", title: "Global Brands" }
          ]}
          useInvertedBackground={true}
          imageSrc={resolveAsset("about-luxury-item")?.url}
          imageAlt={resolveAsset("about-luxury-item")?.alt}
          mediaAnimation="text-stagger"
          metricsAnimation="text-stagger"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="The Luxuria Difference"
          description="Experience unparalleled service and product excellence designed for the discerning individual."
          features={[
            { title: "Curated Selection", description: "Every product is hand-picked for its superior quality, unique design, and luxurious appeal, ensuring an exclusive collection.", imageSrc: resolveAsset("feature-curated-selection")?.url, imageAlt: resolveAsset("feature-curated-selection")?.alt },
            { title: "Seamless Shopping", description: "Enjoy a frictionless online experience with intuitive navigation, secure checkout, and dedicated customer support at every step.", imageSrc: resolveAsset("feature-fast-shipping")?.url, imageAlt: resolveAsset("feature-fast-shipping")?.alt },
            { title: "Quality Assurance", description: "We uphold the highest standards, ensuring that every item meets our rigorous quality checks before it reaches your hands.", imageSrc: resolveAsset("feature-quality-assurance")?.url, imageAlt: resolveAsset("feature-quality-assurance")?.alt }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Curated Luxury Collections"
          description="Explore our hand-picked selection of high-end items designed to inspire and delight, adding a touch of elegance to your everyday."
          products={[
            { id: "1", brand: "Aura Sounds", name: "Elegance Pro Headphones", price: "$499.00", rating: 5, reviewCount: "120 Reviews", imageSrc: resolveAsset("product-1")?.url, imageAlt: resolveAsset("product-1")?.alt },
            { id: "2", brand: "Haute Leather", name: "Signature Tote Bag", price: "$899.00", rating: 5, reviewCount: "85 Reviews", imageSrc: resolveAsset("product-2")?.url, imageAlt: resolveAsset("product-2")?.alt },
            { id: "3", brand: "Brew Haven", name: "Artisan Coffee System", price: "$1299.00", rating: 5, reviewCount: "50 Reviews", imageSrc: resolveAsset("product-3")?.url, imageAlt: resolveAsset("product-3")?.alt },
            { id: "4", brand: "ChronoCraft", name: "Zenith Smartwatch", price: "$349.00", rating: 4, reviewCount: "150 Reviews", imageSrc: resolveAsset("product-4")?.url, imageAlt: resolveAsset("product-4")?.alt },
            { id: "5", brand: "Silk Haven", name: "Pure Mulberry Silk Pillowcase", price: "$89.00", rating: 5, reviewCount: "200 Reviews", imageSrc: resolveAsset("product-5")?.url, imageAlt: resolveAsset("product-5")?.alt },
            { id: "6", brand: "Aroma Luxe", name: "Santorini Sunset Candle", price: "$55.00", rating: 5, reviewCount: "75 Reviews", imageSrc: resolveAsset("product-6")?.url, imageAlt: resolveAsset("product-6")?.alt }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Voices of Our Valued Customers"
          cardTag="Rave Reviews"
          testimonials={[
            { id: "1", name: "Eleanor V.", imageSrc: resolveAsset("testimonial-1")?.url, imageAlt: resolveAsset("testimonial-1")?.alt },
            { id: "2", name: "Marcus R.", imageSrc: resolveAsset("testimonial-2")?.url, imageAlt: resolveAsset("testimonial-2")?.alt },
            { id: "3", name: "Isabella S.", imageSrc: resolveAsset("testimonial-3")?.url, imageAlt: resolveAsset("testimonial-3")?.alt },
            { id: "4", name: "Julian B.", imageSrc: resolveAsset("testimonial-4")?.url, imageAlt: resolveAsset("testimonial-4")?.alt },
            { id: "5", name: "Olivia M.", imageSrc: resolveAsset("testimonial-5")?.url, imageAlt: resolveAsset("testimonial-5")?.alt }
          ]}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Featured in Leading Publications"
          description="Our commitment to luxury and quality has earned us recognition and praise from top-tier lifestyle and fashion authorities."
          names={["Vogue Living", "GQ Style", "Luxury Insider", "Elite Lifestyle", "Design Journal", "The Style Edit", "Opulent Homes"]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            { id: "1", title: "What is Luxuria Finds?", content: "Luxuria Finds is an exclusive online destination for discerning customers seeking high-quality, curated luxury products from around the world, delivered directly to your door." },
            { id: "2", title: "How does shipping work?", content: "We partner with premium logistics providers to ensure fast, secure, and trackable shipping for all orders. Delivery times vary by product and destination, but we prioritize efficiency and care." },
            { id: "3", title: "What is your return policy?", content: "Your satisfaction is our priority. We offer a hassle-free return policy for eligible items within 30 days of purchase. Please refer to our detailed returns page for more information." },
            { id: "4", title: "Are your products authentic?", content: "Absolutely. We guarantee the authenticity of every product we sell. We source directly from authorized distributors and reputable luxury brands to ensure genuine quality." }
          ]}
          imageSrc={resolveAsset("faq-customer-service")?.url}
          imageAlt={resolveAsset("faq-customer-service")?.alt}
          mediaAnimation="text-stagger"
          title="Frequently Asked Questions"
          description="Find quick answers to common inquiries about our products and services, ensuring a smooth and confident shopping experience."
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch with Our Concierge Team"
          description="Have a question or need assistance with an order? Our dedicated team is here to provide personalized support and ensure your experience is flawless."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: false }
          ]}
          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
          useInvertedBackground={true}
          imageSrc={resolveAsset("contact-luxury-desk")?.url}
          imageAlt={resolveAsset("contact-luxury-desk")?.alt}
          mediaAnimation="text-stagger"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoText="Luxuria Finds"
          columns={[
            { title: "Shop", items: [{ label: "Collections", href: "#products" }, { label: "New Arrivals", href: "#" }, { label: "Best Sellers", href: "#" }] },
            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Mission", href: "#about" }, { label: "Press", href: "#social-proof" }] },
            { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact Us", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }
          ]}
          copyrightText="© 2024 Luxuria Finds. All rights reserved."
          logoSrc={resolveAsset("logo-light")?.url}
          logoAlt={resolveAsset("logo-light")?.alt}
        />
      </div>
    </ThemeProvider>
  );
}
