import React from 'react';
import { Shield, Lock, AlertCircle, Users, ArrowRight, CheckCircle, Menu } from 'lucide-react';

export default function Website() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white">
      {/* Navigation */}
      <nav className="fixed w-full bg-slate-950/95 backdrop-blur-md z-50 border-b border-slate-800/50">
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Shield className="w-9 h-9 text-blue-400" />
              <span className="text-2xl font-bold tracking-tight">CyberShield</span>
            </div>
            <div className="hidden md:flex space-x-10">
              {['Solutions', 'Services', 'About', 'Contact'].map((item) => (
                <a
                  key={item}
                  href="#"
                  className="hover:text-blue-400 transition-colors duration-300 text-slate-300 hover:scale-105 transform"
                >
                  {item}
                </a>
              ))}
            </div>
            <button className="bg-blue-500 hover:bg-blue-400 px-6 py-2.5 rounded-lg transition-all duration-300 shadow-lg shadow-blue-500/20 hover:shadow-blue-400/30 font-medium">
              Get Started
            </button>
            <Menu className="md:hidden w-6 h-6" />
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-40 pb-24 px-6 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(59,130,246,0.1),transparent_50%)]" />
        <div className="container mx-auto text-center relative">
          <div className="inline-block mb-3 px-4 py-1.5 bg-slate-800/50 rounded-full text-blue-400 text-sm font-medium">
            Trusted by 500+ Companies Worldwide
          </div>
          <h1 className="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-blue-400 via-blue-500 to-cyan-400 bg-clip-text text-transparent leading-tight">
            Secure Your Digital Future
          </h1>
          <p className="text-xl text-slate-300 mb-12 max-w-2xl mx-auto leading-relaxed">
            Protecting businesses from cyber threats with advanced security solutions and 24/7 monitoring.
          </p>
          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <button className="group bg-blue-500 hover:bg-blue-400 px-8 py-4 rounded-xl flex items-center justify-center space-x-3 transition-all duration-300 shadow-lg shadow-blue-500/20 hover:shadow-blue-400/30">
              <span className="font-medium">Get Free Assessment</span>
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="px-8 py-4 rounded-xl transition-all duration-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700 hover:border-blue-500">
              Learn More
            </button>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-24 bg-slate-900/50 relative">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(59,130,246,0.1),transparent_50%)]" />
        <div className="container mx-auto px-6">
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: <Lock className="w-12 h-12 text-blue-400" />,
                title: "Advanced Encryption",
                description: "Military-grade encryption to protect your sensitive data and communications."
              },
              {
                icon: <AlertCircle className="w-12 h-12 text-blue-400" />,
                title: "Threat Detection",
                description: "Real-time monitoring and AI-powered threat detection systems."
              },
              {
                icon: <Users className="w-12 h-12 text-blue-400" />,
                title: "Expert Team",
                description: "Certified security professionals available 24/7 for incident response."
              }
            ].map((feature, index) => (
              <div
                key={index}
                className="group bg-slate-800/50 p-8 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5"
              >
                <div className="mb-6 transform group-hover:scale-110 transition-transform duration-300">
                  {feature.icon}
                </div>
                <h3 className="text-2xl font-bold mb-4 text-slate-100">{feature.title}</h3>
                <p className="text-slate-300 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-24 px-6">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold mb-16 text-center bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
            Our Services
          </h2>
          <div className="grid md:grid-cols-2 gap-6">
            {[
              'Security Auditing and Assessment',
              'Penetration Testing',
              'Incident Response',
              'Cloud Security Solutions',
              'Employee Security Training',
              'Compliance Management'
            ].map((service, index) => (
              <div
                key={index}
                className="group flex items-center space-x-4 bg-slate-800/30 p-7 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition-all duration-300"
              >
                <CheckCircle className="w-6 h-6 text-blue-400 flex-shrink-0 group-hover:scale-110 transition-transform" />
                <span className="text-lg text-slate-200">{service}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 relative">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-cyan-600/20" />
        <div className="container mx-auto px-6 text-center relative">
          <div className="bg-slate-800/50 p-12 rounded-2xl border border-slate-700/50 backdrop-blur-sm">
            <h2 className="text-4xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
              Ready to Secure Your Business?
            </h2>
            <p className="text-xl mb-8 text-slate-300 max-w-2xl mx-auto">
              Get in touch with our security experts for a free consultation.
            </p>
            <button className="bg-blue-500 hover:bg-blue-400 px-8 py-4 rounded-xl font-bold transition-all duration-300 shadow-lg shadow-blue-500/20 hover:shadow-blue-400/30">
              Contact Us Now
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900/50 py-12 border-t border-slate-800/50">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center space-x-3 mb-6 md:mb-0">
              <Shield className="w-8 h-8 text-blue-400" />
              <span className="text-xl font-bold">CyberShield</span>
            </div>
            <div className="text-slate-400 text-sm">
              © 2024 CyberShield. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}