import React, { useState, useEffect } from 'react';
import { ArrowRight, CheckCircle, Database, Zap, Shield, Users, Mail, Phone, Star, TrendingUp, Download, Clock } from 'lucide-react';

const UpLeadLanding = () => {
  const [email, setEmail] = useState('');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleEmailSubmit = (e) => {
    e.preventDefault();
    alert(`Thanks! We'll send the free guide to: ${email}`);
    setEmail('');
  };

  return (
    <div className="bg-gray-900 text-white min-h-screen">
      {/* Header */}
      <header className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-gray-900/95 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}>
        <nav className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-cyan-400 rounded-lg flex items-center justify-center">
                <TrendingUp className="w-6 h-6" />
              </div>
              <span className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
                UpLead.pro
              </span>
            </div>
            
            <div className="hidden md:flex items-center space-x-8">
              <a href="#features" className="hover:text-cyan-400 transition">Features</a>
              <a href="#pricing" className="hover:text-cyan-400 transition">Pricing</a>
              <a href="#faq" className="hover:text-cyan-400 transition">FAQ</a>
              <a href="#contact" className="hover:text-cyan-400 transition">Contact</a>
              <button className="px-6 py-2 bg-gradient-to-r from-purple-500 to-cyan-400 rounded-lg font-semibold hover:shadow-lg hover:shadow-purple-500/50 transition">
                Get Started
              </button>
            </div>

            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <div className="w-6 h-0.5 bg-white mb-1"></div>
              <div className="w-6 h-0.5 bg-white mb-1"></div>
              <div className="w-6 h-0.5 bg-white"></div>
            </button>
          </div>

          {isMenuOpen && (
            <div className="md:hidden mt-4 pb-4 space-y-3">
              <a href="#features" className="block hover:text-cyan-400">Features</a>
              <a href="#pricing" className="block hover:text-cyan-400">Pricing</a>
              <a href="#faq" className="block hover:text-cyan-400">FAQ</a>
              <a href="#contact" className="block hover:text-cyan-400">Contact</a>
            </div>
          )}
        </nav>
      </header>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-6 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-cyan-900/20"></div>
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 left-10 w-72 h-72 bg-purple-500 rounded-full filter blur-3xl"></div>
          <div className="absolute bottom-20 right-10 w-96 h-96 bg-cyan-500 rounded-full filter blur-3xl"></div>
        </div>
        
        <div className="container mx-auto text-center relative z-10">
          <div className="inline-block mb-4 px-4 py-2 bg-purple-500/20 border border-purple-500/30 rounded-full text-sm">
            🚀 Trusted by 500+ Marketing Agencies
          </div>
          
          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            Stop Wasting Hours on
            <span className="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent"> Lead Research</span>
          </h1>
          
          <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
            Get 2,000+ verified B2B contacts in minutes. Pre-built databases for marketing agencies ready to download instantly.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <a href="#pricing" className="px-8 py-4 bg-gradient-to-r from-purple-500 to-cyan-400 rounded-lg font-semibold text-lg hover:shadow-2xl hover:shadow-purple-500/50 transition flex items-center justify-center">
              Get Agency Fuel Pack - $67
              <ArrowRight className="ml-2 w-5 h-5" />
            </a>
            <a href="#features" className="px-8 py-4 bg-gray-800 border border-gray-700 rounded-lg font-semibold text-lg hover:border-cyan-400 transition">
              See How It Works
            </a>
          </div>

          <div className="flex flex-wrap justify-center gap-8 text-sm text-gray-400">
            <div className="flex items-center">
              <CheckCircle className="w-5 h-5 text-green-400 mr-2" />
              Verified Email Addresses
            </div>
            <div className="flex items-center">
              <CheckCircle className="w-5 h-5 text-green-400 mr-2" />
              Instant Download
            </div>
            <div className="flex items-center">
              <CheckCircle className="w-5 h-5 text-green-400 mr-2" />
              No Subscription Required
            </div>
          </div>
        </div>
      </section>

      {/* Lead Magnet Section */}
      <section className="py-16 px-6 bg-gradient-to-r from-purple-900/30 to-cyan-900/30">
        <div className="container mx-auto max-w-4xl">
          <div className="bg-gray-800/50 backdrop-blur-sm border border-purple-500/30 rounded-2xl p-8 md:p-12">
            <div className="text-center mb-8">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                Free Guide: <span className="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">10 Cold Email Templates</span>
              </h2>
              <p className="text-gray-300 text-lg">
                Get our proven email templates that convert 23% better. Used by top agencies to close deals faster.
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
              <input
                type="email"
                placeholder="Enter your email..."
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="flex-1 px-6 py-4 bg-gray-900 border border-gray-700 rounded-lg focus:outline-none focus:border-cyan-400 transition"
              />
              <button
                onClick={handleEmailSubmit}
                className="px-8 py-4 bg-gradient-to-r from-purple-500 to-cyan-400 rounded-lg font-semibold hover:shadow-lg hover:shadow-purple-500/50 transition whitespace-nowrap"
              >
                Get Free Guide
              </button>
            </div>

            <p className="text-center text-sm text-gray-400 mt-4">
              Join 2,500+ agency owners. No spam, unsubscribe anytime.
            </p>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-6">
        <div className="container mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Everything You Need to <span className="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">Scale Your Outreach</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-2xl mx-auto">
              Pre-vetted, verified leads with all the contact information you need to start converting immediately.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: Database,
                title: "2,000+ Verified Contacts",
                description: "Every email verified and validated. Business name, owner name, email, phone, website, and location included."
              },
              {
                icon: Zap,
                title: "Instant Download",
                description: "Get your CSV file immediately after purchase. No waiting, no manual verification needed."
              },
              {
                icon: Shield,
                title: "GDPR Compliant Data",
                description: "All data sourced from public directories and business listings. 100% compliant and safe to use."
              },
              {
                icon: Users,
                title: "Niche-Specific Targeting",
                description: "Restaurants, retail stores, local services - all segmented by industry for laser-focused outreach."
              },
              {
                icon: Mail,
                title: "Email Templates Included",
                description: "10 proven cold email templates that our clients use to book 15+ calls per week."
              },
              {
                icon: TrendingUp,
                title: "Conversion Playbook",
                description: "10-minute video showing exactly how to convert these leads into $2K/month clients."
              }
            ].map((feature, index) => (
              <div
                key={index}
                className="p-6 bg-gray-800/50 border border-gray-700 rounded-xl hover:border-purple-500/50 transition group"
              >
                <div className="w-12 h-12 bg-gradient-to-br from-purple-500/20 to-cyan-400/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition">
                  <feature.icon className="w-6 h-6 text-cyan-400" />
                </div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-400">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Social Proof */}
      <section className="py-16 px-6 bg-gray-800/30">
        <div className="container mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Trusted by Growing Agencies
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                name: "Sarah Mitchell",
                role: "Founder, GrowthLab Marketing",
                text: "Downloaded the database on Monday, booked 3 discovery calls by Friday. The email templates alone are worth 10x the price.",
                rating: 5
              },
              {
                name: "Carlos Rodríguez",
                role: "CEO, Digital Boost Agency",
                text: "Finally, a lead database that actually works. Saved me 20+ hours of LinkedIn scraping. Closed my first client in 2 weeks.",
                rating: 5
              },
              {
                name: "Jennifer Park",
                role: "Lead Gen Specialist",
                text: "The quality is insane. 95%+ of emails were valid. Already recommended to 3 colleagues. Best $67 I've spent this year.",
                rating: 5
              }
            ].map((testimonial, index) => (
              <div
                key={index}
                className="p-6 bg-gray-800/50 border border-gray-700 rounded-xl"
              >
                <div className="flex mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                  ))}
                </div>
                <p className="text-gray-300 mb-4">"{testimonial.text}"</p>
                <div>
                  <p className="font-semibold">{testimonial.name}</p>
                  <p className="text-sm text-gray-400">{testimonial.role}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-20 px-6">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Simple, Transparent Pricing
            </h2>
            <p className="text-xl text-gray-300">
              One-time payment. Lifetime access. No subscriptions.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                name: "Starter Pack",
                price: "$27",
                description: "Perfect for testing the waters",
                features: [
                  "500 verified leads",
                  "1 industry niche",
                  "Basic email templates",
                  "CSV download"
                ],
                cta: "Get Started",
                popular: false
              },
              {
                name: "Agency Fuel Pack",
                price: "$67",
                description: "Most popular for growing agencies",
                features: [
                  "2,000 verified leads",
                  "3 industry niches",
                  "10 email templates",
                  "Video conversion playbook",
                  "50 free API verifications",
                  "Priority support"
                ],
                cta: "Get Agency Pack",
                popular: true
              },
              {
                name: "Ultimate Bundle",
                price: "$147",
                description: "For serious scale",
                features: [
                  "5,000+ verified leads",
                  "All industry niches",
                  "Complete email library",
                  "Full video course",
                  "200 free API verifications",
                  "White-glove onboarding",
                  "Lifetime updates"
                ],
                cta: "Get Ultimate",
                popular: false
              }
            ].map((plan, index) => (
              <div
                key={index}
                className={`p-8 rounded-2xl relative ${
                  plan.popular
                    ? 'bg-gradient-to-br from-purple-900/40 to-cyan-900/40 border-2 border-purple-500 shadow-2xl shadow-purple-500/20'
                    : 'bg-gray-800/50 border border-gray-700'
                }`}
              >
                {plan.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-purple-500 to-cyan-400 rounded-full text-sm font-semibold">
                    MOST POPULAR
                  </div>
                )}
                
                <div className="text-center mb-6">
                  <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
                  <p className="text-gray-400 mb-4">{plan.description}</p>
                  <div className="text-5xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
                    {plan.price}
                  </div>
                  <p className="text-gray-400 mt-2">one-time payment</p>
                </div>

                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, i) => (
                    <li key={i} className="flex items-start">
                      <CheckCircle className="w-5 h-5 text-green-400 mr-2 mt-0.5 flex-shrink-0" />
                      <span className="text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>

                <button
                  className={`w-full py-3 rounded-lg font-semibold transition ${
                    plan.popular
                      ? 'bg-gradient-to-r from-purple-500 to-cyan-400 hover:shadow-lg hover:shadow-purple-500/50'
                      : 'bg-gray-700 hover:bg-gray-600'
                  }`}
                >
                  {plan.cta}
                </button>
              </div>
            ))}
          </div>

          <div className="text-center mt-12 space-y-4">
            <p className="text-gray-400">
              <Clock className="w-5 h-5 inline mr-2" />
              Limited Time: First 100 customers get lifetime access to future database updates
            </p>
            <div className="flex justify-center gap-8 text-sm">
              <div className="flex items-center text-gray-400">
                <Shield className="w-5 h-5 mr-2 text-green-400" />
                Secure Payment via Stripe
              </div>
              <div className="flex items-center text-gray-400">
                <Download className="w-5 h-5 mr-2 text-cyan-400" />
                Instant Delivery
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-20 px-6 bg-gray-800/30">
        <div className="container mx-auto max-w-3xl">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Frequently Asked Questions
            </h2>
          </div>

          <div className="space-y-6">
            {[
              {
                q: "How are the emails verified?",
                a: "We use a combination of SMTP verification, domain validation, and manual spot-checks. Our verification rate is 95%+, meaning less than 5% bounce rate."
              },
              {
                q: "Can I use these leads for cold email campaigns?",
                a: "Yes! All data is sourced from public business directories and is compliant with GDPR and CAN-SPAM. However, always follow email marketing best practices and local regulations."
              },
              {
                q: "What format do I receive the data in?",
                a: "You'll get a clean CSV file with columns: Business Name, Owner Name, Email, Phone, Website, Location, Industry. Easy to import into any CRM or email tool."
              },
              {
                q: "Do you offer refunds?",
                a: "Due to the digital nature of the product, we don't offer refunds. However, we stand behind our quality - if you have issues with data accuracy, contact us and we'll make it right."
              },
              {
                q: "How often is the database updated?",
                a: "We refresh our databases quarterly. Agency Fuel Pack and Ultimate Bundle customers get free updates for life."
              },
              {
                q: "Can I resell this data?",
                a: "No, the data is licensed for your business use only. Reselling or redistributing the database is prohibited."
              }
            ].map((faq, index) => (
              <details
                key={index}
                className="p-6 bg-gray-800/50 border border-gray-700 rounded-xl group"
              >
                <summary className="font-semibold text-lg cursor-pointer list-none flex items-center justify-between">
                  {faq.q}
                  <span className="text-cyan-400 group-open:rotate-180 transition">▼</span>
                </summary>
                <p className="mt-4 text-gray-400">{faq.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-6">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Ready to Fill Your Pipeline with
            <span className="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent"> Qualified Leads?</span>
          </h2>
          <p className="text-xl text-gray-300 mb-8">
            Join 500+ agencies who've already transformed their outreach. Download your database in the next 60 seconds.
          </p>
          <a
            href="#pricing"
            className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-500 to-cyan-400 rounded-lg font-semibold text-lg hover:shadow-2xl hover:shadow-purple-500/50 transition"
          >
            Get Your Leads Now - Starting at $27
            <ArrowRight className="ml-2 w-5 h-5" />
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer id="contact" className="py-12 px-6 bg-gray-900 border-t border-gray-800">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-cyan-400 rounded-lg flex items-center justify-center">
                  <TrendingUp className="w-5 h-5" />
                </div>
                <span className="text-xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
                  UpLead.pro
                </span>
              </div>
              <p className="text-gray-400 text-sm">
                Quality B2B leads for growing agencies.
              </p>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Product</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#features" className="hover:text-cyan-400 transition">Features</a></li>
                <li><a href="#pricing" className="hover:text-cyan-400 transition">Pricing</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">API Access</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">Roadmap</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Resources</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#" className="hover:text-cyan-400 transition">Blog</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">Guides</a></li>
                <li><a href="#faq" className="hover:text-cyan-400 transition">FAQ</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">Support</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold mb-4">Legal</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li><a href="#" className="hover:text-cyan-400 transition">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">Terms of Service</a></li>
                <li><a href="#" className="hover:text-cyan-400 transition">Refund Policy</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 pt-8 text-center text-gray-400 text-sm">
            <p>© 2026 UpLead.pro. All rights reserved. Built for agencies that want to scale.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default UpLeadLanding;