import React, { useState } from 'react';
import { 
  CheckCircle, Play, Star, MessageSquare, Calendar, Users, 
  BarChart3, Zap, Shield, Globe, ChevronRight, Menu, X,
  Twitter, Linkedin, Github, Facebook
} from 'lucide-react';

export default function App() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [videoModalOpen, setVideoModalOpen] = useState(false);
  const [billingAnnual, setBillingAnnual] = useState(true);

  const navLinks = [
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Testimonials', href: '#testimonials' }
  ];

  const features = [
    {
      icon: <MessageSquare className="w-6 h-6" />,
      title: 'Task Boards',
      description: 'Visualize work with customizable Kanban boards. Drag, drop, and organize tasks effortlessly.'
    },
    {
      icon: <Calendar className="w-6 h-6" />,
      title: 'Timeline View',
      description: 'See your project roadmap at a glance. Gantt-style timelines help you plan and track milestones.'
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: 'Team Collaboration',
      description: 'Real-time comments, mentions, and updates keep everyone aligned and informed.'
    },
    {
      icon: <Zap className="w-6 h-6" />,
      title: 'Automation',
      description: 'Automate repetitive workflows. Set triggers and actions to save hours every week.'
    },
    {
      icon: <BarChart3 className="w-6 h-6" />,
      title: 'Reporting & Analytics',
      description: 'Gain insights with built-in reports. Track velocity, burndown, and team performance.'
    },
    {
      icon: <Globe className="w-6 h-6" />,
      title: 'Integrations',
      description: 'Connect with 50+ tools including Slack, GitHub, Google Drive, and more.'
    }
  ];

  const pricing = [
    {
      tier: 'Starter',
      price: 0,
      period: 'forever',
      features: [
        'Up to 5 team members',
        '3 project boards',
        'Basic task management',
        'Mobile app access',
        'Community support'
      ],
      cta: 'Get Started Free',
      popular: false
    },
    {
      tier: 'Professional',
      price: billingAnnual ? 12 : 15,
      period: 'per user/month',
      features: [
        'Unlimited team members',
        'Unlimited projects',
        'Timeline & Gantt views',
        'Advanced automation',
        'Priority support',
        'Custom integrations'
      ],
      cta: 'Start Free Trial',
      popular: true
    },
    {
      tier: 'Enterprise',
      price: 'Custom',
      period: 'contact us',
      features: [
        'Everything in Professional',
        'SSO & advanced security',
        'Dedicated success manager',
        'Custom training & onboarding',
        'SLA guarantees',
        'On-premise deployment option'
      ],
      cta: 'Contact Sales',
      popular: false
    }
  ];

  const testimonials = [
    {
      quote: "TaskFlow transformed how our team works. We shipped our product 3 weeks faster than planned.",
      name: 'Sarah Chen',
      role: 'CEO',
      company: 'TechStart Inc.',
      avatar: 'SC'
    },
    {
      quote: "Finally, a project management tool that doesn't require a PhD to use. Simple yet powerful.",
      name: 'Marcus Johnson',
      role: 'VP of Engineering',
      company: 'ScaleUp Corp',
      avatar: 'MJ'
    },
    {
      quote: "The automation features alone saved us 10+ hours per week. Best investment we made this year.",
      name: 'Emily Rodriguez',
      role: 'Product Manager',
      company: 'InnovateLab',
      avatar: 'ER'
    },
    {
      quote: "Enterprise-grade security with consumer-grade simplicity. That's the TaskFlow difference.",
      name: 'David Park',
      role: 'CTO',
      company: 'FinanceFlow',
      avatar: 'DP'
    }
  ];

  const companyLogos = ['Acme Corp', 'GlobalTech', 'Nexus Inc', 'Vertex', 'Pinnacle', 'Horizon'];

  const footerLinks = {
    Product: ['Features', 'Pricing', 'Integrations', 'Changelog', 'Roadmap'],
    Company: ['About', 'Blog', 'Careers', 'Press', 'Partners'],
    Resources: ['Documentation', 'Help Center', 'Community', 'Templates', 'Webinars'],
    Legal: ['Privacy', 'Terms', 'Security', 'GDPR', 'Cookies']
  };

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#f8fafc] font-sans antialiased">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-[#0a0e1a]/80 backdrop-blur-lg border-b border-white/[0.08]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                <CheckCircle className="w-6 h-6 text-white" />
              </div>
              <span className="text-xl font-bold text-white">TaskFlow</span>
            </div>

            {/* Desktop Nav */}
            <nav className="hidden md:flex items-center gap-8">
              {navLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  className="text-[#94a3b8] hover:text-white transition-colors text-sm font-medium"
                >
                  {link.label}
                </a>
              ))}
            </nav>

            <div className="hidden md:flex items-center gap-4">
              <button className="text-[#94a3b8] hover:text-white transition-colors text-sm font-medium">
                Sign In
              </button>
              <button className="bg-[#3b82f6] hover:bg-[#2563eb] text-white px-5 py-2.5 rounded-lg font-semibold text-sm transition-all hover:shadow-lg hover:shadow-blue-500/25">
                Get Started
              </button>
            </div>

            {/* Mobile menu button */}
            <button
              className="md:hidden p-2 text-[#94a3b8] hover:text-white"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

        {/* Mobile Nav */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-[#0f1425] border-t border-white/[0.08]">
            <div className="px-4 py-4 space-y-4">
              {navLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  className="block text-[#94a3b8] hover:text-white transition-colors text-base font-medium"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {link.label}
                </a>
              ))}
              <div className="pt-4 border-t border-white/[0.08] space-y-3">
                <button className="w-full text-[#94a3b8] hover:text-white transition-colors text-base font-medium py-2">
                  Sign In
                </button>
                <button className="w-full bg-[#3b82f6] hover:bg-[#2563eb] text-white px-5 py-3 rounded-lg font-semibold transition-all">
                  Get Started
                </button>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 bg-white/[0.03] border border-white/[0.08] rounded-full px-4 py-2 mb-8">
            <Star className="w-4 h-4 text-[#fbbf24] fill-[#fbbf24]" />
            <span className="text-sm text-[#94a3b8]">Trusted by 10,000+ teams worldwide</span>
          </div>

          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
            Manage Projects.
            <br />
            <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
              Deliver Results.
            </span>
          </h1>

          <p className="text-xl text-[#94a3b8] max-w-2xl mx-auto mb-10">
            The project management tool teams actually love. Simple enough for SMBs, 
            powerful enough for enterprises.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
            <button className="w-full sm:w-auto bg-[#3b82f6] hover:bg-[#2563eb] text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-blue-500/25 flex items-center justify-center gap-2">
              Start Free Trial
              <ChevronRight className="w-5 h-5" />
            </button>
            <button
              onClick={() => setVideoModalOpen(true)}
              className="w-full sm:w-auto bg-white/[0.03] hover:bg-white/[0.06] border border-white/[0.08] text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all flex items-center justify-center gap-2"
            >
              <Play className="w-5 h-5" />
              Watch Demo
            </button>
          </div>

          <div className="flex items-center justify-center gap-6 text-sm text-[#94a3b8]">
            <div className="flex items-center gap-2">
              <CheckCircle className="w-4 h-4 text-[#34d399]" />
              <span>No credit card required</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-4 h-4 text-[#34d399]" />
              <span>14-day free trial</span>
            </div>
            <div className="flex items-center gap-2">
              <CheckCircle className="w-4 h-4 text-[#34d399]" />
              <span>Cancel anytime</span>
            </div>
          </div>
        </div>
      </section>

      {/* Logo Strip */}
      <section className="py-12 border-y border-white/[0.08] bg-white/[0.02]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-center text-sm text-[#94a3b8] mb-8">Trusted by innovative teams at</p>
          <div className="flex flex-wrap items-center justify-center gap-8 sm:gap-12 lg:gap-16">
            {companyLogos.map((company) => (
              <div
                key={company}
                className="text-xl sm:text-2xl font-bold text-[#64748b] hover:text-[#94a3b8] transition-colors cursor-default"
              >
                {company}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-24 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Everything you need to ship faster
            </h2>
            <p className="text-lg text-[#94a3b8] max-w-2xl mx-auto">
              Powerful features that scale with your team, from startup to enterprise.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="group p-6 lg:p-8 bg-white/[0.03] border border-white/[0.08] rounded-2xl hover:bg-white/[0.05] hover:border-blue-500/30 transition-all duration-300 hover:-translate-y-1"
              >
                <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-400 mb-5 group-hover:bg-blue-500/20 transition-colors">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-semibold text-white mb-3">{feature.title}</h3>
                <p className="text-[#94a3b8] leading-relaxed">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-24 px-4 sm:px-6 lg:px-8 bg-white/[0.02]">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Simple, transparent pricing
            </h2>
            <p className="text-lg text-[#94a3b8] max-w-2xl mx-auto mb-8">
              Start free, upgrade as you grow. No hidden fees.
            </p>

            {/* Billing Toggle */}
            <div className="inline-flex items-center gap-3 bg-white/[0.05] border border-white/[0.08] rounded-full px-2 py-2">
              <button
                onClick={() => setBillingAnnual(false)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                  !billingAnnual
                    ? 'bg-[#3b82f6] text-white'
                    : 'text-[#94a3b8] hover:text-white'
                }`}
              >
                Monthly
              </button>
              <button
                onClick={() => setBillingAnnual(true)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                  billingAnnual
                    ? 'bg-[#3b82f6] text-white'
                    : 'text-[#94a3b8] hover:text-white'
                }`}
              >
                Annual
                <span className="ml-2 text-[#34d399] text-xs">-20%</span>
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
            {pricing.map((plan, index) => (
              <div
                key={index}
                className={`relative p-8 rounded-2xl border transition-all duration-300 hover:-translate-y-2 ${
                  plan.popular
                    ? 'bg-blue-500/10 border-blue-500/30 shadow-xl shadow-blue-500/10'
                    : 'bg-white/[0.03] border-white/[0.08] hover:border-white/[0.15]'
                }`}
              >
                {plan.popular && (
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                    <span className="bg-[#fbbf24] text-[#0a0e1a] px-4 py-1.5 rounded-full text-sm font-bold flex items-center gap-1">
                      <Star className="w-4 h-4 fill-current" />
                      Most Popular
                    </span>
                  </div>
                )}

                <div className="text-center mb-6">
                  <h3 className="text-xl font-semibold text-white mb-2">{plan.tier}</h3>
                  <div className="flex items-baseline justify-center gap-1">
                    {typeof plan.price === 'number' ? (
                      <>
                        <span className="text-4xl font-bold text-white">${plan.price}</span>
                        <span className="text-[#94a3b8]">/{plan.period}</span>
                      </>
                    ) : (
                      <span className="text-4xl font-bold text-white">{plan.price}</span>
                    )}
                  </div>
                </div>

                <ul className="space-y-4 mb-8">
                  {plan.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-start gap-3">
                      <CheckCircle className="w-5 h-5 text-[#34d399] flex-shrink-0 mt-0.5" />
                      <span className="text-[#94a3b8] text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>

                <button
                  className={`w-full py-3.5 rounded-xl font-semibold transition-all ${
                    plan.popular
                      ? 'bg-[#3b82f6] hover:bg-[#2563eb] text-white hover:shadow-lg hover:shadow-blue-500/25'
                      : 'bg-white/[0.08] hover:bg-white/[0.12] text-white border border-white/[0.08]'
                  }`}
                >
                  {plan.cta}
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-24 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Loved by teams everywhere
            </h2>
            <p className="text-lg text-[#94a3b8] max-w-2xl mx-auto">
              See what thousands of teams are saying about TaskFlow.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            {testimonials.map((testimonial, index) => (
              <div
                key={index}
                className="p-8 bg-white/[0.03] border border-white/[0.08] rounded-2xl hover:bg-white/[0.05] hover:border-white/[0.15] transition-all duration-300"
              >
                <div className="flex items-center gap-1 mb-6">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 text-[#fbbf24] fill-[#fbbf24]" />
                  ))}
                </div>

                <blockquote className="text-lg text-[#f8fafc] mb-6 leading-relaxed">
                  "{testimonial.quote}"
                </blockquote>

                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                    {testimonial.avatar}
                  </div>
                  <div>
                    <div className="font-semibold text-white">{testimonial.name}</div>
                    <div className="text-sm text-[#94a3b8]">{testimonial.role}, {testimonial.company}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white/[0.05] to-transparent">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
            Ready to transform your workflow?
          </h2>
          <p className="text-xl text-[#94a3b8] mb-10 max-w-2xl mx-auto">
            Join 10,000+ teams already using TaskFlow to ship faster and work smarter.
          </p>
          <button className="bg-[#3b82f6] hover:bg-[#2563eb] text-white px-10 py-5 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-blue-500/25 inline-flex items-center gap-2">
            Start Free Trial
            <ChevronRight className="w-5 h-5" />
          </button>
          <p className="mt-6 text-sm text-[#94a3b8]">
            No credit card required • 14-day free trial • Cancel anytime
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/[0.08] py-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 mb-12">
            <div className="col-span-2">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <CheckCircle className="w-6 h-6 text-white" />
                </div>
                <span className="text-xl font-bold text-white">TaskFlow</span>
              </div>
              <p className="text-[#94a3b8] text-sm mb-6 max-w-xs">
                The project management tool teams actually love. Simple, powerful, and built for modern teams.
              </p>
              <div className="flex items-center gap-4">
                <a href="#" className="text-[#94a3b8] hover:text-white transition-colors">
                  <Twitter className="w-5 h-5" />
                </a>
                <a href="#" className="text-[#94a3b8] hover:text-white transition-colors">
                  <Linkedin className="w-5 h-5" />
                </a>
                <a href="#" className="text-[#94a3b8] hover:text-white transition-colors">
                  <Github className="w-5 h-5" />
                </a>
                <a href="#" className="text-[#94a3b8] hover:text-white transition-colors">
                  <Facebook className="w-5 h-5" />
                </a>
              </div>
            </div>

            {Object.entries(footerLinks).map(([category, links]) => (
              <div key={category}>
                <h4 className="font-semibold text-white mb-4">{category}</h4>
                <ul className="space-y-3">
                  {links.map((link) => (
                    <li key={link}>
                      <a href="#" className="text-[#94a3b8] hover:text-white transition-colors text-sm">
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="pt-8 border-t border-white/[0.08] flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-sm text-[#94a3b8]">
              © 2025 TaskFlow. All rights reserved.
            </p>
            <div className="flex items-center gap-6 text-sm text-[#94a3b8]">
              <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
              <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
              <a href="#" className="hover:text-white transition-colors">Cookie Settings</a>
            </div>
          </div>
        </div>
      </footer>

      {/* Video Modal */}
      {videoModalOpen && (
        <div
          className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
          onClick={() => setVideoModalOpen(false)}
        >
          <div
            className="bg-[#0f1425] rounded-2xl max-w-4xl w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between p-6 border-b border-white/[0.08]">
              <h3 className="text-xl font-semibold text-white">TaskFlow Demo</h3>
              <button
                onClick={() => setVideoModalOpen(false)}
                className="text-[#94a3b8] hover:text-white transition-colors"
              >
                <X className="w-6 h-6" />
              </button>
            </div>
            <div className="aspect-video bg-black/50 flex items-center justify-center">
              <div className="text-center">
                <Play className="w-16 h-16 text-[#94a3b8] mx-auto mb-4" />
                <p className="text-[#94a3b8]">Video player placeholder</p>
                <p className="text-sm text-[#64748b] mt-2">Integrate with Wistia, Vimeo, or YouTube</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}