refactor: structure YMB as enterprise React app

src/pages/HomePage.jsx

@@ -0,0 +1,10 @@
+// Author: fruit.com.cn
+import { useState } from 'react';
+import { MediaCard } from '../components/MediaCard';
+import { SectionHeading } from '../components/SectionHeading';
+import { videos } from '../data/catalog';
+import { useAppStore } from '../app/store';
+import { searchCatalog } from '../services/catalogService';
+
+export function HomePage() { const { locale } = useAppStore(); const [genre, setGenre] = useState(locale.genres[0]); const [toast, setToast] = useState(''); const items = searchCatalog('', genre, locale.genres.indexOf(genre)); const play = () => { setToast(locale.watch); setTimeout(() => setToast(''), 1400); }; return <><section className="hero-card"><div className="hero-copy"><small>YMB ORIGINAL</small><h1>{locale.hero}<br /><em>{locale.accent}</em></h1><p>{locale.description}</p><button className="primary-button" onClick={play}>▶ {locale.watch}</button></div><div className="hero-art"><img src="/assets/hero.jpg" alt="YMB drama" /></div></section><section><SectionHeading title={locale.picks} /><div className="chip-row">{locale.genres.map((item) => <button className={`chip ${genre === item ? 'active' : ''}`} key={item} onClick={() => setGenre(item)}>{item}</button>)}</div><div className="video-grid">{items.map((video) => <MediaCard key={video.id} video={video} />)}</div></section><section><SectionHeading title={locale.shortTitle} action="Explore →" /><div className="shorts-row">{videos.slice(1, 7).map((video) => <MediaCard key={video.id} video={video} compact />)}</div></section>{toast && <div className="toast">{toast}</div>}</>;
+}