import React from 'react'
import { Menu, X, ArrowRight, CheckCircle, Zap, Users, Gauge } from 'lucide-react'

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
  const [activeTab, setActiveTab] = React.useState('features')

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen)

  const features = [
    {
      icon: <Zap className="w-6 h-6" />,
      title: 'Lightning Fast',
      description: 'Optimized for speed with < 100ms response times'
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: 'Scalable Solution',
      description: 'Grows with your business from startup to enterprise'
    },
    {
      icon: <Gauge className="w-6 h-6" />,
      title: 'Real-time Analytics',
      description: 'Deep insights with live dashboards and reporting'
    }
  ]

  const testimonials = [
    { name: 'Alex Johnson', role: 'CEO, TechCorp', text: 'This platform transformed how we work.' },
    { name: 'Sarah Smith', role: 'Product Lead, StartupHub', text: 'Incredible features and support!' },
    { name: 'Michael Chen', role: 'CTO, Digital First', text: 'Best investment we made this year.' }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
      {/* Navigation */}
      <nav className="fixed w-full bg-slate-900/80 backdrop-blur-md z-50 border-b border-slate-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center font-bold">
                M
              </div>
              <span className="font-bold text-lg hidden sm:inline">ModernFlow</span>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#features" className="hover:text-indigo-400 transition">Features</a>
              <a href="#pricing" className="hover:text-indigo-400 transition">Pricing</a>
              <a href="#testimonials" className="hover:text-indigo-400 transition">Testimonials</a>
              <button className="bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded-lg font-semibold transition">
                Get Started
              </button>
            </div>

            {/* Mobile Menu Button */}
            <button onClick={toggleMenu} className="md:hidden">
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>

          {/* Mobile Menu */}
          {isMenuOpen && (
            <div className="md:hidden pb-4 space-y-4 border-t border-slate-700 pt-4">
              <a href="#features" className="block hover:text-indigo-400">Features</a>
              <a href="#pricing" className="block hover:text-indigo-400">Pricing</a>
              <a href="#testimonials" className="block hover:text-indigo-400">Testimonials</a>
              <button className="w-full bg-indigo-600 hover:bg-indigo-700 px-6 py-2 rounded-lg font-semibold transition">
                Get Started
              </button>
            </div>
          )}
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <div className="mb-6 inline-block">
            <span className="inline-flex items-center px-4 py-2 rounded-full bg-indigo-900/50 border border-indigo-500/30">
              <span className="w-2 h-2 bg-indigo-400 rounded-full mr-2"></span>
              New: AI-powered Analytics Dashboard
            </span>
          </div>
          
          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            Build Your Next
            <span className="block bg-gradient-to-r from-indigo-400 via-pink-400 to-teal-400 bg-clip-text text-transparent">
              Generation App
            </span>
          </h1>

          <p className="text-xl text-slate-300 mb-8 max-w-2xl mx-auto">
            The most powerful platform for modern developers. Ship faster with our intuitive interface, powerful APIs, and lightning-fast infrastructure.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <button className="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition transform hover:scale-105">
              Start Free Trial <ArrowRight size={20} />
            </button>
            <button className="border border-slate-600 hover:border-slate-400 px-8 py-4 rounded-lg font-semibold transition">
              Watch Demo
            </button>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-3 gap-4 md:gap-8">
            <div>
              <p className="text-3xl md:text-4xl font-bold text-indigo-400">50K+</p>
              <p className="text-slate-400">Active Users</p>
            </div>
            <div>
              <p className="text-3xl md:text-4xl font-bold text-pink-400">99.9%</p>
              <p className="text-slate-400">Uptime</p>
            </div>
            <div>
              <p className="text-3xl md:text-4xl font-bold text-teal-400">24/7</p>
              <p className="text-slate-400">Support</p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-4 bg-slate-800/50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">Why Choose ModernFlow?</h2>
            <p className="text-xl text-slate-300">Powerful features designed for modern development teams</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature, i) => (
              <div 
                key={i}
                className="p-8 rounded-xl bg-slate-700/50 border border-slate-600 hover:border-indigo-500/50 transition hover:bg-slate-700/70 group"
              >
                <div className="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center mb-4 group-hover:bg-indigo-500 transition">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
                <p className="text-slate-300">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <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-slate-300">Choose the plan that fits your needs</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { name: 'Starter', price: '$29', features: ['Up to 10K requests', 'Basic analytics', 'Email support'] },
              { name: 'Professional', price: '$99', features: ['Up to 1M requests', 'Advanced analytics', 'Priority support', 'Custom integrations'], highlight: true },
              { name: 'Enterprise', price: 'Custom', features: ['Unlimited requests', 'Full analytics suite', '24/7 phone support', 'Dedicated account manager'] }
            ].map((plan, i) => (
              <div 
                key={i}
                className={`p-8 rounded-xl border transition ${
                  plan.highlight 
                    ? 'bg-indigo-600/20 border-indigo-500 shadow-lg shadow-indigo-500/20'
                    : 'bg-slate-700/50 border-slate-600 hover:border-indigo-500/50'
                }`}
              >
                {plan.highlight && <span className="inline-block px-3 py-1 bg-indigo-600 rounded-full text-sm font-semibold mb-4">POPULAR</span>}
                <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
                <p className="text-4xl font-bold mb-6">{plan.price}<span className="text-lg text-slate-300">/mo</span></p>
                <ul className="space-y-3 mb-8">
                  {plan.features.map((feature, j) => (
                    <li key={j} className="flex items-center gap-2">
                      <CheckCircle size={18} className="text-teal-400" />
                      {feature}
                    </li>
                  ))}
                </ul>
                <button className={`w-full py-3 rounded-lg font-semibold transition ${
                  plan.highlight
                    ? 'bg-indigo-600 hover:bg-indigo-700'
                    : 'bg-slate-600 hover:bg-slate-500'
                }`}>
                  Choose Plan
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 px-4 bg-slate-800/50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">Loved by Teams Worldwide</h2>
            <p className="text-xl text-slate-300">See what our customers are saying</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, i) => (
              <div key={i} className="p-8 rounded-xl bg-slate-700/50 border border-slate-600">
                <div className="flex gap-1 mb-4">
                  {[...Array(5)].map((_, j) => (
                    <span key={j} className="text-yellow-400">★</span>
                  ))}
                </div>
                <p className="text-slate-200 mb-4 italic">"{testimonial.text}"</p>
                <div>
                  <p className="font-bold">{testimonial.name}</p>
                  <p className="text-slate-400 text-sm">{testimonial.role}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center bg-gradient-to-r from-indigo-600 to-pink-600 rounded-2xl p-12">
          <h2 className="text-4xl font-bold mb-6">Ready to Get Started?</h2>
          <p className="text-lg mb-8 text-white/90">Join thousands of teams building amazing products</p>
          <button className="bg-white text-indigo-600 hover:bg-slate-100 px-8 py-4 rounded-lg font-bold text-lg transition transform hover:scale-105">
            Start Your Free Trial Today
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-slate-700 py-12 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <h4 className="font-bold mb-4">Product</h4>
              <ul className="space-y-2 text-slate-400 text-sm"><li><a href="#" className="hover:text-indigo-400">Features</a></li></ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Company</h4>
              <ul className="space-y-2 text-slate-400 text-sm"><li><a href="#" className="hover:text-indigo-400">About</a></li></ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Resources</h4>
              <ul className="space-y-2 text-slate-400 text-sm"><li><a href="#" className="hover:text-indigo-400">Docs</a></li></ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Legal</h4>
              <ul className="space-y-2 text-slate-400 text-sm"><li><a href="#" className="hover:text-indigo-400">Privacy</a></li></ul>
            </div>
          </div>
          <div className="border-t border-slate-700 pt-8 text-center text-slate-400 text-sm">
            <p>&copy; 2024 ModernFlow. All rights reserved. Built with React, Vite, and Tailwind CSS.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default App