"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Leaf, Award, Globe } from 'lucide-react';

export default function SkincarePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Skincare"
          navItems={[
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="RADIANT SKIN"
          description="Premium skincare solutions infused with nature's most powerful ingredients. Transform your complexion with science-backed formulations."
          buttons={[
            { text: "Explore Products", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/ecological-cleaning-products-concept_23-2148781951.jpg",              imageAlt: "skincare beauty cosmetics natural skincare routine"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149291992.jpg",              imageAlt: "facial skincare beauty spa relaxation"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/spa-concept-with-wooden-bowls_23-2148268453.jpg",              imageAlt: "skincare ingredients natural organic beauty"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
          logoLineHeight={1.05}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Clinically proven skincare excellence transforming complexions worldwide through research-backed formulations and premium natural ingredients"
          metrics={[
            { icon: Heart, label: "Customer Satisfaction", value: "98%" },
            { icon: Leaf, label: "Natural Ingredients", value: "100%" },
            { icon: Award, label: "Years of Research", value: "15+" },
            { icon: Globe, label: "Global Customers", value: "250K+" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Why Choose Our Skincare"
          description="Each formula is crafted with precision, featuring ethically sourced ingredients and dermatologist-tested performance for visible results."
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "natural",              label: "Pure",              title: "100% Natural & Organic Ingredients",              items: [
                "No harmful chemicals or parabens",                "Ethically sourced from sustainable farms",                "Cold-pressed extraction methods",                "Eco-friendly packaging"
              ]
            },
            {
              id: "science",              label: "Proven",              title: "Dermatologist-Tested Formulations",              items: [
                "Clinically studied ingredients",                "Visible results in 14 days",                "Safe for all skin types",                "Hypoallergenic certified"
              ]
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Featured Products"
          description="Discover our bestselling skincare essentials designed to elevate your daily beauty routine."
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "moisturizer",              name: "Luminous Hydrating Moisturizer",              price: "$58",              variant: "All Skin Types · 2 oz",              imageSrc: "https://img.b2bpic.net/free-photo/natural-medicine-concept-with-product_23-2148899367.jpg",              imageAlt: "moisturizer skincare product bottle cosmetics",              isFavorited: false
            },
            {
              id: "serum",              name: "Radiance Boosting Vitamin C Serum",              price: "$72",              variant: "Brightening Formula · 1 oz",              imageSrc: "https://img.b2bpic.net/free-photo/minimalist-skin-care-product-presentation_23-2151921111.jpg",              imageAlt: "serum skincare product bottle anti-aging",              isFavorited: false
            },
            {
              id: "sunscreen",              name: "Protective Mineral Sunscreen SPF 50",              price: "$45",              variant: "Non-Nano Zinc · 3 oz",              imageSrc: "https://img.b2bpic.net/free-photo/skin-care-product-with-tropical-leaf-shadow_23-2148761455.jpg",              imageAlt: "sunscreen skincare product bottle uv-protection",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple Skincare Plans"
          description="Choose the perfect skincare bundle for your unique needs and budget."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "starter",              tag: "Starter Kit",              price: "$99",              period: "/month",              description: "Perfect for beginning your skincare journey with essential products.",              button: { text: "Choose Plan", href: "#" },
              featuresTitle: "What's Included:",              features: [
                "Hydrating Moisturizer",                "Gentle Cleanser",                "Monthly delivery",                "Free shipping"
              ]
            },
            {
              id: "premium",              tag: "Premium Collection",              price: "$179",              period: "/month",              description: "Our most popular choice with complete skincare essentials.",              button: { text: "Choose Plan", href: "#" },
              featuresTitle: "What's Included:",              features: [
                "Hydrating Moisturizer",                "Vitamin C Serum",                "Gentle Cleanser",                "Eye Cream",                "Monthly delivery",                "Free express shipping",                "Priority support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by over 250,000 beauty enthusiasts who've transformed their skin with our premium formulations"
          cardTag="See what customers say"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "woman portrait professional avatar headshot"
            },
            {
              id: "2",              name: "Jessica Chen",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              imageAlt: "woman portrait professional avatar headshot"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg",              imageAlt: "woman portrait professional avatar headshot"
            },
            {
              id: "4",              name: "Angela Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-entrepreneur-woman_23-2148898746.jpg",              imageAlt: "woman portrait professional avatar headshot"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Skincare Questions Answered"
          description="Find answers to common questions about our products, ingredients, and skincare routines."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Are your products safe for sensitive skin?",              content: "Yes, all our formulations are dermatologist-tested and hypoallergenic. We avoid harsh chemicals, fragrance, and parabens. If you have specific allergies or concerns, we recommend doing a patch test first or consulting with a dermatologist."
            },
            {
              id: "2",              title: "How long does it take to see results?",              content: "Most customers notice visible improvements in skin hydration and clarity within 14 days. For anti-aging benefits like reduced fine lines, it typically takes 4-8 weeks of consistent use. Results vary based on individual skin types and conditions."
            },
            {
              id: "3",              title: "Can I use multiple products together?",              content: "Absolutely! Our product lines are designed to work synergistically. We recommend cleansing, applying serum, using moisturizer, and finishing with sunscreen during the day. For nighttime, follow with our eye cream and moisturizer."
            },
            {
              id: "4",              title: "What is your return policy?",              content: "We offer a 60-day money-back guarantee on all products. If you're not completely satisfied, simply return the items in their original packaging for a full refund. No questions asked."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Join Our Beauty Community"
          description="Subscribe to receive exclusive skincare tips, new product launches, and special member-only discounts delivered to your inbox."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/spa-beauty-treatment-copy-space_23-2148677964.jpg"
          imageAlt="skincare beauty natural spa wellness"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our marketing emails and terms."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Radiant Skin"
          columns={[
            {
              title: "Products",              items: [
                { label: "Skincare Line", href: "/products" },
                { label: "Bestsellers", href: "/bestsellers" },
                { label: "New Arrivals", href: "/new" },
                { label: "Gift Sets", href: "/gifts" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Mission", href: "/mission" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "/faq" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Returns", href: "/returns" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" },
                { label: "Pinterest", href: "https://pinterest.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Radiant Skin. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}