// How To — an in-app playbook for the full workflow: industry news → intake →
// research → match → contacts → draft. Mirrors the shareable guide. Contacts
// carries a manual-entry warning because the AI is unreliable at finding people.
const HOWTO_FLOW = ['Industry news', 'Intake', 'Research', 'Match', 'Contacts', 'Draft'];
const HOWTO_STEPS = [
{
n: '0', key: 'intake', accent: true,
title: 'Review industry news',
where: 'News Intake → “Industry news” tab · also on the Dashboard',
sub: 'Background intelligence, not an action list. Nothing to approve here — it sharpens your judgement for the decisions below.',
dos: [
'Skim the trade-press and rightsholder headlines for market moves: new sponsors, brands entering a category, budgets opening up.',
'Note anything that might matter when you triage brands in the next step.',
'Some items surface prospect leads, but no decision is required on this tab.',
],
},
{
n: '1', key: 'intake',
title: 'News intake — decide who enters the pipeline',
where: 'News Intake (Step 01)',
callout: { title: 'You must run the scan to add brands', text: 'New brands do NOT arrive on their own. In News Intake, click the “Re-run scan” button (top right) to fetch the latest brands for review — this is how brands enter the app for now.' },
sub: 'A NEW badge means a brand arrived in the latest scan. Brands scoring 60+ with high confidence are already auto-researched; the rest wait for your call under “Maybe relevant”.',
dos: [
'Click Re-run scan (top right) to fetch the latest brands — this is how new brands come in for now.',
'Open the Maybe relevant tab — these need your decision.',
'Read each brand’s headline, signals and score. Click Source to check the article.',
'Pick a Tier (1 / 2 / 3), then act: Research (into the pipeline), KIV (monitor only), Reject (stop), or Duplicate.',
'Researching auto-assigns the owner: Tier 1 → Rene, everything else → Aaron.',
'To act on many at once, tick the rows and use the bulk bar (Assign / Research / KIV / Reject).',
],
tip: 'Add brand lets you paste an article URL — the app reads it, extracts the brand and starts research for you — or enter one by hand. “How scoring works” explains the 0–100 score. Re-run scan warns if you scanned within 24h because it uses quota.',
},
{
n: '2', key: 'research',
title: 'Research — build the profile',
where: 'Brand Research (Step 02)',
sub: 'The AI writes a sourced profile so you can judge fit fast.',
dos: [
'Open a brand from the active list (filter by tier, category, assignee or country).',
'Read the profile: description, HQ, sponsorship history, detected signals, citations, and the recommended IPSEM properties.',
'If a brand is marked Needs review, the AI found little — check it yourself and add what you know.',
'Use Research now or Re-research to (re)generate the profile.',
'Not interested? Click Reject or KIV right here — you no longer have to go back to News Intake. Reject and KIV are also in the top bar on every screen.',
'The Notes panel sits under the brand header on Research, Match, Contacts and Draft. It is ONE list per brand — a note written at any stage is the same note read at every other stage.',
'Type @ to tag Aaron, Rene or Stuart — they get a notification in the bell at the top right and on the Notifications page.',
'The team sits in three time zones, so note times read as "2 hours ago" — that means the same thing to everyone. Hover any timestamp to see the exact moment in your zone and in the other two. Set your own zone under your avatar in the sidebar.',
'Tick "Next action" on a note to make it an open action. Everything the team has written shows up on the Notes & Actions page, where you tick items off — actions get marked done, plain comments get marked reviewed — so what is left is what still needs you.',
'Tier, status, relationship, outreach stage, assignee and the Reject / Duplicate / KIV actions sit in one strip under the brand header on every stage. You no longer have to go back to News Intake to change them.',
'When the profile looks right, move on to Match.',
],
},
{
n: '3', key: 'match',
title: 'Property match — pick the fit',
where: 'Property Match (Step 03)',
sub: 'The system suggests; you decide. Nothing is ever pre-selected for you.',
dos: [
'Choose the mode: Specific (a named IPSEM property), Generic (pitch IPSEM as the rightsholder, no single property), or No match (stops the flow).',
'Review the AI’s suggestions. They are ordered first and badged “AI suggestion”, but none of them is selected until you click Select.',
'Where a property has disciplines (FEI → Dressage, Show Jumping, Eventing; ISU → Short Track, Ice Dancing, Synchronised Skating), tag the ones actually in play on the card.',
'Open Geographic markets on any card for the full market list, the broadcast footprint and the market-by-market briefing.',
'Nothing suitable in the portfolio? Click Add one-off property to create it here — set its engagement type to One-off or Short term — and it is selected immediately.',
'Add a note explaining WHY you picked (or rejected) a property. @tag a colleague if you need their view.',
'Click Confirm selection — this moves the brand forward to Contacts. A "Next brand" button then takes you straight to the next one awaiting a decision.',
'Changed your mind? Click Remove property, then Remove approved property. The brand goes back to awaiting a decision — you no longer have to pick something else just to save.',
'Your tier / category / assignee / country filters now stay set when you leave the page and come back.',
'Then get the rightsholder’s approval: Properties → the property → Brands assigned lists every brand you confirmed for it. Export approval sheet gives you an Excel file to send them, they pick Approved / Approved with conditions / Needs discussion / Not approved, and Import their answers reads it straight back in.',
'Before you export, check the “Why it fits” column. The research engine only writes a reason for properties it suggested itself, so anything you picked by hand starts blank — click the row and write one.',
],
},
{
n: '4', key: 'contacts',
title: 'Contacts — enter them yourself',
where: 'Contacts (Step 04)',
callout: { title: 'Manual entry required', text: 'The AI is NOT reliable at finding real decision-makers or correct email addresses. Treat anything “Discover contacts” returns as a hint only — verify everything before you use it.' },
dos: [
'Click Add contact and enter it by hand: name, job title, email, LinkedIn.',
'Find the right person on LinkedIn or the company website — aim for the decision-maker (marketing, partnerships or brand lead).',
'Verify the email. Guessed / pattern addresses are flagged — confirm them before sending.',
'Keep only real, checked contacts. Delete anything the AI added that you can’t stand behind.',
'Once you have a solid contact, go to Draft.',
],
},
{
n: '5', key: 'draft',
title: 'Draft — write, then send from your inbox',
where: 'Draft Review (Step 05)',
sub: 'The draft is a partnership proposal pitching the brand as the property’s Official Partner.',
dos: [
'Click Generate draft. Review and edit the subject and body; use Regenerate for a fresh version.',
'Copy the Subject, Body, or the whole email — or click Send to open your email client addressed to the picked contacts and mark the brand as contacted.',
'The app does NOT send for you; you send from your own inbox. Do-not-contact brands have sending disabled.',
'A property that refused a brand cannot be pitched on: the draft leaves it out, and if every matched property refused, generating and marking as contacted are both blocked. Change the answer under Properties → Brands assigned to unblock it.',
'After sending, track replies with the Outreach status on the row or the Pipeline board.',
],
},
];
// Who does what, stage by stage. Splits each stage into the part the app
// handles, the part only a person can, and the gate that moves it on.
const HOWTO_STAGE_ROWS = [
{
n: '0', accent: true, key: 'intake', title: 'Industry news',
app: 'Pulls trade-press and rightsholder headlines into a feed.',
you: 'Skim for market moves. Nothing to approve.',
gate: 'Never — it is context that sharpens the next decision.',
},
{
n: '1', key: 'intake', title: 'News intake',
app: 'On Re-run scan, finds brands, scores them 0–100, and auto-researches 60+ with high confidence.',
you: 'Work the Maybe relevant tab: set a Tier, then Research / KIV / Reject / Duplicate.',
gate: 'You click Research — the owner auto-assigns (Tier 1 → Rene, else Aaron).',
},
{
n: '2', key: 'research', title: 'Brand research',
app: 'Writes description, HQ, sponsorship history, signals, citations and suggested IPSEM properties.',
you: 'Read it, fix what is wrong, add what you know. Note anything the team needs and @tag them.',
gate: 'The profile is good enough to judge fit. Then open Match.',
},
{
n: '3', key: 'match', title: 'Property match',
app: 'Ranks suggestions, badges them AI suggestion, and holds the market and broadcast briefing per property.',
you: 'Pick Specific / Generic / No match, tag the disciplines in play, write why.',
gate: 'You click Confirm selection. Nothing is ever pre-selected for you.',
},
{
n: '4', key: 'contacts', title: 'Contacts',
app: 'Flags guessed or pattern email addresses. Its contact finding is not reliable.',
you: 'Add the real decision-maker by hand from LinkedIn or the company site. Verify the email. Delete anything you cannot stand behind.',
gate: 'One verified contact exists.',
warn: true,
},
{
n: '5', key: 'draft', title: 'Draft review',
app: "Writes a proposal pitching the brand as the property's Official Partner. Regenerate for a fresh version.",
you: 'Edit the subject and body, then copy or click Send to open your mail client.',
gate: 'You send it from your own inbox — the app never sends for you.',
},
];
// ─── Flow map ─────────────────────────────────────────────────────────────
// The whole pipeline as one diagram: who acts on the left, the stage down the
// middle, and every way a brand can leave the flow on the right. Inline SVG so
// it themes from the CSS tokens and scales without a chart library.
function HowToFlowMap() {
return (
);
}
function HowToStageTable({ onNavigate }) {
const numStyle = (accent) => ({
width: 24, height: 24, borderRadius: 7,
background: accent ? 'var(--accent)' : 'var(--ink)', color: '#fff',
fontFamily: 'var(--f-mono)', fontSize: 12, fontWeight: 700,
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
});
return (
Scanning is manual for now. To pull in new brands, open News Intake and click Re-run scan (top right). The automatic 09:30 GMT+8 daily scan isn’t running yet. Start your day on the Dashboard.
{/* The whole flow as one diagram, then the same stages split into what the
app handles versus what only a person can. */}
The whole flow on one screen
Read down the middle. The left tag says who acts. The right side is every way a brand can leave the flow.
Going backwards. On Match, Remove property puts
a brand back to awaiting a decision — you no longer have to pick something else just to save. Reject, KIV and Duplicate
sit on the control strip at every stage, so a brand can leave the flow at any point, not only at Intake.
Who does what, stage by stage
The same six stages, split into the part the app handles and the part only you can.
{/* Steps */}
{HOWTO_STEPS.map((s, i) => (
{s.n}
{s.title}
{s.callout ? (
{s.callout.title}
{s.callout.text}
) : null}
{s.sub ?
{s.sub}
: null}
{s.dos.map((d, j) => (
{j + 1}{d}
))}
{s.tip ? (
Handy{s.tip}
) : null}
))}
{/* Views to keep open */}
Views to keep open
onNavigate && onNavigate('dashboard')}>Dashboard — your daily home: follow-ups due, today’s picks, and the pipeline breakdown.