"use client"

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CheckCircle, Leaf, Shield, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="The Soap Shop"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "#products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Organic soap bars, made simple."
          description="Small-batch, plant-based bars with transparent ingredients and real results—without harsh detergents. Free shipping over $35 • 30-day satisfaction promise."
          background={{ variant: "plain" }}
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",              alt: "Customer testimonial"
            },
            {
              src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              alt: "Customer testimonial"
            },
            {
              src: "http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              alt: "Customer testimonial"
            }
          ]}
          avatarText="Trusted by 2,000+ customers"
          buttons={[
            {
              text: "Shop Best Sellers",              href: "#products"
            },
            {
              text: "Learn About Ingredients",              href: "#about"
            }
          ]}
        />
      </div>

      <div id="trust" data-section="trust">
        <FeatureCardOne
          features={[
            {
              title: "Plant-Based Ingredients",              description: "Formulated with organic oils and botanical extracts for gentle, effective cleansing.",              imageSrc: "http://img.b2bpic.net/free-photo/healthy-rustic-ingredients_53876-75021.jpg",              imageAlt: "Plant-based ingredients"
            },
            {
              title: "No Harsh Chemicals",              description: "Free from parabens, phthalates, and synthetic detergents. Every ingredient listed.",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-rosemary-fresh-plant-bottle-rosemary-oil_1150-35585.jpg",              imageAlt: "No harsh chemicals"
            },
            {
              title: "Small-Batch Quality",              description: "Made in small batches for consistency and freshness. Handcrafted with care.",              imageSrc: "http://img.b2bpic.net/free-photo/fork-cutting-board-new-year-table-with-decor-background-new-year-eve-concept_132075-11255.jpg",              imageAlt: "Small-batch production"
            },
            {
              title: "Fast Tracked Shipping",              description: "Ships within 1-2 business days with tracking. Free shipping on orders over $35.",              imageSrc: "http://img.b2bpic.net/free-photo/delivery-concept-handsome-african-american-delivery-man-rush-running-delivering-package-customer-isolated-grey-studio-background-copy-space_1258-1274.jpg",              imageAlt: "Fast shipping"
            }
          ]}
          title="Why Choose The Soap Shop"
          description="We believe in transparency, quality, and simplicity. No mystery blends, no greenwashing—just honest soap."
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Best Sellers"
          description="Our most-loved organic soap bars. Each bar is handcrafted and ready to ship."
          products={[
            {
              id: "1",              name: "Oat + Honey Bar",              price: "$8.00",              imageSrc: "http://img.b2bpic.net/free-photo/natural-beautiful-spa-cosmetics-body-care_169016-5048.jpg",              imageAlt: "Oat and honey soap bar"
            },
            {
              id: "2",              name: "Charcoal + Tea Tree",              price: "$8.00",              imageSrc: "http://img.b2bpic.net/free-photo/dish-cleaning-tools-desk_23-2148116105.jpg",              imageAlt: "Charcoal and tea tree soap bar"
            },
            {
              id: "3",              name: "Lavender + Shea",              price: "$8.00",              imageSrc: "http://img.b2bpic.net/free-photo/colorful-soaps-bouquet-lavender_23-2148317682.jpg",              imageAlt: "Lavender and shea soap bar"
            },
            {
              id: "4",              name: "Citrus + Calendula",              price: "$8.00",              imageSrc: "http://img.b2bpic.net/free-photo/orange-soap-with-fresh-orange-marble-background_1150-45547.jpg",              imageAlt: "Citrus and calendula soap bar"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Ingredient Transparency We believe in simple, honest soap. Every ingredient is listed and sourced with intention. No vague 'fragrance blends'—just essential oils and botanical extracts you can trust."
          metrics={[
            {
              icon: Leaf,
              label: "Plant-Based Oils",              value: "100%"
            },
            {
              icon: Shield,
              label: "Free From",              value: "Parabens"
            },
            {
              icon: CheckCircle,
              label: "Transparent",              value: "Always"
            },
            {
              icon: Sparkles,
              label: "Satisfaction",              value: "Guaranteed"
            }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Customer Reviews"
          description="Real feedback from real customers who love our soap."
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Customer",              testimonial: "My skin has never felt better. These bars are gentle yet effective, and I love knowing exactly what's in them.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=1",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              role: "Verified Buyer",              testimonial: "Switched to The Soap Shop bars 6 months ago and haven't looked back. The lavender shea is my go-to.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Verified Buyer",              testimonial: "As someone with sensitive skin, I was nervous. But these bars are perfect—no irritation, just clean skin.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=2",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Park",              role: "Verified Buyer",              testimonial: "The charcoal bar is a game-changer for oily skin. Worth every penny and ships fast too.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "David Park"
            },
            {
              id: "5",              name: "Lisa Thompson",              role: "Verified Buyer",              testimonial: "I've tried expensive brands, but these beat them all. Plus, the transparency about ingredients is refreshing.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=3",              imageAlt: "Lisa Thompson"
            },
            {
              id: "6",              name: "Marcus Williams",              role: "Verified Buyer",              testimonial: "Bought for my family, and we all switched. Simple, effective, and honest—that's The Soap Shop.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Marcus Williams"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our organic soap bars."
          faqs={[
            {
              id: "1",              title: "How long does each bar last?",              content: "Each bar lasts 4-6 weeks with regular daily use. Store on a dry soap dish between showers to maximize lifespan."
            },
            {
              id: "2",              title: "Are your soaps suitable for sensitive skin?",              content: "Yes. Our unscented shea bar is formulated specifically for sensitive skin. We recommend patch testing with any new soap if you have known allergies."
            },
            {
              id: "3",              title: "What's your return policy?",              content: "We offer a 30-day satisfaction guarantee. If you don't love your bar, we'll make it right—no questions asked."
            },
            {
              id: "4",              title: "How fast does shipping take?",              content: "Orders ship within 1-2 business days with tracked delivery. Free shipping on orders over $35. Standard shipping typically arrives in 5-7 business days."
            },
            {
              id: "5",              title: "Are your soaps vegan?",              content: "Most of our bars are vegan and plant-based. Our goat milk and honey bars contain those ingredients for added nourishment."
            },
            {
              id: "6",              title: "Do you ship internationally?",              content: "Currently, we ship to the US only. Interested in international orders? Contact us and we'll see what we can do."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay in the loop."
          description="Get 10% off your first order, plus exclusive batch drops and ingredient tips delivered to your inbox."
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/soap-bars-with-flowers-white-surface_93675-135185.jpg"
          imageAlt="Newsletter signup"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get 10% Off"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/clean-bathroom-minimal-home-decor_53876-134402.jpg?_wi=1"
          imageAlt="Footer background"
          logoText="The Soap Shop"
          copyrightText="© 2025 The Soap Shop. Handcrafted organic soap bars."
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "Best Sellers", href: "#products" },
                { label: "Bundles", href: "#products" },
                { label: "Gift Sets", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Ingredients", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}