// Help & Guide — an in-app walkthrough of the Pearler platform. // Visual language matches the rest of the app: cards, stage tokens, Geist type. function Help({ currentUser, setView }) { const T = window.T || ((k) => k); const [openTask, setOpenTask] = React.useState(0); const [activeSection, setActiveSection] = React.useState('start'); const [demoArea, setDemoArea] = React.useState(null); // selected area for the demo drawer const Loc = T('location'); // e.g. Showroom const Locs = T('locations'); // Showrooms const locsLc = T('locs_lc'); // showrooms const repLc = T('rep_lc'); // designer const Reps = T('reps'); // Designers // ---- Table of contents ---- const toc = [ { id: 'start', label: 'Getting started', icon: 'play' }, { id: 'concepts', label: 'How Pearler works', icon: 'spark' }, { id: 'tour', label: 'Tour of the sections', icon: 'dashboard' }, { id: 'stages', label: 'Pipeline stages', icon: 'pipeline' }, { id: 'tasks', label: 'How do I…', icon: 'edit' }, ]; const scrollTo = (id) => { const el = document.getElementById('help-' + id); const canvas = el && el.closest('.canvas'); if (el && canvas) { const top = el.getBoundingClientRect().top - canvas.getBoundingClientRect().top + canvas.scrollTop - 14; canvas.scrollTo({ top, behavior: 'smooth' }); } setActiveSection(id); }; // ---- Quick-start steps ---- const steps = [ { icon: 'home', title: `Pick your ${T('loc_lc')}`, body: `Use the ${locsLc} bar at the top to scope everything you see. Your view stays locked to the ${locsLc} you're assigned to.` }, { icon: 'mail', title: 'Log every enquiry as a contact', body: `Anyone who calls, walks in, or emails becomes a Contact — even before they're a real opportunity. Hit “New contact”.` }, { icon: 'plus', title: 'Turn a contact into a lead', body: `When a contact is ready for a quote, create a Lead (a deal). It gets a quote number and enters the pipeline.` }, { icon: 'pipeline', title: 'Work the pipeline', body: `Drag deals across stages on the Pipeline board as they progress, or update them inline in All Deals.` }, { icon: 'calendar', title: 'Book the next step', body: `Set a follow-up, site visit, or design appointment so nothing slips. They show up on the Calendar.` }, { icon: 'check', title: 'Close it out', body: `Mark a deal Sold when the deposit lands — or Lost, recording the reason so the team learns from it.` }, ]; // ---- Section tour / demo areas (navId links to the sidebar item to spotlight) ---- const areas = [ { navId: 'overview', icon: 'dashboard', name: 'Overview', duration: '1:10', desc: 'Pipeline health, trends, and what needs your attention right now.', bullets: ['Spot pipeline health at a glance', 'See momentum and trends over time', 'Jump straight to deals that need attention'] }, { navId: 'contacts', icon: 'mail', name: 'Contacts', duration: '1:32', desc: `Every person who's ever reached out — their journey, history, and linked deals.`, bullets: ['Find anyone who has enquired', 'See their full journey and history', 'Link a contact to one or more deals'] }, { navId: 'calendar', icon: 'calendar', name: 'Calendar', duration: '0:54', desc: 'Appointments, site visits, and follow-ups — yours and the team’s.', bullets: ['Book calls, site visits and design appointments', 'See the whole team’s schedule', 'Never miss a follow-up'] }, { navId: 'pipeline', icon: 'pipeline', name: 'Pipeline', duration: '1:48', desc: 'A drag-and-drop board. Move deals between stages; click any card for detail.', bullets: ['Drag deals between stages', 'Click a card for the full detail panel', 'Reassign or update without leaving the board'] }, { navId: 'deals', icon: 'table', name: 'All Deals', duration: '1:21', desc: 'The full register — sortable, filterable, with inline edits.', bullets: ['Sort and filter the whole register', 'Edit fields inline', 'Bulk actions and CSV export'] }, { navId: 'aging', icon: 'clock', name: 'Aging & Stuck', duration: '0:47', desc: 'Deals that haven’t moved in a while and need a nudge.', bullets: ['Surface deals that have gone quiet', 'Sort by days since last activity', 'Nudge them before they go cold'] }, { navId: 'reps', icon: 'users', name: 'Sales ' + Reps, duration: '1:05', desc: 'Leaderboard, win rate, and quota progress for the team.', bullets: ['Leaderboard and win rates', 'Track quota progress', 'Compare the team side by side'] }, { navId: 'showrooms', icon: 'home', name: Locs, duration: '1:14', badge: 'Leadership', desc: `Compare performance across every ${T('loc_lc')}.`, bullets: [`Compare every ${T('loc_lc')}`, 'Rank by revenue and conversion', `Drill into a single ${T('loc_lc')}`] }, { navId: 'reports', icon: 'trend', name: 'Reports', duration: '1:39', desc: 'Marketing performance, sales analytics, and activity insights.', bullets: ['Marketing source performance', 'Sales and conversion analytics', 'Activity insights'] }, { navId: 'forecast', icon: 'target', name: 'Forecast', duration: '0:58', desc: 'Weighted pipeline and a three-month projection.', bullets: ['Weighted pipeline value', 'Three-month projection', 'Track against targets'] }, { navId: 'admin', icon: 'sliders', name: 'Admin', duration: '2:02', badge: 'Admin', desc: 'Team & access, targets, terminology, and data import.', bullets: ['Manage logins and roles', 'Set targets and terminology', 'Import spreadsheet data'] }, ]; // ---- Pipeline stages ---- const stages = [ { id: 'possible', label: 'Possible', desc: 'Early interest. A genuine opportunity that hasn’t been qualified or quoted yet.' }, { id: 'in_progress', label: 'In Progress', desc: 'Actively being worked — designing, quoting, presenting, negotiating.' }, { id: 'on_hold', label: 'On Hold', desc: 'Paused. Waiting on the customer, a decision, or timing. Still live.' }, { id: 'sold', label: 'Sold', desc: 'Won. The deposit is in and the job is going ahead.' }, { id: 'lost', label: 'Lost', desc: 'Didn’t proceed. A reason is recorded so the team can learn from it.' }, ]; // ---- How do I… ---- const tasks = [ { q: 'Add a new contact', steps: [ 'Click “New contact” in the top-right of any screen.', `Fill in their name and how they reached you (phone, walk-in, referral…).`, 'Record the outcome — qualified, no sale, or still deciding.', 'Save. The contact is now searchable and ready to become a lead.', ]}, { q: 'Create a lead (deal)', steps: [ 'Click “New lead”, or open a contact and choose “New deal”.', `Pick the ${T('loc_lc')}, the customer, and the product or job.`, 'Set the starting stage and an expected deposit month.', 'Save — Pearler generates a quote number automatically.', ]}, { q: 'Move a deal through the pipeline', steps: [ 'Open the Pipeline board.', 'Drag a deal card from one stage column to the next.', 'Or open any deal and change its stage from the detail panel.', 'Every move is timestamped in the deal’s activity log.', ]}, { q: 'Mark a deal as Lost', steps: [ 'Move the deal to the Lost stage (drag it, or use the detail panel).', 'Pearler asks for a loss reason before it lets the change through.', 'Add an optional note with extra context.', 'The reason feeds the Reports so the team can spot patterns.', ]}, { q: `Reassign a deal to another ${repLc}`, steps: [ 'Open the deal, or select several in All Deals / Pipeline.', 'Choose “Reassign” and pick the new owner.', 'Add a handover note so the history is clear.', `A transfer record is kept on the deal. (Managers & leadership only.)`, ]}, { q: 'Book a follow-up or appointment', steps: [ 'Open a contact or deal and set a reminder, or use the Calendar.', 'Pick the type — call, site visit, design appointment, and so on.', 'Choose a date and time.', 'It appears on the Calendar and in the contact’s history.', ]}, ]; const Pill = ({ children }) => ( {children} ); return (
{/* ---- Sticky contents ---- */} {/* ---- Content ---- */}
{/* Intro hero */}
Platform guide
Welcome{currentUser ? ', ' + currentUser.name.split(' ')[0] : ''} — here’s how Pearler works

Pearler keeps every enquiry, quote, and sale in one place — from the first phone call to a signed deposit. This guide walks through the core ideas, every section in the sidebar, and the everyday tasks you’ll do most. It takes about five minutes.

{/* 1. Getting started */}
{steps.map((s, i) => (
{i + 1}
{s.title}
{s.body}
))}
{/* 2. How it works — concept flow */}
{[ { k: 'Contact', i: 'mail', d: 'A person who reached out' }, { k: 'Lead', i: 'plus', d: 'An opportunity with a quote' }, { k: 'Pipeline', i: 'pipeline', d: 'Worked across stages' }, { k: 'Outcome', i: 'check', d: 'Sold — or Lost, with a reason' }, ].map((node, i, arr) => (
{node.k}
{node.d}
{i < arr.length - 1 && (
)} ))}

A contact is a person. A lead (or deal) is a specific opportunity for that person — it carries a value, a stage, and a quote number. You move leads along the pipeline until they reach an outcome. Everything else in Pearler — the board, the reports, the forecast — is just a different lens on those same deals.

{/* 3. Section tour — clickable */}
{areas.map((t) => { const on = demoArea && demoArea.navId === t.navId; return ( ); })}
{/* 4. Pipeline stages */}
{stages.map((s, i) => (
{s.label} {s.desc}
))}
{/* 5. How do I… */}
{tasks.map((task, i) => { const open = openTask === i; return (
{open && (
    {task.steps.map((st, j) => (
  1. {j + 1} {st}
    2. ))}
)}
); })}
{/* Footer */}
Still stuck? Reach your workspace admin, or email support@pearler.app.
{/* ---- Demo drawer ---- */} {demoArea && ( setDemoArea(null)} onGoTo={setView} /> )}
); } // Slide-in panel with a (placeholder) video demo for one area. function DemoDrawer({ area, onClose, onGoTo }) { const [playing, setPlaying] = React.useState(false); // Spotlight the matching sidebar nav item while this drawer is open. React.useEffect(() => { setPlaying(false); const navs = Array.from(document.querySelectorAll('.nav-item[data-nav-id]')); navs.forEach((n) => n.classList.toggle('spotlight', n.getAttribute('data-nav-id') === area.navId)); return () => navs.forEach((n) => n.classList.remove('spotlight')); }, [area]); // Esc to close React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (
{/* Header */}
{area.name}
Guided demo
{/* Body */}
{/* Spotlight hint */}
Highlighted in the sidebar — that’s where {area.name} lives.
{/* Video placeholder */}
{/* mono label */}
screen demo · {area.name}
{/* play / playing state */} {!playing ? ( ) : (
▶ playing demo… (placeholder — real recording to be added)
)} {/* control bar */}
setPlaying(false)} >
{area.duration}
{/* Description */}

{area.desc}

{/* What you can do */}
What you can do here
{area.bullets.map((b, i) => (
{b}
))}
{/* Footer action */}
); } function Section({ id, icon, title, sub, children }) { return (

{title}

{sub &&

{sub}

} {children}
); } window.Help = Help;