// PERSONALIZED DISCOVERY — 3-step wizard (industry → size → pain)
// → uses window.claude.complete to generate a custom agent roadmap on demand.
// Replaces the static team-based Discovery.
const INDUSTRIES = [
{ id: "saas", label: "B2B SaaS" },
{ id: "fintech", label: "Fintech / Financial" },
{ id: "ecom", label: "E-commerce / Retail" },
{ id: "services", label: "Professional services" },
{ id: "manufact", label: "Manufacturing / Industrial" },
{ id: "healthcare", label: "Healthcare / Life-sci" },
{ id: "media", label: "Media / Marketplaces" },
{ id: "other", label: "Other" },
];
const SIZES = [
{ id: "1-50", label: "1–50", detail: "scrappy team" },
{ id: "51-200", label: "51–200", detail: "growth stage" },
{ id: "201-1000", label: "201–1,000", detail: "scale-up" },
{ id: "1000+", label: "1,000+", detail: "enterprise" },
];
const PAINS = [
{ id: "outbound", label: "Not enough outbound capacity", icon: "→" },
{ id: "inbound", label: "Inbound tickets overwhelming the team", icon: "↘" },
{ id: "renewals", label: "Renewals slipping or running late", icon: "↻" },
{ id: "ops", label: "Manual back-office grind", icon: "≡" },
{ id: "data", label: "Data scattered across systems", icon: "◇" },
{ id: "csat", label: "Customer experience inconsistent", icon: "★" },
];
function Discovery() {
// Restore from URL hash if present (?map=industry|size|pain)
const initial = (() => {
try {
const h = new URLSearchParams(window.location.hash.replace(/^#/, ''));
const m = h.get('map');
if (!m) return null;
const [i, s, p] = m.split('|');
return { i, s, p };
} catch (_) { return null; }
})();
const [step, setStep] = useState(initial ? 2 : 0);
const [industry, setIndustry] = useState(initial ? initial.i : null);
const [size, setSize] = useState(initial ? initial.s : null);
const [pain, setPain] = useState(initial ? initial.p : null);
const [busy, setBusy] = useState(false);
const [error, setError] = useState(null);
const [result, setResult] = useState(null);
const [copied, setCopied] = useState(false);
const reset = () => {
setStep(0); setIndustry(null); setSize(null); setPain(null); setResult(null); setError(null);
if (window.history && window.history.replaceState) {
window.history.replaceState({}, '', window.location.pathname + window.location.search);
}
};
function persistToUrl() {
if (!industry || !size || !pain) return;
const v = `${industry}|${size}|${pain}`;
const newHash = `#map=${encodeURIComponent(v)}`;
if (window.history && window.history.replaceState) {
window.history.replaceState({}, '', window.location.pathname + window.location.search + newHash);
}
}
function copyShareLink() {
persistToUrl();
const url = window.location.href.split('#')[0] + `#map=${encodeURIComponent(`${industry}|${size}|${pain}`)}`;
navigator.clipboard?.writeText(url).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2400);
});
}
function openInIris() {
const indLabel = INDUSTRIES.find(x => x.id === industry)?.label || industry;
const sizeLabel = SIZES.find(x => x.id === size)?.label || size;
const painLabel = PAINS.find(x => x.id === pain)?.label || pain;
window.__sgvIrisContext = {
preface: `The visitor just ran a Discovery: industry=${indLabel}, team size=${sizeLabel}, primary pain=${painLabel}. They have a generated agent map on screen. Ask them which agent they want to talk through first.`,
};
if (window.openIris) window.openIris();
}
async function generate() {
setBusy(true);
setError(null);
setResult(null);
try {
const indLabel = INDUSTRIES.find(x => x.id === industry)?.label || industry;
const sizeLabel = SIZES.find(x => x.id === size)?.label || size;
const painLabel = PAINS.find(x => x.id === pain)?.label || pain;
const prompt = `You are Iris, the discovery agent for SupportGenie (a Salesforce + AI agent studio).
A visitor just told you:
- Industry: ${indLabel}
- Team size: ${sizeLabel} people
- Primary pain: ${painLabel}
Generate a custom Salesforce AI agent roadmap. Return ONLY valid JSON with this exact shape (no markdown, no preamble, no trailing commas):
{
"summary": "One sentence — what we'd build for them.",
"agents": [
{
"name": "Short product-style name (3–4 words)",
"kind": "Voice agent | Agentforce topic | Internal copilot | Scheduled agent",
"what": "1-2 sentence description of what it does",
"value": "Quantified impact like '↑ 23% renewal close' or '↓ 4 hrs / CSM / week'",
"weeks_to_ship": 2 or 3
}
],
"estimate": {
"build_low": 42000,
"build_high": 95000,
"care_per_month": 9500,
"rationale": "1 sentence on why this range"
},
"first_step": "1 sentence — what they should do this week to unblock"
}
Make exactly 3 agents. Be specific to the industry and pain. Use realistic Salesforce terminology (opportunities, cases, accounts, contacts). Quantified value must be plausible — no 10x claims. Pricing tiers: Build = $42K/agent flat, Care = $9.5K/mo for up to 4 agents. Multi-agent builds: $42K + $35K per additional agent. Just return the JSON.`;
const out = await window.claude.complete(prompt);
const text = (out || "").trim();
// Try strict parse; fall back to extracting the first { ... } block.
let parsed;
try {
parsed = JSON.parse(text);
} catch (_) {
const m = text.match(/\{[\s\S]*\}/);
if (m) parsed = JSON.parse(m[0]);
else throw new Error("Could not parse the response.");
}
setResult(parsed);
setStep(3);
persistToUrl();
} catch (e) {
console.error(e);
setError("Something went sideways generating your map. Try again — or just book a 20-minute call and we'll do it live.");
} finally {
setBusy(false);
}
}
return (
§ 03
AGENT DISCOVERY · LIVE
Three questions. Your custom agent map.
Iris generates the roadmap on the spot — agents we'd actually build, ranked by impact,
with a real cost range. Powered by the same brain that runs our front desk.
{/* Stepper */}
{step < 3 && (
{["Industry", "Team size", "Pain"].map((label, i) => {
const done = (i === 0 && industry) || (i === 1 && size) || (i === 2 && pain);
const current = i === step;
return (
);
})}