// Shared case-study shell — RC4 master architecture. // Renders only the sections a project supplies; missing sections surface an // honest "in development" notice rather than invented content. function PackageCarousel({ items }) { const [index, setIndex] = React.useState(0); const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const [dir, setDir] = React.useState('next'); const [playing, setPlaying] = React.useState(false); const videoRef = React.useRef(null); const show = (i, d) => { setDir(d); setPlaying(false); setIndex(((i % items.length) + items.length) % items.length); }; const showPrev = () => show(index - 1, 'previous'); const showNext = () => show(index + 1, 'next'); const onKeyDown = (e) => { if (e.key === 'ArrowLeft') { e.preventDefault(); showPrev(); } if (e.key === 'ArrowRight') { e.preventDefault(); showNext(); } }; const item = items[index]; const progressPercent = ((index + 1) / items.length) * 100; const togglePlay = () => { const v = videoRef.current; if (!v) return; if (v.paused) v.play(); else v.pause(); }; return (
{ if (item.type === 'video') e.preventDefault(); }} >
{item.type === 'video' ? (
) : ( {item.caption )} {item.caption ?
{item.caption}
: null}
{String(index + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
); } function CaseStudyShell({ config, onBack, onOpenProject }) { const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const [progress, setProgress] = React.useState(0); React.useEffect(() => { const onScroll = () => { const h = document.documentElement.scrollHeight - window.innerHeight; setProgress(h > 0 ? Math.min(1, Math.max(0, window.scrollY / h)) : 0); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const has = (v) => Array.isArray(v) ? v.length > 0 : Boolean(v); const incomplete = !has(config.summary) || !has(config.process); return (
{/* 1 — Hero */}

{config.eyebrow || 'Case Study'}

{config.projectName}

{config.statement}

{config.facts.map((f) => (
{f.label}
{f.value}
))}
{/* Project snapshot — documented facts only */} {has(config.snapshot) && (

Project snapshot

{config.snapshot.map((s) => (
{s.label} {s.value}
))}
)} {/* Visual asset gallery + production video — unified carousel, matches Operation: Legacy Unlocked */} {(has(config.gallery) || has(config.videos)) && (

Portfolio package

{config.galleryHeading || config.videosHeading || 'Full asset package.'}

({ type: 'image', src: g.src, caption: g.caption || g.alt || '' })), ...(config.videos || []).map((v) => ({ type: 'video', src: v.src, caption: v.caption || '' })), ]} />
)} {/* 2 — Executive summary */} {has(config.summary) && (

Executive summary

{config.summaryHeading || 'What this work accomplished.'}

{config.summary.map((p, i) =>

{p}

)}
)} {/* 3 — Business challenge */} {has(config.challenge) && (

Business challenge

{config.challengeHeading || 'Why this work deserved investment.'}

{config.challenge.map((p, i) =>

{p}

)}
)} {/* 4 — Opportunity */} {has(config.objectives) && (

Opportunity

{config.opportunityHeading || 'Why this was worth solving.'}

What became possible

    {config.objectives.map((o) =>
  • {o}
    • )}
)} {/* 5 — My role */} {has(config.roles) && (

My role

{config.roleHeading || 'Where I owned the outcome.'}

{config.roles.map((r) => (
{r.area}
{r.detail}
))}
)} {/* 6 — Process */} {has(config.process) && (

{config.processKicker || 'Process'}

{config.processHeading || 'How the work took shape.'}

{config.process.map((s, i) => (
{String(i + 1).padStart(2, '0')}

{s.stage}

{s.detail}

))}
)} {/* 6 — Strategic design decisions */} {has(config.decisions) && (

Strategic design decisions

{config.decisionsHeading || 'The choices that shaped the outcome.'}

{config.decisions.map((d) => (

{d.question}

{d.rationale}

))}
)} {/* AI-assisted production */} {has(config.aiTools) && (

AI-assisted production

{config.aiToolsHeading || 'Where AI accelerated the work — and where it didn\'t.'}

{config.aiToolsIntro ?

{config.aiToolsIntro}

: null}
{config.aiTools.map((t) => (

{t.tool}

{t.detail}

))}
)} {/* 8 — Deliverables */} {has(config.deliverables) && (

Deliverables

{config.deliverablesHeading || 'What shipped.'}

{config.deliverables.map((d) => {d})}
)} {/* 9 — Evidence available */} {has(config.outcomes) && (

Evidence available

{config.outcomesHeading || 'What this work demonstrates.'}

{config.outcomes.map((o) => (
{o.label}

{o.detail}

))}
{config.outcomesNote ?

{config.outcomesNote}

: null}
)} {/* 10 — Reflection */} {has(config.reflection) && (

Reflection

{config.reflectionHeading || 'What this taught me.'}

{config.reflection.map((p, i) =>

{p}

)} {has(config.ifAgain) && (

If I were doing this again

    {config.ifAgain.map((a, i) =>
  1. {a}
    2. )}
)}
)} {/* Honest placeholder when documentation is still in progress */} {incomplete && (

Documentation in progress

This case study is currently being expanded with additional process documentation, visuals, and project outcomes.

)} {/* 11 — Related projects */} {has(config.related) && ( )}
); } window.CaseStudyShellExports = { CaseStudyShell };