import React, { useState } from 'react';
import { Language } from './types';
import { RESUME_DATA } from './constants';
import LanguageToggle from './components/LanguageToggle';
import Section from './components/Section';
import ExperienceList from './components/ExperienceList';
import ProjectCard from './components/ProjectCard';
import { Mail, Phone, MessageSquare, Download, Linkedin, GraduationCap, Code2, ChevronDown, Award, Globe2 } from 'lucide-react';

const App: React.FC = () => {
  const [lang, setLang] = useState<Language>('zh');

  const { name, title, summary, contact, skills, experience, projects, education } = RESUME_DATA;

  // Background images from Unsplash
  const heroBgImage = "https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2670&auto=format&fit=crop";
  const footerBgImage = "https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2000&auto=format&fit=crop";

  return (
    <div className="min-h-screen flex flex-col font-sans bg-slate-50 text-slate-900 selection:bg-indigo-100 selection:text-indigo-900">
      {/* Navigation / Header */}
      <header className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-white/20 shadow-sm transition-all supports-[backdrop-filter]:bg-white/60">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <div className="font-bold text-xl tracking-tight text-slate-900 flex items-center gap-2">
            <div className="w-9 h-9 bg-gradient-to-br from-indigo-600 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-indigo-200">
                {name['en'].split(' ')[0][0]}
            </div>
            <span className="hidden sm:block">{lang === 'en' ? 'Resume' : '个人简历'}</span>
          </div>
          <div className="flex items-center gap-3 sm:gap-6">
            <nav className="hidden md:flex gap-8 text-sm font-semibold text-slate-600">
              <a href="#about" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'About' : '简介'}</a>
              <a href="#experience" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'Experience' : '经历'}</a>
              <a href="#projects" className="hover:text-indigo-600 transition-colors">{lang === 'en' ? 'Projects' : '项目'}</a>
            </nav>
            <div className="h-5 w-px bg-slate-300 hidden md:block"></div>
            
            <button className="hidden sm:flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-slate-900 rounded-full hover:bg-slate-800 transition-colors shadow-md">
                <Download size={14} />
                <span>{lang === 'en' ? 'Download PDF' : '下载简历'}</span>
            </button>
            <LanguageToggle lang={lang} setLang={setLang} />
          </div>
        </div>
      </header>

      {/* Hero Section with Rich Background Image */}
      <main className="flex-grow pt-16">
        <div id="about" className="relative h-[85vh] min-h-[600px] flex items-center justify-center overflow-hidden">
          {/* Background Image */}
          <div 
            className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat bg-fixed"
            style={{ backgroundImage: `url(${heroBgImage})` }}
          ></div>
          
          {/* Overlay - White gradient for clean text readability */}
          <div className="absolute inset-0 z-10 bg-gradient-to-b from-white/95 via-white/80 to-slate-50/95"></div>

          <div className="relative z-20 max-w-4xl mx-auto text-center px-4">
            <div className="animate-fade-in-up">
                <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/50 backdrop-blur-md text-indigo-700 text-sm font-bold mb-8 border border-indigo-100 shadow-sm ring-1 ring-indigo-50">
                    <span className="relative flex h-2 w-2">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
                    </span>
                    <span>{lang === 'en' ? 'Available for new opportunities' : '正在寻找新机会'}</span>
                </div>
                
                <h1 className="text-5xl md:text-7xl lg:text-8xl font-black text-slate-900 tracking-tight mb-6 leading-[1.1]">
                  {name[lang]}
                </h1>
                
                <p className="text-xl md:text-3xl text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-500 font-bold mb-8">
                  {title[lang]}
                </p>
                
                <p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed mb-10 font-medium">
                  {summary[lang]}
                </p>

                {/* Contact Buttons */}
                <div className="flex flex-wrap justify-center gap-4">
                  <a href={`tel:${contact.mobile}`} className="flex items-center gap-3 bg-slate-900 text-white px-8 py-4 rounded-full shadow-lg shadow-indigo-200 hover:shadow-xl hover:-translate-y-1 transition-all font-semibold">
                    <Phone size={18} />
                    <span>{contact.mobile}</span>
                  </a>
                  <a href={`mailto:${contact.email}`} className="flex items-center gap-3 bg-white text-slate-700 px-8 py-4 rounded-full shadow-md border border-slate-100 hover:border-indigo-200 hover:shadow-lg hover:-translate-y-1 transition-all font-semibold">
                    <Mail size={18} />
                    <span>{contact.email}</span>
                  </a>
                </div>
            </div>
          </div>
          
          {/* Scroll Indicator */}
          <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-slate-400 z-20">
            <ChevronDown size={32} />
          </div>
        </div>

        {/* Skills Section (Dark Band) */}
        <div className="bg-slate-900 text-white py-20 relative overflow-hidden">
             {/* Abstract BG pattern */}
            <div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(#4f46e5 1px, transparent 1px)", backgroundSize: "32px 32px" }}></div>
            
            <div className="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
                <div className="text-center mb-12">
                    <h3 className="text-indigo-400 font-bold uppercase tracking-widest text-sm mb-3">
                        {lang === 'en' ? 'Technical Expertise' : '技能特长'}
                    </h3>
                    <h2 className="text-3xl md:text-4xl font-bold text-white">
                        {lang === 'en' ? 'Core Competencies' : '核心技术栈'}
                    </h2>
                </div>
                
                <div className="flex flex-wrap justify-center gap-3 md:gap-5">
                    {skills.map((skill, idx) => (
                        <div key={idx} className="group px-6 py-3 bg-white/5 hover:bg-white/10 rounded-xl border border-white/10 hover:border-indigo-500/50 backdrop-blur-sm transition-all cursor-default flex items-center gap-3">
                            <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 group-hover:bg-indigo-400 transition-colors"></div>
                            <span className="text-slate-200 font-medium text-base md:text-lg">{skill[lang]}</span>
                        </div>
                    ))}
                </div>
            </div>
        </div>

        {/* Experience Section */}
        <Section id="experience" title={lang === 'en' ? 'Work Experience' : '工作经历'} className="bg-slate-50">
          <ExperienceList experience={experience} lang={lang} />
        </Section>

        {/* Projects Section */}
        <Section id="projects" title={lang === 'en' ? 'Featured Projects' : '个人作品'} className="bg-white">
          <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
            {projects.map((project, index) => (
              <ProjectCard key={index} project={project} lang={lang} />
            ))}
          </div>
        </Section>

        {/* Education Section */}
        <Section id="education" title={lang === 'en' ? 'Education' : '教育经历'} className="bg-slate-50">
          <div className="grid md:grid-cols-2 gap-6">
            {education.map((edu, index) => (
              <div key={index} className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex items-start gap-6 hover:shadow-md transition-all group">
                <div className="w-14 h-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 shrink-0 group-hover:scale-110 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300">
                  <GraduationCap size={32} />
                </div>
                <div>
                    <h3 className="font-bold text-xl text-slate-900">{edu.school[lang]}</h3>
                    <p className="text-indigo-600 font-semibold mb-2 text-lg">{edu.major[lang]}</p>
                    <div className="flex flex-wrap items-center gap-3 text-sm text-slate-500 font-medium">
                        <span className="bg-slate-100 px-3 py-1 rounded-full text-slate-600">{edu.degree[lang]}</span>
                        <span className="hidden sm:inline text-slate-300">•</span>
                        <span>{edu.period}</span>
                    </div>
                </div>
              </div>
            ))}
          </div>
        </Section>
        
        {/* Contact / Footer CTA Area */}
        <div className="relative py-24 flex items-center justify-center bg-slate-900 overflow-hidden">
            <div 
                className="absolute inset-0 z-0 bg-cover bg-center opacity-20"
                style={{ backgroundImage: `url(${footerBgImage})` }}
            ></div>
            <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
            
            <div className="relative z-10 text-center px-4 max-w-3xl mx-auto">
                 <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
                    {lang === 'en' ? 'Let\'s work together' : '期待与您的合作'}
                 </h2>
                 <p className="text-slate-300 text-lg mb-10 leading-relaxed">
                    {lang === 'en' 
                        ? 'I am currently open to new opportunities in autonomous driving, simulation, and game development.' 
                        : '我目前正在寻找自动驾驶、仿真及游戏开发领域的新机会。'}
                 </p>
                 <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                     <a href={`mailto:${contact.email}`} className="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full font-bold text-lg transition-all shadow-lg shadow-indigo-900/50 flex items-center justify-center gap-2">
                        <Mail size={20} />
                        {lang === 'en' ? 'Email Me' : '发送邮件'}
                     </a>
                     <div className="w-full sm:w-auto px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full font-bold text-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
                        <MessageSquare size={20} />
                        WeChat: {contact.wechat}
                     </div>
                 </div>
            </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-slate-950 border-t border-white/5 py-12">
        <div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex flex-col items-center md:items-start">
              <h2 className="text-xl font-bold text-white mb-2">{name[lang]}</h2>
              <p className="text-slate-500 text-sm">
                © {new Date().getFullYear()} All rights reserved.
              </p>
          </div>
          
          <div className="flex gap-6">
             <a href={`mailto:${contact.email}`} className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-indigo-600"><Mail size={20}/></a>
             <a href="#" className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-blue-600"><Linkedin size={20}/></a>
             <a href="#" className="text-slate-400 hover:text-white transition-colors p-2 bg-white/5 rounded-full hover:bg-emerald-600"><Globe2 size={20}/></a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;