"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TagAbout from '@/components/sections/about/TagAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Sparkles, Star, Zap, Heart, HelpCircle, Mail, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="plain"
      cardStyle="solid-accent"
      primaryButtonStyle="outline"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Shimmer & Shine"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Shop", id: "products" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Nail Polish Perfection"
          description="Discover our exclusive collection of premium nail polish with stunning sparkle effects. Each bottle crafted for beauty, durability, and brilliance."
          tag="New Collection"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/make-up-nail-polish_23-2148109487.jpg"
          imageAlt="Hero nail polish showcase"
          frameStyle="card"
          buttons={[
            { text: "Explore Shop", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="Our Mission"
          description="We believe every manicure should be a masterpiece. Our nail polish is designed for those who demand quality, brilliance, and lasting beauty. From classic elegance to dazzling sparkle finishes, we create polish that transforms your nails into works of art."
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Collections"
          description="Hand-selected nail polish shades featuring our signature sparkle acrylic finishes"
          tag="Premium Quality"
          tagIcon={Star}
          products={[
            {
              id: "1",              name: "Midnight Sparkle",              price: "$12.99",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-blue-compostable-container_23-2149353099.jpg",              imageAlt: "Midnight Sparkle acrylic polish"
            },
            {
              id: "2",              name: "Diamond Dreams",              price: "$12.99",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-nail-polish-floating-water_23-2150963091.jpg",              imageAlt: "Diamond Dreams sparkle polish"
            },
            {
              id: "3",              name: "Golden Hour",              price: "$12.99",              imageSrc: "https://img.b2bpic.net/free-photo/view-frame-with-birthday-whistles-copy-space_23-2148425716.jpg",              imageAlt: "Golden Hour luxury nail polish"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "View All", href: "#products" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Why Choose Our Polish"
          description="Premium quality with stunning sparkle effects designed for nail perfection"
          tag="Excellence"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Ultra-Durable Formula",              description: "Long-lasting color that stays vibrant for weeks without chipping",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24225.jpg",              imageAlt: "Durable nail polish application"
            },
            {
              id: 2,
              title: "Sparkle & Shine Effect",              description: "Special acrylic formulation with brilliant sparkle for maximum impact",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-nail-care-treatment_23-2149262930.jpg",              imageAlt: "Sparkly acrylic nail polish"
            },
            {
              id: 3,
              title: "Premium Quality",              description: "Crafted with high-quality ingredients for professional results",              imageSrc: "https://img.b2bpic.net/free-photo/make-up-nail-polish_23-2148109488.jpg",              imageAlt: "Premium nail polish bottles"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertCard"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven
          title="Loved by Our Customers"
          description="See what nail enthusiasts are saying about our premium polish collection"
          tag="Reviews"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              nameTitle: "Sarah Mitchell, Beauty Influencer",              quote: "The sparkle effect on these acrylics is absolutely stunning. They last for weeks and the shine is unmatched. I recommend Shimmer & Shine to all my followers!",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              nameTitle: "Jessica Chen, Professional Nail Technician",              quote: "As a nail technician, I'm very picky about polish quality. These bottles are perfection. My clients rave about how long they last and the beautiful sparkle finish.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-professional-businesswoman-looking-upper-left-corner-with-hopeful-face-expression-standing-white_176420-41313.jpg",              imageAlt: "Jessica Chen"
            },
            {
              id: "3",              nameTitle: "Amanda Rodriguez, Beauty Enthusiast",              quote: "Finally found a polish that stays on without chipping! The diamond sparkle collection is my go-to for special occasions. Absolutely worth every penny.",              imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",              imageAlt: "Amanda Rodriguez"
            },
            {
              id: "4",              nameTitle: "Emily Thompson, Wedding Planner",              quote: "I use these polishes for all my brides. The formula is reliable, the colors are gorgeous, and the sparkle effects are wedding-day perfect every single time.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Emily Thompson"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about our nail polish"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How long does the sparkle acrylic polish last?",              content: "Our premium acrylic sparkle polish is designed to last 3-4 weeks with proper application and care. For best results, apply a base coat and seal with a top coat."
            },
            {
              id: "2",              title: "Can I apply this over regular nail polish?",              content: "Yes! Our polish works beautifully over any base. We recommend using a quality base coat to protect your natural nails and extend the wear time of our polish."
            },
            {
              id: "3",              title: "Is the sparkle formula safe for natural nails?",              content: "Absolutely. Our formula is crafted with high-quality, nail-safe ingredients. The special acrylic sparkle finish is designed to be gentle while providing maximum brilliance."
            },
            {
              id: "4",              title: "How do I remove the sparkle polish?",              content: "Use a standard nail polish remover. The sparkle effect will not damage your nails. We recommend moisturizing your nails after removal for best nail health."
            },
            {
              id: "5",              title: "Do you offer shade matching or consultations?",              content: "Yes! Contact us through our contact form or email, and our beauty experts will help you find the perfect shade for your skin tone and occasion."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Get in Touch"
          ctaDescription="Have questions about our nail polish? Reach out and we'll help you find the perfect shade."
          ctaButton={{ text: "Email Us", href: "mailto:hello@shimmerandshine.com" }}
          ctaIcon={Mail}
          faqs={[
            {
              id: "1",              title: "What's your shipping policy?",              content: "We offer free shipping on orders over $50 within the continental US. Standard shipping typically arrives in 5-7 business days. Express options available at checkout."
            },
            {
              id: "2",              title: "Do you offer bulk orders for salons?",              content: "Yes! Professional nail technicians and salons can inquire about wholesale pricing. Contact our team at wholesale@shimmerandshine.com for details."
            },
            {
              id: "3",              title: "Are your products cruelty-free?",              content: "We're proud to be 100% cruelty-free and vegan. Our nail polish is formulated without animal-derived ingredients and not tested on animals."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Shimmer & Shine"
          title="Premium nail polish crafted for beauty and brilliance"
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "Sparkle Collection", href: "#products" },
                { label: "New Arrivals", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Shipping Info", href: "#contact" },
                { label: "Returns", href: "#contact" },
                { label: "Care Guide", href: "#faq" }
              ]
            }
          ]}
          contactItems={[
            { icon: Mail, text: "hello@shimmerandshine.com" },
            { icon: Phone, text: "(555) 123-4567" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}