website-front/banquise-website/components/sections/HeroSection.tsx

import React from 'react';
import Image from 'next/image';
import { ArrowRight } from 'lucide-react';
import { cn, commonClasses } from '@/lib/utils';
import type { Translation } from '@/types/i18n';

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

// Composant pour les boutons CTA factorisant la structure répétitive
interface CTAButtonProps {
  href: string;
  primary?: boolean;
  children: React.ReactNode;
  icon?: React.ReactNode;
}

const CTAButton: React.FC<CTAButtonProps> = ({ href, primary = false, children, icon }) => {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    const targetId = href.replace('#', '');
    if (targetId === 'services' || targetId === 'about') {
      document.getElementById(targetId)?.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  };

  const baseClasses = cn(
    'inline-flex items-center justify-center',
    'text-lg font-bold rounded-2xl',
    commonClasses.transition,
    commonClasses.hoverScale,
    'active:scale-95'
  );

  const primaryClasses = cn(
    'px-12 py-5 text-white',
    'bg-gradient-to-r from-blue-600 to-blue-500',
    'shadow-2xl hover:shadow-blue-500/50',
    'hover:-translate-y-2 border-2 border-blue-600/20',
    'group relative overflow-hidden'
  );

  const secondaryClasses = cn(
    'px-8 py-4 text-blue-700 bg-white',
    'border-2 border-blue-600 shadow-lg',
    'hover:shadow-xl hover:bg-blue-50'
  );

  return (
    <a 
      href={href} 
      onClick={handleClick}
      className={cn(baseClasses, primary ? primaryClasses : secondaryClasses)}
    >
      {primary && (
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl" />
      )}
      <span className="relative z-10">{children}</span>
      {icon && <span className="relative z-10 ml-3">{icon}</span>}
    </a>
  );
};

export const HeroSection: React.FC<HeroSectionProps> = ({ translations, commonTranslations }) => (
  <section 
    id="home" 
    className="min-h-screen flex flex-col justify-center items-center text-center relative px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 via-blue-50/30 to-gray-100"
  >
    {/* Motifs de fond optimisés - factorisation des styles répétitifs */}
    <div 
      className="absolute inset-0 opacity-40"
      style={{
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(59,130,246,0.5) 1px, transparent 0)',
        backgroundSize: '32px 32px'
      }}
    />
    <div 
      className="absolute inset-0 opacity-20"
      style={{
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(99,102,241,0.4) 1px, transparent 0)',
        backgroundSize: '64px 64px'
      }}
    />
    
    {/* Contenu principal */}
    <div className="relative z-10 max-w-5xl mx-auto">
      
      {/* Logo principal avec effet moderne */}
      <div className="mb-16 group">
        <div className="relative inline-block">
          <div className="absolute inset-0 bg-blue-400/30 rounded-3xl blur-3xl opacity-0 group-hover:opacity-100 transition-all duration-700 scale-150" />
          
          <div className={cn(
            'relative bg-white/90 backdrop-blur-lg rounded-3xl p-10',
            'border border-blue-200/50 shadow-2xl',
            commonClasses.transition,
            'group-hover:shadow-blue-200/50 group-hover:shadow-3xl',
            commonClasses.hoverScale
          )}>
            <Image
              src="/assets/banquise_server.svg"
              alt={translations.title}
              width={140}
              height={140}
              className={cn(
                'w-28 h-28 md:w-32 md:h-32 lg:w-36 lg:h-36',
                'transition-transform duration-500 group-hover:scale-110'
              )}
              style={{ 
                filter: 'drop-shadow(0 8px 24px rgba(59, 130, 246, 0.4))' 
              }}
            />
          </div>
        </div>
      </div>
      
      {/* Titre principal avec gradient moderne */}
      <h1 className="text-4xl md:text-5xl lg:text-7xl font-bold leading-tight tracking-tight mb-8 bg-gradient-to-r from-gray-900 via-blue-700 to-gray-900 bg-clip-text text-transparent">
        {translations.title}
      </h1>
      
      {/* Sous-titre avec contraste amélioré */}
      <p className="text-lg md:text-xl lg:text-2xl text-gray-700 mx-auto max-w-3xl mb-14 leading-relaxed font-medium">
        {translations.subtitle}
      </p>
      
      {/* Call-to-action optimisé */}
      <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-20">
        <CTAButton 
          href="#services" 
          primary
          icon={<ArrowRight className="w-6 h-6 transition-transform duration-300 group-hover:translate-x-2" strokeWidth={2.5} />}
        >
          {translations.cta}
        </CTAButton>
        
        <CTAButton href="#about">
          {commonTranslations.learnMore}
        </CTAButton>
      </div>
    </div>
  </section>
);