// shell.jsx — Shared nav, footer, hero, film components for multi-page site. // ── i18n — UI-string translations ──────────────────────────────────────────── const T = { en: { nav_omlah: "Omlah", nav_studio: "Studio", nav_contact: "Contact", section_cast: "Cast", section_crew: "Crew", section_sponsors: "Sponsors", section_bts: "Behind the Scenes", section_archive: "The Archive", section_team: "The team", section_practice: "Working practice", section_idea: "Idea & Story", section_summary: "Summary", section_takeaway: "Takeaway", read_more: "Read more ↓", read_less: "Less ↑", view_film: "View film →", open_frame: "Open ↗", become_partner: "Become a partner", scroll_begin: "Scroll to begin ↓", close: "Close", prev: "Previous", next: "Next", frame: "Frame", clip: "Clip", fig: "Fig", theme: "Theme", language: "Language", copyright: "All films reserved", collaborators: "collaborators", dispatches: "Dispatches · On Set", on_location: "On Location", presented_with: "Presented In Association With", played_by: "played by", age: "Age", meet_team: "Meet the team →", about_studio: "About the studio", roll: "Roll", ar_wip: "Film content translation in progress", ar_wip_dismiss: "Dismiss", }, ar: { nav_omlah: "عُملة", nav_studio: "الاستوديو", nav_contact: "تواصل", section_cast: "الطاقم", section_crew: "طاقم العمل", section_sponsors: "الرعاة", section_bts: "من كواليس العمل", section_archive: "الأرشيف", section_team: "الفريق", section_practice: "طريقة العمل", section_idea: "الفكرة والقصة", section_summary: "الملخص", section_takeaway: "الرسالة", read_more: "اقرأ المزيد ↓", read_less: "أقل ↑", view_film: "شاهد الفيلم ←", open_frame: "افتح ↗", become_partner: "كن شريكاً", scroll_begin: "اسحب للبدء ↓", close: "إغلاق", prev: "السابق", next: "التالي", frame: "لقطة", clip: "مقطع", fig: "شكل", theme: "السمة", language: "اللغة", copyright: "جميع الحقوق محفوظة", collaborators: "متعاونون", dispatches: "من الموقع", on_location: "في الموقع", presented_with: "يُقدَّم بالتعاون مع", played_by: "يؤديه", age: "العمر", meet_team: "تعرّف على الفريق ←", about_studio: "عن الاستوديو", roll: "مجموعة", ar_wip: "محتوى الأفلام قيد الترجمة", ar_wip_dismiss: "إخفاء", }, }; const LanguageContext = React.createContext({ lang: "en", t: (k) => (T.en && T.en[k]) || k, pick: (obj, field) => (obj ? obj[field] : undefined), }); function useLang() { return React.useContext(LanguageContext); } function makeI18n(lang) { const dict = T[lang] || T.en; return { lang, t: (k) => dict[k] || (T.en[k] || k), pick: (obj, field) => { if (!obj) return undefined; if (lang === "ar") { return obj[field + "Ar"] || obj[field + "Arabic"] || obj[field]; } return obj[field]; }, }; } function LangToggle({ lang, onToggle }) { const isEn = lang !== "ar"; return ( ); } function ArWipBanner() { const { lang, t } = useLang(); const [visible, setVisible] = React.useState(false); React.useEffect(() => { if (lang !== "ar") { setVisible(false); return; } try { const seen = localStorage.getItem("clacket:ar_wip_seen") === "1"; setVisible(!seen); } catch { setVisible(true); } }, [lang]); if (!visible || lang !== "ar") return null; const dismiss = () => { try { localStorage.setItem("clacket:ar_wip_seen", "1"); } catch {} setVisible(false); }; return (
{t("ar_wip")}
); } function ThemeToggle({ theme, onToggle }) { const isDark = theme === "dark"; return ( ); } function MobileNavOverlay({ open, onClose, items, current, theme, onToggleTheme, lang, onToggleLanguage }) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { if (!open) return; const r = requestAnimationFrame(() => setMounted(true)); const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { cancelAnimationFrame(r); setMounted(false); window.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; }; }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()} style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 20, borderTop: "1px solid var(--line)", opacity: mounted ? 1 : 0, transition: "opacity .4s ease .15s", }} >
{T[lang || "en"].theme} {onToggleTheme && }
{T[lang || "en"].language} {onToggleLanguage && }
); } function Nav({ current, theme, onToggleTheme, lang, onToggleLanguage }) { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const f = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f); }, []); const dict = T[lang || "en"]; const items = [ { label: dict.nav_omlah, href: "omlah.html", id: "omlah" }, { label: dict.nav_studio, href: "studio.html", id: "studio" }, { label: dict.nav_contact, href: "contact.html", id: "contact" }, ]; return ( <> setMenuOpen(false)} items={items} current={current} theme={theme} onToggleTheme={onToggleTheme} lang={lang} onToggleLanguage={onToggleLanguage} /> ); } function Footer() { const { t } = useLang(); return ( ); } // Generic block wrapper with lots of breathing room function Block({ index, label, labelKey, subtitle, children, pad = 160 }) { const { t } = useLang(); const resolvedLabel = labelKey ? t(labelKey) : label; return (
{subtitle && ( {subtitle} )}
{children}
); } // Atmospheric sparkle field — dust motes drifting + scroll-reactive function SparkleField({ intensity = 1, theme = "dark" }) { const canvasRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const dpr = Math.min(window.devicePixelRatio || 1, 2); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let particles = []; let rafId; let lastScrollY = window.scrollY; let scrollKick = 0; function resize() { const w = window.innerWidth; const h = window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + "px"; canvas.style.height = h + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } function seed() { const w = window.innerWidth, h = window.innerHeight; const base = Math.floor((w * h) / 20000); const count = Math.max(40, Math.min(110, base)); particles = Array.from({ length: count }).map(() => ({ x: Math.random() * w, y: Math.random() * h, r: Math.random() * 0.8 + 0.25, vx: (Math.random() - 0.5) * 0.22, vy: Math.random() * 0.18 + 0.06, phase: Math.random() * Math.PI * 2, speed: Math.random() * 0.022 + 0.008, tone: Math.random() < 0.28 ? "accent" : "light", depth: Math.random() * 0.8 + 0.2, // parallax weight })); } function onScroll() { const y = window.scrollY; const delta = y - lastScrollY; lastScrollY = y; // accumulated velocity from scroll (clamped) scrollKick += delta * 0.05; if (scrollKick > 8) scrollKick = 8; if (scrollKick < -8) scrollKick = -8; } function frame() { const w = window.innerWidth, h = window.innerHeight; ctx.clearRect(0, 0, w, h); // decay scroll kick scrollKick *= 0.92; for (const p of particles) { if (!reduced) { p.x += p.vx; p.y += p.vy + scrollKick * p.depth * 0.35; p.phase += p.speed; if (p.y > h + 10) { p.y = -10; p.x = Math.random() * w; } if (p.y < -14) { p.y = h + 10; p.x = Math.random() * w; } if (p.x < -10) p.x = w + 10; if (p.x > w + 10) p.x = -10; } const osc = (Math.sin(p.phase) + 1) / 2; const alpha = (0.25 + osc * 0.55) * intensity; const rgb = theme === "light" ? (p.tone === "accent" ? "120,70,20" : "60,40,20") : (p.tone === "accent" ? "220,155,85" : "255,245,215"); const glowR = p.r * 4.5; const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR); grad.addColorStop(0, `rgba(${rgb},${alpha})`); grad.addColorStop(0.45, `rgba(${rgb},${alpha * 0.3})`); grad.addColorStop(1, `rgba(${rgb},0)`); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = `rgba(${rgb},${Math.min(alpha + 0.25, 0.9)})`; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); } rafId = requestAnimationFrame(frame); } resize(); seed(); frame(); const onResize = () => { resize(); seed(); }; window.addEventListener("resize", onResize); window.addEventListener("scroll", onScroll, { passive: true }); return () => { cancelAnimationFrame(rafId); window.removeEventListener("resize", onResize); window.removeEventListener("scroll", onScroll); }; }, [intensity, theme]); return (