"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { AlertCircle, Zap, Sparkles, TrendingUp, Crown, Users, ShoppingCart, CheckCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="dotGrid"
      cardStyle="gradient-subtle"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            { name: "Product", id: "product" },
            { name: "Benefits", id: "feature" },
            { name: "Reviews", id: "testimonial" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Edge", href: "pricing" }}
          brandName="Edgetabs"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Performance Without Compromise"
          description="Edge™ gives you the focus, energy, and endurance to dominate your day. Trusted by 2,000+ athletes and professionals."
          tag="LOW ON STOCK"
          tagIcon={AlertCircle}
          buttons={[{ text: "Buy Now", href: "pricing" }]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548546071-wp7uovv5.jpg",
              imageAlt: "Edgetabs supplement tin - front view"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548546571-39ecp4cp.jpg",
              imageAlt: "Edgetabs supplement tin - premium packaging"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548547065-i9m5r1ip.jpg",
              imageAlt: "Edgetabs supplement - product angle"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548547612-wqj5duie.jpg",
              imageAlt: "Edgetabs supplement - lifestyle view"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548548300-rl25cqqt.jpg",
              imageAlt: "Edgetabs supplement - premium container"
            }
          ]}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardFive
          title="The Edge You Need"
          description="Premium performance supplement engineered for peak mental and physical output."
          tag="Premium Formula"
          tagIcon={Zap}
          products={[
            {
              id: "edge-single",
              button: { text: "Add to Cart", href: "#pricing" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548546071-wp7uovv5.jpg",
              imageAlt: "Single Edgetabs tin",
              isFavorited: false
            },
            {
              id: "edge-double",
              button: { text: "Add to Cart", href: "#pricing" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548546571-39ecp4cp.jpg",
              imageAlt: "Double Edgetabs pack",
              isFavorited: false
            },
            {
              id: "edge-triple",
              button: { text: "Add to Cart", href: "#pricing" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548547065-i9m5r1ip.jpg",
              imageAlt: "Triple Edgetabs bundle",
              isFavorited: false
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Edge"
          description="Flexible purchase options designed for your lifestyle and budget."
          tag="Bundle & Save"
          tagIcon={Sparkles}
          plans={[
            {
              id: "single-tin",
              badge: "Starter",
              badgeIcon: Zap,
              price: "$49",
              subtitle: "1 Tin (30 servings)",
              buttons: [{ text: "Get Started", href: "#checkout" }],
              features: [
                "30-day supply",
                "Enhanced focus & energy",
                "Free shipping on orders $50+",
                "30-day satisfaction guarantee"
              ]
            },
            {
              id: "double-tin",
              badge: "Popular",
              badgeIcon: TrendingUp,
              price: "$89",
              subtitle: "2 Tins (Save 10%)",
              buttons: [{ text: "Most Popular", href: "#checkout" }],
              features: [
                "60-day supply",
                "Save $11 vs individual tins",
                "Free priority shipping",
                "30-day satisfaction guarantee"
              ]
            },
            {
              id: "triple-tin",
              badge: "Best Value",
              badgeIcon: Crown,
              price: "$119",
              subtitle: "3 Tins (Save 19%)",
              buttons: [{ text: "Get Best Value", href: "#checkout" }],
              features: [
                "90-day supply",
                "Save $28 vs individual tins",
                "Free express shipping",
                "30-day satisfaction guarantee",
                "Exclusive bonus guide"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardThree
          title="Why Athletes Choose Edge"
          description="Proven results from thousands of verified customers."
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Customer Conversions",
              value: "4.8★"
            },
            {
              id: "2",
              icon: Users,
              title: "Satisfied Customers",
              value: "2,000+"
            },
            {
              id: "3",
              icon: Zap,
              title: "Energy Boost",
              value: "100%"
            },
            {
              id: "4",
              icon: ShoppingCart,
              title: "Repeat Orders",
              value: "78%"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardTwenty
          images={[
            {
              id: 1,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548548957-pwa2turd.jpg",
              imageAlt: "Enhanced focus and concentration benefit"
            },
            {
              id: 2,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548549423-sgwxnmgg.jpg",
              imageAlt: "Clean energy boost for performance"
            },
            {
              id: 3,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548549869-bh6uqj3v.jpg",
              imageAlt: "Strength and endurance enhancement"
            }
          ]}
          title="What Makes Edge Different"
          description="We've engineered Edge using cutting-edge ingredients backed by peer-reviewed research. No fillers. No compromises. Just pure performance.\n\n✓ Clinically-dosed ingredients\n✓ Zero artificial flavors\n✓ 3rd-party tested\n✓ Manufactured in NSF-certified facilities"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548317270-xdwlmkra.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387355491-oaqhmk1o.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "James Wilson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg",
              imageAlt: "James Wilson"
            },
            {
              id: "5",
              name: "Lisa Patterson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548534823-ztfa8dh2.jpg",
              imageAlt: "Lisa Patterson"
            },
            {
              id: "6",
              name: "David Kim",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548550957-0v941rbh.jpg",
              imageAlt: "David Kim"
            }
          ]}
          cardTitle="Trusted by 2,000+ athletes, entrepreneurs, and high performers worldwide"
          cardTag="Verified Reviews"
          cardTagIcon={CheckCircle}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Everything You Need to Know"
          description="Got questions? We've got answers. Find everything about Edge, our formula, and shipping."
          faqs={[
            {
              id: "1",
              title: "When will I see results?",
              content: "Most users report noticeable improvements in focus and energy within the first week. Peak performance benefits typically appear within 2-3 weeks of consistent use as your system fully adapts to the formula."
            },
            {
              id: "2",
              title: "Is Edge safe? Are there any side effects?",
              content: "Edge is manufactured in NSF-certified facilities and 3rd-party tested for safety and purity. Ingredients are clinically-dosed and backed by peer-reviewed research. Most users experience zero side effects. If you're on medication or have health concerns, consult your healthcare provider."
            },
            {
              id: "3",
              title: "How do I use Edge?",
              content: "Mix one scoop with 8-12 oz of water, juice, or your favorite beverage. Best taken 30-45 minutes before your workout, workout, or when you need peak performance. One tin provides 30 servings."
            },
            {
              id: "4",
              title: "What's your return policy?",
              content: "We offer a 100% satisfaction guarantee. If you're not completely happy with Edge within 30 days, we'll refund your purchase—no questions asked. We're that confident you'll love it."
            },
            {
              id: "5",
              title: "How do subscriptions work?",
              content: "Subscribe and save 10% on every order. Your Edge is automatically delivered monthly. You can pause, skip, or cancel anytime through your account dashboard. No hidden fees."
            },
            {
              id: "6",
              title: "Is Edge vegan and allergen-friendly?",
              content: "Edge is vegan and free from common allergens including gluten, dairy, and nuts. All ingredients are listed on our packaging. Please review the full ingredient list if you have specific sensitivities."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Get Your Edge?"
          description="Join thousands of high performers. Get your first order of Edge today and feel the difference in 7 days or your money back."
          inputs={[
            {
              name: "email",
              type: "email",
              placeholder: "your@email.com",
              required: true
            },
            {
              name: "country",
              type: "text",
              placeholder: "Country",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Any questions? We're here to help.",
            rows: 3,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548550280-cjajr3pv.jpg"
          imageAlt="Customer support team"
          mediaPosition="right"
          buttonText="Get Edge Today"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Edgetabs"
        />
      </div>
    </ThemeProvider>
  );
}