// DramaScope — auth, i18n, ratings, reactions // Exposes: useAuth, useI18n, LANGUAGES, AuthModal, AuthContext, I18nContext // LanguageMenu, AuthButtons, AvatarMenu, GuestGate // DramaRatingPanel, DramaReactionPanel // ActorReactionPanel, ActorTraitsPanel const { useState, useEffect, useRef, createContext, useContext } = React; // ── I18N ────────────────────────────────────────────────────────────────────── const LANGUAGES = [ { code: 'en', short: 'EN', label: 'English' }, { code: 'es', short: 'ES', label: 'Español' }, { code: 'ru', short: 'RU', label: 'Русский' }, { code: 'de', short: 'DE', label: 'Deutsch' }, { code: 'uk', short: 'UK', label: 'Українська' }]; // Translation dictionary. Missing keys fall back to English (the key itself). const I18N = { en: {}, es: { 'Home': 'Inicio', 'Chinese Dramas': 'C-Dramas', 'Chinese Actors': 'Actores Chinos', 'AI Picks': 'Selección IA', 'Rankings': 'Rankings', 'News': 'Noticias', 'Community': 'Comunidad', 'Watchlist': 'Lista', 'Profile': 'Perfil', 'Sign In': 'Iniciar sesión', 'Join Free': 'Regístrate', 'Sign Up': 'Registrarse', 'Log Out': 'Cerrar sesión', 'My Profile': 'Mi perfil', 'My Library': 'Mi biblioteca', 'My Ratings': 'Mis valoraciones', 'My Reactions': 'Mis reacciones', 'My Lists': 'Mis listas', 'Account Settings': 'Configuración', 'Language': 'Idioma', 'Upgrade to Premium': 'Actualizar a Premium', 'Discover Chinese Dramas & Actors': 'Descubre C-Dramas y actores chinos', 'Explore C-Dramas': 'Explorar C-Dramas', 'Browse Chinese Actors': 'Ver actores chinos', 'Get AI Recommendations': 'Recomendaciones IA', 'Sign in to rate': 'Inicia sesión para valorar', 'Sign in to react': 'Inicia sesión para reaccionar', 'Sign in to rate this drama': 'Inicia sesión para valorar este drama', 'Sign in to react to this actor': 'Inicia sesión para reaccionar a este actor', 'Create an account to save this drama': 'Crea una cuenta para guardar este drama', 'Create an account to save to your watchlist': 'Crea una cuenta para guardar en tu lista', 'Join free to follow actors': 'Regístrate gratis para seguir actores', 'Join free to unlock your C-Drama library': 'Únete gratis para desbloquear tu biblioteca de C-Dramas', 'Want to see more? Create a free account.': '¿Quieres ver más? Crea una cuenta gratis.', 'Sign up to unlock more details.': 'Regístrate para más detalles.', 'Create an account to access full actor profiles.': 'Crea una cuenta para perfiles completos.', 'Register to see full drama details, ratings, reactions, and recommendations.': 'Regístrate para ver detalles completos, valoraciones y recomendaciones.', 'Join free to save dramas, follow actors, and get personalized AI recommendations.': 'Únete gratis para guardar dramas, seguir actores y obtener recomendaciones personalizadas.', 'Sign in to rate, react, comment, and build your C-Drama library.': 'Inicia sesión para valorar, reaccionar y comentar.', 'Create your free account to unlock fandom rankings, watchlists, reviews, and AI picks.': 'Crea tu cuenta gratis para desbloquear rankings, listas, reseñas y selección IA.', 'Sign Up to See More': 'Regístrate para ver más', 'Create Free Account': 'Crear cuenta gratis', 'Unlock Full Profile': 'Desbloquear perfil', 'Unlock More Details': 'Más detalles', 'Sign In to Continue': 'Inicia sesión para continuar', 'Register to Save': 'Regístrate para guardar', 'Register to Rate': 'Regístrate para valorar', 'Register to React': 'Regístrate para reaccionar', 'Your Ratings': 'Tus valoraciones', 'Your Reactions': 'Tus reacciones', 'Overall Rating': 'Valoración general', 'OST Rating': 'Banda sonora', 'Side Characters Rating': 'Personajes secundarios', 'Chemistry Score': 'Química', 'Recommendation Score': 'Recomendación', 'Rewatch Score': 'Volver a ver', 'Rate this drama': 'Valorar este drama', 'React to this drama': 'Reacciona a este drama', 'React to this actor': 'Reacciona a este actor', 'Vote on traits': 'Vota rasgos', 'Agree': 'De acuerdo', 'Disagree': 'En desacuerdo', 'Welcome back': 'Bienvenido', 'Create your account': 'Crea tu cuenta', 'Email': 'Correo', 'Password': 'Contraseña', 'Display name': 'Nombre', 'Already have an account?': '¿Ya tienes cuenta?', 'Need an account?': '¿Necesitas cuenta?', 'Continue': 'Continuar', 'Cancel': 'Cancelar', 'Follow': 'Seguir', 'Following': 'Siguiendo' }, ru: { 'Home': 'Главная', 'Chinese Dramas': 'Дорамы Китая', 'Chinese Actors': 'Актёры', 'AI Picks': 'AI Подбор', 'Rankings': 'Рейтинги', 'News': 'Новости', 'Community': 'Сообщество', 'Watchlist': 'Избранное', 'Profile': 'Профиль', 'Sign In': 'Войти', 'Join Free': 'Регистрация', 'Sign Up': 'Создать аккаунт', 'Log Out': 'Выйти', 'My Profile': 'Мой профиль', 'My Library': 'Моя библиотека', 'My Ratings': 'Мои оценки', 'My Reactions': 'Мои реакции', 'My Lists': 'Мои списки', 'Account Settings': 'Настройки', 'Language': 'Язык', 'Upgrade to Premium': 'Премиум', 'Discover Chinese Dramas & Actors': 'Открой китайские дорамы и актёров', 'Explore C-Dramas': 'Смотреть дорамы', 'Browse Chinese Actors': 'Актёры Китая', 'Get AI Recommendations': 'AI рекомендации', 'Sign in to rate': 'Войдите, чтобы оценить', 'Sign in to react': 'Войдите, чтобы оставить реакцию', 'Sign in to rate this drama': 'Войдите, чтобы оценить эту дораму', 'Sign in to react to this actor': 'Войдите, чтобы оставить реакцию', 'Create an account to save this drama': 'Создайте аккаунт, чтобы сохранить', 'Create an account to save to your watchlist': 'Создайте аккаунт, чтобы добавить в избранное', 'Join free to follow actors': 'Регистрация — чтобы подписываться на актёров', 'Join free to unlock your C-Drama library': 'Регистрация — чтобы получить доступ к библиотеке', 'Want to see more? Create a free account.': 'Хотите видеть больше? Создайте бесплатный аккаунт.', 'Sign up to unlock more details.': 'Зарегистрируйтесь, чтобы увидеть больше.', 'Create an account to access full actor profiles.': 'Создайте аккаунт, чтобы получить доступ к полным профилям актёров.', 'Register to see full drama details, ratings, reactions, and recommendations.': 'Зарегистрируйтесь, чтобы видеть полные детали, оценки и рекомендации.', 'Join free to save dramas, follow actors, and get personalized AI recommendations.': 'Регистрация — сохраняйте дорамы, подписывайтесь на актёров и получайте персональные рекомендации.', 'Sign in to rate, react, comment, and build your C-Drama library.': 'Войдите, чтобы оценивать, реагировать и комментировать.', 'Create your free account to unlock fandom rankings, watchlists, reviews, and AI picks.': 'Создайте бесплатный аккаунт — рейтинги, списки, рецензии и AI подбор.', 'Sign Up to See More': 'Зарегистрируйтесь', 'Create Free Account': 'Создать аккаунт', 'Unlock Full Profile': 'Открыть профиль', 'Unlock More Details': 'Подробнее', 'Sign In to Continue': 'Войти', 'Register to Save': 'Регистрация', 'Register to Rate': 'Регистрация', 'Register to React': 'Регистрация', 'Your Ratings': 'Ваши оценки', 'Your Reactions': 'Ваши реакции', 'Overall Rating': 'Общая оценка', 'OST Rating': 'Саундтрек', 'Side Characters Rating': 'Второстепенные', 'Chemistry Score': 'Химия', 'Recommendation Score': 'Рекомендация', 'Rewatch Score': 'Пересмотреть', 'Rate this drama': 'Оценить дораму', 'React to this drama': 'Реакция на дораму', 'React to this actor': 'Реакция на актёра', 'Vote on traits': 'Голосовать за черты', 'Agree': 'Согласен', 'Disagree': 'Не согласен', 'Welcome back': 'С возвращением', 'Create your account': 'Создайте аккаунт', 'Email': 'Email', 'Password': 'Пароль', 'Display name': 'Имя', 'Already have an account?': 'Уже есть аккаунт?', 'Need an account?': 'Нет аккаунта?', 'Continue': 'Продолжить', 'Cancel': 'Отмена', 'Follow': 'Подписаться', 'Following': 'Вы подписаны' }, de: { 'Home': 'Startseite', 'Chinese Dramas': 'C-Dramen', 'Chinese Actors': 'Chinesische Schauspieler', 'AI Picks': 'KI-Empfehlungen', 'Rankings': 'Rankings', 'News': 'News', 'Community': 'Community', 'Watchlist': 'Merkliste', 'Profile': 'Profil', 'Sign In': 'Anmelden', 'Join Free': 'Kostenlos beitreten', 'Sign Up': 'Registrieren', 'Log Out': 'Abmelden', 'My Profile': 'Mein Profil', 'My Library': 'Meine Bibliothek', 'My Ratings': 'Meine Bewertungen', 'My Reactions': 'Meine Reaktionen', 'My Lists': 'Meine Listen', 'Account Settings': 'Einstellungen', 'Language': 'Sprache', 'Upgrade to Premium': 'Premium', 'Discover Chinese Dramas & Actors': 'Entdecke chinesische Dramen & Schauspieler', 'Explore C-Dramas': 'C-Dramen erkunden', 'Browse Chinese Actors': 'Schauspieler entdecken', 'Get AI Recommendations': 'KI-Empfehlungen', 'Sign in to rate': 'Anmelden zum Bewerten', 'Sign in to react': 'Anmelden zum Reagieren', 'Sign in to rate this drama': 'Anmelden, um dieses Drama zu bewerten', 'Sign in to react to this actor': 'Anmelden, um zu reagieren', 'Create an account to save this drama': 'Konto erstellen zum Speichern', 'Create an account to save to your watchlist': 'Konto erstellen für Merkliste', 'Join free to follow actors': 'Kostenlos beitreten, um Schauspielern zu folgen', 'Join free to unlock your C-Drama library': 'Kostenlos beitreten und Bibliothek freischalten', 'Want to see more? Create a free account.': 'Mehr sehen? Erstelle ein kostenloses Konto.', 'Sign up to unlock more details.': 'Registriere dich für mehr Details.', 'Create an account to access full actor profiles.': 'Konto erstellen für vollständige Profile.', 'Register to see full drama details, ratings, reactions, and recommendations.': 'Registriere dich für volle Drama-Details, Bewertungen und Empfehlungen.', 'Join free to save dramas, follow actors, and get personalized AI recommendations.': 'Kostenlos beitreten — Dramen speichern, Schauspielern folgen und personalisierte KI-Empfehlungen.', 'Sign in to rate, react, comment, and build your C-Drama library.': 'Anmelden zum Bewerten, Reagieren und Kommentieren.', 'Create your free account to unlock fandom rankings, watchlists, reviews, and AI picks.': 'Erstelle dein kostenloses Konto für Rankings, Listen und KI-Empfehlungen.', 'Sign Up to See More': 'Für mehr registrieren', 'Create Free Account': 'Konto erstellen', 'Unlock Full Profile': 'Profil freischalten', 'Unlock More Details': 'Details freischalten', 'Sign In to Continue': 'Weiter mit Login', 'Register to Save': 'Zum Speichern', 'Register to Rate': 'Zum Bewerten', 'Register to React': 'Zum Reagieren', 'Your Ratings': 'Deine Bewertungen', 'Your Reactions': 'Deine Reaktionen', 'Overall Rating': 'Gesamtbewertung', 'OST Rating': 'Soundtrack', 'Side Characters Rating': 'Nebenfiguren', 'Chemistry Score': 'Chemie', 'Recommendation Score': 'Empfehlung', 'Rewatch Score': 'Wieder ansehen', 'Rate this drama': 'Drama bewerten', 'React to this drama': 'Auf Drama reagieren', 'React to this actor': 'Auf Schauspieler reagieren', 'Vote on traits': 'Über Eigenschaften abstimmen', 'Agree': 'Zustimmen', 'Disagree': 'Ablehnen', 'Welcome back': 'Willkommen zurück', 'Create your account': 'Konto erstellen', 'Email': 'E-Mail', 'Password': 'Passwort', 'Display name': 'Anzeigename', 'Already have an account?': 'Schon ein Konto?', 'Need an account?': 'Konto benötigt?', 'Continue': 'Weiter', 'Cancel': 'Abbrechen', 'Follow': 'Folgen', 'Following': 'Folgt' }, uk: { 'Home': 'Головна', 'Chinese Dramas': 'Дорами Китаю', 'Chinese Actors': 'Актори', 'AI Picks': 'AI Підбір', 'Rankings': 'Рейтинги', 'News': 'Новини', 'Community': 'Спільнота', 'Watchlist': 'Список', 'Profile': 'Профіль', 'Sign In': 'Увійти', 'Join Free': 'Реєстрація', 'Sign Up': 'Створити обліковий запис', 'Log Out': 'Вийти', 'My Profile': 'Мій профіль', 'My Library': 'Моя бібліотека', 'My Ratings': 'Мої оцінки', 'My Reactions': 'Мої реакції', 'My Lists': 'Мої списки', 'Account Settings': 'Налаштування', 'Language': 'Мова', 'Upgrade to Premium': 'Преміум', 'Discover Chinese Dramas & Actors': 'Відкрий китайські дорами та акторів', 'Explore C-Dramas': 'Дивитися дорами', 'Browse Chinese Actors': 'Актори Китаю', 'Get AI Recommendations': 'AI рекомендації', 'Sign in to rate': 'Увійдіть, щоб оцінити', 'Sign in to react': 'Увійдіть, щоб залишити реакцію', 'Sign in to rate this drama': 'Увійдіть, щоб оцінити дораму', 'Sign in to react to this actor': 'Увійдіть, щоб залишити реакцію', 'Create an account to save this drama': 'Створіть обліковий запис, щоб зберегти', 'Create an account to save to your watchlist': 'Створіть обліковий запис, щоб додати', 'Join free to follow actors': 'Реєструйтеся безкоштовно, щоб підписатися на акторів', 'Join free to unlock your C-Drama library': 'Реєструйтеся, щоб отримати доступ до бібліотеки', 'Want to see more? Create a free account.': 'Хочете більше? Створіть безкоштовний обліковий запис.', 'Sign up to unlock more details.': 'Зареєструйтеся, щоб побачити більше.', 'Create an account to access full actor profiles.': 'Створіть обліковий запис для повних профілів.', 'Register to see full drama details, ratings, reactions, and recommendations.': 'Зареєструйтеся для повних деталей дорами, оцінок та рекомендацій.', 'Join free to save dramas, follow actors, and get personalized AI recommendations.': 'Реєстрація — зберігайте дорами, підписуйтеся на акторів і отримуйте персональні рекомендації.', 'Sign in to rate, react, comment, and build your C-Drama library.': 'Увійдіть, щоб оцінювати, реагувати та коментувати.', 'Create your free account to unlock fandom rankings, watchlists, reviews, and AI picks.': 'Створіть безкоштовний обліковий запис — рейтинги, списки, рецензії та AI підбір.', 'Sign Up to See More': 'Зареєструйтеся', 'Create Free Account': 'Створити обліковий запис', 'Unlock Full Profile': 'Відкрити профіль', 'Unlock More Details': 'Детальніше', 'Sign In to Continue': 'Увійти', 'Register to Save': 'Реєстрація', 'Register to Rate': 'Реєстрація', 'Register to React': 'Реєстрація', 'Your Ratings': 'Ваші оцінки', 'Your Reactions': 'Ваші реакції', 'Overall Rating': 'Загальна оцінка', 'OST Rating': 'Саундтрек', 'Side Characters Rating': 'Другорядні', 'Chemistry Score': 'Хімія', 'Recommendation Score': 'Рекомендація', 'Rewatch Score': 'Передивитися', 'Rate this drama': 'Оцінити дораму', 'React to this drama': 'Реакція на дораму', 'React to this actor': 'Реакція на актора', 'Vote on traits': 'Голосувати за риси', 'Agree': 'Згоден', 'Disagree': 'Не згоден', 'Welcome back': 'Раді бачити знову', 'Create your account': 'Створіть обліковий запис', 'Email': 'Email', 'Password': 'Пароль', 'Display name': 'Імʼя', 'Already have an account?': 'Вже маєте обліковий запис?', 'Need an account?': 'Немає облікового запису?', 'Continue': 'Продовжити', 'Cancel': 'Скасувати', 'Follow': 'Підписатися', 'Following': 'Підписані' } }; const I18nContext = createContext({ lang: 'en', setLang: () => {}, t: (s) => s }); function useI18n() {return useContext(I18nContext);} function I18nProvider({ children }) { const [lang, setLang] = useState(() => localStorage.getItem('ds_lang') || 'en'); useEffect(() => {localStorage.setItem('ds_lang', lang);document.documentElement.lang = lang;}, [lang]); const t = (key) => I18N[lang] && I18N[lang][key] || key; return {children}; } // ── AUTH ────────────────────────────────────────────────────────────────────── const AuthContext = createContext({ user: null, signIn: () => {}, signUp: () => {}, signOut: () => {} }); function useAuth() {return useContext(AuthContext);} function AuthProvider({ children }) { const [user, setUser] = useState(() => {try {return JSON.parse(localStorage.getItem('ds_auth_user'));} catch {return null;}}); const [modalMode, setModalMode] = useState(null); // null | 'signin' | 'signup' useEffect(() => {user ? localStorage.setItem('ds_auth_user', JSON.stringify(user)) : localStorage.removeItem('ds_auth_user');}, [user]); const signIn = ({ email, password }) => { // Mock: any email+password works. Look up stored display name if matches. const stored = JSON.parse(localStorage.getItem(`ds_credentials_${email}`) || 'null'); const name = stored?.name || email.split('@')[0]; setUser({ email, name, joinedAt: stored?.joinedAt || new Date().toISOString() }); setModalMode(null); }; const signUp = ({ email, name, password }) => { localStorage.setItem(`ds_credentials_${email}`, JSON.stringify({ name, joinedAt: new Date().toISOString() })); setUser({ email, name, joinedAt: new Date().toISOString() }); setModalMode(null); }; const signOut = () => setUser(null); const openSignIn = () => setModalMode('signin'); const openSignUp = () => setModalMode('signup'); const closeModal = () => setModalMode(null); return ( {children} {modalMode && } ); } function AuthModal({ mode, setMode, onClose }) { const { signIn, signUp } = useAuth(); const { t } = useI18n(); const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [err, setErr] = useState(''); const submit = (e) => { e.preventDefault(); if (!email.trim() || !password.trim()) {setErr('Please fill out all fields.');return;} if (mode === 'signup' && !name.trim()) {setErr('Please enter a display name.');return;} if (mode === 'signup') signUp({ email: email.trim(), name: name.trim(), password });else signIn({ email: email.trim(), password }); }; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 420, background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 16, padding: 32, position: 'relative' }}>

{mode === 'signup' ? t('Create your account') : t('Welcome back')}

{window.SocialLoginButtons && <> { // Mock social login — sign user in with provider name + fake email const fakeEmail = `user_${p.id}@dramascope.local`; const fakeName = `${p.id.charAt(0).toUpperCase() + p.id.slice(1)} User`; if (mode === 'signup') signUp({ email: fakeEmail, name: fakeName, password: 'social' });else signIn({ email: fakeEmail, password: 'social' }); }} />
or
} {mode === 'signup' &&
setName(e.target.value)} style={{ width: '100%', padding: '11px 14px', borderRadius: 8, background: 'var(--bg3)', border: '1px solid rgba(74,158,255,0.15)', color: 'var(--text)', fontSize: 14, outline: 'none' }} />
}
setEmail(e.target.value)} style={{ width: '100%', padding: '11px 14px', borderRadius: 8, background: 'var(--bg3)', border: '1px solid rgba(74,158,255,0.15)', color: 'var(--text)', fontSize: 14, outline: 'none' }} />
setPassword(e.target.value)} style={{ width: '100%', padding: '11px 14px', borderRadius: 8, background: 'var(--bg3)', border: '1px solid rgba(74,158,255,0.15)', color: 'var(--text)', fontSize: 14, outline: 'none' }} />
{err &&
{err}
}
{mode === 'signup' ? t('Already have an account?') : t('Need an account?')}{' '}
); } // ── HEADER WIDGETS ──────────────────────────────────────────────────────────── function LanguageMenu() { const { lang, setLang } = useI18n(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const cur = LANGUAGES.find((l) => l.code === lang) || LANGUAGES[0]; return (
{open &&
{LANGUAGES.map((l) => )}
}
); } function AuthButtons() { const { openSignIn, openSignUp } = useAuth(); const { t } = useI18n(); return (
); } function AvatarMenu({ onNavigate }) { const { user, signOut } = useAuth(); const { t } = useI18n(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const h = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); if (!user) return null; const initial = (user.name || user.email || '?').charAt(0).toUpperCase(); const items = [ { id: 'profile', label: t('My Profile'), page: 'profile' }, { id: 'library', label: t('My Library'), page: 'watchlist' }, { id: 'ratings', label: t('My Ratings'), page: 'profile' }, { id: 'reactions', label: t('My Reactions'), page: 'profile' }, { id: 'lists', label: t('My Lists'), page: 'watchlist' }, null, { id: 'settings', label: t('Account Settings'), page: 'profile' }, { id: 'premium', label: '✦ ' + t('Upgrade to Premium'), page: 'premium', premium: true }, null, { id: 'signout', label: t('Log Out'), action: () => {signOut();setOpen(false);} }]; return (
{open &&
{user.name}
{user.email}
{items.map((it, i) => { if (it === null) return
; return ( ); })}
}
); } // ── GUEST GATE ──────────────────────────────────────────────────────────────── // Wrap any guest-locked action with this; shows a sign-in CTA when no user. function GuestGate({ message, ctaLabel, variant = 'inline', children }) { const { user, openSignUp } = useAuth(); const { t } = useI18n(); if (user) return children || null; if (variant === 'overlay' && children) { return (
{children}
{t(message)}
); } // banner return (
{t(message)}
); } // ── DRAMA RATING PANEL ──────────────────────────────────────────────────────── const DRAMA_RATING_KEYS = [ { id: 'overall', label: 'Overall Rating', emoji: '⭐' }, { id: 'ost', label: 'OST Rating', emoji: '🎵' }, { id: 'side', label: 'Side Characters Rating', emoji: '👥' }, { id: 'chemistry', label: 'Chemistry Score', emoji: '💞' }, { id: 'recommendation', label: 'Recommendation Score', emoji: '💯' }, { id: 'rewatch', label: 'Rewatch Score', emoji: '🔁' }]; function DramaRatingPanel({ dramaId }) { const { user, openSignIn } = useAuth(); const { t } = useI18n(); const storageKey = `ds_ratings_${dramaId}_${user?.email || 'guest'}`; const [ratings, setRatings] = useState(() => {try {return JSON.parse(localStorage.getItem(storageKey)) || {};} catch {return {};}}); const setRating = (id, val) => { if (!user) return; const next = { ...ratings, [id]: ratings[id] === val ? 0 : val }; setRatings(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

{t('Rate this drama')}

{user && 1–10 scale · auto-saved}
{!user &&
}
{DRAMA_RATING_KEYS.map((rk) =>
{rk.emoji} {t(rk.label)}
{ratings[rk.id] ? `${ratings[rk.id]}/10` : '—'}
{Array.from({ length: 10 }).map((_, i) => { const val = i + 1; const active = (ratings[rk.id] || 0) >= val; return ( ); })}
)}
); } // ── DRAMA REACTION PANEL ────────────────────────────────────────────────────── const DRAMA_REACTIONS = [ { id: 'emotional_damage', label: 'Emotional Damage', emoji: '💔' }, { id: 'comfort_drama', label: 'Comfort Drama', emoji: '🤍' }, { id: 'insane_chemistry', label: 'Insane Chemistry', emoji: '🔥' }, { id: 'toxic_romance', label: 'Toxic Romance', emoji: '☠️' }, { id: 'masterpiece', label: 'Masterpiece', emoji: '👑' }]; function DramaReactionPanel({ dramaId }) { const { user, openSignIn } = useAuth(); const { t } = useI18n(); const storageKey = `ds_dreact_${dramaId}_${user?.email || 'guest'}`; const [reactions, setReactions] = useState(() => {try {return JSON.parse(localStorage.getItem(storageKey)) || {};} catch {return {};}}); const toggle = (id) => { if (!user) return; const next = { ...reactions, [id]: !reactions[id] }; setReactions(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

{t('React to this drama')}

{!user &&
}
{DRAMA_REACTIONS.map((r) => { const active = reactions[r.id]; return ( ); })}
); } // ── ACTOR REACTION PANEL ────────────────────────────────────────────────────── const ACTOR_REACTIONS = [ { id: 'love', label: 'Love', emoji: '❤️' }, { id: 'hot', label: 'Hot', emoji: '🔥' }, { id: 'soft_boy', label: 'Soft Boy', emoji: '🌸' }, { id: 'worship', label: 'Worship', emoji: '🙌' }, { id: 'emotional_damage', label: 'Emotional Damage', emoji: '💔' }, { id: 'red_flag', label: 'Red Flag', emoji: '🚩' }]; function ActorReactionPanel({ actorId }) { const { user, openSignIn } = useAuth(); const { t } = useI18n(); const storageKey = `ds_areact_${actorId}_${user?.email || 'guest'}`; const [reactions, setReactions] = useState(() => {try {return JSON.parse(localStorage.getItem(storageKey)) || {};} catch {return {};}}); const toggle = (id) => { if (!user) return; const next = { ...reactions, [id]: !reactions[id] }; setReactions(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

{t('React to this actor')}

{!user &&
}
{ACTOR_REACTIONS.map((r) => { const active = reactions[r.id]; return ( ); })}
); } // ── ACTOR TRAITS PANEL ──────────────────────────────────────────────────────── const ACTOR_TRAITS = [ { id: 'chemistry', label: 'Chemistry' }, { id: 'acting_skills', label: 'Acting Skills' }, { id: 'smile', label: 'Smile' }, { id: 'emotional_acting', label: 'Emotional Acting' }, { id: 'charisma', label: 'Charisma' }, { id: 'overhyped', label: 'Overhyped' }, { id: 'repetitive_roles', label: 'Repetitive Roles' }]; function ActorTraitsPanel({ actorId }) { const { user, openSignIn } = useAuth(); const { t } = useI18n(); const storageKey = `ds_traits_${actorId}_${user?.email || 'guest'}`; const [votes, setVotes] = useState(() => {try {return JSON.parse(localStorage.getItem(storageKey)) || {};} catch {return {};}}); const vote = (traitId, val) => { if (!user) return; const next = { ...votes, [traitId]: votes[traitId] === val ? null : val }; setVotes(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

{t('Vote on traits')}

{user && 👍 {t('Agree')} / 👎 {t('Disagree')}}
{!user &&
}
{ACTOR_TRAITS.map((tr) =>
{tr.label}
)}
); } // ── FOLLOW BUTTON ───────────────────────────────────────────────────────────── function FollowButton({ actorId, actorName }) { const { user, openSignUp } = useAuth(); const { t } = useI18n(); const storageKey = `ds_follows_${user?.email || 'guest'}`; const [follows, setFollows] = useState(() => {try {return JSON.parse(localStorage.getItem(storageKey)) || [];} catch {return [];}}); const isFollowing = follows.some((f) => f.id === actorId); const toggle = () => { if (!user) {openSignUp();return;} const next = isFollowing ? follows.filter((f) => f.id !== actorId) : [...follows, { id: actorId, name: actorName }]; setFollows(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return ( ); } // Export everything to window Object.assign(window, { // i18n LANGUAGES, I18nContext, I18nProvider, useI18n, // auth AuthContext, AuthProvider, useAuth, AuthModal, // header LanguageMenu, AuthButtons, AvatarMenu, // gates and panels GuestGate, DramaRatingPanel, DramaReactionPanel, ActorReactionPanel, ActorTraitsPanel, FollowButton });