"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { CheckCircle, Instagram, Linkedin, Sparkles, Twitter, Youtube } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="BEVEL"
          navItems={[
            { name: "How It Works", id: "features" },
            { name: "Products", id: "product" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo 
          logoText="BEVEL"
          description="Look Better, Feel Better — Your Looksmaxxing Kit Starts Here"
          buttons={[
            { text: "Get the Kit Now", href: "product" },
            { text: "Learn More", href: "features" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/man-taking-good-care-his-face-home_23-2148883814.jpg"
          imageAlt="Confident man showcasing transformation through grooming and style"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline 
          tag="Your Transformation"
          tagIcon={Sparkles}
          title="See the Difference in Real Time"
          description="Our looksmaxxing kit combines premium grooming products, expert styling guides, and confidence-building techniques. Users report visible improvements in appearance, confidence, and social presence within weeks."
          textboxLayout="default"
          phoneOne={{
            imageSrc: "https://img.b2bpic.net/free-photo/man-woman-checking-their-phones-even-their-bathroom_23-2149017788.jpg",            imageAlt: "Before transformation showing baseline grooming state"
          }}
          phoneTwo={{
            imageSrc: "https://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148561343.jpg",            imageAlt: "After transformation showing improved grooming and confidence results"
          }}
          buttons={[
            { text: "Start Your Journey", href: "product" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen 
          tag="How It Works"
          title="Five Steps to Transformation"
          description="A proven system designed for young men serious about self-improvement through grooming, style, and confidence building."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Foundation",              title: "Master Your Skincare",              subtitle: "Clear, healthy skin builds confidence.",              description: "Start with our premium skincare starter set. Learn the essentials: cleanse, tone, moisturize. Our guide walks you through a routine that fits any schedule.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-boy-learning-how-shave_23-2149450891.jpg",              imageAlt: "Skincare products and routine setup"
            },
            {
              id: 2,
              tag: "Presence",              title: "Upgrade Your Style",              subtitle: "Clothes that fit = instant upgrade.",              description: "Style isn't complicated. Our guide covers fit, color matching, and building a versatile wardrobe. Look sharp without overthinking it.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-handsome-bearded-man_1303-19639.jpg",              imageAlt: "Men's fashion styling and wardrobe organization"
            },
            {
              id: 3,
              tag: "Grooming",              title: "Perfect Your Hair & Beard",              subtitle: "A good haircut changes everything.",              description: "Find your ideal haircut and maintain it with our grooming tools. Includes barber consultation tips and at-home maintenance guides.",              imageSrc: "https://img.b2bpic.net/free-photo/combing-gray-hair-senior-client-barbershop_23-2148181900.jpg",              imageAlt: "Haircare products and barber consultation guide"
            },
            {
              id: 4,
              tag: "Physique",              title: "Build Your Physique",              subtitle: "Fitness amplifies your results.",              description: "Pair grooming with basic fitness. Our fitness guide focuses on beginner-friendly workouts that complement your style transformation.",              imageSrc: "https://img.b2bpic.net/free-photo/athlete-swings-triceps-with-dumbbells-gym-healthy-sports-lifestyle_169016-59083.jpg",              imageAlt: "Fitness and workout guidance for men"
            },
            {
              id: 5,
              tag: "Confidence",              title: "Own Your Transformation",              subtitle: "Confidence is the best accessory.",              description: "With improved appearance comes real confidence. Our mindset guide helps you internalize your transformation and carry yourself with pride.",              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1570.jpg",              imageAlt: "Confident man showcasing personal transformation"
            }
          ]}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardThree 
          title="Choose Your Kit"
          description="Everything you need to start your looksmaxxing journey. All kits include guides, products, and access to our community."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "1",              name: "Starter Kit",              price: "$79.99",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-toilet-bag-products-arrangement_23-2149879446.jpg",              imageAlt: "Starter grooming and style kit",              initialQuantity: 1
            },
            {
              id: "2",              name: "Pro Kit",              price: "$149.99",              imageSrc: "https://img.b2bpic.net/free-photo/toilet-bag-with-products-arrangement-flat-lay_23-2149879990.jpg",              imageAlt: "Professional grooming and style collection",              initialQuantity: 1
            },
            {
              id: "3",              name: "Elite Kit",              price: "$249.99",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-toilet-bag-products_23-2149879440.jpg",              imageAlt: "Elite premium grooming and transformation package",              initialQuantity: 1
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree 
          title="Flexible Plans for Your Goals"
          description="Whether you're just starting or committing to the full transformation, we have a plan for you."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              price: "$79.99",              name: "Starter Plan",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Skincare essentials set",                "Style guide & wardrobe tips",                "Haircare routine guide",                "Community access",                "Email support"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$149.99",              name: "Pro Plan",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "All Starter features",                "Premium grooming toolkit",                "Advanced fitness guide",                "Personal style consultation",                "Priority support",                "Quarterly updates"
              ]
            },
            {
              id: "elite",              price: "$249.99",              name: "Elite Plan",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "All Pro features",                "Complete luxury toolkit",                "1-on-1 coaching sessions",                "Personal wardrobe curation",                "VIP community access",                "Lifetime updates & support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen 
          testimonial="This kit completely changed how I see myself. Within 4 weeks, people were noticing. I went from feeling invisible to confident. The step-by-step guides made everything simple, and the results speak for themselves."
          rating={5}
          author="Marcus, 24 - Digital Marketing Manager"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              alt: "Marcus testimonial"
            },
            {
              src: "https://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              alt: "User 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1625.jpg",              alt: "User 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "User 4"
            },
            {
              src: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              alt: "User 5"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg",              alt: "User 6"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia 
          title="Your Questions Answered"
          description="Everything you need to know about getting started with your looksmaxxing journey."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-photo/side-view-man-practicing-skincare_23-2150283290.jpg"
          imageAlt="Grooming tips and daily routine guidance"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long before I see results?",              content: "Most users report noticeable improvements in appearance and confidence within 2-4 weeks of consistent use. Grooming results are immediate, while fitness-related changes may take 6-8 weeks. The key is consistency—stick to the guides."
            },
            {
              id: "2",              title: "Is this suitable for beginners?",              content: "Absolutely. Our kits are specifically designed for guys who are just starting their self-improvement journey. Every guide includes step-by-step instructions, so no prior grooming or style knowledge is needed."
            },
            {
              id: "3",              title: "What's included in each kit?",              content: "Starter: skincare set, style guide, haircare routine. Pro: everything in Starter + premium grooming tools, fitness guide, personal consultation. Elite: everything in Pro + luxury toolkit, 1-on-1 coaching, wardrobe curation."
            },
            {
              id: "4",              title: "Can I return or exchange items?",              content: "Yes. We offer a 30-day money-back guarantee on all kits. If you're not satisfied, just reach out to our support team for a full refund or exchange."
            },
            {
              id: "5",              title: "Do you offer shipping outside the US?",              content: "Currently, we ship to US, Canada, and UK. If you're outside these regions, contact our support team—we may be able to arrange international shipping."
            },
            {
              id: "6",              title: "Is there a community or support?",              content: "Yes! All kits include access to our private community of users sharing tips, before/afters, and encouragement. Pro and Elite members get priority email and community support."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Ready to Transform?"
          ctaDescription="Get started today and join thousands of guys who've boosted their confidence."
          ctaIcon={CheckCircle}
          ctaButton={{
            text: "Shop Now",            href: "product"
          }}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "What's your refund policy?",              content: "We offer a 30-day money-back guarantee on all purchases. If the kit doesn't meet your expectations, contact our support team for a hassle-free refund."
            },
            {
              id: "2",              title: "How do I get personalized advice?",              content: "Pro and Elite plan members receive personalized consultations. Email our support team with photos and your goals, and our style experts will provide tailored recommendations."
            },
            {
              id: "3",              title: "Do you offer refunds on discounted items?",              content: "Yes, all items are eligible for refund regardless of discount. We stand behind every kit and want you to be 100% satisfied."
            },
            {
              id: "4",              title: "How often do you update your guides?",              content: "We update our guides quarterly with new trends, tips, and community feedback. All members have lifetime access to updated content."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial 
          logoText="BEVEL"
          copyrightText="© BEVEL, Inc. 2025. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Starter Kit", href: "product" },
                { label: "Pro Kit", href: "product" },
                { label: "Elite Kit", href: "product" },
                { label: "Pricing", href: "pricing" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Contact", href: "contact" },
                { label: "FAQ", href: "faq" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Return Policy", href: "#" },
                { label: "Shipping Info", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Follow us on Twitter"
            },
            {
              icon: Youtube,
              href: "https://youtube.com",              ariaLabel: "Subscribe on YouTube"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "Connect on LinkedIn"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}