{Array.from({ length: 7 }, (_, index) => { const isActive = index === 0; // First step is always active for section start return (

{index === 0 ? (

) : ( )}

); })}

); }; // Yes/No Choice Component const YesNoChoice: React.FC<{ question: string; value?: string; onChange: (value: string) => void; onBack?: () => void; onNext: () => void; onSkip?: () => void; currentStep?: number; totalSteps?: number; }> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps }) => { return (

{question}

onChange('No')} className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'No' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'}`} >

onChange('Yes')} className={`w-20 h-20 relative rounded-[999px] overflow-hidden cursor-pointer transition-colors ${value === 'Yes' ? 'bg-Neutrals-NeutralSlate800' : 'bg-Neutrals-NeutralSlate100 hover:bg-Neutrals-NeutralSlate200'}`} >

Yes

{onBack && ( )}

{/* Skip button */} {onSkip && (

Skip

)} {/* Progress indicators */} {currentStep && totalSteps && ( <>

{currentStep} of {totalSteps}

Leadership & Organizational Structure

)}

); }; // Section Intro Component const SectionIntro: React.FC<{ sectionNumber: string; title: string; description: string; onStart: () => void; imageUrl?: string; }> = ({ sectionNumber, title, description, onStart, imageUrl = "https://placehold.co/560x682" }) => { return (

{sectionNumber}

{title}

{description}

); }; // Step 1: Welcome & Role Information (Light) const EmployeeFormStep1: React.FC<{ onNext: (data: any) => void }> = ({ onNext }) => { const [formData, setFormData] = useState({ name: '', role: '', department: '' }); const handleSubmit = () => { onNext(formData); }; return (

Welcome to the Auditly Employee Assessment

Let's learn about your role, contribution and help us get a better understand of how you work best.

Your Role & Output

Tell us about your current role and what you work on

Your Name

setFormData({ ...formData, name: e.target.value })} className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none" placeholder="Enter your full name" />

What is your role at the company?

setFormData({ ...formData, role: e.target.value })} className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none" placeholder="e.g. Software Engineer, Marketing Manager" />

What department do you work in?

setFormData({ ...formData, department: e.target.value })} className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none" placeholder="e.g. Engineering, Sales, Marketing" />

); }; // Step 2: Personal Information const EmployeeFormStep2: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [formData, setFormData] = useState({ email: '', name: '', company: '' }); return (

Personal Information

setFormData({ ...formData, email: e.target.value })} className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none" placeholder="Email@gmail.com" />

Your Name

What is the name of your Company and department?

setFormData({ ...formData, company: e.target.value })} className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight placeholder:text-Neutrals-NeutralSlate500 outline-none" placeholder="Doe Enterprises" />

); }; // Step 3: Current Title and Department (Text Area) const EmployeeFormStep3: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ titleAndDepartment: answer })} onSkip={() => onNext({ titleAndDepartment: '' })} nextDisabled={!answer.trim()} currentStep={1} totalSteps={7} />

); }; // Step 4: Daily Tasks (Text Area) const EmployeeFormStep4: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ dailyTasks: answer })} onSkip={() => onNext({ dailyTasks: '' })} nextDisabled={!answer.trim()} currentStep={2} totalSteps={7} />

); }; // Step 5: Role Understanding Rating const EmployeeFormStep5: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ roleUnderstanding: rating })} onSkip={() => onNext({ roleUnderstanding: null })} nextDisabled={!rating} currentStep={3} totalSteps={7} />

); }; // Step 6: Work Satisfaction const EmployeeFormStep6: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ workSatisfaction: rating })} onSkip={() => onNext({ workSatisfaction: null })} nextDisabled={!rating} currentStep={4} totalSteps={7} />

); }; // Step 7: Communication Rating const EmployeeFormStep7: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ communicationRating: rating })} onSkip={() => onNext({ communicationRating: null })} nextDisabled={!rating} currentStep={5} totalSteps={7} />

); }; // Step 8: Work Style Preference const EmployeeFormStep8: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [selectedOption, setSelectedOption] = useState(''); const options = [ 'I prefer working independently', 'I enjoy collaborative teamwork', 'I like a mix of both', 'I prefer clear instructions and structure', 'I thrive with autonomy and flexibility' ]; return (

What work style best describes you?

{options.map((option, index) => ( setSelectedOption(e.target.value)} className="w-5 h-5 accent-Brand-Orange" /> {option} ))}

onNext({ workStyle: selectedOption })} onSkip={() => onNext({ workStyle: '' })} nextDisabled={!selectedOption} currentStep={6} totalSteps={7} />

); }; // Step 9: Section Intro - Output & Accountability const EmployeeFormStep9: React.FC<{ onNext: () => void }> = ({ onNext }) => { return ( ); }; // Step 10: Weekly Output Rating const EmployeeFormStep10: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ weeklyOutput: rating })} onSkip={() => onNext({ weeklyOutput: null })} nextDisabled={!rating} currentStep={1} totalSteps={7} />

); }; // Step 11: Top Deliverables const EmployeeFormStep11: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ topDeliverables: answer })} onSkip={() => onNext({ topDeliverables: '' })} nextDisabled={!answer.trim()} currentStep={2} totalSteps={7} />

); }; // Step 12: Measurable Results const EmployeeFormStep12: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ measurableResults: answer })} onSkip={() => onNext({ measurableResults: '' })} nextDisabled={!answer.trim()} currentStep={3} totalSteps={7} />

); }; // Step 13: Weekly KPIs const EmployeeFormStep13: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return ( onNext({ hasKPIs: answer })} onSkip={() => onNext({ hasKPIs: '' })} currentStep={4} totalSteps={7} /> ); }; // Step 14: KPI Details const EmployeeFormStep14: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ kpiDetails: answer })} onSkip={() => onNext({ kpiDetails: '' })} currentStep={5} totalSteps={7} />

); }; // Step 15: Reporting Structure const EmployeeFormStep15: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ reportingStructure: answer })} onSkip={() => onNext({ reportingStructure: '' })} currentStep={6} totalSteps={7} />

); }; // Step 16: Section Intro - Team & Collaboration const EmployeeFormStep16: React.FC<{ onNext: () => void }> = ({ onNext }) => { return ( ); }; // Step 17: Work Closest With const EmployeeFormStep17: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ workClosestWith: answer })} onSkip={() => onNext({ workClosestWith: '' })} currentStep={1} totalSteps={7} />

); }; // Step 18: Collaboration Issues const EmployeeFormStep18: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ collaborationIssues: answer })} onSkip={() => onNext({ collaborationIssues: '' })} currentStep={2} totalSteps={7} />

); }; // Step 19: Team Communication Rating const EmployeeFormStep19: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ teamCommunication: rating })} onSkip={() => onNext({ teamCommunication: null })} nextDisabled={!rating} currentStep={3} totalSteps={7} />

); }; // Step 20: Team Support const EmployeeFormStep20: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ teamSupport: answer })} onSkip={() => onNext({ teamSupport: '' })} currentStep={4} totalSteps={7} />

); }; // Step 21: Tools and Resources Section const EmployeeFormStep21: React.FC<{ onNext: () => void }> = ({ onNext }) => { return ( ); }; // Step 22: Current Tools const EmployeeFormStep22: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ currentTools: answer })} onSkip={() => onNext({ currentTools: '' })} currentStep={1} totalSteps={7} />

); }; // Step 23: Tool Effectiveness const EmployeeFormStep23: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ toolEffectiveness: rating })} onSkip={() => onNext({ toolEffectiveness: null })} nextDisabled={!rating} currentStep={2} totalSteps={7} />

); }; // Step 24: Missing Tools const EmployeeFormStep24: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ missingTools: answer })} onSkip={() => onNext({ missingTools: '' })} currentStep={3} totalSteps={7} />

); }; // Step 25: Skills & Development Section const EmployeeFormStep25: React.FC<{ onNext: () => void }> = ({ onNext }) => { return ( ); }; // Step 26: Key Skills const EmployeeFormStep26: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ keySkills: answer })} onSkip={() => onNext({ keySkills: '' })} currentStep={1} totalSteps={7} />

); }; // Step 27: Skill Development const EmployeeFormStep27: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ skillDevelopment: answer })} onSkip={() => onNext({ skillDevelopment: '' })} currentStep={2} totalSteps={7} />

); }; // Step 28: Training Opportunities const EmployeeFormStep28: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return ( onNext({ awareOfTraining: answer })} onSkip={() => onNext({ awareOfTraining: '' })} currentStep={3} totalSteps={7} /> ); }; // Step 29: Career Goals const EmployeeFormStep29: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ careerGoals: answer })} onSkip={() => onNext({ careerGoals: '' })} currentStep={4} totalSteps={7} />

); }; // Step 30: Feedback & Improvement Section const EmployeeFormStep30: React.FC<{ onNext: () => void }> = ({ onNext }) => { return ( ); }; // Step 31: Company Improvements const EmployeeFormStep31: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ companyImprovements: answer })} onSkip={() => onNext({ companyImprovements: '' })} currentStep={1} totalSteps={7} />

); }; // Step 32: Job Satisfaction const EmployeeFormStep32: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [rating, setRating] = useState(); return (

onNext({ jobSatisfaction: rating })} onSkip={() => onNext({ jobSatisfaction: null })} nextDisabled={!rating} currentStep={2} totalSteps={7} />

); }; // Step 33: Additional Feedback const EmployeeFormStep33: React.FC<{ onNext: (data: any) => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = useState(''); return (

onNext({ additionalFeedback: answer })} onSkip={() => onNext({ additionalFeedback: '' })} currentStep={3} totalSteps={7} />

); }; // Step 35: Leadership & Organizational Structure - Magic Wand Question const EmployeeFormStep35: React.FC<{ onNext: () => void; onBack: () => void }> = ({ onNext, onBack }) => { const [answer, setAnswer] = React.useState(''); return (

If you had a magic wand, what would you change about how we operate?

setAnswer(e.target.value)}
                            className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
                            placeholder="Type your answer...."
                            rows={6}
                        />
                        <div className="w-3 h-3 absolute right-5 bottom-5">
                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                        </div>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    <button
                        onClick={onBack}
                        className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
                        </div>
                    </button>
                    <button
                        onClick={onNext}
                        className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
                        </div>
                    </button>
                </div>
            </div>
            <div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
            </div>
            <div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
            </div>
            <div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
                <div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                    <div>
                        <svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                </div>
                <div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
            </div>
        </div>
    );
};

// Step 36: Overstaffed/Underperforming Departments
const EmployeeFormStep36: React.FC<{ onNext: () => void; onBack: () => void }> = ({ onNext, onBack }) => {
    const [answer, setAnswer] = React.useState('');

return (
        <div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
            <div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
                <div className="self-stretch flex flex-col justify-start items-start gap-8">
                    <div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Do you believe any roles or departments are overstaffed or underperforming?</div>
                    <div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
                        <textarea
                            value={answer}
                            onChange={(e) => setAnswer(e.target.value)}
                            className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
                            placeholder="Type your answer...."
                            rows={6}
                        />
                        <div className="w-3 h-3 absolute right-5 bottom-5">
                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                        </div>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    <button
                        onClick={onBack}
                        className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
                        </div>
                    </button>
                    <button
                        onClick={onNext}
                        className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
                        </div>
                    </button>
                </div>
            </div>
            <div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
            </div>
            <div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
            </div>
            <div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
                <div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                    <div>
                        <svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                </div>
                <div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
            </div>
        </div>
    );
};

// Step 37: Any Other Feedback
const EmployeeFormStep37: React.FC<{ onNext: () => void; onBack: () => void }> = ({ onNext, onBack }) => {
    const [answer, setAnswer] = React.useState('');

return (
        <div className="w-[1440px] h-[810px] py-6 relative bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-9">
            <div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
                <div className="self-stretch flex flex-col justify-start items-start gap-8">
                    <div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate950 text-2xl font-medium font-['Neue_Montreal'] leading-normal">Any other feedback or suggestions?</div>
                    <div className="self-stretch min-h-40 p-5 relative bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-start gap-2.5">
                        <textarea
                            value={answer}
                            onChange={(e) => setAnswer(e.target.value)}
                            className="flex-1 bg-transparent text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 outline-none resize-none"
                            placeholder="Type your answer...."
                            rows={6}
                        />
                        <div className="w-3 h-3 absolute right-5 bottom-5">
                            <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
                        </div>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    <button
                        onClick={onBack}
                        className="h-12 px-8 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Back</div>
                        </div>
                    </button>
                    <button
                        onClick={onNext}
                        className="flex-1 h-12 px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Submit</div>
                        </div>
                    </button>
                </div>
            </div>
            <div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] uppercase leading-none">1 of 7</div>
            </div>
            <div className="px-3 py-1.5 left-[1363px] top-[24px] absolute bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-none">Skip</div>
            </div>
            <div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
                <div className="p-4 bg-Neutrals-NeutralSlate100 rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                    <div>
                        <svg width="24" height="4" viewBox="0 0 24 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="24" height="4" rx="2" fill="var(--Brand-Orange, #3399FF)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                    <div>
                        <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
                        </svg>
                    </div>
                </div>
                <div className="self-stretch text-center justify-start text-Neutrals-NeutralSlate500 text-base font-medium font-['Neue_Montreal'] leading-normal">Leadership & Organizational Structure</div>
            </div>
        </div>
    );
};

// Step 38: Thank You Page (Final)
const EmployeeFormStep38: React.FC<{ formData: any }> = ({ formData }) => {
    return (
        <div className="w-[1440px] bg-white inline-flex justify-start items-center overflow-hidden">
            <div className="flex-1 h-[810px] px-32 py-48 bg-Neutrals-NeutralSlate0 flex justify-center items-center gap-2.5 overflow-hidden">
                <div className="flex-1 max-w-[464px] inline-flex flex-col justify-start items-start gap-12">
                    <div className="self-stretch flex flex-col justify-start items-start gap-6">
                        <div className="w-12 h-12 relative bg-Brand-Orange rounded-xl outline outline-2 outline-offset-[-2px] outline-blue-400 overflow-hidden">
                            <div className="w-12 h-12 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
                            <div className="left-[12px] top-[9.33px] absolute">
                                <svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M2.57506 17.8138C3.11933 18.3649 3.11932 19.2585 2.57504 19.8097L2.54716 19.8379C2.00288 20.389 1.12044 20.389 0.576166 19.8379C0.0318956 19.2867 0.031904 18.3931 0.576185 17.842L0.604059 17.8137C1.14834 17.2626 2.03079 17.2626 2.57506 17.8138Z" fill="url(#paint0_linear_984_13079)" />
                                    <path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M9.12631 18.2374C9.6696 18.7896 9.66801 19.6832 9.12275 20.2333L5.26219 24.1286C4.71693 24.6787 3.83448 24.6771 3.29119 24.125C2.7479 23.5728 2.7495 22.6792 3.29476 22.1291L7.15532 18.2338C7.70058 17.6837 8.58302 17.6853 9.12631 18.2374Z" fill="url(#paint1_linear_984_13079)" />
                                    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M14.3651 24.9431C14.792 24.2945 15.6574 24.1193 16.2978 24.5516L16.3814 24.6081C17.0219 25.0404 17.1949 25.9167 16.768 26.5652C16.341 27.2138 15.4757 27.389 14.8352 26.9567L14.7516 26.9002C14.1112 26.4678 13.9381 25.5916 14.3651 24.9431Z" fill="url(#paint2_linear_984_13079)" />
                                    <path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M23.5637 17.7278C24.108 18.279 24.108 19.1726 23.5637 19.7237L21.6683 21.6431C21.124 22.1943 20.2415 22.1943 19.6973 21.6431C19.153 21.092 19.153 20.1984 19.6973 19.6472L21.5927 17.7278C22.137 17.1767 23.0194 17.1767 23.5637 17.7278Z" fill="url(#paint3_linear_984_13079)" />
                                    <path fillRule="evenodd" clipRule="evenodd" d="M23.593 10.6302C24.1373 11.1813 24.1373 12.0749 23.593 12.6261L9.58624 26.8098C9.04196 27.361 8.15951 27.361 7.61524 26.8098C7.07096 26.2587 7.07096 25.3651 7.61524 24.8139L21.622 10.6302C22.1663 10.079 23.0487 10.079 23.593 10.6302Z" fill="url(#paint4_linear_984_13079)" />
                                    <path fillRule="evenodd" clipRule="evenodd" d="M20.9426 6.26883C21.4869 6.81999 21.4869 7.71359 20.9426 8.26474L12.887 16.4222C12.3427 16.9733 11.4603 16.9733 10.916 16.4222C10.3717 15.871 10.3717 14.9774 10.916 14.4263L18.9716 6.26883C19.5159 5.71768 20.3984 5.71768 20.9426 6.26883Z" fill="url(#paint5_linear_984_13079)" />
                                    <path fillRule="evenodd" clipRule="evenodd" d="M16.6908 3.50254C17.2354 4.05332 17.236 4.94692 16.6921 5.49844L6.3369 15.9987C5.79299 16.5502 4.91054 16.5508 4.3659 16C3.82126 15.4492 3.82067 14.5556 4.36458 14.0041L14.7198 3.50388C15.2637 2.95236 16.1462 2.95176 16.6908 3.50254Z" fill="url(#paint6_linear_984_13079)" />
                                    <path opacity="0.7" fillRule="evenodd" clipRule="evenodd" d="M6.43658 6.86235C6.97992 7.41445 6.9784 8.30805 6.43319 8.85825L2.37751 12.9511C1.83229 13.5013 0.94985 13.4997 0.406512 12.9476C-0.136826 12.3955 -0.135307 11.5019 0.409905 10.9517L4.46559 6.85892C5.0108 6.30871 5.89324 6.31025 6.43658 6.86235Z" fill="url(#paint7_linear_984_13079)" />
                                    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M8.92105 2.7793C9.69077 2.7793 10.3148 3.41117 10.3148 4.19062V4.33175C10.3148 5.1112 9.69077 5.74307 8.92105 5.74307C8.15133 5.74307 7.52734 5.1112 7.52734 4.33175V4.19062C7.52734 3.41117 8.15133 2.7793 8.92105 2.7793Z" fill="url(#paint8_linear_984_13079)" />
                                    <defs>
                                        <linearGradient id="paint0_linear_984_13079" x1="1.57561" y1="17.4004" x2="1.57561" y2="20.2513" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint1_linear_984_13079" x1="6.20875" y1="17.8223" x2="6.20875" y2="24.5401" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint2_linear_984_13079" x1="15.5665" y1="24.3145" x2="15.5665" y2="27.1938" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint3_linear_984_13079" x1="21.6305" y1="17.3145" x2="21.6305" y2="22.0565" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint4_linear_984_13079" x1="15.6041" y1="10.2168" x2="15.6041" y2="27.2232" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint5_linear_984_13079" x1="15.9293" y1="5.85547" x2="15.9293" y2="16.8355" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint6_linear_984_13079" x1="10.5284" y1="3.08984" x2="10.5284" y2="16.4127" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint7_linear_984_13079" x1="3.42155" y1="6.44727" x2="3.42155" y2="13.3627" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint8_linear_984_13079" x1="8.92105" y1="2.7793" x2="8.92105" y2="5.74307" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                    </defs>
                                </svg>
                            </div>
                        </div>
                        <div className="self-stretch flex flex-col justify-start items-start gap-4">
                            <div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">Thank you your form has been submitted!</div>
                            <div className="self-stretch justify-center text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Description about the topic and what it means.</div>
                        </div>
                    </div>
                    <div className="self-stretch px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden">
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Start</div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden">
                <div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5 overflow-hidden">
                    <img className="self-stretch flex-1" src="https://placehold.co/560x682" />
                </div>
            </div>
        </div>
    );
};

// Step 34: Section Outro - Leadership & Organizational Structure
const EmployeeFormStep34: React.FC<{ onNext: () => void; onBack: () => void }> = ({ onNext, onBack }) => {
    return (
        <SectionIntro
            sectionNumber="7 of 7"
            title="Leadership & Organizational Structure"
            description="Now we'll explore your thoughts on our organizational structure and leadership effectiveness."
            onStart={onNext}
        />
    );
};

// Main Controller Component
const EmployeeFormsController: React.FC = () => {
    const { inviteCode } = useParams();
    const [currentStep, setCurrentStep] = useState(1);
    const [formData, setFormData] = useState<any>({});

const handleNext = (stepData?: any) => {
        if (stepData) {
            const newFormData = { ...formData, ...stepData };
            setFormData(newFormData);
        }

if (currentStep === 37) {
            // Submit form data here
            console.log('Submitting form data:', formData);
            // TODO: Submit to backend
        }

setCurrentStep(currentStep + 1);
    };

const handleBack = () => {
        setCurrentStep(currentStep - 1);
    };

const handleSkip = () => {
        setCurrentStep(currentStep + 1);
    };

return (
        <div className="min-h-screen bg-white">
            {renderStep()}
        </div>
    );
};

export default EmployeeFormsController;