"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, TrendingUp, Zap, Shield, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="LUMINOUS"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Shop Now",
            href: "products"
          }}
          className="bg-white/80 backdrop-blur-md"
          navItemClassName="text-sm font-medium"
          buttonClassName="px-6 py-2.5"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          tag="LIMITED TIME OFFER"
          title="Visible Skin Results in 14 Days"
          description="Dermatologist-tested formulas designed to restore, hydrate, and protect your skin. Join 12,000+ verified customers seeing real transformation."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643703492-o0tl3yti.jpg"
          imageAlt="Premium skincare serum bottle"
          buttons={[
            { text: "Shop Bestsellers", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          className="relative"
          titleClassName="text-4xl md:text-5xl font-bold tracking-tight"
          descriptionClassName="text-lg md:text-xl text-foreground/80 max-w-2xl"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Hero Products & Routines"
          description="Curated bestsellers proven to deliver visible results. Choose your perfect routine."
          tag="BESTSELLERS"
          products={[
            {
              id: "1",
              brand: "LUMINOUS",
              name: "Gentle Cleanse",
              price: "$32.00",
              rating: 5,
              reviewCount: "2.4k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643704607-300wohbd.jpg",
              imageAlt: "Gentle Cleanse facial cleanser",
              isFavorited: false
            },
            {
              id: "2",
              brand: "LUMINOUS",
              name: "Hydra Boost Moisturizer",
              price: "$38.00",
              rating: 5,
              reviewCount: "3.1k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643705437-1xkd5321.jpg",
              imageAlt: "Hydra Boost Moisturizer jar",
              isFavorited: false
            },
            {
              id: "3",
              brand: "LUMINOUS",
              name: "Renewal Serum",
              price: "$48.00",
              rating: 5,
              reviewCount: "3.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706151-xqxlt09a.jpg",
              imageAlt: "Renewal Serum dropper bottle",
              isFavorited: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Complete Skincare Routines"
          description="Choose a routine that works for your skin type. Save up to 20% with bundle pricing."
          tag="SAVE MORE"
          plans={[
            {
              id: "single",
              price: "$32",
              name: "Single Product",
              buttons: [
                { text: "Select Product", href: "products" },
                { text: "Learn More" }
              ],
              features: [
                "One hero product",
                "Free shipping on orders $50+",
                "30-day money-back guarantee",
                "Access to support"
              ]
            },
            {
              id: "routine",
              badge: "MOST POPULAR",
              badgeIcon: Sparkles,
              price: "$95",
              name: "Complete Routine",
              buttons: [
                { text: "Get Routine", href: "products" },
                { text: "Chat With Expert" }
              ],
              features: [
                "Cleanse + Treat + Protect trio",
                "Free shipping always",
                "15% subscription discount",
                "Priority support",
                "Free sample set included"
              ]
            },
            {
              id: "bundle",
              price: "$125",
              name: "Ultimate Bundle",
              buttons: [
                { text: "Get Bundle", href: "products" },
                { text: "View Details" }
              ],
              features: [
                "Complete 5-step routine",
                "Concentrated serum bonus",
                "Free express shipping",
                "20% subscription savings",
                "VIP customer care"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Why Dermatologists Recommend Luminous"
          description="Our formulas are developed with leading dermatologists and tested in clinical labs. Every product is designed to deliver visible results in 14 days or your money back. We believe skincare should be simple, effective, and backed by science—not hype."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643708433-rrdlfqxu.jpg"
          imageAlt="Premium skincare ingredients"
          imagePosition="right"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Read Our Story", href: "#" },
            { text: "View Certifications", href: "#" }
          ]}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardEighteen
          title="Our Formulas vs. Conventional Brands"
          description="See the difference science-backed skincare makes."
          tag="PROVEN RESULTS"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Conventional Brands",
            items: [
              "Harsh chemical fillers & preservatives",
              "Limited clinical testing",
              "Slow results (6+ months)",
              "Hard to track effectiveness",
              "No skin type customization"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706951-gqql06yg.jpg",
            imageAlt: "Before transformation"
          }}
          positiveCard={{
            title: "Luminous Skincare",
            items: [
              "Clean, dermatologist-approved ingredients",
              "Clinically tested & validated",
              "Visible results in 14 days",
              "Real customer testimonials with proof",
              "Personalized recommendations for your skin"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643706951-gqql06yg.jpg",
            imageAlt: "After transformation"
          }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Real Results from Real Customers"
          description="Join thousands of people who transformed their skin in just 14 days."
          tag="VERIFIED REVIEWS"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Verified Buyer",
              testimonial: "My redness was completely gone in 10 days. I'm shocked at how fast this worked. Finally found a product that actually delivers on its promises.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643709459-5wdbgujt.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "Emily Rodriguez",
              role: "Verified Buyer",
              testimonial: "No more breakouts after switching to this routine. My skin has never looked clearer. The serum alone is worth every penny.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643710136-ruy49c57.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "3",
              name: "Jessica Chen",
              role: "Verified Buyer",
              testimonial: "My dermatologist asked what I changed. These products transformed my sensitive skin without any irritation. Best skincare investment I've made.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643710713-rxkbyehg.jpg",
              imageAlt: "Jessica Chen"
            },
            {
              id: "4",
              name: "Laura Thompson",
              role: "Verified Buyer",
              testimonial: "At 45, I was skeptical about anti-aging claims. But the fine lines around my eyes visibly softened in two weeks. Game-changer for mature skin.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643711414-hhlov9az.jpg",
              imageAlt: "Laura Thompson"
            },
            {
              id: "5",
              name: "Rachel Adams",
              role: "Verified Buyer",
              testimonial: "Finally, a skincare line that's clean AND effective. My hyperpigmentation is fading fast. Love that it's cruelty-free too.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643712172-j515xqam.jpg",
              imageAlt: "Rachel Adams"
            },
            {
              id: "6",
              name: "Sophia Williams",
              role: "Verified Buyer",
              testimonial: "The 30-day guarantee gave me confidence to try. I didn't need a refund—results spoke for themselves. Permanent customer now.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767643712766-1crrqx4y.jpg",
              imageAlt: "Sophia Williams"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          uniformGridCustomHeightClasses="min-h-auto"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="Why Customers Choose Luminous"
          description="Proven trust through science and real results."
          tag="OUR PROMISE"
          metrics={[
            {
              id: "1",
              value: "98%",
              tag: "Satisfaction",
              tagIcon: TrendingUp,
              title: "Customer Satisfaction Rate"
            },
            {
              id: "2",
              value: "14 Days",
              tag: "Timeline",
              tagIcon: Zap,
              title: "Visible Results Guaranteed"
            },
            {
              id: "3",
              value: "100%",
              tag: "Trust",
              tagIcon: Shield,
              title: "Money-Back Guarantee"
            },
            {
              id: "4",
              value: "12K+",
              tag: "Community",
              tagIcon: Users,
              title: "Verified Customer Reviews"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="four-items-2x2-equal-grid"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about our skincare and ordering process."
          tag="SUPPORT"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How long until I see results?",
              content: "Most customers report visible improvements within 7-14 days of consistent use. Full results typically appear within 4-6 weeks. Our 30-day money-back guarantee means you can try risk-free."
            },
            {
              id: "2",
              title: "Is this suitable for sensitive skin?",
              content: "Yes. Our formulas are dermatologist-tested and free from parabens, sulfates, and fragrances. We recommend starting with the Gentle Cleanse and introducing one product at a time to monitor your skin's response."
            },
            {
              id: "3",
              title: "Can I use these products with acne medications?",
              content: "Our products are designed to complement most dermatological treatments. However, we recommend consulting your dermatologist before introducing new skincare, especially if using prescription acne medications like isotretinoin."
            },
            {
              id: "4",
              title: "What's your return and refund policy?",
              content: "We offer a hassle-free 30-day money-back guarantee. Simply contact our support team within 30 days of purchase for a full refund, no questions asked. We also cover return shipping on all returns."
            },
            {
              id: "5",
              title: "Are your products vegan and cruelty-free?",
              content: "Yes, all Luminous products are 100% vegan and cruelty-free. We're certified by leading animal welfare organizations and never test on animals. All our ingredients are ethically sourced."
            },
            {
              id: "6",
              title: "Do you offer subscription discounts?",
              content: "Yes! Subscribe to our auto-delivery and save 10-20% on all products. You can pause or cancel anytime with zero penalties. Subscribers also get early access to new products and exclusive deals."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your skin? Risk-free with our 30-day money-back guarantee. Start your skincare journey today."
          animationType="reveal-blur"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Shop Bestsellers", href: "products" },
            { text: "Contact Support", href: "#" }
          ]}
          textClassName="text-2xl md:text-3xl font-bold"
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LUMINOUS"
          logoLineHeight={1.2}
        />
      </div>
    </ThemeProvider>
  );
}