// DramaScope — feature components: social login, library status, reviews, share, ads, notifications, premium, AI quick picks const { useState, useEffect, useRef } = React; // ── ICONS (lightweight Lucide-style SVGs) ───────────────────────────────────── const Icon = ({ name, size=16, color='currentColor', stroke=2 }) => { const paths = { sparkles: 'M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 14l.7 2.1L22 17l-2.3.9L19 20l-.7-2.1L16 17l2.3-.9L19 14zM5 14l.7 2.1L8 17l-2.3.9L5 20l-.7-2.1L2 17l2.3-.9L5 14z', bookmark: 'M6 3h12v18l-6-4-6 4V3z', share: 'M16 6l-4-4-4 4M12 2v14M5 12v8a2 2 0 002 2h10a2 2 0 002-2v-8', bell: 'M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 004 0', crown: 'M2 18h20l-2-10-5 4-5-7-5 7-5-4-2 10z', flame: 'M12 22c5 0 8-3 8-8 0-4-3-7-4-9 0 3-3 5-5 5-1 2-3 4-3 7s2 5 4 5z', eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 100 6 3 3 0 000-6z', eyeOff: 'M2 2l20 20M6.7 6.7C4.1 8.4 2 12 2 12s4 7 10 7c2 0 3.8-.6 5.3-1.5M9.5 9.5a3 3 0 004 4', star: 'M12 2l3 7 7 .5-5.5 4.5 2 7L12 17l-6.5 4 2-7L2 9.5 9 9z', heart: 'M12 21s-7-4.5-9.5-9C1 8.5 3 5 6.5 5 9 5 11 7 12 8c1-1 3-3 5.5-3 3.5 0 5.5 3.5 4 7C19 16.5 12 21 12 21z', msg: 'M3 8a3 3 0 013-3h12a3 3 0 013 3v8a3 3 0 01-3 3H9l-4 4v-4H6a3 3 0 01-3-3V8z', users: 'M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM22 21v-2a4 4 0 00-3-3.9M16 3.1A4 4 0 0116 11', play: 'M5 3l14 9-14 9V3z', check: 'M5 12l5 5 9-11', }; return ( ); }; // ── SOCIAL LOGIN BUTTONS ────────────────────────────────────────────────────── const SOCIAL_PROVIDERS = [ { id:'google', label:'Continue with Google', color:'#fff', bg:'#fff', fg:'#111', icon:() }, { id:'apple', label:'Continue with Apple', color:'#fff', bg:'#000', fg:'#fff', icon:() }, { id:'facebook', label:'Continue with Facebook', color:'#fff', bg:'#1877F2', fg:'#fff', icon:() }, { id:'discord', label:'Continue with Discord', color:'#fff', bg:'#5865F2', fg:'#fff', icon:() }, { id:'x', label:'Continue with X', color:'#fff', bg:'#000', fg:'#fff', icon:() }, ]; function SocialLoginButtons({ onSelect }) { return (
{SOCIAL_PROVIDERS.map(p => ( ))}
); } // ── LIBRARY STATUS ──────────────────────────────────────────────────────────── const LIBRARY_STATUSES = [ { id:'watching', label:'Watching', emoji:'👀', color:'#4a9eff' }, { id:'plan', label:'Plan to Watch',emoji:'📌', color:'#7bc3ff' }, { id:'completed', label:'Completed', emoji:'✅', color:'#3dd68c' }, { id:'favorite', label:'Favorites', emoji:'❤️', color:'#ff6b6b' }, { id:'rewatch', label:'Rewatch', emoji:'🔁', color:'#c084fc' }, { id:'dropped', label:'Dropped', emoji:'⛔', color:'#888' }, ]; function LibraryStatusButton({ item, fullWidth }) { const { user, openSignUp } = window.useAuth(); const { t } = window.useI18n(); const [open, setOpen] = useState(false); const ref = useRef(null); const storageKey = `ds_library_${user?.email||'guest'}`; const [library, setLibrary] = useState(()=>{ try { return JSON.parse(localStorage.getItem(storageKey))||[]; } catch { return []; }}); const entry = library.find(x=>x.id===item.id); const status = entry?.status; const curStatus = LIBRARY_STATUSES.find(s=>s.id===status); useEffect(()=>{ const h = (e)=>{ if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return ()=>document.removeEventListener('mousedown', h); },[]); const setStatus = (newStatus) => { if (!user) { openSignUp(); return; } let next; if (newStatus === null) { next = library.filter(x=>x.id!==item.id); } else { const data = { id:item.id, title_en:item.title_en, title_ru:item.title_ru, title_original:item.title_original, posterPath:item.posterPath, firstAirDate:item.firstAirDate, voteAverage:item.voteAverage, originCountry:item.originCountry, status:newStatus, addedAt:new Date().toISOString() }; next = entry ? library.map(x=>x.id===item.id?{...x, ...data}:x) : [...library, data]; } setLibrary(next); localStorage.setItem(storageKey, JSON.stringify(next)); window.dispatchEvent(new CustomEvent('ds-library-changed')); setOpen(false); }; if (!user) { return ( ); } return (
{open && (
{LIBRARY_STATUSES.map(s => ( ))} {status && ( <>
)}
)}
); } // ── RECOMMEND BLOCK ─────────────────────────────────────────────────────────── const RECOMMEND_REASONS = ['Chemistry','Emotional story','Green flag male lead','Amazing OST','Beautiful cinematography','Addictive','Comfort drama','Strong acting','Beautiful romance','Great ending']; function RecommendBlock({ dramaId }) { const { user, openSignIn } = window.useAuth(); const storageKey = `ds_recommend_${dramaId}_${user?.email||'guest'}`; const aggregateKey = `ds_recommend_agg_${dramaId}`; const [data, setData] = useState(()=>{ try{ return JSON.parse(localStorage.getItem(storageKey))||{ recommended:false, reasons:[] }; }catch{ return { recommended:false, reasons:[] }; } }); const [showReasons, setShowReasons] = useState(false); const agg = JSON.parse(localStorage.getItem(aggregateKey) || '{"yes":0,"no":0,"total":0}'); const percent = agg.total > 0 ? Math.round((agg.yes / agg.total) * 100) : Math.floor(Math.random()*30+60); const toggleRecommend = () => { if (!user) { openSignIn(); return; } const next = { ...data, recommended: !data.recommended }; setData(next); localStorage.setItem(storageKey, JSON.stringify(next)); // simulate aggregate update const a = JSON.parse(localStorage.getItem(aggregateKey)||'{"yes":0,"no":0,"total":0}'); if (next.recommended) { a.yes += 1; a.total += 1; } else { a.yes = Math.max(0, a.yes - 1); a.total = Math.max(0, a.total - 1); } localStorage.setItem(aggregateKey, JSON.stringify(a)); if (next.recommended) setShowReasons(true); }; const toggleReason = (r) => { const reasons = data.reasons.includes(r) ? data.reasons.filter(x=>x!==r) : [...data.reasons, r]; const next = { ...data, reasons }; setData(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

Recommend this drama

✅ Recommended by {percent}% of users
{data.recommended && (
Why do you recommend it? (pick all that apply)
{RECOMMEND_REASONS.map(r => { const active = data.reasons.includes(r); return ( ); })}
Public summary
Most recommended for: Chemistry, Emotional impact, Visuals, OST, Comfort.
)}
); } // ── REVIEWS SECTION ─────────────────────────────────────────────────────────── const REVIEW_REACTIONS = ['❤️','😂','😭','🔥','🛐','👏','🤯','😡']; function ReviewsSection({ dramaId }) { const { user, openSignIn } = window.useAuth(); const storageKey = `ds_reviews_${dramaId}`; const [reviews, setReviews] = useState(()=>{ try { return JSON.parse(localStorage.getItem(storageKey))||[]; } catch { return []; }}); const [showForm, setShowForm] = useState(false); const [text, setText] = useState(''); const [isSpoiler, setIsSpoiler] = useState(false); const save = (next) => { setReviews(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; const post = () => { if (!user || !text.trim()) return; const review = { id:Date.now(), userEmail:user.email, userName:user.name, text:text.trim(), spoiler:isSpoiler, date:'just now', reactions:{}, replies:[] }; save([review, ...reviews]); setText(''); setIsSpoiler(false); setShowForm(false); }; const react = (reviewId, emoji) => { if (!user) { openSignIn(); return; } save(reviews.map(r => { if (r.id!==reviewId) return r; const rxs = { ...(r.reactions||{}) }; const list = rxs[emoji] || []; rxs[emoji] = list.includes(user.email) ? list.filter(e=>e!==user.email) : [...list, user.email]; return { ...r, reactions: rxs }; })); }; const reply = (reviewId, replyText) => { if (!user || !replyText.trim()) return; save(reviews.map(r => r.id===reviewId ? { ...r, replies:[...(r.replies||[]), { id:Date.now(), userEmail:user.email, userName:user.name, text:replyText.trim(), date:'just now', reactions:{} }] } : r)); }; const removeReview = (reviewId) => save(reviews.filter(r=>r.id!==reviewId)); return (

Reviews ({reviews.length})

{user ? ( ) : ( )}
{showForm && user && (