import React from 'react';
import Image from 'next/image';
import type { Translation } from '@/types/i18n';

interface HeroSectionProps {
  translations: Translation['hero'];
}

export const HeroSection: React.FC<HeroSectionProps> = ({ translations }) => (
  <section id="home" className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3">
    <div 
      className="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border relative group"
      style={{
        background: 'linear-gradient(to bottom right, rgba(31, 80, 120, 0.2), rgba(52, 166, 252, 0.1))',
        borderColor: 'rgba(160, 236, 249, 0.3)'
      }}
    >
      <Image
        src="/assets/banquise_server.svg"
        alt="Logo La Banquise"
        width={192}
        height={192}
        className="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-110"
        style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }}
        
      />
    </div>
    
    <h1 
      className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 sm:mb-7 md:mb-8 font-extrabold leading-tight max-w-4xl font-heading px-2 relative z-10" 
      style={{ 
        color: 'var(--banquise-blue-900)',
        textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' 
      }}
    >
      {translations.title}
    </h1>
    
    <p 
      className="text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 max-w-3xl font-normal opacity-90 leading-relaxed px-2 relative z-10" 
      style={{ 
        color: 'var(--banquise-slate-700)',
        textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' 
      }}
    >
      {translations.subtitle}
    </p>
    
    <a 
      href="#services" 
      className="inline-flex items-center justify-center border-0 py-4 sm:py-5 px-8 sm:px-10 md:px-12 rounded-2xl text-base sm:text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-48 sm:min-w-56 md:min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border mx-4 group relative z-10"
      style={{
        background: 'linear-gradient(to right, var(--banquise-slate-100), var(--banquise-white))',
        color: 'var(--banquise-blue-800)',
        borderColor: 'rgba(160, 236, 249, 0.2)'
      }}
    >
      <span className="text-center" style={{ color: 'var(--banquise-blue-800)' }}>{translations.cta}</span>
      <span className="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1" style={{ color: 'var(--banquise-blue-800)' }}>→</span>
    </a>
  </section>
);