import React from 'react';

export const TechFeaturesSection: React.FC = () => (
  <section className="pt-12 pb-16 relative z-2 w-full max-w-6xl mx-auto px-8">
    <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
    <h2 className="text-banquise-gray text-4xl mb-4 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
      Notre Infrastructure
    </h2>
    <p className="text-banquise-gray text-xl opacity-90 mb-14 max-w-4xl text-center mx-auto" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
      Une infrastructure robuste et sécurisée pour vos projets les plus exigeants
    </p>
    
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
          🚀
        </div>
        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Serveurs performants</h3>
        <p className="text-banquise-gray/80 leading-relaxed text-sm">Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications</p>
      </div>
      
      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
          💾
        </div>
        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Stockage sécurisé</h3>
        <p className="text-banquise-gray/80 leading-relaxed text-sm">Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données</p>
      </div>
      
      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
          🌐
        </div>
        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Réseau optimisé</h3>
        <p className="text-banquise-gray/80 leading-relaxed text-sm">Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques</p>
      </div>

      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
          🛡️
        </div>
        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Sécurité renforcée</h3>
        <p className="text-banquise-gray/80 leading-relaxed text-sm">Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières</p>
      </div>
    </div>
  </section>
);