// Slide — The storyboard. Findings become a story.
// The piece between research and the deck: an analyst doesn't hand you
// charts, they build a case. The agent crystallizes a thesis, orders the
// evidence into a narrative, decides what leads vs what's appendix, and
// ties every section back to the research package that proves it.
//
// Left — "Composing the story": the editorial reasoning, three decisions
// that mirror how a senior analyst structures an argument.
// Right — the storyboard itself assembling: thesis bar, section cards
// dropping in narrative order with their source-package dots, then
// one section demoted to the appendix to hit the slide target.
const { useState: sbUse, useEffect: sbEff, useRef: sbRef } = React;
const { pitchC, pitchMono } = window;
// ──── Source-package palette (echoes the research packages from slide 3) ──
const PK = {
assoc: pitchC.sea,
future: pitchC.moss,
share: pitchC.amber,
spend: pitchC.purple,
percep: pitchC.orange,
};
const THESIS =
"Habitat should double down on homeware — it's the one category where awareness already converts, and the one no rival has locked up.";
// Type → left-edge accent (matches the product's section coloring)
const TYPE_COLOR = {
'EXECUTIVE SUMMARY': pitchC.orange,
'FINDINGS': pitchC.moss,
'ANALYSIS': pitchC.sea,
'RECOMMENDATION': pitchC.purple,
};
const SECTIONS = [
{
n: '01', type: 'EXECUTIVE SUMMARY',
title: 'Homeware is the growth lever',
abstract: 'Awareness converts at 22% in homeware vs 9% in furniture. Lead with the category we already win.',
slides: 2, pkgs: [PK.future, PK.percep],
},
{
n: '02', type: 'FINDINGS',
title: 'The conversion gap is the signal',
abstract: 'Homeware future-consideration runs 2.4× furniture — the strongest, most actionable move in the data.',
slides: 2, pkgs: [PK.future, PK.assoc, PK.percep],
},
{
n: '03', type: 'ANALYSIS',
title: 'A concentrated category we can win',
abstract: 'IKEA (20%) and Dunelm (14%) lead, but Habitat\'s 4.2% homeware share is rising where it counts.',
slides: 2, pkgs: [PK.share, PK.assoc],
},
{
n: '04', type: 'RECOMMENDATION',
title: 'Shift the next flight to homeware',
abstract: 'Move 60% of Q1 spend behind homeware consideration; hold furniture as a long-horizon equity play.',
slides: 2, pkgs: [PK.spend, PK.percep],
},
{
n: '05', type: 'ANALYSIS',
title: 'Full category-association detail',
abstract: 'Association across bedding, lighting and decorative — useful reference, tangential to the homeware call.',
slides: 2, pkgs: [PK.assoc], demote: true,
},
];
const MAIN = SECTIONS.filter(s => !s.demote);
const APPENDIX = SECTIONS.filter(s => s.demote);
// Narrative beats that fill as the main sections land
const ARC = ['Set the stakes', 'Quantify', 'Diagnose', 'Recommend'];
function SlideStoryboard() {
// stage: 0 init · 1 thesis · 2 sections drop · 3 trim to appendix · 4 done
const [stage, setStage] = sbUse(0);
sbEff(() => {
const ts = [
setTimeout(() => setStage(1), 350),
setTimeout(() => setStage(2), 1250),
setTimeout(() => setStage(3), 4300),
setTimeout(() => setStage(4), 5400),
];
return () => ts.forEach(clearTimeout);
}, []);
return (
);
}
// ─────────────────────────────────────────────────────────────────────
// LEFT — Composing the story (the analyst's editorial reasoning)
// ─────────────────────────────────────────────────────────────────────
function StoryLogic({ stage }) {
const building = stage >= 1 && stage < 4;
return (
{/* Header card — thinking like an analyst */}
Composing the story
{building && (
{[0, 1, 2].map(i => (
))}
)}
Research is verified. Now the agent writes the thesis first, then earns each section against the package that proves it.
{/* The three editorial decisions */}
= 2}
q="What's the one thing they have to walk away believing?"
answer="Crystallize 7 research packages into a single, defensible spine." />
= 3}
q="What order makes the case land?"
answer={} isArc />
= 4}
q="Main narrative, or appendix?"
answer="Demote what's tangential to the decision. Trim to a 10-slide deck." />
{/* Footer status */}
= 4 ? pitchC.moss + '55' : pitchC.hair}`,
borderRadius: 12,
transition: 'border-color 300ms ease',
}}>
= 4 ? pitchC.moss : pitchC.orange,
animation: stage < 4 ? 'pulse-dot 1.1s ease-in-out infinite' : 'none',
}} />
{stage >= 4 ? 'story ready · thesis-led · 4 sections + appendix' : 'structuring the narrative…'}
“{q}”
{isArc ? answer : (
{answer}
)}
);
}
function ArcRow({ stage }) {
return (
{ARC.map((beat, i) => (
= 2 ? pitchC.navy : pitchC.bgSoft,
color: stage >= 2 ? '#fff' : pitchC.muted2,
border: `1px solid ${stage >= 2 ? pitchC.navy : pitchC.hair}`,
borderRadius: 7,
fontFamily: pitchMono, fontSize: 11.5, fontWeight: 700,
letterSpacing: 0.2, textTransform: 'uppercase',
transition: 'all 360ms ease',
transitionDelay: `${i * 120}ms`,
whiteSpace: 'nowrap',
}}>{beat}
{i < ARC.length - 1 && (
›
)}
))}
);
}
// ─────────────────────────────────────────────────────────────────────
// RIGHT — the storyboard assembling
// ─────────────────────────────────────────────────────────────────────
function StoryboardPanel({ stage }) {
const showAppendix = stage >= 3;
return (
{/* Header strip */}
Storyboard
Habitat — Furniture vs Homeware
{MAIN.length} sections
= 4 ? pitchC.moss : undefined}>{stage >= 4 ? '10 slides' : 'drafting…'}
{/* Thesis */}
= 1 ? 1 : 0,
transform: stage >= 1 ? 'translateY(0)' : 'translateY(8px)',
transition: 'opacity 420ms ease, transform 420ms ease',
flexShrink: 0,
}}>
Thesis
{THESIS}
{/* Main sections */}
{MAIN.map((s, i) => (
= 2} delay={i * 220} />
))}
{/* Appendix divider + demoted section */}
Appendix · moved to hit 10 slides
{APPENDIX.map((s) => (
))}
{/* Number */}
{s.n}
{/* Content */}
{s.title}
{s.type}
{appendix && (
In appendix
)}
{s.abstract}
{s.slides} slides · drawn from
{s.pkgs.map((c, i) => (
))}
{s.pkgs.length} {s.pkgs.length === 1 ? 'package' : 'packages'}
);
}
window.SlideStoryboard = SlideStoryboard;