import { Briefcase, GraduationCap } from 'lucide-react';
import { ModuleHeader } from '@/components/ui/module-header';

export function VocationalHeader() {
  return (
    <>
      <ModuleHeader
        title="Vocational Opportunities"
        description="Find local vocational training and job opportunities for students with autism and special needs"
        icon={Briefcase}
        iconClassName="bg-gradient-to-br from-sky-400 to-blue-600"
        iconShadowClassName="shadow-sky-500/30"
      />

      <div className="bg-gradient-to-r from-sky-500/10 via-blue-500/10 to-indigo-500/10 rounded-2xl border border-sky-500/20 p-5">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-sky-400 to-blue-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-sky-500/30">
            <GraduationCap size={22} className="text-white" />
          </div>
          <div>
            <h3 className="font-bold text-sky-400 text-sm uppercase tracking-wider">Transition to Employment</h3>
            <p className="text-slate-300 text-sm mt-1 leading-relaxed">
              Enter your zip code to discover vocational training programs, job placements, and internship opportunities in your area. All listings include autism-specific accommodations and support information.
            </p>
          </div>
        </div>
      </div>
    </>
  );
}
