import React, { useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ArrowUpRight, ArrowLeft, ArrowRight, Pause, Play, X, Copy, Check } from 'lucide-react';
import { profile, categories, projects } from './portfolio.js';
import './style.css';

function useRoute() {
  const read = () => location.hash.startsWith('#/') ? location.hash.slice(1) : '/';
  const [route, setRoute] = useState(read);
  useEffect(() => { const change = () => { setRoute(read()); if(location.hash!=='#main') window.scrollTo(0,0); }; window.addEventListener('hashchange', change); return () => window.removeEventListener('hashchange', change); }, []);
  return route;
}
const Back = () => <a href="#/" className="back"><ArrowLeft size={15}/> 返回封面 / BACK HOME</a>;
function Home({ paused }) {
  const stage = useRef(null), frame = useRef(0);
  useEffect(() => () => cancelAnimationFrame(frame.current), []);
  const move = e => {
    if(paused || e.pointerType==='touch' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const box = e.currentTarget.getBoundingClientRect(), x = (e.clientX-box.left)/box.width-.5, y = (e.clientY-box.top)/box.height-.5;
    cancelAnimationFrame(frame.current);
    frame.current=requestAnimationFrame(()=>{stage.current?.style.setProperty('--mx',x.toFixed(3));stage.current?.style.setProperty('--my',y.toFixed(3));});
  };
  const reset = () => {cancelAnimationFrame(frame.current);stage.current?.style.setProperty('--mx','0');stage.current?.style.setProperty('--my','0');};
  return <main className="home page-enter" id="main"><h1 className="sr-only">{profile.studio} 个人设计作品集</h1><section ref={stage} className="fruit-stage" aria-label="选择作品分类" onPointerMove={move} onPointerLeave={reset}>{categories.map((c,i)=><a key={c.id} href={`#/work/${c.id}`} className={`fruit-link fruit-${c.id}`} style={{'--index':i,'--depth':22+i*8,'--angle':`${i%2===0?-2:2}deg`}} aria-label={`查看${c.name}作品`}><span className="fruit-parallax"><span className="fruit-float"><img src={c.cover} alt={`${c.fruit}，${c.name}`} draggable="false" fetchPriority="high" width="960" height="960"/><svg className="fruit-caption" viewBox="0 0 420 420" aria-hidden="true"><defs><path id={`label-${c.id}`} d={i % 2 === 0 ? "M 35 270 Q 210 460 385 270" : "M 40 160 Q 210 -10 380 160"}/></defs><text><textPath href={`#label-${c.id}`} startOffset="50%" textAnchor="middle"><tspan className="caption-cn">{c.name}</tspan>{` ${c.english}`}</textPath></text></svg><span className="fruit-hint">EXPLORE <ArrowUpRight size={15}/></span></span></span></a>)}</section><footer className="home-statement"><p className="statement-en">GOOD IDEAS DESERVE TO GROW.</p><p className="statement-cn"><span>让想法生长，</span><span>让设计发生。</span></p><p className="statement-detail">EXPLORING BRAND, VISUAL & AI DESIGN THROUGH EVERYDAY CURIOSITY.<br/>AN INDEPENDENT MIND. A GROWING COLLECTION OF POSSIBILITIES.</p></footer></main>;
}
function Work({ categoryId, onOpen }) {
  const category=categories.find(c=>c.id===categoryId), visible=projects.filter(p=>!category || p.category===category.id);
  return <main id="main" className="inside page-enter"><Back/><div className="page-heading"><div><p className="eyebrow">SELECTED WORK / CONCEPT COLLECTION</p><h1>{category?.english||'Selected work'}<span>({String(visible.length).padStart(2,'0')})</span></h1><p>{category?.description||'一些关于品牌、视觉与想象力的探索。'}</p></div>{category&&<img className="heading-fruit" src={category.cover} alt=""/>}</div><nav className="category-nav" aria-label="作品分类"><a href="#/work" aria-current={!category?'page':undefined}>全部作品</a>{categories.map(c=><a key={c.id} href={`#/work/${c.id}`} aria-current={category?.id===c.id?'page':undefined}>{c.name}</a>)}</nav><section className="project-grid" aria-label="作品列表">{visible.map((p,i)=><button className="project-card" key={p.id} onClick={()=>onOpen(p)}><div className="project-art"><img src={p.image} alt={p.name} loading="lazy"/><span className="project-view">VIEW PROJECT <ArrowUpRight size={18}/></span></div><div className="project-meta"><span>{String(i+1).padStart(2,'0')} / {p.name}</span><ArrowUpRight size={20}/></div><div className="project-caption"><span>{p.title}</span><span>{p.year} · 概念示例</span></div></button>)}</section><div className="page-bottom"><p>每个项目，都是一个新的开始。</p><a href="#/contact">聊聊你的想法 <ArrowRight size={18}/></a></div></main>;
}
function About() {
  return <main id="main" className="inside page-enter"><Back/><div className="page-heading"><div><p className="eyebrow">A LITTLE ABOUT ME</p><h1>Stay curious.<br/>Keep creating.</h1></div></div><section className="about-layout"><div className="portrait-box"><img src="/images/portrait.svg" alt="人物剪影占位图，待替换个人照片"/><span>YOUR PORTRAIT HERE ↗</span></div><div className="bio"><p className="eyebrow">HELLO, I'M {profile.name}.</p><h2>在日常里发现灵感，<br/>在设计中探索可能。</h2><p>视觉设计师 / AI 设计师 / 品牌设计师</p><p>我关注品牌的个性，也关注人与设计之间的连接。从创意概念到视觉落地，用清晰的逻辑与自由的想象，让每个想法拥有自己的表达。</p><p className="placeholder-note">此处为介绍占位，后续替换为你的真实背景与经历。</p><div className="bio-stats"><div><b>03</b><span>创作方向</span></div><div><b>04</b><span>概念示例</span></div><div><b>∞</b><span>新的可能</span></div></div></div></section><section className="capabilities"><h2>What I do / 我的能力</h2>{[['01','品牌设计','品牌策略、视觉识别、包装与品牌系统'],['02','AI 创意','概念探索、AI 影像与创意工作流'],['03','视觉设计','平面视觉、活动主视觉与数字内容']].map(([n,t,d])=><article key={n}><span>{n}</span><h3>{t}</h3><p>{d}</p><ArrowUpRight size={22}/></article>)}</section><section className="experience"><h2>Experience / 个人经历</h2><div><span>年份待填写</span><h3>职位 / 合作方式</h3><p>在这里填写任职经历、负责方向与代表项目。</p></div></section><div className="page-bottom"><p>保持开放，期待新的合作。</p><a href="#/contact">LET'S TALK <ArrowRight size={18}/></a></div></main>;
}
function Contact() {
  const [message,setMessage]=useState(''), timer=useRef(null);
  useEffect(()=>()=>clearTimeout(timer.current),[]);
  const copy=async()=>{try{await navigator.clipboard.writeText(profile.wechat);setMessage('微信号已复制');}catch{setMessage(`请手动复制：${profile.wechat}`);}clearTimeout(timer.current);timer.current=setTimeout(()=>setMessage(''),4000);};
  return <main id="main" className="inside contact-page page-enter"><Back/><section className="contact-content"><p className="eyebrow">SOMETHING GOOD STARTS WITH A HELLO.</p><h1>Let's grow<br/>an <em>idea.</em><span className="contact-flower" aria-hidden="true">✳</span></h1><p className="contact-subtitle">一个想法，一次对话，一起创造。</p><div className="contact-links"><a href={`mailto:${profile.email}`}><span>EMAIL</span><strong>{profile.email}</strong><ArrowUpRight/></a><button onClick={copy}><span>WECHAT</span><strong>{profile.wechat}</strong>{message==='微信号已复制'?<Check/>:<Copy size={20}/>}</button></div><p className="copy-message" role="status">{message||'联系方式为占位信息，正式使用前请替换。'}</p></section><div className="contact-foot"><span>{profile.studio}</span><span>© {new Date().getFullYear()} · IDEAS IN PROGRESS.</span><a href="#/">BACK TO HOME ↗</a></div></main>;
}
function ProjectDialog({project,close}) {
  const dialog=useRef(null);
  useEffect(()=>{if(!project)return;const trigger=document.activeElement,element=dialog.current; element.showModal();const previous=document.body.style.overflow;document.body.style.overflow='hidden';return()=>{element.close();document.body.style.overflow=previous;trigger?.focus();};},[project]);
  return <dialog ref={dialog} className="project-dialog" aria-labelledby="project-title" onCancel={close} onClick={e=>{if(e.target===e.currentTarget)close();}}>{project&&<><button className="close-dialog" onClick={close} aria-label="关闭项目"><X/></button><img src={project.image} alt={project.name}/><div className="dialog-body"><p className="eyebrow">CONCEPT PROJECT / {project.year}</p><h2 id="project-title">{project.name}</h2><h3>{project.title}</h3><p>{project.description}</p><div className="case-slots">{[['01 / CONTEXT','项目背景与设计目标'],['02 / PROCESS','创意概念与设计过程'],['03 / OUTCOME','最终视觉与应用展示']].map(([n,t])=><div key={n}><span>{n}</span><p>{t}</p></div>)}</div><p className="placeholder-note">当前为项目详情骨架，可继续添加图片、视频与完整案例内容。</p><a className="back" href="#/contact" onClick={close}>讨论类似项目 <ArrowUpRight size={16}/></a></div></>}</dialog>;
}
function App() {
  const route=useRoute(),section=route.split('/')[1],isHome=route==='/';
  const [paused,setPaused]=useState(()=>matchMedia('(prefers-reduced-motion: reduce)').matches),[project,setProject]=useState(null);
  useEffect(()=>{setProject(null);document.title=`${section==='about'?'关于我':section==='contact'?'联系':'作品'} — ${profile.studio}`;},[route,section]);
  return <div className={paused?'site motion-paused':'site'}><a className="skip" href="#main" onClick={e=>{e.preventDefault();document.querySelector('main')?.scrollIntoView();document.querySelector('main')?.focus();}}>跳转到正文</a><div className="marquee" aria-hidden="true"><div className="marquee-track">{[0,1].map(n=><div className="marquee-copy" key={n}>{[0,1,2].map(i=><React.Fragment key={i}><span>{profile.studio} BRAND & VISUAL DESIGN PORTFOLIO</span><span>STAY CURIOUS, KEEP CREATING.</span></React.Fragment>)}</div>)}</div></div><header className="site-header"><a className="brand" href="#/">{profile.studio}</a><a href="#/" className="masthead" aria-label="返回作品集首页"><span>{profile.studio}</span><span>Brand & Visual Design</span><strong>PORTFOLIO</strong></a><nav aria-label="主导航"><a href="#/" aria-current={isHome||section==='work'?'page':undefined}>作品</a><a href="#/about" aria-current={section==='about'?'page':undefined}>关于我</a><a href="#/contact" aria-current={section==='contact'?'page':undefined}>联系</a></nav></header>{isHome?<Home paused={paused}/>:section==='work'?<Work categoryId={route.split('/')[2]} onOpen={setProject}/>:section==='about'?<About/>:section==='contact'?<Contact/>:<main id="main" className="inside"><h1>这一页还没有长出来。</h1><Back/></main>}<button className="motion-toggle" onClick={()=>setPaused(!paused)} aria-label={paused?'开启动效':'暂停动效'} aria-pressed={paused}>{paused?<Play size={12}/>:<Pause size={12}/>}<span>{paused?'MOTION OFF':'MOTION ON'}</span></button><ProjectDialog project={project} close={()=>setProject(null)}/></div>;
}
createRoot(document.getElementById('root')).render(<App/>);