// ============================================================
// IMPRINT — case study support components (v2 narrative)
// Personas (interactive switcher) + doodles, competitor audit
// w/ logos, decision cards, flow / IA / exploration diagrams.
// Copy source of truth: imprint-brief.md — wording is verbatim.
// Depends on globals from bubbles.jsx and imprint-screens.jsx.
// ============================================================
const { useState: useStateP } = React;
// ---- competitor logo (favicon with letter fallback) ----
function CompLogo({ domain, name, size = 20 }) {
const [failed, setFailed] = useStateP(false);
if (failed) {
return {name.charAt(0).toUpperCase()};
}
return (
setFailed(true)}
/>
);
}
// ---- competitor audit cards (copy verbatim from brief) ----
function CompetitorAudit() {
const audits = [
{
cos: [{ d: 'n8n.io', n: 'n8n' }, { d: 'stack-ai.com', n: 'StackAI' }],
verdict: 'Deep, but engineer-first',
text: n8n and StackAI are genuinely powerful but built entirely for people comfortable with technical concepts. The interface assumes you know what a webhook is and why you would want one.,
},
{
cos: [{ d: 'zapier.com', n: 'Zapier Agents' }],
verdict: 'Same logic, friendlier wrapper',
text: Zapier Agents has simplified the surface reasonably well but the mental model underneath is still conditional logic. If-this-then-that flows with a friendlier wrapper over the top.,
},
{
cos: [{ d: 'lindy.ai', n: 'Lindy AI' }, { d: 'intercom.com', n: 'Intercom Fin' }],
verdict: 'Usable, but shallow',
text: Lindy AI and Intercom Fin come the closest to something a non-technical user could get through but they achieve that by keeping configuration very shallow. You can set a tone and a few basic rules but you cannot really teach the agent how to handle anything nuanced.,
},
];
return (
{audits.map((a, i) => (
{a.cos.map((c, j) => (
{c.n}
))}
{a.verdict}
{a.text}
))}
);
}
// ---- persona doodles ----
function MayaDoodle() {
return (
);
}
function JordanDoodle() {
return (
);
}
// new-to-AI user (third story) — simple anonymous doodle
function NewUserDoodle() {
return (
);
}
// ---- persona data (verbatim from brief) ----
const IMP_PERSONAS = {
maya: {
name: 'Maya',
short: 'CS team lead',
role: 'Customer service team lead · mid-sized SaaS',
quote: "I know exactly how I'd handle every situation. I just can't get that into the tool.",
bio: 'Maya is a customer service team lead at a mid-sized SaaS company. She manages a team of eight, knows the support process inside out and has strong opinions about how difficult conversations should be handled. She was asked to set up the team\u2019s AI agent, spent forty minutes in the tool before giving up and handed it to someone in IT. The agent technically works but does not behave the way she would.',
goals: [
'Get an agent that reflects how her team actually works, not a generic approximation of it',
'Configure and update it herself without depending on engineering support',
'Feel confident the agent will not say something wrong to a customer',
],
frus: [
'Every tool she has tried expects her to think in logic and conditions rather than situations',
'When she does get help setting it up, something always gets lost in translation',
'No way to verify the agent is behaving correctly until something goes wrong',
],
},
jordan: {
name: 'Jordan',
short: 'Operations manager',
role: 'Operations manager · e-commerce brand',
quote: "I need to move fast and I can't be going back to the dev team every time something changes.",
bio: 'Jordan is an operations manager at an e-commerce brand overseeing several customer-facing workflows across different channels. He is comfortable enough with technology to get further than Maya before hitting a wall, but not technical in the engineering sense. He needs to configure agents for multiple scenarios and update them regularly as processes evolve.',
goals: [
'Set up and adjust agents quickly without creating a bottleneck with the technical team',
'Keep configurations up to date as business processes change',
'Have visibility over what each agent is doing and why',
],
frus: [
'Current tools require too much technical knowledge to update without help',
'Changes to workflows take too long to reflect in the agent',
'No easy way to see what the agent actually knows versus what he thinks it knows',
],
},
};
// ---- interactive persona switcher ----
function Personas() {
const [who, setWho] = useStateP('maya');
const d = IMP_PERSONAS[who];
const doodle = who === 'maya' ? : ;
return (
{['maya', 'jordan'].map(k => (
))}
{doodle}
{d.name}
{d.role}
"{d.quote}"
{d.bio}
Goals
{d.goals.map((g, i) =>
{g}
)}
Frustrations
{d.frus.map((f, i) =>
{f}
)}
);
}
// ---- user stories (verbatim, with persona doodles) ----
function UserStories() {
const stories = [
{ doodle: , role: 'a customer service lead', want: 'to describe how my team handles situations in plain language', so: 'the agent behaves the way I actually would.' },
{ doodle: , role: 'an operations manager', want: 'to update my agent\u2019s behaviour quickly as processes change', so: 'I am not dependent on technical support every time.' },
{ doodle: , role: 'a first-time user', want: 'to see how the agent will respond before it goes live', so: 'I can feel confident activating it.' },
];
return (
{stories.map((s, i) => (
{s.doodle}
As{s.role},I want
{s.want},
so that{s.so}
))}
);
}
// ---- decision cards (before → after, plus standalone notes) ----
function DecPair({ from, to }) {
return (
✕ Tried first
{from.t}
{from.d}
→
✓ Final call
{to.t}
{to.d}
);
}
function DecNote({ tag = '▸ Design decision', tone = 'note', title, span = false, children }) {
return (