[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69ea02d1d8008191bf4927860aa3fbda","versionInt","title","Fenmar Service Match Quiz","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { CheckCircle2, ArrowRight, ArrowLeft, RotateCcw, Building2, Wallet, Landmark, Home, HeartHandshake } from \"lucide-react\";\n\nconst SERVICES = {\n financial_services: {\n title: \"FenMar Financial Services\",\n subtitle: \"Bookkeeping, accounting, and financial organization\",\n icon: Building2,\n description:\n \"Best for business owners who need clean books, better reporting, and stronger financial systems before making bigger growth moves.\",\n includes: [\"Bookkeeping\", \"Financial reporting\", \"Cash flow visibility\", \"Accounting support\"],\n cta: \"Start with your financial foundation\",\n },\n business_advisory: {\n title: \"FenMar Business Advisory\",\n subtitle: \"Business structure, credit readiness, and becoming bankable\",\n icon: Landmark,\n description:\n \"Best for entrepreneurs who want to strengthen business credibility, improve structure, and prepare for funding opportunities.\",\n includes: [\"Business structuring\", \"Credit-building strategy\", \"Bankability review\", \"Financial systems planning\"],\n cta: \"Build a bankable business\",\n },\n personal_finance: {\n title: \"Personal Finance Education\",\n subtitle: \"Budgeting, money habits, and financial confidence\",\n icon: Wallet,\n description:\n \"Best for individuals who want to improve money management, budgeting, savings habits, and personal financial stability.\",\n includes: [\"Budget support\", \"Savings strategy\", \"Financial education\", \"Money management basics\"],\n cta: \"Strengthen your personal finances\",\n },\n capital_investments: {\n title: \"Capital & Investment Readiness\",\n subtitle: \"Growth strategy, capital readiness, and long-term opportunities\",\n icon: Home,\n description:\n \"Best for those thinking bigger—accessing capital, preparing for investment, or exploring long-term real estate and asset-building pathways.\",\n includes: [\"Capital readiness\", \"Growth planning\", \"Investment pathway conversations\", \"Long-term wealth strategy\"],\n cta: \"Prepare for capital growth\",\n },\n community_support: {\n title: \"Community Resource Pathway\",\n subtitle: \"Education, housing-related support, and mission-aligned connections\",\n icon: HeartHandshake,\n description:\n \"Best for people seeking supportive resources, financial literacy, or community-centered pathways tied to housing and stability.\",\n includes: [\"Financial literacy\", \"Community resource referrals\", \"Housing support direction\", \"Mission-aligned guidance\"],\n cta: \"Explore supportive next steps\",\n },\n};\n\nconst QUESTIONS = [\n {\n id: \"identity\",\n title: \"Which best describes you right now?\",\n subtitle: \"Choose the option that feels closest to your current situation.\",\n options: [\n { label: \"I run a small business\", scores: { financial_services: 2, business_advisory: 2 } },\n { label: \"I’m starting a business\", scores: { business_advisory: 3, financial_services: 1 } },\n { label: \"I’m focused on my personal finances\", scores: { personal_finance: 3 } },\n { label: \"I want to grow into investing or real estate\", scores: { capital_investments: 3, business_advisory: 1 } },\n { label: \"I’m looking for support/resources first\", scores: { community_support: 3, personal_finance: 1 } },\n ],\n },\n {\n id: \"goal\",\n title: \"What is your biggest goal right now?\",\n subtitle: \"Pick your top priority.\",\n options: [\n { label: \"Get financially organized\", scores: { financial_services: 3, personal_finance: 1 } },\n { label: \"Build business credit and become bankable\", scores: { business_advisory: 4 } },\n { label: \"Improve budgeting and money habits\", scores: { personal_finance: 4 } },\n { label: \"Prepare for funding or investments\", scores: { capital_investments: 4, business_advisory: 1 } },\n { label: \"Find education and community-based support\", scores: { community_support: 4 } },\n ],\n },\n {\n id: \"systems\",\n title: \"How strong are your financial systems today?\",\n subtitle: \"Be honest—this helps us recommend the right starting point.\",\n options: [\n { label: \"I have no real system yet\", scores: { financial_services: 3, personal_finance: 2, business_advisory: 1 } },\n { label: \"I have some systems, but they need work\", scores: { financial_services: 2, business_advisory: 2 } },\n { label: \"My basics are in place, but I need growth strategy\", scores: { business_advisory: 2, capital_investments: 2 } },\n { label: \"I’m organized and ready for bigger moves\", scores: { capital_investments: 3, business_advisory: 2 } },\n ],\n },\n {\n id: \"funding\",\n title: \"How soon do you want to pursue funding, credit, or investment opportunities?\",\n subtitle: \"Choose the timeline that fits best.\",\n options: [\n { label: \"Not right now—I need stability first\", scores: { financial_services: 2, personal_finance: 2, community_support: 1 } },\n { label: \"Within the next 6–12 months\", scores: { business_advisory: 3, financial_services: 1 } },\n { label: \"As soon as possible\", scores: { business_advisory: 2, capital_investments: 3 } },\n { label: \"I’m mostly focused on education for now\", scores: { personal_finance: 2, community_support: 2 } },\n ],\n },\n {\n id: \"interest\",\n title: \"Which area interests you most beyond your immediate need?\",\n subtitle: \"This helps us show a helpful secondary recommendation too.\",\n options: [\n { label: \"Better bookkeeping and reporting\", scores: { financial_services: 2 } },\n { label: \"Credit, structure, and business strategy\", scores: { business_advisory: 2 } },\n { label: \"Budgeting and personal wealth habits\", scores: { personal_finance: 2 } },\n { label: \"Real estate and long-term investing\", scores: { capital_investments: 2 } },\n { label: \"Community impact and support programs\", scores: { community_support: 2 } },\n ],\n },\n];\n\nfunction scoreAnswers(answers) {\n const totals = {\n financial_services: 0,\n business_advisory: 0,\n personal_finance: 0,\n capital_investments: 0,\n community_support: 0,\n };\n\n for (const question of QUESTIONS) {\n const selectedIndex = answers[question.id];\n if (selectedIndex === undefined) continue;\n const option = question.options[selectedIndex];\n Object.entries(option.scores).forEach(([key, value]) => {\n totals[key] += value;\n });\n }\n\n return totals;\n}\n\nfunction getRankedResults(answers) {\n const totals = scoreAnswers(answers);\n return Object.entries(totals)\n .sort((a, b) => b[1] - a[1])\n .map(([key, score]) => ({ key, score, ...SERVICES[key] }));\n}\n\nexport default function FenMarServiceMatchQuiz() {\n const [step, setStep] = useState(0);\n const [answers, setAnswers] = useState({});\n const [lead, setLead] = useState({ name: \"\", email: \"\", business: \"\" });\n const [submitted, setSubmitted] = useState(false);\n\n const currentQuestion = QUESTIONS[step];\n const progress = ((step + 1) / (QUESTIONS.length + 1)) * 100;\n const isQuestionStep = step < QUESTIONS.length;\n const ranked = useMemo(() => getRankedResults(answers), [answers]);\n const primary = ranked[0];\n const secondary = ranked[1];\n\n const handleSelect = (questionId, optionIndex) => {\n setAnswers((prev) => ({ ...prev, [questionId]: optionIndex }));\n };\n\n const next = () => {\n if (isQuestionStep && answers[currentQuestion.id] === undefined) return;\n setStep((s) => Math.min(s + 1, QUESTIONS.length));\n };\n\n const back = () => setStep((s) => Math.max(s - 1, 0));\n\n const reset = () => {\n setStep(0);\n setAnswers({});\n setLead({ name: \"\", email: \"\", business: \"\" });\n setSubmitted(false);\n };\n\n const submitLead = () => {\n setSubmitted(true);\n };\n\n return (\n

\n \n \n \n

\n \n Interactive Service Match Quiz\n \n \n Find the right financial pathway for your next move.\n \n \n Answer a few quick questions to discover which service best fits your goals, stage, and financial readiness.\n \n

\n Progress\n {Math.round(progress)}%\n

\n \n

\n \n\n \n \n {isQuestionStep ? (\n \n

\n Question {step + 1} of {QUESTIONS.length}\n

{currentQuestion.title}

{currentQuestion.subtitle}

\n\n

\n {currentQuestion.options.map((option, idx) => {\n const selected = answers[currentQuestion.id] === idx;\n return (\n handleSelect(currentQuestion.id, idx)}\n className={`text-left rounded-2xl border p-4 md:p-5 transition-all ${\n selected\n ? \"border-white bg-white text-neutral-950 shadow-xl\"\n : \"border-white/10 bg-white/5 hover:bg-white/10 text-white\"\n }`}\n >\n

\n {option.label}\n {selected && }\n

\n \n );\n })}\n

\n\n

\n \n \n

\n \n ) : (\n \n

Your Match Results

\n Your best fit is {primary?.title}.\n

\n Based on your answers, this is the strongest starting point for your current goals. We also included a secondary recommendation so you can see what may support your next stage of growth.\n

\n\n

\n {[primary, secondary].filter(Boolean).map((item, index) => {\n const Icon = item.icon;\n return (\n

\n \n

{index === 0 ? \"Primary Match\" : \"Secondary Match\"}

{item.title}

{item.description}

\n {item.includes.map((inc) => (\n \n {inc}\n \n ))}\n

{item.cta}

\n );\n })}\n

\n\n

Get your personalized next step

Collect lead details here, or connect this section to your CRM or booking flow.

\n Lead Capture Ready\n

\n\n

\n Name\n setLead((prev) => ({ ...prev, name: e.target.value }))} className=\"rounded-2xl bg-white/5 border-white/10 text-white\" placeholder=\"Your name\" />\n

\n Email\n setLead((prev) => ({ ...prev, email: e.target.value }))} className=\"rounded-2xl bg-white/5 border-white/10 text-white\" placeholder=\"you@example.com\" />\n

\n Business / Focus\n setLead((prev) => ({ ...prev, business: e.target.value }))} className=\"rounded-2xl bg-white/5 border-white/10 text-white\" placeholder=\"Business name or goal\" />\n

\n\n

\n \n \n

\n\n {submitted && (\n

\n Your match has been saved. Next step: connect this action to your CRM, form, calendar, or email automation.\n

\n )}\n

\n \n )}\n \n \n \n \n\n \n \n \n How this quiz helps\n \n Designed for events, landing pages, and discovery calls.\n \n \n \n

Interactive and easy to use

Each answer builds toward a tailored recommendation instead of a generic result.

Built for multiple pathways

Matches users to bookkeeping, business advisory, personal finance education, capital readiness, or community support.

Lead capture ready

Swap the placeholder save action with your form, CRM, or booking automation.

Easy to customize

Update the questions, branding, services, and CTA to fit your event, website, or intake flow.

\n \n \n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","1671202871000650574","traceTime",1776959241599]