
export default function HostingSecuritySection() {
  return (
    <section id="hosting" className="py-20">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold mb-6 text-rainbow">Hosting & Protection</h2>
        <div className="card p-6 md:p-8">
          <p className="text-brand-text opacity-80">We host our applications ourselves, which reduces hosting costs as projects scale.</p>
          <p className="text-brand-text opacity-80 mt-2">All websites are protected by Cloudflare and optimized for performance.</p>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4 text-center text-sm mt-6">
            {['Server', 'Cloudflare', 'Docker', 'SSL', 'Monitoring', 'Scaling'].map(item => (
              <div key={item} className="p-3 rounded-lg bg-brandGradient text-white shadow-glow transition-transform duration-200 hover:scale-105 flex flex-col items-center justify-center">
                <span className="text-xs tracking-wide">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}