// Section View — opens when a profile is picked. Cinematic "show page". // Hero banner + rows. Each row renders by its `kind`. const NOTIFY_QUIPS = [ "No new notifications. The bell just wanted screen time.", "Inbox zero. Even the spam ghosted.", "Crickets. Maybe send Batsal a message instead?", "Nothing to see here. The bell is doing breathing exercises.", "All quiet on the western front. And eastern. And the bell.", "Zero unread. The bell is meditating.", "Nope. The bell is on its lunch break.", "Empty. The bell just likes the attention, honestly.", "Nada. Try again after coffee.", "Notification void. Batsal is probably designing something.", "Silence. The bell is reviewing its life choices.", ]; const MANGA_NOTIFY_QUIPS = [ "新着なし... 静かなコマです.", "通知ゼロ. 静寂のシーン.", "鈴は瞑想中. 何もなし.", "コマは空白. 鈴も休憩中.", "新着ゼロ. 鈴は注目が欲しいだけ.", ]; function SectionView({ section, onBack, onPickAnother }) { const { name, tagline, role, color, colorHex, accentInk, rating, runtime, synopsis, badges, avatarSeed, rows } = section; const stageRef = React.useRef(null); const rowsWrapRef = React.useRef(null); const endRef = React.useRef(null); const toastTimerRef = React.useRef(null); const toastCloseTimerRef = React.useRef(null); const toastRef = React.useRef(null); const lastQuipIdxRef = React.useRef(-1); const [menuOpen, setMenuOpen] = React.useState(false); const [toast, setToast] = React.useState(null); const [toastClosing, setToastClosing] = React.useState(false); const [notificationsSeen, setNotificationsSeen] = React.useState(false); const [listed, setListed] = React.useState(() => { try { const stored = JSON.parse(localStorage.getItem('bns-my-list') || '[]'); return Array.isArray(stored) && stored.includes(section.id); } catch { return false; } }); // Lock scroll on body while modal open React.useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; if (toastTimerRef.current) clearTimeout(toastTimerRef.current); if (toastCloseTimerRef.current) clearTimeout(toastCloseTimerRef.current); }; }, []); // Dismiss toast when clicking anywhere outside it (but not on the bell — // re-clicking the bell should replace the toast, not double-fire). React.useEffect(() => { if (!toast || toastClosing) return; const onDown = (e) => { if (toastRef.current && toastRef.current.contains(e.target)) return; if (e.target.closest && e.target.closest('[data-bell-trigger]')) return; dismissToast(); }; // Defer one tick so the click that *opened* the toast doesn't immediately close it. const attach = setTimeout(() => document.addEventListener('mousedown', onDown), 0); return () => { clearTimeout(attach); document.removeEventListener('mousedown', onDown); }; }, [toast, toastClosing]); React.useEffect(() => { try { const stored = JSON.parse(localStorage.getItem('bns-my-list') || '[]'); setListed(Array.isArray(stored) && stored.includes(section.id)); } catch { setListed(false); } }, [section.id]); React.useEffect(() => { window.bnsMarkVisited?.(section.id); const root = stageRef.current; const end = endRef.current; if (!root || !end || !('IntersectionObserver' in window)) return; const observer = new IntersectionObserver((entries) => { if (!entries.some((entry) => entry.isIntersecting && entry.intersectionRatio >= 0.7)) return; window.bnsCompleteViewing?.(section.id); observer.disconnect(); }, { root, threshold: [0.7] }); observer.observe(end); return () => observer.disconnect(); }, [section.id]); const playEpisode = () => { const stage = document.querySelector('.sv-stage'); const firstRow = rowsWrapRef.current?.querySelector('.row'); if (!stage || !firstRow) return; const top = firstRow.getBoundingClientRect().top + stage.scrollTop - 80; stage.scrollTo({ top, behavior: 'smooth' }); firstRow.classList.remove('is-flash'); // force reflow before re-adding class so animation replays void firstRow.offsetWidth; firstRow.classList.add('is-flash'); setTimeout(() => firstRow.classList.remove('is-flash'), 1400); }; const pickQuip = (pool) => { if (!pool || pool.length === 0) return ""; if (pool.length === 1) return pool[0]; let idx = Math.floor(Math.random() * pool.length); if (idx === lastQuipIdxRef.current) idx = (idx + 1) % pool.length; lastQuipIdxRef.current = idx; return pool[idx]; }; const dismissToast = () => { if (toastTimerRef.current) { clearTimeout(toastTimerRef.current); toastTimerRef.current = null; } setToastClosing(true); if (toastCloseTimerRef.current) clearTimeout(toastCloseTimerRef.current); toastCloseTimerRef.current = setTimeout(() => { setToast(null); setToastClosing(false); toastCloseTimerRef.current = null; }, 240); }; const showToast = (kind) => { const isManga = document.body.classList.contains('theme-manga'); let message; if (kind === 'notify') { message = pickQuip(isManga ? MANGA_NOTIFY_QUIPS : NOTIFY_QUIPS); } else { message = isManga ? "リスト入り! 次の章でまた会おう." : listed ? "Already on My List. The algorithm is nodding approvingly." : "Added to My List. The algorithm is now wearing sunglasses."; } // Cancel any in-flight close so the new toast appears cleanly if (toastCloseTimerRef.current) { clearTimeout(toastCloseTimerRef.current); toastCloseTimerRef.current = null; } setToastClosing(false); setToast({ kind, message, manga: isManga }); if (toastTimerRef.current) clearTimeout(toastTimerRef.current); toastTimerRef.current = setTimeout(() => dismissToast(), 4200); }; const handleMyList = () => { try { const stored = JSON.parse(localStorage.getItem('bns-my-list') || '[]'); const current = Array.isArray(stored) ? stored : []; const next = current.includes(section.id) ? current : [...current, section.id]; localStorage.setItem('bns-my-list', JSON.stringify(next)); } catch {} setListed(true); showToast('list'); }; const handleNotify = () => { setNotificationsSeen(true); showToast('notify'); }; return (
{/* nav bar */}
/ {name}
{toast && (
{toast.kind === 'list' ? : }
{toast.message}
)} {/* HERO */}
{/* big floating avatar */}
{/* sparkle decoration */}
✦ ★ ✦ ✺
{role}

{tagline}

★ 9.4 {rating} {runtime} {badges.map(b => {b})}

{synopsis}

{/* ROWS */}
{rows.map((row, i) => ( ))} {/* footer card: pick another */}
Done with this episode?
); } // ─── Row component dispatches by kind ─────────────────────────────────── function Row({ row, section, index }) { const k = row.kind || "cards"; const itemCount = (row.items || []).length; const rowMeta = row.meta || `${itemCount} item${itemCount !== 1 ? "s" : ""}`; return (

{row.title}

{rowMeta}
{k === "hero" && } {k === "cards" && } {k === "brands" && } {k === "stats" && } {k === "skillChips" && } {k === "timeline" && } {k === "channels" && } {k === "form" && } {k === "downloads" && } {k === "resumeHi" && } {k === "logoWall" && } {k === "projects" && } {k === "currently" && }
); } // ─── HeroRow: a single big "featured" card ────────────────────────────── function HeroRow({ row, section }) { const it = row.items[0]; return (

{it.title}

{it.sub}

{it.stat &&
{it.stat}
}
); } // ─── CardsRow: horizontal scrolling cards ─────────────────────────────── function CardsRow({ row, section }) { const trackRef = React.useRef(null); const [open, setOpen] = React.useState(null); const scroll = (dir) => { const t = trackRef.current; if (!t) return; t.scrollBy({ left: dir * 360, behavior: 'smooth' }); }; const iconFor = (key) => ({ mountain: IconMountain, rocket: IconRocket, code: IconCode, bolt: IconBolt, sparkle: IconSparkle, star: IconStar, heart: IconHeart, })[key]; return (
{row.items.map((it, i) => { const Ico = iconFor(it.icon); const expandable = !!it.details; return ( ); })}
); } // ─── BrandCreditsRow: worked-with poster carousel ─────────────────────── function BrandCreditsRow({ row, section }) { const trackRef = React.useRef(null); const scroll = (dir) => { const t = trackRef.current; if (!t) return; t.scrollBy({ left: dir * 380, behavior: 'smooth' }); }; return (
{row.items.map((it, i) => (
{it.industry}
{it.confidential &&
Confidential
}
{it.name}

{it.work}

{it.result}
{(it.badges || []).map((b) => {b})}
))}
); } // ─── StatsRow: animated bars ──────────────────────────────────────────── function StatsRow({ row, section }) { return (
{row.items.map((it,i)=>(
{it.title}
))}
); } // ─── ChipsRow: skill chips ────────────────────────────────────────────── function ChipsRow({ row, section }) { const [open, setOpen] = React.useState(null); return (
{row.items.map((it,i)=>( ))}
); } // ─── TimelineRow: chronological cards ─────────────────────────────────── function TimelineRow({ row, section }) { const [open, setOpen] = React.useState(null); return (
{row.items.map((it,i)=>{ const roles = it.roles && it.roles.length ? it.roles : null; const isOpen = open === i; return (
); })}
); } // ─── ChannelsRow: contact methods ─────────────────────────────────────── function ChannelsRow({ row, section }) { const [copied, setCopied] = React.useState(null); const handle = (it) => { if (it.action === 'Copy') { navigator.clipboard?.writeText(it.sub); setCopied(it.title); setTimeout(()=>setCopied(null), 1400); } }; const iconFor = (key) => ({ at: IconAt, calendar: IconCalendar, linkedin: IconLinkedIn, instagram: IconInstagram, phone: IconPhone, github: IconGitHub, })[key] || IconSparkle; return (
{row.items.map((it,i)=>{ const Ico = iconFor(it.icon); const content = ( <>
{it.title}
{it.sub}
{copied === it.title ? "Copied ✓" : it.action}
); if (it.href) { const external = /^https?:\/\//.test(it.href); return ( {content} ); } return ( ); })}
); } // ─── FormRow: inline message form ─────────────────────────────────────── // Themed custom dropdown — keeps a hidden for native form submission function ThemedSelect({ name, options, placeholder, required }) { const [value, setValue] = React.useState(""); const [open, setOpen] = React.useState(false); const [activeIdx, setActiveIdx] = React.useState(-1); const wrapRef = React.useRef(null); const btnRef = React.useRef(null); React.useEffect(() => { if (!open) return; const onDown = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); btnRef.current?.focus(); } if (e.key === 'ArrowDown') { e.preventDefault(); setActiveIdx(i => Math.min(options.length - 1, i + 1)); } if (e.key === 'ArrowUp') { e.preventDefault(); setActiveIdx(i => Math.max(0, i - 1)); } if (e.key === 'Enter' && activeIdx >= 0) { e.preventDefault(); setValue(options[activeIdx]); setOpen(false); btnRef.current?.focus(); } }; document.addEventListener('mousedown', onDown); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); }; }, [open, activeIdx, options]); const choose = (opt) => { setValue(opt); setOpen(false); btnRef.current?.focus(); }; return (
{open && (
    {options.map((opt, i) => (
    • ))}
)}
); } function FormRow({ row, section }) { const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(''); const to = row.to || 'batsalr0@gmail.com'; const submitForm = async (e) => { e.preventDefault(); const formEl = e.currentTarget; setError(''); setSending(true); // Netlify Forms: POST url-encoded to the site root with form-name=contact const body = new URLSearchParams(new FormData(formEl)).toString(); try { const res = await fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body, }); if (res.ok) { setSent(true); window.bnsTrackEvent?.('contact_form_submit', { section: section.id }); formEl.reset(); } else { setError('Could not send right now. You can email me directly below.'); } } catch (err) { setError('Network blocked the send. You can email me directly below.'); } finally { setSending(false); } }; const vibeOptions = [ "Ads / Performance Marketing", "Website / Landing Page Build", "UI/UX Design", "Brand Identity", "Just saying hi", ]; return (