import React from 'react';
import { ProjectType } from '../types';
import { Tv, Music, Smartphone, Sparkles, Clapperboard } from 'lucide-react';

interface ProjectTypeSelectorProps {
  onSelect: (type: ProjectType) => void;
}

const ProjectTypeSelector: React.FC<ProjectTypeSelectorProps> = ({ onSelect }) => {
  const options = [
    {
      id: ProjectType.NETFLIX_SERIES,
      title: "Netflix 影集改編",
      description: "AI 影集統籌模式 (Showrunner)。將小說拆解為季/集結構，並進行長篇敘事規劃。",
      icon: Tv,
      color: "text-rose-400",
      bg: "bg-rose-500/10",
      border: "hover:border-rose-500/50"
    },
    {
      id: ProjectType.MUSIC_VIDEO,
      title: "MV 音樂錄影帶",
      description: "AI 導演模式 (Director)。視覺化歌詞節奏，創造風格強烈的短片分鏡。",
      icon: Music,
      color: "text-purple-400",
      bg: "bg-purple-500/10",
      border: "hover:border-purple-500/50"
    },
    {
      id: ProjectType.VIRTUAL_INFLUENCER,
      title: "虛擬網紅運營",
      description: "AI 經紀人模式 (Manager)。生成連續性的人設生活動態與社群內容。",
      icon: Smartphone,
      color: "text-cyan-400",
      bg: "bg-cyan-500/10",
      border: "hover:border-cyan-500/50"
    }
  ];

  return (
    <div className="animate-fade-in max-w-6xl mx-auto pt-10">
      <div className="text-center mb-16">
        <div className="inline-block p-5 rounded-3xl glass-panel mb-6 shadow-2xl">
             <Clapperboard className="w-16 h-16 text-indigo-400 drop-shadow-[0_0_15px_rgba(129,140,248,0.5)]" />
        </div>
        <h2 className="text-6xl font-bold text-white mb-6 tracking-tighter text-glow">Lumina Studio</h2>
        <p className="text-xl text-zinc-400 max-w-2xl mx-auto font-light">
            AI 驅動的影視神經網絡製程平台
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {options.map((opt) => (
          <div
            key={opt.id}
            onClick={() => onSelect(opt.id)}
            className={`glass-card rounded-3xl p-8 cursor-pointer transition-all duration-500 hover:-translate-y-2 group border border-white/5 ${opt.border}`}
          >
            <div className={`w-16 h-16 rounded-2xl ${opt.bg} flex items-center justify-center mb-8 shadow-lg backdrop-blur-md group-hover:scale-110 transition-transform duration-300`}>
              <opt.icon className={`w-8 h-8 ${opt.color}`} />
            </div>
            <h3 className="text-2xl font-bold text-white mb-4">{opt.title}</h3>
            <p className="text-zinc-400 leading-relaxed text-sm font-light">{opt.description}</p>
            
            <div className="mt-10 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-zinc-500 group-hover:text-white transition-colors">
                <span>啟動專案</span>
                <Sparkles className="w-4 h-4" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProjectTypeSelector;