import { DollarSign, Lightbulb } from 'lucide-react';

import { ESA_FUNDING_STATIC_COPY } from '@/shared/constants/esaFunding';

export function EsaFundingHero() {
  return (
    <section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-600 via-emerald-500 to-teal-500 p-6 md:p-8 shadow-xl shadow-emerald-500/20">
      <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
      <div className="absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2" />
      <div className="relative z-10">
        <div className="flex items-center gap-2 mb-3">
          <DollarSign size={24} className="text-emerald-100" />
          <span className="text-emerald-100 font-semibold text-sm uppercase tracking-wider">
            {ESA_FUNDING_STATIC_COPY.heroEyebrow}
          </span>
        </div>
        <h2 className="text-xl md:text-2xl font-bold text-white mb-4 leading-relaxed max-w-3xl">
          {ESA_FUNDING_STATIC_COPY.heroTitle}
        </h2>
        <div className="bg-white/15 backdrop-blur-sm rounded-xl p-4 border border-white/20 max-w-2xl">
          <div className="flex items-start gap-3">
            <Lightbulb size={22} className="text-yellow-200 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-white font-semibold text-base mb-1">{ESA_FUNDING_STATIC_COPY.heroSimpleLabel}</p>
              <p className="text-emerald-50 text-base leading-relaxed">{ESA_FUNDING_STATIC_COPY.heroSimpleDescription}</p>
            </div>
          </div>
        </div>
        <p className="text-emerald-100 mt-4 text-sm md:text-base leading-relaxed max-w-3xl">
          {ESA_FUNDING_STATIC_COPY.heroDescription}
        </p>
      </div>
    </section>
  );
}
