export default function AgencyPricingCalculator() { const pricing = { entry: 2000, core: 3000, growth: 4500, premium: 6500, videoLite: 1000, videoFull: 3000, ghlBuildout: 1500, landingPage: 1250, funnelBuildout: 1250, additionalLocation: 250, abTesting: 300, funnelOptimization: 400, croTesting: 300, strategyCall: 100, perspective: 50, staticAds: 150, adScripting: 150, guarantee: 500, }; const includedByTier = { entry: { strategyCall: true, perspective: true, }, core: { strategyCall: true, perspective: true, }, growth: { strategyCall: true, perspective: true, guarantee: true, videoLite: true, }, premium: { strategyCall: true, perspective: true, guarantee: true, videoFull: true, }, }; const tierLabels = { entry: "Entry", core: "Core", growth: "Growth", premium: "Premium", }; const tierDescriptions = { entry: "PPC on one platform with reporting for budget-conscious accounts.", core: "PPC + automations for businesses that need stronger follow-up.", growth: "Best for clients who need PPC, follow-up systems, and ongoing creative support.", premium: "Full growth package with monthly creative production and highest support level.", }; const { useMemo, useState } = React; const [tier, setTier] = useState("growth"); const [platforms, setPlatforms] = useState(2); const [locations, setLocations] = useState(1); const [includeGhlBuildout, setIncludeGhlBuildout] = useState(true); const [includeLandingPage, setIncludeLandingPage] = useState(false); const [includeFunnelBuildout, setIncludeFunnelBuildout] = useState(false); const [includeABTesting, setIncludeABTesting] = useState(false); const [includeFunnelOptimization, setIncludeFunnelOptimization] = useState(false); const [includeCroTesting, setIncludeCroTesting] = useState(false); const [includeAdditionalLocation, setIncludeAdditionalLocation] = useState(false); const [includeStaticAds, setIncludeStaticAds] = useState(false); const [includeAdScripting, setIncludeAdScripting] = useState(true); const [videoMode, setVideoMode] = useState("included"); const monthlyBase = pricing[tier]; const includes = includedByTier[tier]; const lineItems = useMemo(() => { const items = []; items.push({ label: `${tierLabels[tier]} package`, type: "MRR", amount: monthlyBase, }); if (platforms > 1) { const additionalPlatforms = platforms - 1; let platformRate = 0; if (tier === "entry") platformRate = 750; if (tier === "core") platformRate = 500; if (tier === "growth") platformRate = 350; if (tier === "premium") platformRate = 250; items.push({ label: `Additional ad platforms (${additionalPlatforms})`, type: "MRR", amount: additionalPlatforms * platformRate, }); } if (includeAdditionalLocation) { items.push({ label: `Additional location management (${locations})`, type: "MRR", amount: locations * pricing.additionalLocation, }); } if (includeABTesting) { items.push({ label: "Landing page A/B testing", type: "MRR", amount: pricing.abTesting, }); } if (includeFunnelOptimization) { items.push({ label: "Funnel optimization", type: "MRR", amount: pricing.funnelOptimization, }); } if (includeCroTesting) { items.push({ label: "CRO testing", type: "MRR", amount: pricing.croTesting, }); } if (includeStaticAds) { items.push({ label: "Static ad set (3 ads)", type: "MRR", amount: pricing.staticAds, }); } if (includeAdScripting && !includes.adScripting) { items.push({ label: "Ad scripting", type: "One-time", amount: pricing.adScripting, }); } if (includeGhlBuildout) { items.push({ label: "GHL buildout", type: "One-time", amount: pricing.ghlBuildout, }); } if (includeLandingPage) { items.push({ label: "Landing page", type: "One-time", amount: pricing.landingPage, }); } if (includeFunnelBuildout) { items.push({ label: "Funnel buildout", type: "One-time", amount: pricing.funnelBuildout, }); } if (!includes.videoLite && !includes.videoFull) { if (videoMode === "lite") { items.push({ label: "Video ad refresh every 6 months", type: "MRR", amount: pricing.videoLite, }); } if (videoMode === "full") { items.push({ label: "Monthly video ad refresh", type: "MRR", amount: pricing.videoFull, }); } } return items; }, [ tier, monthlyBase, platforms, locations, includeAdditionalLocation, includeABTesting, includeFunnelOptimization, includeCroTesting, includeStaticAds, includeAdScripting, includeGhlBuildout, includeLandingPage, includeFunnelBuildout, videoMode, ]); const monthlyTotal = lineItems .filter((item) => item.type === "MRR") .reduce((sum, item) => sum + item.amount, 0); const oneTimeTotal = lineItems .filter((item) => item.type === "One-time") .reduce((sum, item) => sum + item.amount, 0); const firstMonthTotal = monthlyTotal + oneTimeTotal; const currency = (n) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(n); function Toggle({ label, checked, onChange, disabled = false }) { return ( !disabled && onChange(!checked)} className={`w-full rounded-2xl border px-4 py-3 text-left transition ${ disabled ? "cursor-not-allowed border-white/5 bg-white/5 text-white/35" : checked ? "border-white/25 bg-white/10 text-white shadow-lg" : "border-white/10 bg-white/5 text-white/75 hover:bg-white/8" }`} >

{label} {checked ? "Included" : "No"}

); } return ( ); }