"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="outline"
      secondaryButtonStyle="minimal"
      headingFontWeight="bold"
    >
      <div className="min-h-screen bg-background text-foreground">
        {/* Hero Section */}
        <div id="hero" data-section="hero" className="relative overflow-hidden">
          <div className="container mx-auto px-4 md:px-6">
            <div className="py-24 md:py-32 text-center">
              {/* Announcement Bar */}
              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary-cta/20 to-accent/20 backdrop-blur-sm border border-primary-cta/30 rounded-full px-6 py-2 mb-8">
                <div className="w-2 h-2 bg-primary-cta rounded-full animate-pulse"></div>
                <span className="text-sm font-medium text-foreground/80">LOW ON STOCK - Limited Availability</span>
              </div>
              
              {/* Main Headline */}
              <h1 className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent">
                Unlock Your
                <br />
                <span className="bg-gradient-to-r from-primary-cta to-accent bg-clip-text text-transparent">Mental Edge</span>
              </h1>
              
              {/* Subheadline */}
              <p className="text-xl md:text-2xl text-foreground/70 mb-8 max-w-2xl mx-auto leading-relaxed">
                Premium cognitive enhancement supplements designed to boost focus, memory, and mental clarity. Transform your performance with scientifically-formulated nootropics.
              </p>
              
              {/* Trust Indicators */}
              <div className="flex items-center justify-center gap-6 mb-10">
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => (
                    <div key={i} className="w-5 h-5 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center">
                      <span className="text-white text-xs">★</span>
                    </div>
                  ))}
                  <span className="ml-2 text-sm text-foreground/60">4.9/5 (2,847 reviews)</span>
                </div>
                <div className="w-px h-4 bg-foreground/20"></div>
                <span className="text-sm text-foreground/60">FDA Registered Facility</span>
              </div>
              
              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button className="bg-gradient-to-r from-primary-cta to-accent text-white font-semibold px-8 py-4 rounded-full hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                  Shop Now - Starting at $29
                </button>
                <button className="border-2 border-foreground/20 text-foreground font-semibold px-8 py-4 rounded-full hover:border-primary-cta hover:text-primary-cta transition-all duration-300">
                  View Bundles & Save
                </button>
              </div>
              
              {/* Product Image Placeholder */}
              <div className="mt-16">
                <div className="relative mx-auto max-w-md">
                  <div className="aspect-square bg-gradient-to-br from-card to-accent/30 rounded-3xl flex items-center justify-center">
                    <span className="text-foreground/40 text-lg font-medium">Edgetabs Product</span>
                  </div>
                  <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent rounded-3xl"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        {/* Pricing Section */}
        <div id="pricing" data-section="pricing" className="py-20">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">Choose Your Package</h2>
              <p className="text-xl text-foreground/70 max-w-2xl mx-auto">Select the perfect bundle for your cognitive enhancement journey. Save more with larger quantities.</p>
            </div>
            
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {/* Single Bottle */}
              <div className="relative bg-gradient-to-br from-card to-accent/20 backdrop-blur-sm border border-card rounded-3xl p-8">
                <h3 className="text-2xl font-bold mb-2">Starter Pack</h3>
                <p className="text-foreground/60 mb-6">1 Bottle (30-day supply)</p>
                <div className="mb-6">
                  <span className="text-4xl font-bold">$49</span>
                  <span className="text-foreground/60 ml-2">per bottle</span>
                </div>
                <button className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-full hover:shadow-lg transition-all duration-300">
                  Add to Cart
                </button>
              </div>
              
              {/* Most Popular */}
              <div className="relative bg-gradient-to-br from-card to-accent/20 backdrop-blur-sm border-2 border-primary-cta rounded-3xl p-8 scale-105">
                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                  <span className="bg-gradient-to-r from-primary-cta to-accent text-white px-4 py-1 rounded-full text-sm font-medium">Most Popular</span>
                </div>
                <h3 className="text-2xl font-bold mb-2">Performance Pack</h3>
                <p className="text-foreground/60 mb-6">2 Bottles (60-day supply)</p>
                <div className="mb-6">
                  <span className="text-4xl font-bold">$39</span>
                  <span className="text-foreground/60 ml-2">per bottle</span>
                  <div className="text-sm text-primary-cta font-medium">Save $20</div>
                </div>
                <button className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-full hover:shadow-lg transition-all duration-300">
                  Add to Cart
                </button>
              </div>
              
              {/* Best Value */}
              <div className="relative bg-gradient-to-br from-card to-accent/20 backdrop-blur-sm border border-card rounded-3xl p-8">
                <h3 className="text-2xl font-bold mb-2">Ultimate Pack</h3>
                <p className="text-foreground/60 mb-6">3 Bottles (90-day supply)</p>
                <div className="mb-6">
                  <span className="text-4xl font-bold">$29</span>
                  <span className="text-foreground/60 ml-2">per bottle</span>
                  <div className="text-sm text-primary-cta font-medium">Save $60</div>
                </div>
                <button className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-full hover:shadow-lg transition-all duration-300">
                  Add to Cart
                </button>
              </div>
            </div>
            
            {/* Subscription Toggle */}
            <div className="text-center mt-12">
              <div className="inline-flex items-center gap-4 bg-gradient-to-r from-card to-accent/20 backdrop-blur-sm border border-card rounded-full p-2">
                <span className="px-4 py-2 text-foreground/70">One-time purchase</span>
                <button className="bg-gradient-to-r from-primary-cta to-accent text-white px-4 py-2 rounded-full font-medium">
                  Subscribe & Save 10%
                </button>
              </div>
            </div>
          </div>
        </div>
        
        {/* Social Proof Section */}
        <div id="testimonials" data-section="testimonials" className="py-20 bg-gradient-to-br from-card/50 to-accent/20">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">What Our Customers Say</h2>
              <p className="text-xl text-foreground/70 max-w-2xl mx-auto">Join thousands of satisfied customers who have transformed their cognitive performance.</p>
            </div>
            
            <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
              {[
                {
                  name: "Sarah Chen",
                  role: "Software Engineer",
                  rating: 5,
                  text: "Edgetabs completely transformed my focus during long coding sessions. I feel sharper and more productive than ever."
                },
                {
                  name: "Michael Rodriguez",
                  role: "Investment Analyst",
                  rating: 5,
                  text: "The mental clarity I get from Edgetabs is incredible. It helps me analyze complex financial data with laser focus."
                },
                {
                  name: "Dr. Amanda Wright",
                  role: "Research Scientist",
                  rating: 5,
                  text: "As a scientist, I'm skeptical of supplements. But Edgetabs delivers real, noticeable cognitive enhancement."
                }
              ].map((testimonial, index) => (
                <div key={index} className="bg-gradient-to-br from-card to-background/50 backdrop-blur-sm border border-card rounded-2xl p-6">
                  <div className="flex items-center gap-1 mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <div key={i} className="w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center">
                        <span className="text-white text-xs">★</span>
                      </div>
                    ))}
                  </div>
                  <p className="text-foreground/80 mb-6 leading-relaxed">{testimonial.text}</p>
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-gradient-to-br from-primary-cta to-accent rounded-full flex items-center justify-center">
                      <span className="text-white font-semibold text-sm">{testimonial.name[0]}</span>
                    </div>
                    <div>
                      <div className="font-semibold">{testimonial.name}</div>
                      <div className="text-sm text-foreground/60">{testimonial.role}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        
        {/* FAQ Section */}
        <div id="faq" data-section="faq" className="py-20">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">Frequently Asked Questions</h2>
              <p className="text-xl text-foreground/70 max-w-2xl mx-auto">Get answers to common questions about Edgetabs and cognitive enhancement.</p>
            </div>
            
            <div className="max-w-3xl mx-auto space-y-6">
              {[
                {
                  question: "How long does it take to see results?",
                  answer: "Most users notice improved focus and mental clarity within 30-60 minutes of taking Edgetabs. Long-term cognitive benefits develop over 2-4 weeks of consistent use."
                },
                {
                  question: "Are there any side effects?",
                  answer: "Edgetabs is formulated with natural ingredients and is generally well-tolerated. Some users may experience mild headaches initially as their brain adapts to enhanced neurotransmitter activity."
                },
                {
                  question: "How many tablets should I take daily?",
                  answer: "The recommended dose is 1-2 tablets daily, preferably with meals. Start with one tablet to assess tolerance, then adjust as needed."
                },
                {
                  question: "Is it safe to take with other supplements?",
                  answer: "Edgetabs is safe to combine with most vitamins and supplements. However, consult your healthcare provider if you're taking medication or have medical conditions."
                }
              ].map((faq, index) => (
                <div key={index} className="bg-gradient-to-br from-card to-background/50 backdrop-blur-sm border border-card rounded-2xl p-6">
                  <h3 className="text-lg font-semibold mb-3">{faq.question}</h3>
                  <p className="text-foreground/70 leading-relaxed">{faq.answer}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
        
        {/* Contact Section */}
        <div id="contact" data-section="contact" className="py-20 bg-gradient-to-br from-card/50 to-accent/20">
          <div className="container mx-auto px-4 md:px-6">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">Get In Touch</h2>
              <p className="text-xl text-foreground/70 max-w-2xl mx-auto">Have questions about Edgetabs? Our customer support team is here to help.</p>
            </div>
            
            <div className="max-w-2xl mx-auto">
              <div className="grid md:grid-cols-2 gap-8 mb-12">
                <div className="bg-gradient-to-br from-card to-background/50 backdrop-blur-sm border border-card rounded-2xl p-6 text-center">
                  <h3 className="font-semibold mb-2">Email Support</h3>
                  <p className="text-foreground/70">support@edgetabs.com</p>
                </div>
                <div className="bg-gradient-to-br from-card to-background/50 backdrop-blur-sm border border-card rounded-2xl p-6 text-center">
                  <h3 className="font-semibold mb-2">Phone Support</h3>
                  <p className="text-foreground/70">1-800-EDGETABS</p>
                </div>
              </div>
              
              <div className="text-center">
                <button className="bg-gradient-to-r from-primary-cta to-accent text-white font-semibold px-8 py-4 rounded-full hover:shadow-xl transform hover:scale-105 transition-all duration-300">
                  Start Your Cognitive Journey
                </button>
              </div>
            </div>
          </div>
        </div>
        
        {/* Footer */}
        <div id="footer" data-section="footer" className="py-16 border-t border-foreground/10">
          <div className="container mx-auto px-4 md:px-6">
            <div className="grid md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-xl font-bold mb-4">Edgetabs</h3>
                <p className="text-foreground/70 text-sm leading-relaxed">Premium cognitive enhancement supplements for peak mental performance.</p>
              </div>
              
              <div>
                <h4 className="font-semibold mb-4">Product</h4>
                <ul className="space-y-2 text-sm text-foreground/70">
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Cognitive Enhancers</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Bundles & Savings</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Subscription Plans</a></li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-semibold mb-4">Support</h4>
                <ul className="space-y-2 text-sm text-foreground/70">
                  <li><a href="#" className="hover:text-primary-cta transition-colors">FAQ</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Contact Us</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Shipping Info</a></li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-semibold mb-4">Legal</h4>
                <ul className="space-y-2 text-sm text-foreground/70">
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Privacy Policy</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Terms of Service</a></li>
                  <li><a href="#" className="hover:text-primary-cta transition-colors">Return Policy</a></li>
                </ul>
              </div>
            </div>
            
            <div className="border-t border-foreground/10 pt-8 mt-8 text-center">
              <p className="text-sm text-foreground/60">
                © 2024 Edgetabs. All rights reserved. | FDA registered facility | Third-party tested
              </p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}