import React from 'react';
import { cn } from '@/lib/utils';

interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  className?: string;
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({ 
  title, 
  subtitle, 
  className 
}) => (
  <div className={cn('text-center mb-20', className)}>
    {/* Séparateur visuel moderne - factorisation du design répétitif */}
    <div className="w-24 h-1.5 bg-gradient-to-r from-blue-600 to-blue-400 rounded-full mx-auto mb-8" />
    
    {/* Titre principal avec contraste fort */}
    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
      {title}
    </h2>
    
    {/* Sous-titre avec bon contraste */}
    {subtitle && (
      <p className="text-lg md:text-xl text-gray-700 mx-auto max-w-3xl leading-relaxed font-medium">
        {subtitle}
      </p>
    )}
  </div>
);