"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Zap, Brain, Shield, Award, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Product", id: "pricing" },
            { name: "Why Edgetabs", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Edgetabs"
          bottomLeftText="Performance Supplement"
          bottomRightText="support@edgetabs.com"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Unlock Peak Performance with Edgetabs"
          description="Engineered for laser focus, sustained energy, and mental clarity. Experience the edge that separates ordinary from extraordinary."
          tag="LOW ON STOCK"
          buttons={[
            { text: "Get Edge Now", href: "pricing" }
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548617546-3vn9eu16.jpg",
              imageAlt: "supplement capsule energy focus performance"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767450501963-tpqqsdz5.jpg",
              imageAlt: "supplement bottle fitness health capsule"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767450501525-2z6ffwci.jpg",
              imageAlt: "supplement product packaging tin premium"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548617883-i0ilyasy.jpg",
              imageAlt: "supplement tablets capsules health wellness"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548618110-c6caoant.jpg",
              imageAlt: "supplement energy performance fitness athlete"
            }
          ]}
        />
      </div>
      
      <div id="pricing" data-section="pricing">
        <PricingCardSeven
          title="Choose Your Bundle"
          description="Select the perfect supply of Edgetabs for your performance goals. All bundles ship within 24 hours."
          plans={[
            {
              id: "single-tin",
              tag: "STARTER",
              pricingOptions: [
                {
                  value: "one-time",
                  label: "One-Time",
                  price: "$49.99",
                  subtitle: "Single Purchase"
                },
                {
                  value: "monthly",
                  label: "Subscribe",
                  price: "$44.99",
                  subtitle: "10% Savings"
                }
              ],
              defaultOption: "one-time",
              selectorNote: "Subscribe & save 10%",
              description: "30 servings. Perfect for first-time users to experience the Edgetabs edge.",
              buttons: [
                { text: "Add 1 Tin", href: "#" }
              ]
            },
            {
              id: "two-tins",
              tag: "POPULAR",
              pricingOptions: [
                {
                  value: "one-time",
                  label: "One-Time",
                  price: "$89.98",
                  subtitle: "Save $9.98"
                },
                {
                  value: "monthly",
                  label: "Subscribe",
                  price: "$80.98",
                  subtitle: "Save 19.78%"
                }
              ],
              defaultOption: "one-time",
              selectorNote: "Save $9.98 on purchase",
              description: "60 servings. Two months of peak performance. Ideal for consistent users.",
              buttons: [
                { text: "Add 2 Tins", href: "#" }
              ]
            },
            {
              id: "three-tins",
              tag: "BEST VALUE",
              pricingOptions: [
                {
                  value: "one-time",
                  label: "One-Time",
                  price: "$124.97",
                  subtitle: "Save $24.97"
                },
                {
                  value: "monthly",
                  label: "Subscribe",
                  price: "$112.47",
                  subtitle: "Save 29.93%"
                }
              ],
              defaultOption: "one-time",
              selectorNote: "Save $24.97 - Best savings",
              description: "90 servings. Three months of uninterrupted edge. Maximum value and commitment.",
              buttons: [
                { text: "Add 3 Tins", href: "#" }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="about" data-section="about">
        <AboutMetric
          title="Why Edgetabs Outperforms the Competition"
          useInvertedBackground="noInvert"
          metrics={[
            {
              icon: Zap,
              label: "Sustained Energy",
              value: "8+ Hours"
            },
            {
              icon: Brain,
              label: "Laser Focus",
              value: "99% Pure"
            },
            {
              icon: Shield,
              label: "Lab Tested",
              value: "100%"
            },
            {
              icon: Award,
              label: "Customer Rated",
              value: "4.8★"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Trusted by 2,000+ Peak Performers"
          description="Real results from real users who have transformed their performance with Edgetabs."
          tag="★★★★★ Rated"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Fitness Coach",
              company: "Elite Training",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg",
              imageAlt: "portrait professional headshot business person"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Entrepreneur",
              company: "Tech Startup",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg",
              imageAlt: "portrait professional headshot person face"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Professional Athlete",
              company: "Performance Pro",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448343297-4asr5tm3.jpg",
              imageAlt: "portrait professional headshot business person"
            },
            {
              id: "4",
              name: "David Kim",
              role: "Software Engineer",
              company: "Tech Innovation",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548603379-gni6b4vr.jpg",
              imageAlt: "portrait professional headshot person face"
            },
            {
              id: "5",
              name: "Jessica Martinez",
              role: "Marketing Executive",
              company: "Growth Agency",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548618649-feo4luc0.jpg",
              imageAlt: "portrait professional headshot business person"
            },
            {
              id: "6",
              name: "James Wilson",
              role: "Fitness Enthusiast",
              company: "Wellness Coach",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971803-ej8f6jxf.jpg",
              imageAlt: "portrait professional headshot person face"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Proven Results, Real Impact"
          description="See the measurable difference Edgetabs makes in performance and customer satisfaction."
          metrics={[
            {
              id: "1",
              value: "2,000+",
              title: "Happy Customers",
              description: "Growing community of peak performers",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548619667-g5lfh80v.jpg",
              imageAlt: "people community group users customers"
            },
            {
              id: "2",
              value: "98%",
              title: "Satisfaction Rate",
              description: "Customers report improved focus and energy",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548619976-xvx1vkd7.jpg",
              imageAlt: "satisfaction happy smile success achievement"
            },
            {
              id: "3",
              value: "8+",
              title: "Hours of Edge",
              description: "Sustained performance throughout the day",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548619347-rdypab32.jpg",
              imageAlt: "performance chart growth data analytics"
            },
            {
              id: "4",
              value: "100%",
              title: "Lab Verified",
              description: "Third-party tested for purity and potency",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548620347-50j6wzjb.jpg",
              imageAlt: "quality premium check verified badge"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          title="Join the Edge Community"
          description="Get exclusive updates on new products, performance tips, and special offers. Plus receive 15% off your first order."
          tagIcon={Sparkles}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Claim 15% Off"
          termsText="By signing up, you agree to our newsletter. Unsubscribe anytime."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Edgetabs"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Product", href: "pricing" },
                { label: "Pricing", href: "pricing" }
              ]
            },
            {
              items: [
                { label: "Why Us", href: "about" },
                { label: "Reviews", href: "testimonials" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Shipping Info", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "YouTube", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}