onClick(item)}
+ onMouseEnter={() => setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{
+ flexShrink: 0, width: "148px", cursor: "pointer",
+ transition: "transform 0.18s ease",
+ transform: hovered ? "translateY(-4px) scale(1.03)" : "translateY(0) scale(1)",
+ outline: isActive ? "2px solid #00E5FF" : "none",
+ outlineOffset: "2px", borderRadius: "6px",
+ }}
+ >
+ {/* Card face — 148×210px (roughly 2:3 poster ratio) */}
+
+ {hovered && (
+
+ )}
+
+ {/* Monogram placeholder — replace with
when poster URLs are available */}
+
+ {initials}
+
+
+ {/* Title + year overlay at the bottom */}
+
+
+ {item.title}
+
+
+ {item.year}
+
+
+
+ {/* Similarity badge — only shown for high-confidence matches (>= 80%) */}
+ {simPct >= 80 && (
+
+ {simPct}%
+
+ )}
+
+
+ {/* Genre label below the card — always shows genre, never platform names */}
+
+ {(item.genres || "").split(",").slice(0, 2).map((g) => g.trim()).join(" · ")}
+
+
+
+
+ {label}
+
+
+ {["‹", "›"].map((arrow, i) => (
+ scroll(i === 0 ? -1 : 1)}
+ style={{
+ background: "transparent", border: "1px solid #2a2a2a", borderRadius: "4px",
+ color: "#444", width: "28px", height: "28px", cursor: "pointer",
+ fontSize: "16px", display: "flex", alignItems: "center", justifyContent: "center",
+ transition: "border-color 0.15s, color 0.15s", fontFamily: "inherit", lineHeight: 1,
+ }}
+ onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#999"; e.currentTarget.style.color = "#fff"; }}
+ onMouseLeave={(e) => { e.currentTarget.style.borderColor = "#2a2a2a"; e.currentTarget.style.color = "#444"; }}
+ >{arrow}
+ ))}
+
+
+
+ {/* Skeleton loading placeholders */}
+ {loading ? (
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+ ) : items.length === 0 ? (
+
No results found.
+ ) : (
+
+ {items.map((item, idx) => (
+
+ )}
+
+
+ {/* ── Sticky navigation bar ── */}
+
+
+ {/* Logo — click to go back to landing page */}
+
navigate("/")}
+ style={{ display: "flex", alignItems: "center", gap: "9px", flexShrink: 0, cursor: "pointer" }}>
+ {COMPASS_SVG}
+
+ StreamCompass
+
+
+
+
+
+ {/* Search bar — wider, with cyan arrow submit button.
+ Platform chips are in the filter bar below for consistency. */}
+
+
+
+ {/* ── Hero / results context + filter bar ── */}
+
+
+ ML-powered recommendations
+
+ {query ? (
+ <>
+
+ Results for "{query}"
+
+
+ {loading ? "Finding recommendations…" : `${results.length} titles found · Ranked by similarity`}
+
+
+ {/* Filter bar — Row 1: platforms, Row 2: type + IMDb */}
+
+
+ {/* ── Row 1: Platform chips ── */}
+
+
Platform
+
+ {PLATFORM_FILTER_OPTIONS.filter((p) => p !== "All").map((p) => {
+ const key = PLATFORM_KEY_MAP[p];
+ const isActive = activePlatforms.has(key);
+ return (
+ togglePlatform(key)}
+ style={{
+ background: isActive ? "#fff" : "transparent",
+ border: `1px solid ${isActive ? "#fff" : "#444"}`,
+ borderRadius: "20px",
+ color: isActive ? "#000" : "#999",
+ fontSize: "12px", fontWeight: isActive ? 600 : 400,
+ padding: "4px 14px", cursor: "pointer",
+ whiteSpace: "nowrap", transition: "all 0.15s", fontFamily: "inherit",
+ }}
+ >{p}
+ );
+ })}
+ {activePlatforms.size > 0 && (
+ setActivePlatforms(new Set())}
+ style={{
+ background: "transparent", border: "none", color: "#00E5FF",
+ fontSize: "12px", cursor: "pointer", fontFamily: "inherit", padding: "4px 0",
+ }}
+ >✕ Clear
+ )}
+
+
+
+ {/* ── Row 2: Type + Min IMDb ── */}
+
+
+ {/* Content type */}
+
+
Type
+
+ {["All", "Movies", "TV Shows"].map((opt) => (
+ setContentTypeFilter(opt)}
+ style={{
+ background: contentTypeFilter === opt ? "#1a1a1a" : "transparent",
+ border: `1px solid ${contentTypeFilter === opt ? "#999" : "#444"}`,
+ borderRadius: "6px", color: contentTypeFilter === opt ? "#fff" : "#999",
+ fontSize: "12px", padding: "4px 10px", cursor: "pointer",
+ fontFamily: "inherit", transition: "all 0.15s", whiteSpace: "nowrap",
+ }}
+ >{opt}
+ ))}
+
+
+
+
+
+ {/* Min IMDb */}
+
+
Min IMDb
+
+ {["Any", "6+", "7+", "8+", "9+"].map((opt) => (
+ setMinImdbFilter(opt)}
+ style={{
+ background: minImdbFilter === opt ? "#1a1a1a" : "transparent",
+ border: `1px solid ${minImdbFilter === opt ? "#999" : "#444"}`,
+ borderRadius: "6px", color: minImdbFilter === opt ? "#fff" : "#999",
+ fontSize: "12px", padding: "4px 10px", cursor: "pointer",
+ fontFamily: "inherit", transition: "all 0.15s", whiteSpace: "nowrap",
+ }}
+ >{opt}
+ ))}
+
+
+
+ {(contentTypeFilter !== "All" || minImdbFilter !== "Any") && (
+
{ setContentTypeFilter("All"); setMinImdbFilter("Any"); }}
+ style={{
+ background: "transparent", border: "none", color: "#00E5FF",
+ fontSize: "12px", cursor: "pointer", fontFamily: "inherit", padding: 0,
+ }}
+ >Clear filters ×
+ )}
+
+
+
+ {/* Error banner */}
+ {error && (
+
+ {error}
+
+ )}
+
+ ) : (
+ <>
+
+ What are you watching next?
+
+
+ Search a title above to get recommendations
+
+
+ )}
+
+
+ {/* ── Result rows ── */}
+
+ {query ? (
+ rows.map((row) => (
+
+
+ Use the search bar above or go back to the{" "}
+ navigate("/")} style={{ color: "#00E5FF", cursor: "pointer" }}>
+ home page
+
+
+
+
+ {/* Detail drawer — fixed at bottom, slides up on card click */}
+
{ setSelected(null); setTitleDetail(null); }}
+ />
+
+ * 4. The browse page (App.jsx) picks up the ?q= param and fires POST /recommend
+ *
+ * API endpoints used:
+ * GET /search?q={query}&limit=6 — autocomplete suggestions while typing
+ *
+ * External dependencies:
+ * react-router-dom — useNavigate for client-side navigation to /browse
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+
+/** Base URL for all backend API calls. */
+const API_BASE = "https://api.khayrul.com";
+
+/**
+ * Renders the StreamCompass compass SVG logo at a given pixel size.
+ * Extracted as a function so it can be reused at different sizes
+ * (44px on landing, 26px in the nav bar).
+ *
+ * @param {number} size - Width and height in pixels
+ * @returns {JSX.Element} SVG element
+ */
+const CompassSVG = ({ size = 32 }) => (
+
+
+);
+
+/**
+ * Small colored platform identifier badge shown in autocomplete suggestions.
+ * Each streaming service gets its brand color so users can instantly see
+ * where a title is available before navigating to the full results page.
+ *
+ * @param {string} color - Hex background color (brand color)
+ * @param {string} label - Short label text (e.g. "N", "H", "D+")
+ */
+function PlatformDot({ color, label }) {
+ return (
+
+ {label}
+
+ );
+}
+
+/**
+ * LandingPage — main export
+ *
+ * State:
+ * query {string} - Current text in the search input
+ * suggestions {Array} - Autocomplete results from GET /search
+ * showSuggestions {boolean} - Whether the dropdown is visible
+ * loadingSuggestions {boolean} - Spinner shown while /search is in-flight
+ * activeSuggestion {number} - Keyboard-highlighted suggestion index (-1 = none)
+ *
+ * Refs:
+ * inputRef - Direct DOM ref to the
+
+ {/* ── Logo ── */}
+
+
+ StreamCompass
+
+
+
+ {/* ── Headline ── */}
+
+ What are you watching{" "}
+ next?
+
+
+ Search any title and find what to watch next across various streaming platforms
+
+
+ {/* ── Search box + autocomplete dropdown ── */}
+
+
+ {/* Input wrapper — styled as a single pill */}
+
+ {/* Search icon */}
+
+
+
+
setQuery(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onFocus={(e) => {
+ e.currentTarget.closest("div").style.borderColor = "#444";
+ if (suggestions.length > 0) setShowSuggestions(true);
+ }}
+ onBlur={(e) => {
+ e.currentTarget.closest("div").style.borderColor = "#2a2a2a";
+ // Delay hide so onMouseDown on a suggestion fires before blur closes it
+ setTimeout(() => setShowSuggestions(false), 150);
+ }}
+ style={{
+ flex: 1,
+ background: "transparent",
+ border: "none",
+ outline: "none",
+ color: "#fff",
+ fontSize: "16px",
+ padding: "18px 12px",
+ fontFamily: "inherit",
+ }}
+ />
+
+ {/* Loading spinner — visible while /search is in-flight */}
+ {loadingSuggestions && (
+
+ )}
+
+ {/* Clear button — only shown when there's text and no spinner */}
+ {query && !loadingSuggestions && (
+
{ setQuery(""); setSuggestions([]); inputRef.current?.focus(); }}
+ style={{
+ background: "transparent", border: "none", color: "#444",
+ cursor: "pointer", padding: "4px", fontSize: "18px",
+ lineHeight: 1, flexShrink: 0,
+ }}
+ >×
+ )}
+
+
+ {/* ── Autocomplete dropdown ── */}
+ {showSuggestions && suggestions.length > 0 && (
+
+ {suggestions.map((s, i) => (
+
handleSearch(s.title)}
+ style={{
+ padding: "12px 16px",
+ cursor: "pointer",
+ background: i === activeSuggestion ? "#161616" : "transparent",
+ borderBottom: i < suggestions.length - 1 ? "1px solid #161616" : "none",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ gap: "12px",
+ transition: "background 0.1s",
+ }}
+ onMouseEnter={(e) => (e.currentTarget.style.background = "#161616")}
+ onMouseLeave={(e) => (e.currentTarget.style.background = i === activeSuggestion ? "#161616" : "transparent")}
+ >
+ {/* Title + year */}
+
+
+
+
+ {s.title}
+
+ {s.year && (
+
+ {s.year}
+
+ )}
+
+
+ {/* Platform dots — shows where this title is available */}
+
+ {s.netflix === 1 &&
}
+ {s.hulu === 1 &&
}
+ {s.prime_video === 1 &&
}
+ {s.disney_plus === 1 &&
}
+
+
+ ))}
+
+ )}
+
+
+ {/* ── Submit button ── */}
+
handleSearch()}
+ disabled={!query.trim()}
+ style={{
+ marginTop: "16px",
+ background: query.trim() ? "#00E5FF" : "#111",
+ border: "none",
+ borderRadius: "8px",
+ color: query.trim() ? "#000" : "#333",
+ fontSize: "15px",
+ fontWeight: 600,
+ padding: "12px 32px",
+ cursor: query.trim() ? "pointer" : "default",
+ transition: "all 0.15s",
+ fontFamily: "inherit",
+ letterSpacing: "0.01em",
+ }}
+ >
+ Find recommendations →
+
+
+ {/* Dataset size hint */}
+
+ Searching through {datasetSize.toLocaleString()} titles across Netflix, Hulu, Prime Video & Disney+
+
+
+ {/* Keyframe animations injected globally for this page */}
+
+
in index.html and sets up client-side routing
+ * via React Router.
+ *
+ * Routes:
+ * / → LandingPage (search-focused entry point)
+ * /browse → App (results page, reads ?q= URL param)
+ * * → redirect to / (any unknown URL goes back to landing)
+ *
+ * Why BrowserRouter?
+ * Uses the HTML5 History API so URLs look like /browse?q=Inception
+ * rather than /#/browse?q=Inception (HashRouter). Requires the server
+ * to serve index.html for all routes — Vite does this automatically
+ * in dev, and the vite.config.js handles it for the production build.
+ *
+ * Dependencies:
+ * react-router-dom — install with: npm install react-router-dom
+ */
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import LandingPage from './LandingPage.jsx'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+
+ {/* Landing page — just the search bar */}
+
+
+
+)