"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Sparkles, Star } from "lucide-react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="animatedAurora"
      cardStyle="outline-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Edgetabs"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Product", id: "product" },
            { name: "Why Edgetabs", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          bottomLeftText="Premium Performance Supplements"
          bottomRightText="hello@edgetabs.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="EDGETABS"
          description="Unlock peak performance with science-backed energy and focus formulas. Used by 2,000+ athletes and professionals."
          buttons={[
            { text: "Buy Now", href: "#pricing" },
            { text: "Learn More", href: "#features" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548768993-wvn5empj.jpg"
          imageAlt="Edgetabs Energy Supplement Tin"
          frameStyle="browser"
          logoLineHeight={1.05}
          ariaLabel="Edgetabs premium supplement hero section"
          containerClassName="max-w-full"
          logoClassName="text-6xl md:text-7xl font-bold tracking-tight"
          descriptionClassName="text-xl md:text-2xl leading-relaxed"
          buttonClassName="px-8 py-3 font-semibold rounded-md transition-all"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="metrics" data-section="metrics" className="bg-gradient-to-b from-transparent to-accent/10">
        <MetricCardEight
          title="Trusted by peak performers who demand results. Join thousands achieving their edge."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548770297-nvcq83hb.jpg"
          imageAlt="Athletes training with Edgetabs"
          metrics={[
            { id: "1", value: "2,000+", title: "Customers Worldwide" },
            { id: "2", value: "4.8★", title: "Average Rating" },
            { id: "3", value: "98%", title: "Satisfaction Rate" },
            { id: "4", value: "30 Days", title: "Money Back Guarantee" }
          ]}
          useInvertedBackground="noInvert"
          ariaLabel="Edgetabs trust metrics and social proof"
          containerClassName="py-16 md:py-24"
          valueClassName="text-4xl md:text-5xl font-bold tracking-tight"
          metricTitleClassName="text-sm md:text-base font-medium opacity-75"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Choose Your Edge"
          description="Select the bundle that powers your performance. Stock is limited."
          tag="Bundle Options"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "single",
              tag: "Starter",
              tagIcon: Zap,
              price: "$29.99",
              period: "/tin",
              description: "One-time purchase. Single tin of Edgetabs energy formula.",
              button: { text: "Add to Cart", href: "#checkout" },
              featuresTitle: "What's Included:",
              features: [
                "30-serving tin",
                "Premium energy blend",
                "Enhanced focus & endurance",
                "No artificial dyes"
              ]
            },
            {
              id: "double",
              tag: "Popular",
              price: "$55.98",
              period: "/pair",
              description: "Save 20% when you order two tins. Continuous supply every 8 weeks.",
              button: { text: "Save 20% - Add 2", href: "#checkout" },
              featuresTitle: "What's Included:",
              features: [
                "2 × 30-serving tins",
                "Save $12 vs. single",
                "Better value for regulars",
                "Free shipping on orders 2+"
              ]
            },
            {
              id: "triple",
              tag: "Best Value",
              tagIcon: Sparkles,
              price: "$77.97",
              period: "/trio",
              description: "Best value — save 35%. Three months of peak performance. Recommended by 87% of customers.",
              button: { text: "Save 35% - Get Edge", href: "#checkout" },
              featuresTitle: "What's Included:",
              features: [
                "3 × 30-serving tins",
                "Save $32 vs. buying single",
                "Free priority shipping",
                "Exclusive edge sticker pack"
              ]
            }
          ]
          containerClassName="py-20 md:py-32"
        />
      </div>

      <div id="subscription" data-section="subscription">
        <ProductCardTwo
          title="Subscribe & Save"
          description="Get Edgetabs delivered every month. Cancel anytime, no penalties."
          tag="Auto-Delivery Option"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="none"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "sub-single",
              brand: "Edgetabs",
              name: "Monthly Single",
              price: "$26.99",
              rating: 5,
              reviewCount: "890",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548768993-wvn5empj.jpg",
              imageAlt: "Monthly subscription single tin"
            },
            {
              id: "sub-double",
              brand: "Edgetabs",
              name: "Monthly Double",
              price: "$50.38",
              rating: 5,
              reviewCount: "945",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548768993-wvn5empj.jpg",
              imageAlt: "Monthly subscription double tins"
            },
            {
              id: "sub-triple",
              brand: "Edgetabs",
              name: "Monthly Triple",
              price: "$69.97",
              rating: 5,
              reviewCount: "1.2k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548768993-wvn5empj.jpg",
              imageAlt: "Monthly subscription triple tins"
            }
          ]
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="testimonials" data-section="testimonials" className="bg-card">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767378010628-m83xd3m3.jpg",
              imageAlt: "Marcus Johnson, professional athlete"
            },
            {
              id: "2",
              name: "Jessica Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548769629-cedh6j9w.jpg",
              imageAlt: "Jessica Chen, fitness competitor"
            },
            {
              id: "3",
              name: "David Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548574598-qrzp73sr.jpg",
              imageAlt: "David Rodriguez, gym enthusiast"
            },
            {
              id: "4",
              name: "Sarah Mitchell",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548575472-wh010nbk.jpg",
              imageAlt: "Sarah Mitchell, CrossFit athlete"
            },
            {
              id: "5",
              name: "James Wilson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767378010628-m83xd3m3.jpg",
              imageAlt: "James Wilson, performance coach"
            },
            {
              id: "6",
              name: "Amanda Price",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548769629-cedh6j9w.jpg",
              imageAlt: "Amanda Price, endurance athlete"
            }
          ]}
          cardTitle="Over 2,000 athletes, gym-goers, and professionals trust Edgetabs for peak performance"
          cardTag="⭐⭐⭐⭐⭐ Average 4.8 stars"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          ariaLabel="Customer testimonials and social proof"
          containerClassName="py-16 md:py-24"
          cardClassName="p-8 md:p-12 rounded-xl border-2"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Common Questions"
          description="Everything you need to know about Edgetabs before you buy"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",
              title: "What's in Edgetabs?",
              content: "Edgetabs contains a proprietary blend of natural caffeine, L-theanine, beta-alanine, and performance-enhancing amino acids. No artificial dyes, no crash. See full ingredient list on packaging."
            },
            {
              id: "2",
              title: "How long does shipping take?",
              content: "Standard shipping arrives in 5-7 business days. Priority shipping (free on 2+ tin orders) arrives in 2-3 business days. International orders: 10-15 business days."
            },
            {
              id: "3",
              title: "What's your return policy?",
              content: "We stand behind Edgetabs. 30-day money-back guarantee if you're not satisfied. No questions asked. Just email support@edgetabs.com with your order number."
            },
            {
              id: "4",
              title: "Can I cancel my subscription?",
              content: "Yes, anytime. No penalties, no hidden fees. Cancel directly from your account dashboard or email us. Your subscription pauses immediately."
            },
            {
              id: "5",
              title: "Is Edgetabs safe?",
              content: "Edgetabs is formulated by sports nutritionists and tested by third-party labs. All ingredients are FDA-compliant and sourced from certified suppliers. Suitable for most athletes; consult your doctor if you have caffeine sensitivity."
            },
            {
              id: "6",
              title: "Do you offer bulk discounts?",
              content: "Yes. Orders of 10+ tins qualify for custom pricing. Email bulk@edgetabs.com with your requirements and we'll provide a quote."
            }
          ]
          containerClassName="py-16 md:py-24"
          accordionClassName="border-b-2 pb-4"
        />
      </div>

      <div id="contact" data-section="contact" className="bg-gradient-to-r from-background to-accent/5">
        <ContactSplit
          tag="Stay in the Loop"
          title="Join the Edgetabs Community"
          description="Get exclusive deals, product updates, and performance tips delivered straight to your inbox. Plus: 10% off your first order."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548770297-nvcq83hb.jpg"
          imageAlt="Edgetabs community of athletes"
          mediaPosition="right"
          tagIcon={Zap}
          inputPlaceholder="your@email.com"
          buttonText="Get My Edge"
          termsText="We respect your inbox. Unsubscribe anytime. No spam—just performance insights and exclusive offers."
          containerClassName="py-16 md:py-24"
          cardClassName="rounded-xl border-2 p-8 md:p-12"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="EDGETABS"
          logoLineHeight={1.05}
          ariaLabel="Edgetabs footer"
          containerClassName="flex items-center justify-center"
          logoClassName="text-3xl md:text-4xl font-bold tracking-tight"
        />
      </div>
    </ThemeProvider>
  );
}