"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="noiseDiagonalGradient"
      cardStyle="solid-accent-light"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="LuminaSkin"
          button={{
            text: "Shop Now",
            href: "#products"
          }}
          className="sticky top-0 z-50"
          buttonClassName="font-semibold"
        />
      </div>

      <div id="announcement" data-section="announcement">
        <HeroBillboardSplit
          title="Visible Skin Results in 14 Days"
          description="Dermatologist-tested formulas designed to restore, hydrate, and protect your skin. Rated 4.8★ by 12,000+ verified customers."
          tag="LIMITED BATCH AVAILABLE"
          tagIcon={Zap}
          buttons={[{
            text: "Shop Bestsellers",
            href: "#products"
          }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698397699-5txfoimz.jpg"
          imageAlt="Premium skincare serum product"
          frameStyle="card"
          className="min-h-screen flex items-center justify-center"
          titleClassName="text-5xl md:text-6xl font-light leading-tight"
          descriptionClassName="text-lg md:text-xl font-light max-w-md"
          tagClassName="font-medium text-sm tracking-wide"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          products={[
            {
              id: "1",
              brand: "LuminaSkin",
              name: "Radiant Cleanser",
              price: "$48.00",
              rating: 5,
              reviewCount: "2.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698399081-caft5drj.jpg",
              imageAlt: "Gentle face cleanser bottle"
            },
            {
              id: "2",
              brand: "LuminaSkin",
              name: "Renewal Serum",
              price: "$72.00",
              rating: 5,
              reviewCount: "3.2k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698398558-tdq57qwl.jpg",
              imageAlt: "Hydrating treatment serum"
            },
            {
              id: "3",
              brand: "LuminaSkin",
              name: "Intensive Moisturizer",
              price: "$64.00",
              rating: 5,
              reviewCount: "2.5k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698398238-o9lonobv.jpg",
              imageAlt: "Premium face moisturizer"
            },
            {
              id: "4",
              brand: "LuminaSkin",
              name: "Complete Routine Bundle",
              price: "$149.99",
              rating: 5,
              reviewCount: "1.9k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698399341-djbk2fc0.jpg",
              imageAlt: "Complete skincare routine set"
            }
          ]}
          gridVariant="uniform-alternating-heights"
          animationType="slide-up"
          title="Hero Skincare Collection"
          description="Premium formulations delivering clinically proven results. Choose single products or complete routines with up to 30% savings."
          tag="BEST VALUE"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{
            text: "View All Products",
            href: "#contact"
          }]}
          containerClassName="py-20"
          cardClassName="rounded-lg overflow-hidden"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Clinically Proven Results You Can See"
          description="Our breakthrough formula combines natural ingredients with scientific innovation. In clinical trials, 94% of users saw visible improvement in just 2 weeks."
          tag="DERMATOLOGIST TESTED"
          buttons={[
            {
              text: "Learn About Our Science",
              href: "#trust"
            },
            {
              text: "Read Customer Stories",
              href: "#testimonials"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698400047-d1awy2ty.jpg"
          imageAlt="Before and after skincare results"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="education" data-section="education">
        <FeatureCardNineteen
          features={[
            {
              id: 1,
              tag: "STEP 1",
              title: "Cleanse",
              subtitle: "Remove impurities without stripping natural oils",
              description: "Our gentle cleanser eliminates dirt, makeup, and environmental toxins while maintaining your skin's pH balance. Formulated with natural botanical extracts for a soothing cleanse.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698399081-caft5drj.jpg",
              imageAlt: "Step 1: Cleansing ritual"
            },
            {
              id: 2,
              tag: "STEP 2",
              title: "Treat",
              subtitle: "Target specific skin concerns with active ingredients",
              description: "Our potent serum delivers concentrated ingredients where you need them most. Reduces fine lines, brightens dull skin, and boosts hydration at the cellular level.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698398558-tdq57qwl.jpg",
              imageAlt: "Step 2: Treatment application"
            },
            {
              id: 3,
              tag: "STEP 3",
              title: "Protect",
              subtitle: "Lock in moisture and shield from environmental damage",
              description: "Our nourishing moisturizer creates a protective barrier while delivering 24-hour hydration. Lightweight, non-greasy formula suits all skin types.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698398238-o9lonobv.jpg",
              imageAlt: "Step 3: Moisturizing protection"
            }
          ]}
          title="Your 3-Step Skincare Ritual"
          description="Simple, effective, and designed to deliver visible results. Each product works synergistically to restore your skin's natural glow."
          tag="PROVEN ROUTINE"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          containerClassName="py-20"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          testimonials={[
            {
              id: "1",
              quote: "My redness and sensitivity completely disappeared within 2 weeks. This is the only skincare line that doesn't irritate my skin.",
              name: "Sarah M.",
              role: "Sensitive Skin",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698401523-ekhowbch.jpg",
              imageAlt: "Sarah's before and after results"
            },
            {
              id: "2",
              quote: "Finally no breakouts! My skin has never felt clearer. The routine is simple and actually works as promised.",
              name: "Jessica L.",
              role: "Acne-Prone Skin",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698401933-wwn29oo2.jpg",
              imageAlt: "Jessica's clear skin transformation"
            },
            {
              id: "3",
              quote: "My dry patches are gone and my skin is hydrated all day. The serum alone is worth every penny.",
              name: "Emma T.",
              role: "Dry Skin",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698402480-4unjlgcb.jpg",
              imageAlt: "Emma's hydrated skin results"
            },
            {
              id: "4",
              quote: "Fine lines are visibly reduced. I look 5 years younger. Cannot recommend enough!",
              name: "Rachel P.",
              role: "Mature Skin",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698402736-4e831s63.jpg",
              imageAlt: "Rachel's age-defying results"
            },
            {
              id: "5",
              quote: "Dark spots are fading fast! My complexion is so much more even and bright.",
              name: "Maya K.",
              role: "Hyperpigmentation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698403140-ed3hqrm6.jpg",
              imageAlt: "Maya's brightened complexion"
            },
            {
              id: "6",
              quote: "Best skincare investment I've made. My skin feels soft, looks radiant, and the quality is premium.",
              name: "Olivia C.",
              role: "All Skin Types",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698403717-zz88l2v6.jpg",
              imageAlt: "Olivia's glowing skin"
            }
          ]}
          title="Trusted by 12,000+ Customers"
          description="Real results from real people. See how LuminaSkin has transformed their skin and confidence."
          tag="CUSTOMER REVIEWS"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          containerClassName="py-20"
        />
      </div>

      <div id="trust" data-section="trust">
        <MetricCardEleven
          metrics={[
            {
              id: "1",
              value: "94%",
              title: "Visible Improvement",
              description: "saw results in 2 weeks",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698404817-ukn00s4r.jpg",
              imageAlt: "Dermatologist certified"
            },
            {
              id: "2",
              value: "100%",
              title: "Clean Ingredients",
              description: "free from harmful chemicals",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698405344-06mnuxjm.jpg",
              imageAlt: "Cruelty-free certified"
            },
            {
              id: "3",
              value: "30-Day",
              title: "Money-Back Guarantee",
              description: "try risk-free",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698405684-ukrtll2e.jpg",
              imageAlt: "Money-back guarantee"
            }
          ]}
          animationType="slide-up"
          title="Dermatologist-Approved & Clinically Proven"
          description="Your skin deserves products you can trust. Every formula is tested, verified, and backed by real results."
          tag="QUALITY ASSURANCE"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{
            text: "See Full Certifications",
            href: "#faq"
          }]}
          containerClassName="py-20"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",
              title: "How soon will I see results?",
              content: "Most customers see visible improvement within 7-14 days of consistent use. Fine lines, texture, and brightness improve progressively. For deeper concerns like hyperpigmentation, 4-6 weeks shows optimal results."
            },
            {
              id: "2",
              title: "Is this suitable for sensitive skin?",
              content: "Yes! All our products are hypoallergenic and dermatologist-tested for sensitive skin. We exclude common irritants: parabens, sulfates, phthalates, and artificial fragrances. Patch test first if you're very reactive."
            },
            {
              id: "3",
              title: "Can I use these products with other brands?",
              content: "Absolutely. Our formulas work well with other skincare products. For best results, use our 3-step routine as your base, then add targeted treatments. Avoid mixing multiple active ingredients in one step."
            },
            {
              id: "4",
              title: "What's your return policy?",
              content: "We offer a hassle-free 30-day money-back guarantee. Try our products risk-free. If you're not completely satisfied, return unused portion within 30 days for a full refund—no questions asked."
            },
            {
              id: "5",
              title: "Do you ship internationally?",
              content: "We currently ship to North America and Europe with free shipping on orders over $75. International orders ship within 5-7 business days. Duties may apply depending on your country."
            },
            {
              id: "6",
              title: "Are your products cruelty-free and vegan?",
              content: "Yes! All LuminaSkin products are certified cruelty-free and vegan. We never test on animals and use only plant-based ingredients. Our packaging is recyclable and made from sustainable materials."
            }
          ]}
          title="Frequently Asked Questions"
          description="Everything you need to know about our skincare collection, ingredients, and guarantee."
          tag="SUPPORT"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767698404264-j2z1k0qj.jpg"
          imageAlt="Skincare expert providing guidance"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          containerClassName="py-20"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to see visible skin results?"
          inputPlaceholder="Enter your email for 20% off"
          buttonText="Unlock Offer"
          animationType="background-highlight"
          useInvertedBackground="noInvert"
          containerClassName="py-20"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="LuminaSkin"
          columns={[
            {
              items: [
                { label: "Shop", href: "#products" },
                { label: "Bundle Deals", href: "#products" },
                { label: "Subscriptions", href: "#products" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Science", href: "#trust" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              items: [
                { label: "30-Day Guarantee", href: "#contact" },
                { label: "Easy Returns", href: "#faq" },
                { label: "Customer Support", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Shipping Info", href: "#" }
              ]
            }
          ]}
          containerClassName="py-16 bg-gradient-to-b from-background to-background-accent"
        />
      </div>
    </ThemeProvider>
  );
}