import React from 'react';
import { Shield, Server, Lock, Zap, CheckCircle, Globe } from 'lucide-react';

const HostingSecurity: React.FC = () => {
  const benefits = [
    {
      icon: <Shield size={24} />,
      title: 'Enhanced Security',
      description: 'Full control over security configurations, custom firewalls, and regular security updates'
    },
    {
      icon: <Zap size={24} />,
      title: 'Better Performance',
      description: 'Optimized server configurations, custom caching, and dedicated resources for faster loading'
    },
    {
      icon: <Lock size={24} />,
      title: 'Data Privacy',
      description: 'Complete ownership of your data with no third-party access or data mining concerns'
    },
    {
      icon: <Server size={24} />,
      title: 'Cost Effective',
      description: 'Lower long-term costs compared to managed hosting services with better resource allocation'
    },
    {
      icon: <Globe size={24} />,
      title: 'Custom Domains',
      description: 'Easy setup of custom domains, subdomains, and SSL certificates for professional presence'
    },
    {
      icon: <CheckCircle size={24} />,
      title: 'Full Control',
      description: 'Complete administrative access to configure, customize, and scale your hosting environment'
    }
  ];

  const techStack = [
    'Ubuntu Server 22.04 LTS',
    'Nginx Web Server',
    'Docker Containerization',
    'SSL/TLS Encryption',
    'Automated Backups',
    'Monitoring & Alerts',
    'Fail2ban Security',
    'UFW Firewall'
  ];

  return (
    <section className="py-20 bg-slate-800">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-bold mb-6">
            <span className="bg-gradient-to-r from-fuchsia-600 to-orange-500 bg-clip-text text-transparent">
              Self-Hosting & Security
            </span>
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Why I choose self-hosting for better control, security, and performance
          </p>
        </div>

        <div className="max-w-6xl mx-auto">
          {/* Main Info Panel */}
          <div className="bg-slate-900 rounded-2xl p-8 mb-12 border border-slate-700">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <h3 className="text-3xl font-bold text-white mb-6">
                  Why Self-Hosting Matters
                </h3>
                <p className="text-gray-300 text-lg leading-relaxed mb-6">
                  Self-hosting provides unparalleled control over your digital infrastructure. 
                  By managing my own servers, I ensure optimal performance, enhanced security, 
                  and complete data ownership while reducing long-term costs.
                </p>
                <p className="text-gray-300 leading-relaxed">
                  This approach allows for custom configurations, better resource allocation, 
                  and the flexibility to scale applications according to specific needs without 
                  vendor lock-in or arbitrary limitations.
                </p>
              </div>
              
              <div className="relative">
                <div className="bg-slate-800 rounded-xl p-6 border border-slate-600">
                  <div className="flex items-center gap-3 mb-4">
                    <Server className="text-fuchsia-600" size={32} />
                    <h4 className="text-xl font-semibold text-white">Server Status</h4>
                  </div>
                  
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <span className="text-gray-300">Uptime</span>
                      <span className="text-green-500 font-semibold">99.9%</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-300">Response Time</span>
                      <span className="text-green-500 font-semibold">< 200ms</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-300">SSL Grade</span>
                      <span className="text-green-500 font-semibold">A+</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-300">Security Score</span>
                      <span className="text-green-500 font-semibold">95/100</span>
                    </div>
                  </div>
                  
                  <div className="mt-4 pt-4 border-t border-slate-600">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                      <span className="text-green-500 text-sm font-medium">All Systems Operational</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Benefits Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            {benefits.map((benefit, index) => (
              <div
                key={index}
                className="bg-slate-800 rounded-xl p-6 border border-slate-700 hover:border-violet-400/50 transition-all duration-300 hover:transform hover:scale-105"
              >
                <div className="flex items-center gap-3 mb-4">
                  <div className="p-2 bg-gradient-to-r from-fuchsia-600 to-orange-500 rounded-lg">
                    <div className="text-white">
                      {benefit.icon}
                    </div>
                  </div>
                  <h4 className="text-lg font-semibold text-white">{benefit.title}</h4>
                </div>
                <p className="text-gray-300 text-sm leading-relaxed">
                  {benefit.description}
                </p>
              </div>
            ))}
          </div>

          {/* Tech Stack */}
          <div className="bg-slate-900 rounded-2xl p-8 border border-slate-700">
            <h3 className="text-2xl font-bold text-white mb-6 text-center">
              Technology Stack
            </h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
              {techStack.map((tech, index) => (
                <div
                  key={index}
                  className="bg-slate-800 rounded-lg p-4 border border-slate-600 text-center hover:border-violet-400/50 transition-all duration-300"
                >
                  <span className="text-gray-300 font-medium">{tech}</span>
                </div>
              ))}
            </div>
            
            <div className="mt-8 text-center">
              <p className="text-gray-400 max-w-2xl mx-auto">
                This robust technology stack ensures reliable, secure, and high-performance hosting 
                for all projects while maintaining full control over the infrastructure.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HostingSecurity;