"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Package, Star, HelpCircle, Mail, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="solid-accent"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Looksmaxxing Kit"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Products", id: "product" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Confidence Starts Here"
          bottomRightText="hello@looksmaxxingkit.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarouselSplit
          title="Look Better, Feel Better — Your Looksmaxxing Kit Starts Here"
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-toilet-bag-products-arrangement_23-2149879446.jpg",              imageAlt: "Premium grooming products showcase"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-with-products-arrangement-flat-lay_23-2149879990.jpg",              imageAlt: "Hair styling and grooming essentials"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-toilet-bag-products_23-2149879440.jpg",              imageAlt: "Daily skincare routine products"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-with-products-arrangement_23-2149879523.jpg",              imageAlt: "Beard care and maintenance tools"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-items-table-arrangement_23-2149879953.jpg",              imageAlt: "Transformation and confidence results"
            }
          ]}
          buttons={[
            { text: "Get the Kit Now", href: "product" },
            { text: "Learn More", href: "about" }
          ]}
          ariaLabel="Looksmaxxing kit hero section with carousel"
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="Why Us"
          description="We believe that looking your best is about more than appearance—it's about building genuine confidence that transforms how you move through the world. Our looksmaxxing kit combines scientifically-backed grooming essentials with practical styling tools designed for young men who want real, visible results. Every product is carefully selected to deliver immediate impact and long-term benefits, helping you unlock your best self."
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardTwenty
          title="Transform Your Appearance with Science-Backed Solutions"
          description="Our looksmaxxing kit contains five essential categories that work together to elevate your entire presence. Each product is engineered for maximum impact with minimal complexity."
          tag="Key Benefits"
          tagIcon={Sparkles}
          images={[
            {
              id: 1,
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-toilet-bag-still-life_23-2149879584.jpg",              imageAlt: "Complete skincare routine system"
            },
            {
              id: 2,
              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-products-arrangement-top-view_23-2149879511.jpg",              imageAlt: "Professional hair styling products"
            },
            {
              id: 3,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-model_158538-17984.jpg",              imageAlt: "Confident man showcasing results"
            },
            {
              id: 4,
              imageSrc: "https://img.b2bpic.net/free-photo/vanity-case-with-products-high-angle_23-2149879968.jpg",              imageAlt: "Visible transformation and improvement"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Products", href: "product" }
          ]}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardTwo
          title="Complete Grooming & Style Kit"
          description="Everything you need to elevate your appearance and confidence in one convenient package"
          tag="Essential Products"
          tagIcon={Package}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              brand: "Looksmaxxing Kit",              name: "Facial Cleanser Pro",              price: "$24.99",              rating: 5,
              reviewCount: "2.3k",              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-products-arrangement_23-2149879995.jpg",              imageAlt: "Premium facial cleanser product"
            },
            {
              id: "2",              brand: "Looksmaxxing Kit",              name: "Hydrating Moisturizer",              price: "$32.99",              rating: 5,
              reviewCount: "1.8k",              imageSrc: "https://img.b2bpic.net/free-photo/beauty-concept-with-different-products_23-2147817660.jpg",              imageAlt: "Advanced moisturizer cream"
            },
            {
              id: "3",              brand: "Looksmaxxing Kit",              name: "Skin Repair Serum",              price: "$28.99",              rating: 5,
              reviewCount: "1.5k",              imageSrc: "https://img.b2bpic.net/free-photo/view-toilet-bag-table_23-2149879951.jpg",              imageAlt: "Intensive skin repair serum"
            },
            {
              id: "4",              brand: "Looksmaxxing Kit",              name: "Hair Growth & Shine Oil",              price: "$19.99",              rating: 5,
              reviewCount: "3.1k",              imageSrc: "https://img.b2bpic.net/free-photo/vanity-case-with-products_23-2149879966.jpg",              imageAlt: "Professional hair oil treatment"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          buttons={[
            { text: "Get Started", href: "contact" }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real transformations from young men who took control of their appearance and confidence"
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Marcus Johnson",              role: "College Student",              company: "University of Texas",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Marcus Johnson testimonial portrait"
            },
            {
              id: "2",              name: "Alex Chen",              role: "Software Engineer",              company: "Tech Startup",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Alex Chen testimonial portrait"
            },
            {
              id: "3",              name: "Jordan Rivera",              role: "Fitness Enthusiast",              company: "Personal Brand",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Jordan Rivera testimonial portrait"
            },
            {
              id: "4",              name: "David Park",              role: "Sales Professional",              company: "Fortune 500",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "David Park testimonial portrait"
            },
            {
              id: "5",              name: "Chris Anderson",              role: "Content Creator",              company: "Social Media",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Chris Anderson testimonial portrait"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our looksmaxxing kit and getting started"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long before I see visible results?",              content: "Most customers report noticing improved skin clarity and texture within 2-3 weeks of consistent use. Hair and styling improvements are visible within 1-2 weeks. The full transformation effect typically develops over 8-12 weeks as all products work together synergistically."
            },
            {
              id: "2",              title: "Is the kit suitable for all skin types?",              content: "Yes, our kit is formulated to work with all skin types—oily, dry, combination, and sensitive. The cleanser is gentle yet effective, the moisturizer adapts to your skin's needs, and the serum provides targeted treatment without irritation."
            },
            {
              id: "3",              title: "Can I use these products with my current routine?",              content: "Absolutely. Our products are designed to complement existing routines. However, for best results, we recommend replacing your current cleanser and moisturizer with ours for consistency and maximum effectiveness."
            },
            {
              id: "4",              title: "What's the proper order to use these products?",              content: "Morning routine: Cleanser → Moisturizer → Hair Oil (on damp hair). Evening routine: Cleanser → Serum → Moisturizer. This sequence maximizes absorption and effectiveness of each product."
            },
            {
              id: "5",              title: "Do you offer a money-back guarantee?",              content: "Yes, we offer a 30-day money-back guarantee. If you're not completely satisfied with your results, we'll refund your purchase with no questions asked. We're confident you'll love the kit."
            },
            {
              id: "6",              title: "How often should I replace the products?",              content: "With daily use, each product lasts approximately 4-6 weeks. We recommend subscribing to auto-delivery for consistent results and to never run out of your essentials."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          title="Stay Updated with the Latest Grooming Tips"
          description="Subscribe to our newsletter for exclusive product launches, grooming tutorials, and confidence-building content delivered straight to your inbox."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive updates about new products and exclusive offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Looksmaxxing Kit"
          copyrightText="© 2025 Looksmaxxing Kit. All rights reserved. Confidence is earned."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/looksmaxxingkit",              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/looksmaxxingkit",              ariaLabel: "Follow us on Twitter"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}