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

export function SectionHeader({ index, title, subtitle, className = '' }: SectionHeaderProps) {
  return (
    <div className={`mb-12 md:mb-16 ${className}`}>
      <div className="flex items-center gap-3 mb-3.5">
        <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-brand-blue bg-brand-blue/10 border border-brand-blue/25 shadow-sm">
          <span className="w-1.5 h-1.5 rounded-full bg-brand-blue" />
          {index}
        </span>
        <div className="h-px flex-1 bg-gradient-to-r from-brand-blue/20 via-white/[0.08] to-transparent" />
      </div>
      <h2
        className="text-2xl sm:text-3xl md:text-4xl font-medium text-neutral-50 tracking-tight leading-[1.22] break-keep"
        style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
      >
        {title}
      </h2>
      {subtitle && (
        <p
          className="mt-3 max-w-2xl text-sm sm:text-base text-neutral-300 leading-relaxed font-normal break-keep"
          style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
        >
          {subtitle}
        </p>
      )}
    </div>
  )
}