import { ArrowRight, Brain } from 'lucide-react';
import type { PersonalityQuizWorkflow } from '@/components/personality-quiz/types';
import { PersonalityQuizFeatureIcon } from '@/components/personality-quiz/PersonalityQuizIcons';

interface PersonalityQuizIntroProps {
  readonly workflow: PersonalityQuizWorkflow;
  readonly onViewDirectory: () => void;
}

export function PersonalityQuizIntro({ workflow, onViewDirectory }: PersonalityQuizIntroProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden">
      <div className="bg-gradient-to-r from-violet-600/20 to-indigo-600/20 border-b border-violet-500/20 p-6 text-center">
        <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center mx-auto mb-4 shadow-xl shadow-violet-500/25">
          <Brain size={36} className="text-white" />
        </div>
        <h3 className="text-xl font-bold text-white">Workplace Personality Assessment</h3>
        <p className="text-sm text-slate-400 mt-2 max-w-lg mx-auto">
          Discover your MBTI personality type and learn how it shapes your professional relationships,
          communication style, and workplace language.
        </p>
      </div>

      <div className="p-6">
        <div className="grid grid-cols-2 gap-3 mb-6">
          {workflow.features.map((feature) => (
            <div key={feature.id} className={`${feature.toneClass} border rounded-xl p-4`}>
              <div className="mb-2">
                <PersonalityQuizFeatureIcon id={feature.id} />
              </div>
              <h4 className="font-semibold text-sm">{feature.label}</h4>
              <p className="text-[10px] mt-1 opacity-70">{feature.description}</p>
            </div>
          ))}
        </div>

        <div className="bg-violet-500/10 border border-violet-500/20 rounded-xl p-4 mb-6">
          <h4 className="font-semibold text-violet-400 text-sm mb-1">How it works</h4>
          <p className="text-xs text-slate-400">
            Answer 12 scenario-based questions about how you naturally respond in workplace situations.
            There are no right or wrong answers - each choice reveals a different aspect of your personality.
            Your results are saved to your profile and persist across sessions.
          </p>
        </div>

        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => workflow.setStarted(true)}
            className="flex-1 py-3 bg-gradient-to-r from-violet-500 to-indigo-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center justify-center gap-2"
          >
            Start Assessment <ArrowRight size={16} />
          </button>
          <button
            type="button"
            onClick={onViewDirectory}
            className="px-5 py-3 bg-slate-700/50 text-slate-300 rounded-xl font-medium hover:bg-slate-700/70 transition-all border border-slate-600/30 text-sm"
          >
            View All Types
          </button>
        </div>
      </div>
    </div>
  );
}
