@afncdelacru/brady-chat 0.4.0 → 0.4.1

package/src/lib/BranchProfitabilityCalculator.tsx

@@ -1,615 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X, CheckCircle } from 'lucide-react';
-import { CalculatorFollowUp } from './CalculatorFollowUp';
-import { ProgressiveContactForm } from './ProgressiveContactForm';
-import { useRecruitingFlow } from '../../../../src/contexts/RecruitingFlowContext';
-
-interface BranchProfitabilityCalculatorProps {
-  isOpen: boolean;
-  onClose: () => void;
-  isPersonalized?: boolean;
-  defaultVolume?: number;
-}
-
-export function BranchProfitabilityCalculator({ 
-  isOpen, 
-  onClose,
-  isPersonalized = false,
-  defaultVolume = 100000000
-}: BranchProfitabilityCalculatorProps) {
-  const { trackCalculatorOpen, trackCalculatorAdjustment, trackAction } = useRecruitingFlow();
-  
-  // State for inputs
-  const [annualVolume, setAnnualVolume] = useState(defaultVolume);
-  const [branchMargin, setBranchMargin] = useState(300); // bps
-  const [loCompensation, setLOCompensation] = useState(100); // bps
-  const [lenderCredits, setLenderCredits] = useState(50); // bps
-  const [monthlyOpEx, setMonthlyOpEx] = useState(40000); // dollars per month
-  const [opexReductionEnabled, setOpexReductionEnabled] = useState(true);
-  
-  // Tracking state
-  const [hasInteracted, setHasInteracted] = useState(false);
-  const [clickedPrimaryCTA, setClickedPrimaryCTA] = useState(false);
-  const [showFollowUp, setShowFollowUp] = useState(false);
-  const [showForm, setShowForm] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const [startTime, setStartTime] = useState<number>(0);
-  const [volumeAdjusted, setVolumeAdjusted] = useState(false);
-  const [marginAdjusted, setMarginAdjusted] = useState(false);
-  const hasTrackedOpen = useRef(false);
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  // Track calculator open
-  useEffect(() => {
-    if (isOpen && !hasTrackedOpen.current) {
-      trackCalculatorOpen('BM');
-      setStartTime(Date.now());
-      hasTrackedOpen.current = true;
-    } else if (!isOpen) {
-      hasTrackedOpen.current = false;
-    }
-  }, [isOpen, trackCalculatorOpen]);
-
-  // Helper function to get volume slider step
-  const getVolumeStep = (value: number) => {
-    if (value <= 60000000) return 5000000; // $5M increments up to $60M
-    return 10000000; // $10M increments above $60M
-  };
-
-  // Helper function to get OpEx slider step
-  const getOpExStep = (value: number) => {
-    if (value <= 20000) return 1000; // $1k increments up to $20k
-    return 5000; // $5k increments above $20k
-  };
-
-  // Derived calculations - MONTHLY
-  const monthlyVolume = annualVolume / 12;
-  const grossProfitBps = branchMargin - loCompensation - lenderCredits;
-
-  // Current scenario calculations (MONTHLY)
-  const currentRevenue = (monthlyVolume * branchMargin) / 10000;
-  const currentLOComp = (monthlyVolume * loCompensation) / 10000;
-  const currentLenderCredits = (monthlyVolume * lenderCredits) / 10000;
-  const currentGrossProfit = (monthlyVolume * grossProfitBps) / 10000;
-  const currentOpEx = monthlyOpEx;
-  const currentBranchProfit = currentGrossProfit - currentOpEx;
-
-  // AFN scenario calculations (MONTHLY)
-  const volumeIncrease = 0.17; // 17% midpoint of 12-22% range
-  const afnMonthlyVolume = monthlyVolume * (1 + volumeIncrease);
-  const afnRevenue = (afnMonthlyVolume * branchMargin) / 10000;
-  const afnLOComp = (afnMonthlyVolume * loCompensation) / 10000;
-  const afnLenderCredits = (afnMonthlyVolume * lenderCredits) / 10000;
-  const afnGrossProfit = (afnMonthlyVolume * grossProfitBps) / 10000;
-  
-  // Operating expenses with optional reduction
-  const opexReductionFactor = opexReductionEnabled ? 0.75 : 1.0;
-  const afnOpEx = monthlyOpEx * opexReductionFactor;
-  const afnBranchProfit = afnGrossProfit - afnOpEx;
-  
-  const profitDelta = afnBranchProfit - currentBranchProfit;
-
-  // Format currency
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(value);
-  };
-
-  // Format volume
-  const formatVolume = (value: number) => {
-    if (value >= 1000000) {
-      return `$${(value / 1000000).toFixed(0)}M`;
-    }
-    return formatCurrency(value);
-  };
-
-  // Handle volume slider change with variable steps
-  const handleVolumeChange = (rawValue: number) => {
-    const step = getVolumeStep(rawValue);
-    const value = Math.round(rawValue / step) * step;
-    setAnnualVolume(value);
-    setHasInteracted(true);
-    setVolumeAdjusted(true);
-    trackCalculatorAdjustment();
-  };
-
-  // Handle OpEx slider change with variable steps
-  const handleOpExChange = (rawValue: number) => {
-    const step = getOpExStep(rawValue);
-    const value = Math.round(rawValue / step) * step;
-    setMonthlyOpEx(value);
-    setHasInteracted(true);
-    setMarginAdjusted(true);
-    trackCalculatorAdjustment();
-  };
-
-  // Handle margin changes
-  const handleMarginChange = (value: number, field: 'margin' | 'loComp' | 'credits') => {
-    if (field === 'margin') setBranchMargin(value);
-    if (field === 'loComp') setLOCompensation(value);
-    if (field === 'credits') setLenderCredits(value);
-    setHasInteracted(true);
-    setMarginAdjusted(true);
-    trackCalculatorAdjustment();
-  };
-
-  // Handle primary CTA click
-  const handlePrimaryCTA = () => {
-    setClickedPrimaryCTA(true);
-    setHasInteracted(true);
-    setShowForm(true);
-    trackAction('primary_cta_click', 'high');
-  };
-
-  // Handle close without clicking primary CTA
-  const handleClose = () => {
-    if (!showForm) {
-      onClose();
-      // If user interacted but didn't click primary CTA, show follow-up
-      if (hasInteracted && !clickedPrimaryCTA) {
-        setTimeout(() => setShowFollowUp(true), 300);
-        trackAction('close_without_primary_cta');
-      }
-    } else {
-      // Go back from form to calculator
-      setShowForm(false);
-    }
-  };
-
-  // Handle form submission
-  const handleFormSubmit = (data: any) => {
-    console.log('Form submitted:', data);
-    setSubmitted(true);
-    
-    // Tag submission with calculator data
-    const submissionData = {
-      calculatorType: 'Branch P&L',
-      volumeAdjusted,
-      marginAdjusted,
-      opexReductionEnabled,
-      afnProfitDelta: profitDelta,
-      ...data
-    };
-    console.log('Tagged submission:', submissionData);
-  };
-
-  // Reset state when modal closes
-  useEffect(() => {
-    if (!isOpen) {
-      setTimeout(() => {
-        setHasInteracted(false);
-        setClickedPrimaryCTA(false);
-        setShowForm(false);
-        setSubmitted(false);
-      }, 300);
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <>
-      {/* Overlay */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
-            onClick={handleClose}
-          />
-        )}
-      </AnimatePresence>
-
-      {/* Modal */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            ref={modalRef}
-            initial={{ opacity: 0, scale: 0.95, y: 20 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 20 }}
-            transition={{ duration: 0.2 }}
-            role="dialog"
-            aria-modal="true"
-            className="fixed inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-[900px] md:max-h-[90vh] bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl z-50 flex flex-col overflow-hidden"
-          >
-            {/* Header */}
-            <div className="flex items-start justify-between p-6 border-b border-zinc-200 dark:border-zinc-800">
-              <div className="flex-1">
-                <h2 className="text-2xl text-zinc-900 dark:text-white mb-2">
-                  Model Your Branch Profitability
-                </h2>
-                <p className="text-sm text-zinc-600 dark:text-zinc-400">
-                  Adjust the assumptions below to see how branch economics change with higher production and lower operating expenses.
-                </p>
-              </div>
-              <button
-                onClick={handleClose}
-                className="ml-4 p-2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition-colors"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto">
-              <div className="p-6 space-y-8">
-                {submitted ? (
-                  // Success State
-                  <div className="space-y-6 text-center py-8">
-                    <div className="flex justify-center">
-                      <CheckCircle className="w-16 h-16 text-green-500" />
-                    </div>
-                    <div className="space-y-2">
-                      <h3 className="text-2xl text-zinc-900 dark:text-white">
-                        Thanks — We'll Be In Touch
-                      </h3>
-                      <p className="text-base text-zinc-600 dark:text-zinc-400">
-                        We'll follow up shortly to build a realistic pro forma P&L using AFN rates and support structure.
-                      </p>
-                      <p className="text-sm text-zinc-500 dark:text-zinc-500">
-                        In the meantime, feel free to keep exploring.
-                      </p>
-                    </div>
-                    <button
-                      onClick={onClose}
-                      className="w-full px-6 py-3 bg-gradient-to-r from-[#4399D1] to-[#2B7AB8] hover:from-[#2B7AB8] hover:to-[#4399D1] text-white rounded-lg transition-all duration-300 shadow-lg"
-                    >
-                      Continue Exploring
-                    </button>
-                  </div>
-                ) : showForm ? (
-                  // Form State
-                  <div className="space-y-4">
-                    <p className="text-base text-zinc-600 dark:text-zinc-400">
-                      We'll help you build a realistic pro forma P&L using AFN rates, support structure, and your branch goals.
-                    </p>
-                    <ProgressiveContactForm
-                      onSubmit={handleFormSubmit}
-                      onCancel={() => setShowForm(false)}
-                      primaryCTA="Review My Branch Scenario"
-                      secondaryCTA="Go Back"
-                      context='BM'
-                    />
-                  </div>
-                ) : (
-                  // Calculator State
-                  <>
-                    {/* Section 1: Baseline Branch Inputs */}
-                    <div className="space-y-6">
-                      <h3 className="text-lg text-zinc-900 dark:text-white">
-                        {isPersonalized ? 'Your Current Branch Assumptions' : 'Current Branch Assumptions'}
-                      </h3>
-
-                      {/* Two-column grid for inputs */}
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        {/* Annual Volume */}
-                        <div className="space-y-3">
-                          <div className="flex items-baseline justify-between">
-                            <label className="text-sm text-zinc-700 dark:text-zinc-300">
-                              Annual Funded Volume
-                            </label>
-                            <span className="text-base text-zinc-900 dark:text-white font-medium">
-                              {formatVolume(annualVolume)}
-                            </span>
-                          </div>
-                          <input
-                            type="range"
-                            min={20000000}
-                            max={300000000}
-                            step={5000000}
-                            value={annualVolume}
-                            onChange={(e) => handleVolumeChange(Number(e.target.value))}
-                            className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer slider-thumb"
-                          />
-                          <div className="flex justify-between text-xs text-zinc-500">
-                            <span>$20M</span>
-                            <span>$300M</span>
-                          </div>
-                        </div>
-
-                        {/* Branch Margin */}
-                        <div className="space-y-3">
-                          <div className="flex items-baseline justify-between">
-                            <label className="text-sm text-zinc-700 dark:text-zinc-300">
-                              Avg Branch Margin (bps)
-                            </label>
-                            <span className="text-base text-zinc-900 dark:text-white font-medium">
-                              {branchMargin} bps
-                            </span>
-                          </div>
-                          <input
-                            type="range"
-                            min={200}
-                            max={500}
-                            step={10}
-                            value={branchMargin}
-                            onChange={(e) => handleMarginChange(Number(e.target.value), 'margin')}
-                            className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer slider-thumb"
-                          />
-                          <p className="text-xs text-zinc-500">
-                            Blended margin across conv. and govt loans
-                          </p>
-                        </div>
-
-                        {/* LO Compensation */}
-                        <div className="space-y-3">
-                          <div className="flex items-baseline justify-between">
-                            <label className="text-sm text-zinc-700 dark:text-zinc-300">
-                              LO Commission (bps)
-                            </label>
-                            <span className="text-base text-zinc-900 dark:text-white font-medium">
-                              {loCompensation} bps
-                            </span>
-                          </div>
-                          <input
-                            type="range"
-                            min={50}
-                            max={200}
-                            step={5}
-                            value={loCompensation}
-                            onChange={(e) => handleMarginChange(Number(e.target.value), 'loComp')}
-                            className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer slider-thumb"
-                          />
-                        </div>
-
-                        {/* Lender Credits */}
-                        <div className="space-y-3">
-                          <div className="flex items-baseline justify-between">
-                            <label className="text-sm text-zinc-700 dark:text-zinc-300">
-                              Lender Credits (bps)
-                            </label>
-                            <span className="text-base text-zinc-900 dark:text-white font-medium">
-                              {lenderCredits} bps
-                            </span>
-                          </div>
-                          <input
-                            type="range"
-                            min={0}
-                            max={150}
-                            step={5}
-                            value={lenderCredits}
-                            onChange={(e) => handleMarginChange(Number(e.target.value), 'credits')}
-                            className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer slider-thumb"
-                          />
-                        </div>
-                      </div>
-
-                      {/* Gross Profit Display */}
-                      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-200 dark:border-zinc-700">
-                        <div className="flex items-baseline justify-between">
-                          <span className="text-sm text-zinc-700 dark:text-zinc-300">Gross Profit Margin</span>
-                          <span className="text-base text-zinc-900 dark:text-white font-medium">
-                            {grossProfitBps} bps
-                          </span>
-                        </div>
-                      </div>
-
-                      {/* Operating Expenses - Full Width */}
-                      <div className="space-y-3">
-                        <div className="flex items-baseline justify-between">
-                          <label className="text-sm text-zinc-700 dark:text-zinc-300">
-                            Monthly Operating Expenses
-                          </label>
-                          <span className="text-base text-zinc-900 dark:text-white font-medium">
-                            {formatCurrency(monthlyOpEx)}/mo
-                          </span>
-                        </div>
-                        <input
-                          type="range"
-                          min={0}
-                          max={100000}
-                          step={1000}
-                          value={monthlyOpEx}
-                          onChange={(e) => handleOpExChange(Number(e.target.value))}
-                          className="w-full h-2 bg-zinc-200 dark:bg-zinc-700 rounded-lg appearance-none cursor-pointer slider-thumb"
-                        />
-                        <div className="flex justify-between text-xs text-zinc-500">
-                          <span>$0</span>
-                          <span>$100k/mo</span>
-                        </div>
-                        <p className="text-xs text-zinc-500">
-                          Includes rent, staff, marketing, technology, and overhead
-                        </p>
-                      </div>
-                    </div>
-
-                    {/* Section 2: P&L Comparison */}
-                    <div className="space-y-4">
-                      <h3 className="text-lg text-zinc-900 dark:text-white">
-                        Monthly Branch P&L Comparison
-                      </h3>
-
-                      <div className="overflow-x-auto">
-                        <table className="w-full text-sm">
-                          <thead>
-                            <tr className="border-b border-zinc-200 dark:border-zinc-700">
-                              <th className="text-left py-3 text-zinc-600 dark:text-zinc-400 font-medium">Metric</th>
-                              <th className="text-right py-3 text-zinc-600 dark:text-zinc-400 font-medium">Current</th>
-                              <th className="text-right py-3 text-[#8B5CF6] font-medium">With AFN</th>
-                            </tr>
-                          </thead>
-                          <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Monthly Funded Volume</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatVolume(monthlyVolume)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatVolume(afnMonthlyVolume)}</td>
-                            </tr>
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Branch Margin (bps)</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{branchMargin}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{branchMargin}</td>
-                            </tr>
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Revenue</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentRevenue)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(afnRevenue)}</td>
-                            </tr>
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">LO Compensation</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentLOComp)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(afnLOComp)}</td>
-                            </tr>
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Lender Credits</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentLenderCredits)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(afnLenderCredits)}</td>
-                            </tr>
-                            <tr className="font-medium">
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Gross Profit</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentGrossProfit)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(afnGrossProfit)}</td>
-                            </tr>
-                            <tr>
-                              <td className="py-3 text-zinc-700 dark:text-zinc-300">Operating Expenses</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentOpEx)}</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(afnOpEx)}</td>
-                            </tr>
-                            <tr className="font-bold border-t-2 border-zinc-300 dark:border-zinc-600">
-                              <td className="py-3 text-zinc-900 dark:text-white">Branch Profit</td>
-                              <td className="py-3 text-right text-zinc-900 dark:text-white">{formatCurrency(currentBranchProfit)}</td>
-                              <td className="py-3 text-right text-[#8B5CF6]">{formatCurrency(afnBranchProfit)}</td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-
-                    {/* Section 3: AFN Assumptions */}
-                    <div className="space-y-4">
-                      <h3 className="text-lg text-zinc-900 dark:text-white">
-                        AFN Scenario Assumptions
-                      </h3>
-
-                      {/* Volume Increase */}
-                      <div className="p-4 bg-[#8B5CF6]/5 dark:bg-[#8B5CF6]/10 rounded-lg border border-[#8B5CF6]/20">
-                        <div className="flex items-start justify-between mb-2">
-                          <span className="text-sm text-zinc-700 dark:text-zinc-300">Monthly Funded Volume Increase</span>
-                          <span className="text-base text-[#8B5CF6] font-medium">+12% to +22%</span>
-                        </div>
-                        <p className="text-xs text-zinc-600 dark:text-zinc-400">
-                          Driven by faster turn times, higher pull-through, and AI-assisted workflows.
-                        </p>
-                      </div>
-
-                      {/* Operating Expense Reduction Toggle */}
-                      <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-200 dark:border-zinc-700">
-                        <div className="flex items-start justify-between mb-2">
-                          <div className="flex-1">
-                            <div className="flex items-center gap-3 mb-2">
-                              <span className="text-sm text-zinc-700 dark:text-zinc-300">Operating Expense Reduction</span>
-                              <button
-                                onClick={() => {
-                                  setOpexReductionEnabled(!opexReductionEnabled);
-                                  setHasInteracted(true);
-                                  trackCalculatorAdjustment();
-                                }}
-                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                                  opexReductionEnabled 
-                                    ? 'bg-[#8B5CF6]' 
-                                    : 'bg-zinc-300 dark:bg-zinc-600'
-                                }`}
-                              >
-                                <span
-                                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                                    opexReductionEnabled ? 'translate-x-6' : 'translate-x-1'
-                                  }`}
-                                />
-                              </button>
-                              <span className="text-base text-[#8B5CF6] font-medium">25%</span>
-                            </div>
-                            <p className="text-xs text-zinc-600 dark:text-zinc-400">
-                              Technology leverage and centralized support reduce per-loan operating costs.
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Unchanged Assumptions */}
-                      <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-                        <p className="text-xs text-zinc-700 dark:text-zinc-300">
-                          Branch margin, LO compensation, and lender credits are unchanged in this scenario.
-                        </p>
-                      </div>
-                    </div>
-
-                    {/* Section 4: Highlighted Outcome */}
-                    <div className="p-6 bg-gradient-to-br from-[#8B5CF6]/10 to-[#8B5CF6]/5 dark:from-[#8B5CF6]/20 dark:to-[#8B5CF6]/10 rounded-xl border-2 border-[#8B5CF6]/30 shadow-[0_0_30px_rgba(139,92,246,0.15)]">
-                      <div className="space-y-4">
-                        <div>
-                          <p className="text-sm text-zinc-600 dark:text-zinc-400 mb-2">
-                            Modeled Monthly Branch Profit at AFN
-                          </p>
-                          <p className="text-5xl text-[#8B5CF6] font-bold drop-shadow-[0_0_20px_rgba(139,92,246,0.3)]">
-                            {formatCurrency(afnBranchProfit)}
-                          </p>
-                          <p className="text-xs text-zinc-500 dark:text-zinc-500 mt-2">
-                            Illustrative scenario based on your inputs.
-                          </p>
-                        </div>
-                        <div className="pt-4 border-t border-[#8B5CF6]/20">
-                          <p className="text-sm text-zinc-600 dark:text-zinc-400 mb-1">
-                            Incremental Monthly Branch Profit
-                          </p>
-                          <p className="text-2xl text-green-600 dark:text-green-400 font-bold">
-                            + {formatCurrency(profitDelta)}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Section 5: Disclaimers */}
-                    <div className="text-[10px] text-zinc-400 dark:text-zinc-600 leading-relaxed space-y-1">
-                      <p>This model is illustrative only and does not represent a guarantee of results.</p>
-                      <p>Actual margins, expenses, and profitability vary by branch, market, and compensation structure.</p>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-
-            {/* Sticky Footer CTA */}
-            {!submitted && !showForm && (
-              <div className="p-6 border-t border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
-                <div className="space-y-3">
-                  <p className="text-xs text-center text-zinc-600 dark:text-zinc-400">
-                    We'll help you build a realistic pro forma P&L using AFN rates, support structure, and your branch goals.
-                  </p>
-                  <div className="flex gap-3">
-                    <button
-                      onClick={handleClose}
-                      className="flex-1 px-6 py-3 border border-zinc-300 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
-                    >
-                      Close
-                    </button>
-                    <button
-                      onClick={handlePrimaryCTA}
-                      className="flex-1 px-6 py-3 bg-gradient-to-r from-[#8B5CF6] to-[#7C3AED] hover:from-[#7C3AED] hover:to-[#8B5CF6] text-white rounded-lg transition-all duration-300 shadow-lg"
-                    >
-                      Sanity-Check This With AFN
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Follow-Up Modal */}
-      <CalculatorFollowUp
-        isOpen={showFollowUp}
-        onClose={() => setShowFollowUp(false)}
-        isBranchManager={true}
-        clickedPrimaryCTA={clickedPrimaryCTA}
-      />
-    </>
-  );
-}