import React, {useState,useEffect,useRef} from 'react';
import {createRoot} from 'react-dom/client';
import {ArrowUpRight,ArrowDown,ArrowRight, X, Play, Pause, Menu, MapPin, Palette, PenTool, Layers, Users} from 'lucide-react';
import './style.css';

const works=[
{title:'荷塘 · 青绿之间',type:'油画',en:'LOTUS / ORIGINAL',image:'/art/lotus-original.png',origin:'原作 · AI 辅助修复',note:'提供的荷塘油画照片经画面校正与光线修复，保留青绿层次与厚涂笔触。'},
{title:'人物研究 · 凝望',type:'素描',en:'PORTRAIT STUDY / 01',image:'/art/portrait-man-a.png',origin:'原作 · AI 辅助修复',note:'保留人物神态、结构与铅笔排线，清理拍摄杂边及纸面旁注。'},
{title:'人物研究 · 岁月',type:'素描',en:'PORTRAIT STUDY / 02',image:'/art/portrait-man-b.png',origin:'原作 · AI 辅助修复',note:'以原作照片为基础修复，呈现面部体积、明暗与细腻的结构观察。'},
{title:'人物研究 · 静思',type:'素描',en:'PORTRAIT STUDY / 03',image:'/art/portrait-woman.png',origin:'原作 · AI 辅助修复',note:'校正拍摄光线与纸张色偏，保留人物素描的细腻层次与自然笔触。'},
{title:'荷塘 · 暮色',type:'油画',en:'LOTUS / DUSK',image:'/art/lotus-dusk-ai.png',origin:'AI 风格延展',note:'参照原作的青绿配色与厚涂语言生成的新构图，探索暮色下的荷塘。'},
{title:'荷塘 · 晨光',type:'油画',en:'LOTUS / MORNING',image:'/art/lotus-morning-ai.png',origin:'AI 风格延展',note:'以原作肌理与色彩为参考生成，围绕水面、晨光与莲叶展开新的构图。'},
{title:'人物延展 · 安然',type:'素描',en:'PORTRAIT / EXPLORATION',image:'/art/portrait-elder-ai.png',origin:'AI 风格延展',note:'参照原作的学院派素描语言生成的虚构人物研究，并非本人手绘作品。'}
];
const experience=[['2023 — 2025','南京青蓝画室','精品班首席美术主教','速写、素描教学 · 教师培训'],['2018 — 2023','山水画室','首席美术主教','高考与专升本教学 · 素描 / 速写 / 色彩'],['2015 — 2018','南京正人画室及盐城分校','首席主教','素描、速写及色彩教学'],['2010 — 2015','苏州艺和画室西浦附校','美术主教','素描及色彩教学'],['2000 — 2010','徐州艺源画室','创办人 / 美术主教','画室统筹管理 · 素描及色彩教学']];
function App(){const[filter,setFilter]=useState('全部');const[selected,setSelected]=useState(null);const[playing,setPlaying]=useState(true);const[menu,setMenu]=useState(false);const[contact,setContact]=useState(false);const video=useRef(null);const close=()=>{setSelected(null);setContact(false)};
useEffect(()=>{const handler=e=>{if(e.key==='Escape')close()};document.addEventListener('keydown',handler);return()=>document.removeEventListener('keydown',handler)},[]);
useEffect(()=>{document.body.style.overflow=selected||contact?'hidden':'';return()=>{document.body.style.overflow=''}},[selected,contact]);
useEffect(()=>{const ob=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')}),{threshold:.08});document.querySelectorAll('.reveal').forEach(el=>ob.observe(el));return()=>ob.disconnect()},[]);
const toggleVideo=()=>{if(!video.current)return;if(playing)video.current.pause();else video.current.play().catch(()=>{});setPlaying(!playing)};
return <><header className="nav wrap"><a className="brand" href="#home" aria-label="孟润泽，返回首页"><span className="brand-symbol">孟</span><span>孟润泽<small>MENG RUNZE</small></span></a><nav className={menu?'open':''} aria-label="主导航">{[['about','关于我'],['works','精选作品'],['expertise','教学与优势']].map(([id,t])=><a key={id} href={'#'+id} onClick={()=>setMenu(false)}>{t}</a>)}</nav><a className="nav-contact" href="#contact">联系合作 <ArrowUpRight size={16}/></a><button className="menu-button" aria-label="切换导航" aria-expanded={menu} onClick={()=>setMenu(!menu)}><Menu/></button></header>
<main><section className="hero editorial-hero" id="home">
<div className="hero-media"><img src="/art/teaching-studio.jpg" alt="孟润泽在画室指导学生绘画的课堂现场" fetchPriority="high"/><video ref={video} autoPlay muted loop playsInline aria-hidden="true" onError={()=>setPlaying(false)}><source src="/hero.mp4" type="video/mp4"/></video></div>
<div className="hero-shade"/><div className="hero-visual-caption"><span>在画室，在现场。</span><small>NOT JUST TEACHING. INSPIRING.</small></div>
<div className="hero-content wrap"><div className="hero-editorial-copy"><div className="eyebrow"><span className="dot"/> THE ART OF SEEING</div><p className="hero-script">A lifetime of inspiration.</p><h1>以观察，见世界。<br/>以画笔，<span>启发可能。</span></h1><div className="hero-name">MENG<br/><span>RUNZE</span><i>孟润泽</i></div><div className="hero-bottom"><p>高级美术教师 / 艺术创作者<br/><span>从一笔一画，到独立表达。<br/>把对艺术的热爱，带进每一堂课。</span></p><a className="round-link" href="#works">探索我的作品 <span><ArrowUpRight size={20}/></span></a></div></div></div>
<div className="hero-foot wrap"><span>01 — IN THE STUDIO <i>教学现场</i></span><span className="hero-location">NANJING, CHINA / EST. 2000</span><a href="#about">向下探索 <ArrowDown size={13}/></a></div><span className="vertical-note">PAINTING IS A WAY OF SEEING.</span></section>
<section id="about" className="section wrap"><div className="section-label reveal"><span>01 / ABOUT</span><span>关于 · 时间的积淀</span></div><div className="about-layout reveal"><div className="portrait"><img loading="lazy" src="/art/teaching-studio.jpg" alt="画室教学现场"/><span className="image-caption">IN THE STUDIO / 教学现场</span><div className="portrait-label">每一笔，<br/>都有来处。</div></div><div className="about-copy"><div className="eyebrow muted">A PRACTICE, A PASSION, A PURPOSE.</div><h2>画好一幅画，<br/>也看见一个人的<span>可能。</span></h2><p>我是孟润泽，一名长期扎根教学一线的美术教师。从创办画室，到担任首席美术主教，我始终把绘画实践与课堂教学放在一起。</p><p>精研素描、速写、色彩、油画、国画与书法，兼具教学、教师培训及管理经验。我相信，好的教学既要建立扎实的基本功，也要尊重每一位学生不同的感受与表达。</p><div className="about-meta"><span><MapPin size={15}/> 南京 · 中国</span><span>南京艺术学院 · 本科</span></div><div className="stats"><div><strong>2000<span>年</span></strong><small>开启画室教学实践</small></div><div><strong>5<span>段</span></strong><small>核心任教与管理经历</small></div><div><strong>6<span>类</span></strong><small>绘画与书写领域</small></div></div><a className="text-link" href="#contact">聊聊教学与创作 <ArrowUpRight size={18}/></a></div></div><div className="timeline reveal"><div className="timeline-title"><span className="eyebrow muted">THE JOURNEY</span><h3>把热爱，<br/>交给时间。</h3></div><div className="timeline-list">{experience.map(([date,name,role,desc])=><div className="timeline-row" key={date}><span>{date}</span><div><h4>{name}</h4><p>{desc}</p></div><small>{role}</small></div>)}</div></div></section>
<section id="works" className="section works-section"><div className="wrap"><div className="section-label reveal"><span>02 / SELECTED WORKS</span><span>精选 · 作品与探索</span></div><div className="section-heading reveal"><div><h2>让作品，<span className="serif">自己说话。</span></h2><p>从真实的观察出发，走向自由的表达。</p></div><div className="filters" aria-label="作品分类">{['全部','素描','油画'].map(f=><button key={f} className={f===filter?'active':''} onClick={()=>setFilter(f)}>{f}</button>)}</div></div><div className="work-grid">{works.filter(w=>filter==='全部'||w.type===filter).map((w,i)=><button className={'work-card work-'+i} key={w.title} onClick={()=>setSelected(w)}><div className="work-image"><img loading="lazy" src={w.image} alt={w.title+' · '+w.origin}/><span className="work-index">0{works.indexOf(w)+1} / {w.type}</span><span className="work-open"><ArrowUpRight/></span></div><div className="work-info"><div><span>{w.en}</span><h3>{w.title}</h3></div><small>{w.origin}</small></div></button>)}</div><p className="asset-note">作品档案 / 4 幅原作修复 · 3 幅 AI 风格延展。标题为展示命名；修复版可能包含局部重建，原始照片另行保留。</p></div></section>
<section id="expertise" className="section wrap"><div className="section-label reveal"><span>03 / EXPERTISE</span><span>优势 · 从技法到启发</span></div><div className="section-heading reveal"><h2>不止于教授技法。<br/><span className="serif">更在于唤醒感知。</span></h2><p>以多画种的积累与一线教学经验，<br/>连接基础训练、个性表达与持续成长。</p></div><div className="expertise-grid reveal">{[[PenTool,'01','扎实的专业功底','从素描、速写到色彩、油画、国画与书法，以跨画种积累，建立完整的视觉理解。','CRAFT & FOUNDATION'],[Palette,'02','因材施教的课堂','结合学生的基础与特点调整教学方式，在观察和练习中发现潜力，培养独立表达。','INDIVIDUAL APPROACH'],[Layers,'03','多层次教学经验','覆盖高考美术、专升本与基础绘画教学，将系统训练拆解为清晰、可执行的学习路径。','STRUCTURED LEARNING'],[Users,'04','教学与团队协同','具备画室创办、统筹管理与教师培训经验，重视与学生、家长及教学团队的沟通。','MENTORSHIP & LEADERSHIP']].map(([Icon,n,t,d,en])=><article className="expert-card" key={n}><div><Icon size={27} strokeWidth={1}/><span>{n}</span></div><h3>{t}</h3><p>{d}</p><small>{en}</small></article>)}</div><div className="quote reveal"><span>“</span><blockquote>教学的意义，是让每一个人<br/>找到自己的<span>表达方式。</span></blockquote><small>我的教学理念 / MENG RUNZE</small></div></section>
<section id="contact" className="contact-section"><div className="wrap"><div className="section-label"><span>04 / GET IN TOUCH</span><span><i className="dot"/> 开放教学与创作交流</span></div><p className="eyebrow muted">EVERY GREAT THING BEGINS WITH A CONVERSATION.</p><div className="contact-title"><h2>下一笔，<br/><span className="serif">一起开始。</span></h2><button onClick={()=>setContact(true)} aria-label="查看联系方式"><ArrowUpRight strokeWidth={1}/></button></div><div className="contact-bottom"><p>教学合作 / 教师培训 / 艺术交流<br/><span>期待与你一起，探索艺术教育的更多可能。</span></p><button className="text-link" onClick={()=>setContact(true)}>查看联系信息 <ArrowUpRight size={19}/></button><span>南京 · 中国<br/>NANJING, CHINA</span></div><footer><a className="footer-brand" href="#home">孟润泽 <span>MENG RUNZE</span></a><span>© {new Date().getFullYear()} 孟润泽 · 个人作品集</span><a href="#home">BACK TO TOP ↑</a></footer></div></section></main>
{(selected||contact)&&<div className="modal-backdrop" onClick={close}><div className={'modal '+(contact?'contact-modal':'')} role="dialog" aria-modal="true" aria-label={contact?'联系信息':selected.title} onClick={e=>e.stopPropagation()}><button className="modal-close" autoFocus aria-label="关闭" onClick={close}><X/></button>{selected?<><img src={selected.image} alt={selected.title}/><div className="modal-copy"><span className="eyebrow muted">{selected.type} / {selected.origin}</span><h2>{selected.title}</h2><p>{selected.note}</p><a className="text-link original-link" href={selected.image} target="_blank" rel="noreferrer">打开高清图 <ArrowUpRight size={15}/></a><small>{selected.origin==='AI 风格延展'?'此图为参考原作风格生成的延展图，非本人手绘。':'此图为原作照片的 AI 辅助修复版，局部细节请以原始照片为准。'}</small></div></>:<div className="modal-copy"><span className="eyebrow muted">LET’S TALK</span><h2>期待与你交流。</h2><p>孟润泽 · 高级美术教师<br/>南京 · 中国</p><div className="pending-contact">手机号码 <span>待补充</span></div><div className="pending-contact">微信 / 邮箱 <span>待补充</span></div><p className="asset-note">目前简历中未包含联系方式，补充后即可在此直接联系。</p></div>}</div></div>}</>}
createRoot(document.getElementById('root')).render(<App/>);