setHov(true)}
onMouseLeave={() => setHov(false)}
style={{
borderRadius: 14,
overflow: "hidden",
cursor: "pointer",
transition: "transform .3s,box-shadow .3s",
transform: hov ? "translateY(-8px) scale(1.03)" : "none",
boxShadow: hov ? `0 24px 60px ${color}33,0 4px 20px #0005` : "0 4px 16px #0003",
background: bg,
border: `1px solid ${border}`,
flex: "0 0 auto",
width: 158
}}
>
{hov && (
e.stopPropagation()}
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-60%)",
background: "#000b",
border: "2px solid #fff4",
borderRadius: "50%",
width: 44,
height: 44,
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
);
}
// ─── AD BANNER ────────────────────────────────────────────────────────────────
function AdBanner({ color = "#ff2d78", dark = true, slot = "horizontal" }) {
return (
{item.title}
{item.genre} · {item.year}
{item.tags.slice(0, 2).map(t => )}
ANZEIGE
📣 Werbeplatz verfügbar
Deine Werbung hier · ads@screenbuddy.app
BUCHEN
e.stopPropagation()}
>
WERBUNG
🍿
SCREENBUDDY PREMIUM
Keine Werbung, Vision-Suche, Sprachmemo und mehr für nur 3,99€/Monat
{item.title}
{t.recommendations.toUpperCase()}
{sides.slice(0, 2).map(i => )}
{t.bestChoice.toUpperCase()}
{sides.slice(2, 4).map(i => )}
e.stopPropagation()}
>
✓ MAG ICH
{memory.likes?.map((l, i) => (
{l}
))}
setLike(e.target.value)}
onKeyDown={e => e.key === "Enter" && addLike()}
placeholder="z.B. Action, Mystery…"
style={inputStyle}
/>
✗ MAG ICH NICHT
{memory.dislikes?.map((d, i) => (
{d}
))}
setDislike(e.target.value)}
onKeyDown={e => e.key === "Enter" && addDislike()}
placeholder="z.B. Horror, Gore…"
style={inputStyle}
/>
e.stopPropagation()}
>
👑
{t.premiumTitle.toUpperCase()}
3,99€ / Monat
{features.map(f => (
{f.label}
{f.desc}
{preview && (
)}
);
}
// ─── AI CHAT ──────────────────────────────────────────────────────────────────
function AIChat({ cat, watchlist, searchHistory, userName, memory, onMemoryUpdate, isPremium, onUpgrade, dark, t, lang }) {
const system = buildSystem(cat.id, watchlist, searchHistory, userName, memory, lang);
const catObj = CATEGORIES.find(c => c.id === cat.id);
const botName = catObj?.botName || "Buddy";
const botTitle = lang === "de" ? catObj?.botTitleDe : catObj?.botTitleEn;
const buildGreeting = useCallback(() => {
let g = `${botName} ${lang === "de" ? "ist online" : "is online"}`;
if (userName) g += ` — ${lang === "de" ? "hey" : "hey"} **${userName}**`;
g += "! 👋 ";
if (memory?.enabled && memory.likes?.length) {
g += lang === "de"
? `Ich weiß du magst ${memory.likes.slice(0, 2).join(" und ")}. `
: `I know you like ${memory.likes.slice(0, 2).join(" and ")}. `;
}
if (watchlist.length > 0) {
g += lang === "de"
? `Du hast ${watchlist.length} Titel auf der Watchlist. Was suchst du heute?`
: `You have ${watchlist.length} titles in your watchlist. What are you looking for today?`;
} else {
g += lang === "de" ? "Was willst du heute schauen?" : "What do you want to watch today?";
}
return g;
}, [botName, lang, userName, memory, watchlist]);
const [msgs, setMsgs] = useState([{ role: "ai", text: buildGreeting() }]);
const [input, setInput] = useState("");
const [typing, setTyping] = useState(false);
const [showMemory, setShowMemory] = useState(false);
const ref = useRef(null);
useEffect(() => {
setMsgs([{ role: "ai", text: buildGreeting() }]);
}, [cat.id, lang, buildGreeting]);
useEffect(() => {
if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
}, [msgs, typing]);
const send = async (overrideText = null) => {
const msg = (overrideText || input).trim();
if (!msg) return;
setInput("");
setTyping(true);
setMsgs(m => [...m, { role: "user", text: msg }]);
const history = msgs.filter(m => m.role === "user").map(m => ({ role: "user", content: m.text }));
history.push({ role: "user", content: msg });
try {
const response = await callAnthropicAPI(system, history);
setMsgs(m => [...m, { role: "ai", text: response || "Fehler!" }]);
} catch (error) {
const errorMsg = error.message === "API_KEY_MISSING" ? t.apiKeyMissing : t.networkError;
setMsgs(m => [...m, { role: "ai", text: errorMsg }]);
}
setTyping(false);
};
const handleVisionResult = (result) => {
setMsgs(m => [...m, { role: "ai", text: "📸 " + result }]);
};
const chatBg = dark ? "#0a0a15" : "#f8f8ff";
const msgBg = dark ? "#111827" : "#eeeeff";
const inputBg = dark ? "#080810" : "#f0f0ff";
const borderColor = dark ? cat.color + "22" : cat.color + "44";
const textColor = dark ? "#ddd" : "#222";
const quickSuggestions = [
watchlist.length > 0
? (lang === "de" ? `Was passt zu ${watchlist[0].title}?` : `What's similar to ${watchlist[0].title}?`)
: (lang === "de" ? "Was ist gerade trending?" : "What's trending now?"),
lang === "de" ? "Crossover-Empfehlung" : "Crossover pick",
lang === "de" ? "Spoilerfreie Erklärung" : "Spoiler-free summary",
lang === "de" ? "Wo kann ich das schauen?" : "Where can I watch it?",
];
return (
{/* Header */}
{/* Messages */}
{ onMemoryUpdate(m); setShowMemory(false); }}
onClose={() => setShowMemory(false)}
dark={dark}
t={t}
/>
)}
);
}
// ─── AUTH MODAL ───────────────────────────────────────────────────────────────
function AuthModal({ onClose, onLogin, dark, t }) {
const [mode, setMode] = useState("login");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [pw, setPw] = useState("");
const bg = dark ? "#0d0d1a" : "#fff";
const inputStyle = {
width: "100%",
background: dark ? "#080810" : "#f5f5f5",
border: `1px solid ${dark ? "#252540" : "#ddd"}`,
borderRadius: 10,
color: dark ? "#ddd" : "#333",
fontSize: 13,
padding: "11px 14px",
outline: "none",
fontFamily: "inherit",
marginBottom: 10,
boxSizing: "border-box"
};
const handleSubmit = () => {
if (!email) return;
onLogin({ name: name || email.split("@")[0], email });
onClose();
};
return (
{botName}
{botTitle}
{memory?.enabled && (
{t.online}
{msgs.map((m, i) => (
{/* Quick suggestions */}
{m.role === "ai" && (
))}
{typing && (
{m.text.replace(/\*\*(.*?)\*\*/g, "$1")}
{[0, 1, 2].map(j => (
))}
{quickSuggestions.map(s => (
))}
{/* Premium tools row */}
{isPremium
?
: (
)
}
{!isPremium && (
{/* Input */}
setInput(e.target.value)}
onKeyDown={e => e.key === "Enter" && send()}
placeholder={`${t.typeHere} ${botName}…`}
style={{
flex: 1,
background: inputBg,
border: `1px solid ${cat.color}22`,
borderRadius: 10,
color: dark ? "#ccc" : "#333",
fontSize: 12,
padding: "9px 12px",
outline: "none",
fontFamily: "inherit"
}}
/>
{showMemory && (
e.stopPropagation()}
>
SCREENBUDDY
{["login", "register"].map(m => (
))}
{mode === "register" && (
setName(e.target.value)} placeholder="Name" style={inputStyle}/>
)}
setEmail(e.target.value)} placeholder="E-Mail" style={inputStyle}/>
setPw(e.target.value)}
type="password"
placeholder="Passwort"
style={{ ...inputStyle, marginBottom: 18 }}
/>
— oder —
{["Google", "Apple"].map(p => (
))}
e.stopPropagation()}
>
))
}
{t.watchlist.toUpperCase()} · {items.length}
{items.length === 0
? (
Noch leer
Klick + auf einer Karte
)
: items.map(item => (
Klick + auf einer Karte
{item.title}
{item.genre}
KATEGORIE
{lang === "de" ? cat.labelDe : cat.labelEn}
{items.length} {lang === "de" ? "Titel · empfohlen von" : "Titles · curated by"} {cat.botName}
{CATEGORIES.filter(c => c.id !== cat.id).map(c => (
))}
{t.allTitles.toUpperCase()}
{items.map(item => (
w.title === item.title)}
dark={dark}
/>
))}
{items.map((item, i) => (
))}
{!isPremium && {item.title}
{78 + (i * 5)}% {t.match}
KI-CHAT MIT {cat.botName?.toUpperCase()}
{MASCOT_VARIANTS.map((v, i) => (
SCREENBUDDY
{t.tagline}
{(userName || watchlist.length > 0) && (
{typing
? (
{[0, 1, 2].map(j => (
))}
)
: (
<>
{reply}
{sugCat && (
)}
)
}
{quickSearches.map(s => (
))}
{/* Category tiles */}
}
{/* Trending */}
}
{t.categories.toUpperCase()}
{CATEGORIES.map(cat => {
const preview = ALL_CONTENT[cat.id]?.slice(0, 3) || [];
return (
);
})}
{!isPremium &&
{trending.map(item => {
const cat = CATEGORIES.find(c => ALL_CONTENT[c.id]?.find(i => i.title === item.title)) || CATEGORIES[0];
return (
w.title === item.title)}
dark={dark}
/>
);
})}
{trending.map((item, i) => (
))}
{/* Top rated */}
{item.title}
{86 + (i * 3)}% {t.hype}
{topRated.map(item => {
const cat = CATEGORIES.find(c => ALL_CONTENT[c.id]?.find(i => i.title === item.title)) || CATEGORIES[0];
return (
w.title === item.title)}
dark={dark}
/>
);
})}
{/* Crossovers */}
{crossovers.map(x => (
))}
{searchHistory.length > 0 && (
<>
{searchHistory.slice(-8).reverse().map((s, i) => (
))}
)}
{!isPremium &&
{/* ── NAV ── */}
{/* ── PAGES ── */}
{/* Logo */}
{/* Desktop tabs */}
{/* Mobile dropdown */}
{CATEGORIES.map(cat => {
const active = tab === cat.id;
return (
);
})}
{/* Right actions */}
{/* Lang */}
{/* Dark/Light */}
{/* Premium */}
{!isPremium && (
)}
{isPremium && (
{CATEGORIES.map(cat => (
))}
{tab === "home"
? (
{ setTab(t2); setMobileMenu(false); }}
mascotVariant={mascotIdx}
onChangeMascot={setMascotIdx}
watchlist={watchlist}
onAdd={toggleWL}
userName={user?.name}
searchHistory={searchHistory}
set