import React from 'react';

export const HeroSection: React.FC = () => (
  <section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-20 w-full max-w-6xl mx-auto px-8 relative z-3">
    <div className="mb-12 w-48 h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-6 shadow-2xl animate-gentle-float backdrop-blur-sm border border-banquise-blue-lightest/30">
      <img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }} />
    </div>
    
    <h1 className="text-banquise-gray text-5xl md:text-6xl mb-8 font-extrabold leading-tight max-w-4xl font-heading" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
      Bienvenue sur La Banquise
    </h1>
    
    <p className="text-banquise-gray text-xl md:text-2xl mb-12 max-w-3xl font-normal opacity-90 leading-relaxed" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
      Votre plateforme d'hébergement communautaire dédiée aux développeurs et gamers
    </p>
    
    <a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-5 px-12 rounded-2xl text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20">
      Découvrir nos services
      <span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
    </a>

    {/* Tech elements background - repositioned to avoid overlap */}
    <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1 overflow-hidden">
      <div className="absolute top-[20%] left-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float">🖥️</div>
      <div className="absolute top-[30%] right-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div>
      <div className="absolute bottom-[25%] left-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div>
      <div className="absolute bottom-[35%] right-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div>
    </div>
  </section>
);