"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Crown, Package, Phone, Mail, MapPin, Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Edgetabs"
          button={{
            text: "Shop Now",
            href: "#pricing"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Edge Your Focus. Dominate Your Day."
          description="Maximum strength, zero crash. The trusted performance supplement for athletes and high-performers."
          tag="★★★★★ 4.8 Rated by 2,000+ Athletes"
          buttons={[
            {
              text: "Get Edge Now",
              href: "#pricing"
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548692672-h0dxmit1.jpg"
          imageAlt="Edgetabs premium supplement bottle"
          className="relative"
          containerClassName="max-w-full"
          titleClassName="text-5xl md:text-6xl font-bold tracking-tight"
          descriptionClassName="text-lg md:text-xl leading-relaxed opacity-90"
          tagClassName="inline-block text-sm font-semibold tracking-wide"
          buttonClassName="bg-primary-cta hover:bg-opacity-90 text-foreground font-bold px-8 py-3"
        />
      </div>
      
      <div id="trust-metrics" data-section="trust-metrics">
        <MetricCardEight
          title="Trusted by thousands. Proven results. No compromise."
          metrics={[
            {
              id: "1",
              value: "2,000+",
              title: "Happy Customers"
            },
            {
              id: "2",
              value: "4.8★",
              title: "Average Rating"
            },
            {
              id: "3",
              value: "92%",
              title: "Would Buy Again"
            },
            {
              id: "4",
              value: "24/7",
              title: "Customer Support"
            }
          ]}
          useInvertedBackground="noInvert"
          className="py-16"
          containerClassName="max-w-6xl"
          metricsContainerClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
          valueClassName="text-3xl md:text-4xl font-bold text-primary-cta"
          metricTitleClassName="text-sm font-medium opacity-75"
        />
      </div>
      
      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Choose Your Bundle"
          description="Maximize your edge with our most popular bundle options"
          tag="Limited Stock"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "1",
              badge: "Single Tin",
              price: "$49",
              subtitle: "30-day supply",
              features: [
                "Full strength formula",
                "Ships within 24 hours",
                "30-day satisfaction guarantee"
              ],
              badgeIcon: Package
            },
            {
              id: "2",
              badge: "Save 15%",
              price: "$83",
              subtitle: "Best value for regulars",
              features: [
                "2 months supply",
                "Priority shipping",
                "30-day satisfaction guarantee",
                "VIP customer support"
              ],
              badgeIcon: Sparkles
            },
            {
              id: "3",
              badge: "Best Value - Save 25%",
              price: "$110",
              subtitle: "3-month lock-in",
              features: [
                "3 months of Edge",
                "Free priority shipping",
                "30-day satisfaction guarantee",
                "24/7 VIP support",
                "Exclusive early access to new products"
              ],
              badgeIcon: Crown
            }
          ]}
          className="py-20"
          containerClassName="max-w-6xl"
          priceClassName="text-4xl font-bold text-primary-cta"
          featuresClassName="space-y-2"
        />
      </div>
      
      <div id="subscription-offer" data-section="subscription-offer">
        <MediaAbout
          title="Subscribe & Save 10% More"
          description="Lock in your performance advantage. Get Edgetabs delivered monthly. Cancel anytime. No commitment required. Your edge never stops."
          tag="Monthly Subscription"
          buttons={[
            {
              text: "Start Subscription",
              href: "#pricing"
            }
          ]}
          useInvertedBackground="noInvert"
          className="py-20 bg-card"
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg leading-relaxed opacity-85"
          buttonClassName="bg-primary-cta text-foreground font-bold px-8 py-3 hover:opacity-90"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Marcus Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg",
              imageAlt: "Marcus Johnson"
            },
            {
              id: "2",
              name: "Sarah Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "3",
              name: "James Williams",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448343297-4asr5tm3.jpg",
              imageAlt: "James Williams"
            },
            {
              id: "4",
              name: "Emma Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548693323-y60rb3jz.jpg",
              imageAlt: "Emma Rodriguez"
            }
          ]}
          cardTitle="Over 2,000 athletes and high-performers trust Edgetabs to deliver real results"
          cardTag="See what they say"
          cardTagIcon={Star}
          useInvertedBackground="noInvert"
          className="py-20"
          cardClassName="bg-card rounded-sharp p-12"
          cardTitleClassName="text-2xl md:text-3xl font-bold text-center"
          cardTagClassName="text-sm font-semibold text-primary-cta text-center"
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqDouble
          title="Everything You Need to Know"
          description="Common questions about Edgetabs performance supplement"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How quickly will I feel the effects?",
              content: "Most users report noticeable focus and energy boost within 20-30 minutes of taking Edgetabs. Peak performance levels are typically reached within 45 minutes."
            },
            {
              id: "2",
              title: "Is there a crash after the effects wear off?",
              content: "No. Edgetabs uses a proprietary blend designed for sustained energy without the dreaded crash. Users report consistent performance for 4-6 hours."
            },
            {
              id: "3",
              title: "What's in Edgetabs?",
              content: "Our formula includes premium-grade caffeine, L-theanine, beta-alanine, and natural focus enhancers. All ingredients are lab-tested and third-party verified for purity and potency."
            },
            {
              id: "4",
              title: "Is Edgetabs safe for daily use?",
              content: "Yes. Our formula is designed for daily use by athletes and high-performers. Consult with your healthcare provider if you have specific health concerns."
            },
            {
              id: "5",
              title: "What if I'm not satisfied?",
              content: "We offer a 30-day money-back guarantee. If you don't love your results, we'll refund your purchase, no questions asked."
            },
            {
              id: "6",
              title: "Do you offer international shipping?",
              content: "Yes, we ship to over 150 countries. International orders typically arrive within 7-14 business days depending on location."
            }
          ]}
          className="py-20"
          containerClassName="max-w-4xl"
          accordionClassName="bg-card rounded-sharp p-6 mb-4"
          accordionTitleClassName="font-bold text-lg"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Join the Edge Community"
          description="Have questions? Our team is here to help you unlock your peak performance. Get in touch with us today."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Your name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your email",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us how we can help you find your edge...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          buttonText="Send Message"
          mediaPosition="right"
          className="py-20"
          containerClassName="max-w-6xl"
          titleClassName="text-4xl font-bold mb-4"
          descriptionClassName="text-lg opacity-85"
          buttonClassName="bg-primary-cta text-foreground font-bold px-8 py-3 hover:opacity-90 w-full"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Edgetabs"
          title="Peak Performance. Zero Compromise. Your Edge."
          columns={[
            {
              title: "Product",
              items: [
                {
                  label: "Shop",
                  href: "#pricing"
                },
                {
                  label: "Bundles",
                  href: "#pricing"
                },
                {
                  label: "Subscription",
                  href: "#subscription-offer"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#about"
                },
                {
                  label: "Blog",
                  href: "#blog"
                },
                {
                  label: "Careers",
                  href: "#careers"
                }
              ]
            },
            {
              title: "Support",
              items: [
                {
                  label: "FAQ",
                  href: "#faq"
                },
                {
                  label: "Contact",
                  href: "#contact"
                },
                {
                  label: "Shipping Info",
                  href: "#shipping"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "/privacy"
                },
                {
                  label: "Terms of Service",
                  href: "/terms"
                },
                {
                  label: "Return Policy",
                  href: "/returns"
                }
              ]
            }
          ]}
          contactItems={[
            {
              icon: Phone,
              text: "1-800-EDGE-NOW (1-800-334-3669)"
            },
            {
              icon: Mail,
              text: "support@edgetabs.com"
            },
            {
              icon: MapPin,
              text: "San Francisco, CA 94105"
            }
          ]}
          className="bg-card"
          containerClassName="max-w-6xl"
          titleClassName="text-2xl md:text-3xl font-bold"
          columnTitleClassName="font-bold mb-4"
          contactIconClassName="text-primary-cta"
        />
      </div>
    </ThemeProvider>
  );
}