import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';

export function FrameDefinitionPanel() {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <h3 className="text-sm font-semibold text-slate-300 mb-3">What F.R.A.M.E. Stands For</h3>
      <div className="grid grid-cols-1 md:grid-cols-5 gap-3">
        {FRAME_SECTION_LABELS.map((section) => (
          <div key={section.key} className={`${section.lightBg} border rounded-xl p-3 text-center`}>
            <div className={`w-8 h-8 bg-gradient-to-br ${section.color} rounded-lg flex items-center justify-center text-white font-bold text-sm mx-auto mb-1.5 shadow-lg`}>
              {section.letter}
            </div>
            <p className="text-xs font-semibold text-slate-200">{section.label}</p>
            <p className="text-[10px] text-slate-500 mt-0.5">{section.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
