// ============================================================
// GUIDED REVIEW, Corporate demo
// A reviewer lands as the FreshNest corporate marketing lead, gets a
// briefing on who they are and what they're walking into, then is guided
// through the product in a deliberate order — corporate surfaces first,
// then stepping into a local operator's view. The tour is a sequence of
// pop-up walkthrough windows; it collects no feedback in place. At the end
// it opens the single "Give Feedback" panel. Not part of the shipping product.
// ============================================================
(function () {
const { useState, useEffect } = React;
const F = { orange: '#f28020', orangeDeep: '#b35f18', orange100: '#fdf0e4', orange50: '#fef9f4', navy: '#002857', star: '#d6b84d', teal: '#0d8a8a', green: '#2e9e6b' };
const G_KEY = 'la_guide_v1';
// Pull real, internally-consistent FreshNest numbers so the briefing
// matches what the reviewer will actually see in the app.
const DATA = (typeof window !== 'undefined' && window.LOCALACT_DATA) || {};
const PB = DATA.playbookPortfolio || {};
const PLAYBOOK = DATA.playbook || {};
const TOTAL_LOC = PB.totalLocations || 700;
const ENROLLED_LOC = PB.enrolledLocations || 664;
const ADOPTION = Math.round((ENROLLED_LOC / TOTAL_LOC) * 100); // ~95
const AT_RISK = (() => {
const seg = (PB.tierPlaybook || []).find(t => /aggressive/i.test(t.tier || ''));
return seg ? seg.count : 14;
})();
const PB_VERSION = PLAYBOOK.version || 'v3.2';
const NET = DATA.network || {};
const ADOPTION_GOAL = NET.enrollmentGoalPct || 75;
const BASELINE_PER_LOC = NET.baselinePerLoc || 100;
// ---- The route. Corporate story in order: Command Center → Results →
// Leads → Locations → Marketing Stack → Billing → Network Playbook →
// mirror a local operator (density → reviews → strategy → budget) →
// Support & governance → Corporate settings → Enterprise Reporting.
// `feature` is a stable id (React key + mirror logic).
const STEPS = [
{ feature: 'hq', page: 'hq', scope: 'corporate', title: 'Local and national performance',
guide: 'Your corporate and franchisee paid LOCAL programs roll up here to give you high-level spend, performance, and enrollment rates across active services. Explore the Listings & Review analysis and Offer & Label tabs.' },
{ feature: 'results', page: 'results', scope: 'corporate', title: 'Results',
guide: 'Measure what matters here. Spend, leads, ROAS, by channel across the network, with trends. Explore top and bottom performing locations, key insights, and regional breakdowns here. Dive deep into specific channels as needed.' },
{ feature: 'leads', page: 'leads', scope: 'corporate', title: 'Leads',
guide: 'Call tracking analysis and lead details are highlighted here. By default, this report will show if you are using our call tracking provider and/or your locations are active on Local Service Ads. CRM integrations are possible in future phases depending on the CRM you are using and the health of that data.' },
{ feature: 'listings', page: 'listings', scope: 'corporate', title: 'Locations',
guide: 'The source of truth for every location. Try drilling into one to see its listings and presence.' },
{ feature: 'stack', page: 'services', scope: 'corporate', title: 'Command Center',
guide: 'Every active national or local service across your brand. The marketing stack highlights what you are doing with us today.' },
{ feature: 'invoice', page: 'invoice', scope: 'corporate', title: 'Billing',
guide: 'National invoicing and franchisee billing health, consolidated in one place. Here, you will manage your corporate payment method for National or Corporate paid programs.' },
{ feature: 'bench', page: 'bench', scope: 'corporate', title: 'Network Playbook',
guide: 'The decision system your network runs on. The playbook highlights the current channels and strategies available to your locations. Suggestions are discussed and edits are made with your Location3 Strategy Director.' },
{ feature: 'users', page: 'local-users', scope: 'corporate', title: 'View as a local user',
guide: 'Corporate can step into any operator’s exact view, from this directory or the “Viewing as” selector in the sidebar. Next will take you into one.' },
{ feature: 'density', page: 'home', scope: 'local', mirror: true, title: 'Basic view vs Advanced view',
guide: 'You are seeing what the local operator sees. They can flip between a calm owner summary and full detail advanced. Try both with the toggle in the top bar.', density: true },
{ feature: 'reviews', page: 'reviews', scope: 'local', mirror: true, title: 'Reviews',
guide: 'The local reputation view. Ratings by platform, response tracking, coaching, and the ability to respond to reviews. Auto-mode with corporate guidelines available in future updates.' },
{ feature: 'initiatives', page: 'services', scope: 'local', mirror: true, title: 'Strategy',
guide: 'The operator’s active marketing strategy and channels. This is closely related to the budget tab but provides budget in-line with performance and shows strategic initiatives the local operator is not enrolled in as well.' },
{ feature: 'budget', page: 'budget', scope: 'local', mirror: true, title: 'Budget',
guide: 'Where the local operator manages spend. Set one monthly budget and let LOCALACT split it across channels automatically, or tune each channel by hand, with pacing and spend-versus-performance in view.' },
{ feature: 'support', page: 'support', scope: 'corporate', title: 'Support & governance',
guide: 'Here you will see Location3 Advisor performance, franchisees with high conversation volume, and common themes based on what franchisees are discussing with our advisors.' },
{ feature: 'settings', page: 'settings', scope: 'corporate', title: 'Corporate settings',
guide: 'The governance layer, where corporate sets the rules. Assign roles to your corporate team members, upload your brand standards, review the phases of the playbook, and see the changes corporate users are making across the system.' },
{ feature: 'ent-rep', page: 'enterprise-reporting', scope: 'corporate', title: 'Enterprise Reporting',
guide: 'National programs are measured here. Brands without Enterprise/National spend will not see an Enterprise Reporting tab.' },
];
// ---- Persisted guide state ----
function loadG() {
try { const raw = localStorage.getItem(G_KEY); if (raw) { return JSON.parse(raw); } } catch (e) {}
return { reviewer: null, step: 0, started: false, skipped: false, done: false };
}
function saveG(g) { try { localStorage.setItem(G_KEY, JSON.stringify(g)); } catch (e) {} }
function setGuideActive(on) {
if (window.__LA_GUIDE_ACTIVE !== on) {
window.__LA_GUIDE_ACTIVE = on;
window.dispatchEvent(new CustomEvent('guide-active', { detail: on }));
}
}
const ev = (name, detail) => window.dispatchEvent(new CustomEvent(name, { detail }));
// Put the app in the right state for a step, then navigate to it.
function applyStep(step, ctx) {
if (step.mirror && !ctx.mirroredUser) ev('mirror-user');
if (!step.mirror && ctx.mirroredUser) ev('exit-mirror');
if (!step.mirror && ctx.persona !== 'hq') ev('set-persona', 'hq');
ev('go-page', step.page);
}
// ============================================================
// Welcome / briefing gate — you are the FreshNest corporate lead
// ============================================================
function Welcome({ onStart, onSkip }) {
const stats = [
{ v: TOTAL_LOC.toLocaleString(), l: 'Locations supported' },
{ v: ADOPTION + '%', l: 'LOCALACT adoption' },
{ v: ADOPTION_GOAL + '%', l: 'Adoption goal' },
{ v: '$' + BASELINE_PER_LOC + '/mo', l: 'Corporate funding / location' },
];
return (
You oversee local marketing for a {TOTAL_LOC.toLocaleString()}-location home-services brand. Right now {ADOPTION}% of your network is live on LOCALACT against a {ADOPTION_GOAL}% adoption goal, with corporate funding ${BASELINE_PER_LOC}/mo of local marketing at every location.
{/* Stat strip */}
{stats.map((s, i) => (
{s.v}
{s.l}
))}
{/* Flow explanation */}
Over {STEPS.length} stops, we’ll walk you through the corporate experience first: local and national performance, results, your locations, the Command Center, and the network playbook. Then you’ll step into a single franchisee’s view to see the local operator experience. You can wander off the path anytime and pick the tour back up. At the end, take a break and share your feedback.
);
}
// ============================================================
// Guide panel — a single centered walkthrough pop-up with a blurred
// backdrop. Clicking the backdrop (or "Explore") dismisses it so the
// reviewer can interact with the screen; a small pill brings it back.
// ============================================================
function GuidePanel({ g, setG, page, persona, mirroredUser, density }) {
const [introOpen, setIntroOpen] = useState(true);
const [listOpen, setListOpen] = useState(false);
const i = Math.min(g.step, STEPS.length - 1);
const step = STEPS[i];
const ctx = { persona, mirroredUser };
// Reopen the centered pop-up whenever the step changes.
useEffect(() => { setIntroOpen(true); setListOpen(false); }, [i]);
function go(n) {
const clamped = Math.max(0, Math.min(n, STEPS.length - 1));
setG(prev => ({ ...prev, step: clamped }));
applyStep(STEPS[clamped], ctx);
setListOpen(false);
setIntroOpen(true);
}
function next() {
if (step.feature === 'users' && !mirroredUser) { ev('mirror-user'); }
if (i >= STEPS.length - 1) {
setG(prev => ({ ...prev, done: true }));
if (mirroredUser) ev('exit-mirror');
ev('open-feedback');
window.toast && window.toast('That’s the full tour', 'Take a break, then click Give Feedback to share your thoughts.', 'ok');
return;
}
go(i + 1);
}
function explore() {
setIntroOpen(false);
window.dispatchEvent(new CustomEvent('gr-intro-dismissed', { detail: { feature: step.feature } }));
}
// Dismissed → exploring. Bottom-right control: reopen the guide, or
// advance to the next stop from here.
if (!introOpen) {
const nextLabel = i >= STEPS.length - 1 ? 'Finish → give feedback'
: step.feature === 'users' && !mirroredUser ? 'View as a local user →'
: 'Next stop →';
return (
);
}
const side = i % 2 === 0 ? 'left' : 'right';
const pose = ['laptop', 'think', 'map'][i % 3];
// Centered pop-up over a partial glass-blur backdrop.
return (
{/* Stat strip */}
