"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { AlertCircle, Zap } from "lucide-react";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import PricingCardFour from '@/components/sections/pricing/PricingCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardFive from '@/components/sections/metrics/MetricCardFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="fluid"
      cardStyle="shadow-colored"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Edgetabs"
          navItems={[
            { name: "Product", id: "product" },
            { name: "Benefits", id: "benefits" },
            { name: "Reviews", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Edge",
            href: "purchase"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Unlock Your Edge. Sharper Focus. Pure Energy."
          description="Performance supplement engineered for athletes and grinders. Feel the difference in focus, energy, and recovery from day one."
          tag="LOW ON STOCK"
          tagIcon={AlertCircle}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548561778-nn39hl6d.jpg"
          imageAlt="Edgetabs supplement product"
          imagePosition="right"
          buttons={[
            {
              text: "Get Edge - Buy Now",
              href: "purchase"
            }
          ]}
          className="relative"
          titleClassName="text-4xl md:text-6xl font-extrabold tracking-tight"
          descriptionClassName="text-lg md:text-xl leading-relaxed"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardFifteen
          title="Why Athletes Choose Edgetabs"
          description="Three core benefits designed to maximize your performance"
          features={[
            {
              id: "1",
              title: "Laser Focus",
              description: "Caffeine + L-theanine blend keeps you sharp for hours without jitters",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548562330-b12vtdyk.jpg",
              imageAlt: "Focus and concentration"
            },
            {
              id: "2",
              title: "Sustained Energy",
              description: "Steady energy boost without the crash. Push harder, longer.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548562911-ymvbpki1.jpg",
              imageAlt: "Energy and vitality"
            },
            {
              id: "3",
              title: "Faster Recovery",
              description: "Optimized electrolyte profile reduces fatigue and speeds recovery",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548563457-fc5262hc.jpg",
              imageAlt: "Recovery and muscle restoration"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="purchase" data-section="purchase">
        <PricingCardFour
          title="Choose Your Bundle"
          tag="Save Up To 20%"
          tagIcon={Zap}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          ctaCards={[
            {
              title: "One-Time Purchase",
              description: "Pay once, get your supply now. No subscription required.",
              href: "checkout"
            },
            {
              title: "Subscribe & Save",
              description: "Get 10% off + free shipping every month. Cancel anytime.",
              href: "subscribe"
            }
          ]}
          plans={[
            {
              id: "single",
              name: "1 Tin",
              price: "$49.99",
              subtitle: "One month supply (30 tablets)",
              features: [
                "30 tablets per tin",
                "Ships within 24 hours",
                "Money-back guarantee"
              ]
            },
            {
              id: "double",
              name: "2 Tins",
              price: "$89.99",
              subtitle: "Save $9.99 (10% off)",
              features: [
                "60 tablets total",
                "Two month supply",
                "Free standard shipping",
                "Money-back guarantee"
              ]
            },
            {
              id: "triple",
              name: "3 Tins - Best Value",
              price: "$119.99",
              subtitle: "Save $29.97 (20% off) - Most Popular",
              features: [
                "90 tablets total",
                "Three month supply",
                "Free express shipping",
                "Priority customer support",
                "Money-back guarantee"
              ]
            }
          ]}
          titleClassName="text-4xl md:text-5xl font-extrabold"
          tagClassName="text-sm font-bold uppercase tracking-wide"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Edgetabs completely transformed my training. I can focus for hours without crashing, and my recovery is noticeably faster. This is the real deal."
          rating={5}
          author="Marcus Thompson, CrossFit Athlete"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg", alt: "Marcus" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548535439-8vmz9ugi.jpg", alt: "Sarah" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548317270-xdwlmkra.jpg", alt: "Jordan" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548534823-ztfa8dh2.jpg", alt: "Alex" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg", alt: "Casey" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548564562-b1jeu7ji.jpg", alt: "Morgan" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="product-highlights" data-section="product-highlights">
        <MetricCardFive
          title="Trusted By Thousands"
          description="Real results from real athletes"
          metrics={[
            {
              id: "1",
              value: "4.8★",
              description: "Average rating from 2,000+ verified customer reviews"
            },
            {
              id: "2",
              value: "98%",
              description: "Customers report improved focus and energy within 7 days"
            },
            {
              id: "3",
              value: "30-Day",
              description: "Money-back guarantee - no questions asked if you're not satisfied"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          textBoxTitleClassName="text-4xl md:text-5xl font-extrabold text-center"
          metricValueClassName="text-5xl md:text-7xl font-extrabold"
          metricDescriptionClassName="text-sm md:text-base leading-relaxed"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Everything you need to know about Edgetabs"
          faqs={[
            {
              id: "1",
              title: "What's in Edgetabs?",
              content: "Edgetabs contains a scientifically formulated blend: Caffeine (100mg), L-Theanine (100mg), Taurine (1000mg), Electrolytes (Sodium, Potassium, Magnesium), and B-Vitamins. All ingredients are pharmaceutical-grade and tested for purity."
            },
            {
              id: "2",
              title: "How long does it take to feel the effects?",
              content: "Most users report noticeable improvements in focus and energy within 15-30 minutes. For optimal recovery benefits, consistent daily use for 7 days shows the best results."
            },
            {
              id: "3",
              title: "Are there any side effects?",
              content: "Edgetabs is well-tolerated by most users. Some sensitive individuals may experience mild caffeine effects. Start with half a tablet to assess tolerance. Consult a healthcare provider if you're on medications."
            },
            {
              id: "4",
              title: "How fast is shipping?",
              content: "Standard shipping takes 3-5 business days. Express shipping (included with 3-tin orders) arrives within 1-2 business days. We ship from our facility within 24 hours of order."
            },
            {
              id: "5",
              title: "What if I'm not satisfied?",
              content: "We offer a 30-day money-back guarantee. If you're not completely satisfied, contact us within 30 days for a full refund—no questions asked. We believe in the product and want you to feel confident trying it."
            },
            {
              id: "6",
              title: "Can I cancel my subscription anytime?",
              content: "Yes, absolutely. Cancel your subscription anytime with one click. No hidden fees, no penalties. Your next shipment won't charge until you confirm."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548563691-gpm4nfe1.jpg"
          imageAlt="Edgetabs supplement ingredients and benefits"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Your Edge Today"
          description="Complete your order in under 2 minutes. Secure checkout, fast shipping, and full satisfaction guarantee."
          inputs={[
            {
              name: "fullName",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Phone Number",
              required: true
            },
            {
              name: "address",
              type: "text",
              placeholder: "Shipping Address",
              required: true
            }
          ]}
          textarea={{
            name: "specialInstructions",
            placeholder: "Any special delivery instructions? (Optional)",
            rows: 3,
            required: false
          }}
          useInvertedBackground="noInvert"
          mediaPosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548565278-tse5y6u5.jpg"
          imageAlt="Fast and secure checkout"
          buttonText="Complete Purchase"
          titleClassName="text-4xl md:text-5xl font-extrabold"
          descriptionClassName="text-lg leading-relaxed"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",
              items: [
                { label: "Benefits", href: "benefits" },
                { label: "Ingredients", href: "faq" },
                { label: "Reviews", href: "testimonials" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Edgetabs", href: "#" },
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Policy", href: "#" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Money-Back Guarantee", href: "#" },
                { label: "FAQ", href: "faq" },
                { label: "Track Order", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Edgetabs. All rights reserved. Engineered for performance."
          logoWidth={40}
          logoHeight={40}
        />
      </div>
    </ThemeProvider>
  );
}