"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Instagram, Twitter, Sparkles } from "lucide-react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function LandingPage() {
  const handleSubscriptionSubmit = (email: string) => {
    console.log('Subscription email:', email);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="radialGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Edgetabs"
          navItems={[
            { name: "How It Works", id: "feature" },
            { name: "Testimonials", id: "testimonial" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Buy Now",
            href: "pricing"
          }}
          buttonClassName="font-semibold text-sm"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="EDGETABS"
          description="Unlock your peak performance. Scientifically-formulated supplements designed to elevate focus, energy, and mental clarity."
          buttons={[
            { text: "Get Edge", href: "pricing" },
            { text: "Learn More", href: "feature" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767450501525-2z6ffwci.jpg"
          imageAlt="Edgetabs Premium Supplement Product"
          frameStyle="card"
          logoLineHeight={1}
          ariaLabel="Hero section - Edgetabs premium supplements"
          className="relative"
          containerClassName="w-full"
          logoContainerClassName="mt-8"
          descriptionClassName="text-balance"
          buttonContainerClassName="gap-3"
          buttonClassName="px-6 py-3"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="sticky-announcement" data-section="sticky-announcement">
        <FeatureCardSix
          title="LOW ON STOCK"
          description="Only 127 units remaining. Secure yours today before we run out."
          tag="Urgent"
          features={[
            {
              id: 1,
              title: "Limited Supply",
              description: "High demand = faster shipping for early orders",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548586448-3yvd5knp.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          className="sticky top-0 z-10 bg-opacity-95 backdrop-blur-sm"
          containerClassName="py-2 px-4"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Bundle"
          description="Select the perfect quantity for your performance goals. All orders include free shipping."
          tag="Purchase"
          plans={[
            {
              id: "single",
              badge: "Starter",
              price: "$49.99",
              subtitle: "Perfect for first-time users",
              buttons: [{ text: "Add to Cart", href: "#" }],
              features: ["1 Month Supply", "Full Potency Guarantee", "Fast Shipping"]
            },
            {
              id: "double",
              badge: "Popular",
              price: "$89.98",
              subtitle: "Save 10% with 2-tin bundle",
              buttons: [{ text: "Add to Cart", href: "#" }],
              features: ["2 Month Supply", "10% Savings", "Free Shipping", "Priority Support"]
            },
            {
              id: "triple",
              badge: "Best Value",
              badgeIcon: Sparkles,
              price: "$119.97",
              subtitle: "Save 20% + unlock subscription savings",
              buttons: [{ text: "Add to Cart", href: "#" }],
              features: ["3 Month Supply", "20% Savings", "Free Expedited Shipping", "Priority Support", "Save Additional 10% with Subscription"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          className="w-full"
          containerClassName="py-20 px-4"
        />
      </div>

      <div id="subscription-toggle" data-section="subscription-toggle">
        <ContactSplit
          tag="Subscription"
          title="Subscribe & Save 10%"
          description="Get automatic monthly deliveries with no commitment. Cancel anytime. Never run out of your peak performance edge."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548584920-y81b80sz.jpg"
          imageAlt="Edgetabs Supplement Container"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="Cancel your subscription anytime. We respect your privacy."
          onSubmit={handleSubscriptionSubmit}
          className="py-16"
          containerClassName="px-4"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardSix
          title="Why Athletes Choose Edgetabs"
          description="Engineered for peak performance. Every ingredient is tested for purity and potency."
          tag="Benefits"
          features={[
            {
              id: 1,
              title: "Enhanced Focus",
              description: "Scientifically-proven ingredients to sharpen mental clarity and eliminate brain fog. Stay locked in on your goals.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548586104-9ww38ehs.jpg"
            },
            {
              id: 2,
              title: "Sustained Energy",
              description: "Clean energy without the crash. Our formula delivers 6+ hours of consistent performance boost.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548585841-sz5zr1rm.jpg"
            },
            {
              id: 3,
              title: "Premium Quality",
              description: "Certified pure. Lab tested. No fillers or artificial additives. Just pure performance.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548586448-3yvd5knp.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          className="py-20"
          containerClassName="px-4"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="I've tried dozens of supplements. Edgetabs is the only one that actually works. My focus is razor-sharp, my energy is consistent, and I feel the difference immediately. Worth every penny."
          rating={5}
          author="Marcus T., Fitness Professional"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg", alt: "Marcus T." },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767541469017-yfioykn0.jpg", alt: "Customer" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg", alt: "Customer" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767541469325-m3l0pb0f.jpg", alt: "Customer" }
          ]}
          useInvertedBackground="noInvert"
          className="text-center py-16"
          containerClassName="px-4"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about Edgetabs supplements."
          tag="Support"
          faqs={[
            {
              id: "1",
              title: "How quickly will I see results?",
              content: "Most users report noticeable improvements in focus and energy within the first 2-3 doses. Sustained benefits build over 2-4 weeks of consistent use as your system optimizes."
            },
            {
              id: "2",
              title: "Are there any side effects?",
              content: "Edgetabs is formulated with clean, natural ingredients. Most users experience no side effects. Start with one dose to assess tolerance. Consult your doctor if you're on medications."
            },
            {
              id: "3",
              title: "What's your return policy?",
              content: "100% satisfaction guaranteed. If you're not seeing results within 30 days, we'll refund your full purchase—no questions asked. Your peak performance is our priority."
            },
            {
              id: "4",
              title: "How does the subscription work?",
              content: "Subscribe to receive your chosen bundle automatically each month. You'll get 10% off the regular price. Cancel anytime by logging into your account or contacting support."
            },
            {
              id: "5",
              title: "What's in Edgetabs?",
              content: "Our proprietary blend includes clinically-studied ingredients: caffeine-free sustained-release energy, L-theanine for focus, B-complex vitamins, and plant-based adaptogens. Full ingredient list available on every product page."
            },
            {
              id: "6",
              title: "How long is shipping?",
              content: "Standard shipping: 5-7 business days. Expedited shipping: 2-3 business days (included free on 3+ tin bundles). All orders ship from our US facility."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          className="py-20"
          containerClassName="px-4 max-w-2xl mx-auto"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Questions?"
          title="Get in Touch"
          description="Have questions about our supplements? Our team responds within 24 hours. Email us anytime."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767450501525-2z6ffwci.jpg"
          imageAlt="Edgetabs Support"
          mediaPosition="left"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="We'll get back to you within 24 hours."
          className="py-20"
          containerClassName="px-4"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="EDGETABS"
          copyrightText="© 2025 Edgetabs. All rights reserved. Performance-driven supplements for peak athletes."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com/edgetabs", ariaLabel: "Follow us on Instagram" },
            { icon: Twitter, href: "https://twitter.com/edgetabs", ariaLabel: "Follow us on Twitter" }
          ]}
          className="bg-background/50 backdrop-blur-sm"
          containerClassName="py-12"
        />
      </div>
    </ThemeProvider>
  );
}