"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Award, Twitter, Facebook, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="dotGrid"
      cardStyle="elevated-accent"
      primaryButtonStyle="outline"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="HappySupps"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Feel Genuinely Happy Every Day"
          description="The world's most trusted supplement for mood and well-being. Discover why thousands of people trust us for their daily happiness boost."
          tag="The Happy Solution"
          tagIcon={Sparkles}
          imageSrc="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=1200&h=800&fit=crop"
          imageAlt="Beautiful cityscape with vibrant urban landscape"
          frameStyle="card"
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Why Millions Choose Our Supplement"
          description="Clinically tested, naturally sourced, and proven to enhance mood and happiness. Join the wellness revolution and transform how you feel."
          tag="Trusted by Experts"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766954374078-32fuzckk.jpg"
          imageAlt="Happy customers enjoying wellness journey"
          buttons={[
            { text: "Discover Benefits", href: "#products" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Our Premium Collection"
          description="Choose the happiness supplement that works best for your lifestyle and needs."
          tag="Best Sellers"
          tagIcon={Award}
          products={[
            {
              id: "1",
              name: "Daily Happiness Capsules",
              price: "$49.99",
              variant: "60 capsules • Monthly supply",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766347540465-ihbuvzy6.jpg",
              imageAlt: "Daily happiness supplement capsule bottle",
              isFavorited: false
            },
            {
              id: "2",
              name: "Premium Wellness Blend",
              price: "$79.99",
              variant: "90 capsules • 3-month supply",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766347541350-ifnk14o0.jpg",
              imageAlt: "Premium wellness supplement blend",
              isFavorited: false
            },
            {
              id: "3",
              name: "Mood Booster Powder",
              price: "$59.99",
              variant: "30 servings • Tropical flavor",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766954375368-he6ofvvd.jpg",
              imageAlt: "Mood booster powder supplement jar",
              isFavorited: false
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Results You Can Trust"
          description="Our impact speaks for itself. Join thousands of happy customers worldwide."
          metrics={[
            {
              id: "1",
              value: "500K+",
              title: "Happy Customers Worldwide",
              items: [
                "98% satisfaction rate",
                "Available in 50 countries",
                "Trusted since 2015"
              ]
            },
            {
              id: "2",
              value: "4.9/5",
              title: "Average Customer Rating",
              items: [
                "5,000+ verified reviews",
                "Proven effectiveness",
                "Scientifically backed"
              ]
            },
            {
              id: "3",
              value: "2M+",
              title: "Bottles Sold Annually",
              items: [
                "Growing every month",
                "Recommended by experts",
                "Natural ingredients"
              ]
            },
            {
              id: "4",
              value: "100%",
              title: "Money-Back Guarantee",
              items: [
                "30-day guarantee",
                "No questions asked",
                "Full refund option"
              ]
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Our Customers Say"
          description="Real stories from real people who transformed their happiness with our supplement."
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Wellness Coach",
              company: "Fit Living Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sarah Johnson testimonial"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Health Professional",
              company: "WellnessFirst",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "Michael Chen testimonial"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Life Coach",
              company: "Happiness Hub",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184309647-aqbmmuiq.jpg",
              imageAlt: "Emily Rodriguez testimonial"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Fitness Expert",
              company: "Peak Performance",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849445373-zmzxg3xm.jpg",
              imageAlt: "David Kim testimonial"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our happiness supplement and how it works."
          faqs={[
            {
              id: "1",
              title: "How long does it take to feel the effects?",
              content: "Most customers report feeling the benefits within 2-4 weeks of consistent daily use. For optimal results, we recommend taking the supplement for at least 8 weeks."
            },
            {
              id: "2",
              title: "Is this supplement safe?",
              content: "Yes, our supplement is made from 100% natural ingredients and has been clinically tested. It's free from artificial additives and approved by health authorities."
            },
            {
              id: "3",
              title: "Can I take it with other medications?",
              content: "While our supplement is natural, we recommend consulting with your doctor before combining it with prescription medications to ensure there are no interactions."
            },
            {
              id: "4",
              title: "What is your return policy?",
              content: "We offer a 30-day money-back guarantee. If you're not satisfied with your purchase, simply return it for a full refund, no questions asked."
            },
            {
              id: "5",
              title: "How should I take the supplement?",
              content: "Take one capsule daily with water, preferably with a meal. For best results, take it at the same time each day to maintain consistent levels in your system."
            },
            {
              id: "6",
              title: "Are there any side effects?",
              content: "Our supplement is generally well-tolerated with minimal side effects. A small percentage of users may experience mild digestive adjustments, which typically subside within a few days."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Get In Touch"
          description="Have questions about our happiness supplement? We're here to help. Reach out and join our wellness community today."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us how we can help...",
            rows: 5,
            required: true
          }}
          buttonText="Send Message"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="HappySupps"
          copyrightText="© 2025 HappySupps. All rights reserved. | Happiness is our priority."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Follow us on Twitter"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Follow us on Facebook"
            },
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Follow us on Instagram"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}