import React, { useState, useEffect } from "react"; import { AiAssessmentData, LeadFormData } from "../types"; import { Sparkles, Calendar, ArrowRight, CornerDownRight, CheckCircle2 } from "lucide-react"; import { motion } from "motion/react"; interface AiAssessmentProps { assessment: AiAssessmentData | null; formData: LeadFormData; isLoading: boolean; onReset: () => void; } const LOADING_STEPS = [ "Mapping organizational ecosystem...", "Evaluating industry bottlenecks...", "Synthesizing focus versus operational friction...", "Structuring custom momentum multipliers...", "Drafting diagnostic briefing...", ]; export default function AiAssessment({ assessment, formData, isLoading, onReset, }: AiAssessmentProps) { const [loadingStepIndex, setLoadingStepIndex] = useState(0); // Transition loading text messages useEffect(() => { if (!isLoading) return; const interval = setInterval(() => { setLoadingStepIndex((prev) => (prev + 1) % LOADING_STEPS.length); }, 1800); return () => clearInterval(interval); }, [isLoading]); // Load Calendly Script natively on mount useEffect(() => { if (assessment) { const script = document.createElement("script"); script.src = "https://assets.calendly.com/assets/external/widget.js"; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; } }, [assessment]); if (isLoading) { return (
{LOADING_STEPS[loadingStepIndex]}
{/* Custom Progress Line */}We analyzed your bottlenecks at {formData.orgName}. Below is your tailored blueprint strategy.
"{assessment.paradox}"
{insight}
{assessment.actionItem}
Secure your complimentary 30-minute Discovery Call below to build a concrete implementation roadmap.
As we review your profile together, my goal is to determine whether we're the right fit for one another. I'm looking forward to understanding where clarity can move the needle for you.