import React, { useState } from 'react';

// Icon SVG Component - From Figma designs
export const AuditlyIcon: React.FC = () => (
    <div data-svg-wrapper className="relative">
        <svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.57408 17.8138C3.11835 18.3649 3.11834 19.2585 2.57406 19.8097L2.54619 19.8379C2.00191 20.389 1.11946 20.389 0.57519 19.8379C0.030919 19.2867 0.0309274 18.3931 0.575208 17.842L0.603083 17.8137C1.14736 17.2626 2.02981 17.2626 2.57408 17.8138Z" fill="url(#paint0_linear_984_10696)" />
            <path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" d="M9.12583 18.2374C9.66912 18.7896 9.66752 19.6832 9.12226 20.2333L5.2617 24.1286C4.71644 24.6787 3.83399 24.6771 3.2907 24.125C2.74741 23.5728 2.74901 22.6792 3.29427 22.1291L7.15483 18.2338C7.70009 17.6837 8.58254 17.6853 9.12583 18.2374Z" fill="url(#paint1_linear_984_10696)" />
            <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.3656 24.9431C14.7925 24.2945 15.6578 24.1193 16.2983 24.5516L16.3819 24.6081C17.0224 25.0404 17.1954 25.9167 16.7685 26.5652C16.3415 27.2138 15.4762 27.389 14.8357 26.9567L14.7521 26.9002C14.1117 26.4678 13.9386 25.5916 14.3656 24.9431Z" fill="url(#paint2_linear_984_10696)" />
            <path opacity="0.7" fill-rule="evenodd" clip-rule="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_10696)" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M23.592 10.6302C24.1363 11.1813 24.1363 12.0749 23.592 12.6261L9.58526 26.8098C9.04098 27.361 8.15854 27.361 7.61426 26.8098C7.06999 26.2587 7.06999 25.3651 7.61426 24.8139L21.621 10.6302C22.1653 10.079 23.0477 10.079 23.592 10.6302Z" fill="url(#paint4_linear_984_10696)" />
            <path fill-rule="evenodd" clip-rule="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_10696)" />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6918 3.50254C17.2364 4.05332 17.237 4.94692 16.6931 5.49844L6.33787 15.9987C5.79396 16.5502 4.91152 16.5508 4.36688 16C3.82224 15.4492 3.82164 14.5556 4.36555 14.0041L14.7208 3.50388C15.2647 2.95236 16.1471 2.95176 16.6918 3.50254Z" fill="url(#paint6_linear_984_10696)" />
            <path opacity="0.7" fill-rule="evenodd" clip-rule="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_10696)" />
            <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8.92007 2.7793C9.6898 2.7793 10.3138 3.41117 10.3138 4.19062V4.33175C10.3138 5.1112 9.6898 5.74307 8.92007 5.74307C8.15035 5.74307 7.52637 5.1112 7.52637 4.33175V4.19062C7.52637 3.41117 8.15035 2.7793 8.92007 2.7793Z" fill="url(#paint8_linear_984_10696)" />
            <defs>
                <linearGradient id="paint0_linear_984_10696" x1="1.57463" y1="17.4004" x2="1.57463" y2="20.2513" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint1_linear_984_10696" x1="6.20827" y1="17.8223" x2="6.20827" y2="24.5401" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint2_linear_984_10696" x1="15.567" y1="24.3145" x2="15.567" y2="27.1938" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint3_linear_984_10696" x1="21.6305" y1="17.3145" x2="21.6305" y2="22.0565" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint4_linear_984_10696" x1="15.6031" y1="10.2168" x2="15.6031" y2="27.2232" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint5_linear_984_10696" x1="15.9293" y1="5.85547" x2="15.9293" y2="16.8355" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint6_linear_984_10696" x1="10.5293" y1="3.08984" x2="10.5293" y2="16.4127" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint7_linear_984_10696" x1="3.42155" y1="6.44727" x2="3.42155" y2="13.3627" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
                <linearGradient id="paint8_linear_984_10696" x1="8.92007" y1="2.7793" x2="8.92007" y2="5.74307" gradientUnits="userSpaceOnUse">
                    <stop stop-color="white" stop-opacity="0.8" />
                    <stop offset="1" stop-color="white" stop-opacity="0.5" />
                </linearGradient>
            </defs>
        </svg>
    </div>
);

// Progress Bar Component for Section Headers
export const SectionProgressBar: React.FC<{ currentSection: number; totalSections: number; sectionName: string }> = ({
    currentSection,
    totalSections,
    sectionName
}) => {
    return (
        <div className="min-w-[464px] col-span-2 col-start-6 inline-flex flex-col justify-self-center justify-center items-center gap-4 self-start">
            <div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
                {Array.from({ length: 7 }, (_, index) => {
                    const isActive = index === currentSection - 1;
                    return (
                        <div key={index}>
                            {isActive ? (
                                <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)" />
                                </svg>
                            ) : (
                                <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)" />
                                </svg>
                            )}
                        </div>
                    );
                })}
            </div>
            <div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">
                {sectionName}
            </div>
        </div>
    );
};

// Welcome Screen - Step 1 Style
export const WelcomeScreen: React.FC<{
    onStart: () => void;
    imageUrl?: string;
}> = ({ onStart, imageUrl = "/image/onboarding-robot.png" }) => {
    return (
        <div className="w-full bg-[--Neutrals-NeutralSlate0] 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">
                                <AuditlyIcon />
                            </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]">
                                Welcome to the Internal Staff Survey
                            </div>
                            <div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">
                                The survey takes around 15 minutes to complete.
                            </div>
                        </div>
                    </div>
                    <button
                        onClick={onStart}
                        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 hover:bg-blue-500 transition-colors"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Start</div>
                        </div>
                    </button>
                </div>
            </div>
            <div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5 overflow-hidden h-fit">
                <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={imageUrl} alt="Welcome" />
                </div>
            </div>
        </div>
    );
};

// Section Intro Component
export const SectionIntro: React.FC<{
    sectionNumber: string;
    title: string;
    description: string;
    onStart: () => void;
    imageUrl?: string;
}> = ({ sectionNumber, title, description, onStart, imageUrl = "/image/onboarding-robot.png" }) => {
    return (
        <div className="w-full self-stretch bg-[--Neutrals-NeutralSlate0] 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">
                                <AuditlyIcon />
                            </div>
                        </div>
                        <div className="self-stretch flex flex-col justify-start items-start gap-4">
                            <div className="px-3 py-1.5 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">
                                    {sectionNumber}
                                </div>
                            </div>
                            <div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-5xl font-medium font-['Neue_Montreal'] leading-[48px]">
                                {title}
                            </div>
                            <div className="self-stretch justify-center text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">
                                {description}
                            </div>
                        </div>
                    </div>
                    <button
                        onClick={onStart}
                        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 hover:bg-blue-500 transition-colors"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Start</div>
                        </div>
                    </button>
                </div>
            </div>
            <div className="flex-1 h-max px-20 py-16 flex justify-center items-center gap-2.5 flex-shrink">
                <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={imageUrl} alt={title} />
                </div>
            </div>
        </div>
    );
};

// Form Input Field Component
export const FormField: React.FC<{
    label: string;
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    required?: boolean;
    type?: 'text' | 'email';
}> = ({ label, value, onChange, placeholder, required = false, type = 'text' }) => {
    return (
        <div className="self-stretch flex flex-col justify-start items-start gap-2">
            <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                <div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">
                    {label}
                </div>
                {required && (
                    <div className="justify-start text-[--Brand-Orange] text-sm font-medium font-['Inter'] leading-tight">*</div>
                )}
            </div>
            <div className="self-stretch flex flex-col justify-start items-start gap-1">
                <div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
                    <input
                        type={type}
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
                        placeholder={placeholder}
                    />
                </div>
            </div>
        </div>
    );
};

// Personal Information Form Component
export const PersonalInfoForm: React.FC<{
    formData: { email: string; name: string; company: string };
    onChange: (data: { email: string; name: string; company: string }) => void;
    onNext: () => void;
}> = ({ formData, onChange, onNext }) => {
    const isValid = formData.email && formData.name && formData.company;

    return (
        <div className="w-full self-stretch h-[810px] px-[488px] py-32 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">
                        Personal Information
                    </div>
                    <div className="self-stretch flex flex-col justify-start items-start gap-6">
                        <FormField
                            label="Email"
                            value={formData.email}
                            onChange={(email) => onChange({ ...formData, email })}
                            placeholder="Email@gmail.com"
                            type="email"
                            required
                        />
                        <FormField
                            label="Your Name"
                            value={formData.name}
                            onChange={(name) => onChange({ ...formData, name })}
                            placeholder="John Doe"
                            required
                        />
                        <FormField
                            label="What is the name of your Company and department?"
                            value={formData.company}
                            onChange={(company) => onChange({ ...formData, company })}
                            placeholder="Doe Enterprises"
                            required
                        />
                    </div>
                </div>
                <button
                    onClick={onNext}
                    disabled={!isValid}
                    className="self-stretch h-12 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 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-500 transition-colors"
                >
                    <div className="px-1 flex justify-center items-center">
                        <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Next</div>
                    </div>
                </button>
            </div>
        </div>
    );
};

// Text Area Question Component
export const TextAreaQuestion: React.FC<{
    question: string;
    value: string;
    onChange: (value: string) => void;
    onBack?: () => void;
    onNext: () => void;
    onSkip?: () => void;
    currentStep?: number;
    totalSteps?: number;
    sectionName?: string;
    placeholder?: string;
}> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName, placeholder = "Type your answer...." }) => {
    return (
        <div className="w-full h-full py-6 relative bg-[--Neutrals-NeutralSlate0] grid grid-cols-12 grid-rows-5 justify-center items-center gap-3">
            <div className="w-full max-w-[464px] min-w-[464px] flex flex-col row-start-3 col-span-12 self-center justify-self-center justify-center 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">
                        {question}
                    </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={value}
                            onChange={(e) => onChange(e.target.value)}
                            className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
                            placeholder={placeholder}
                            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-NeutralSlate950]" />
                            <div className="w-1 h-1 absolute bottom-0 right-0 outline outline-1 outline-offset-[-0.50px] outline-[--Neutrals-NeutralSlate950]" />
                        </div>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    {onBack && (
                        <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] transition-colors"
                        >
                            <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 hover:bg-blue-500 transition-colors"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Next</div>
                        </div>
                    </button>
                </div>
            </div>

            {/* Step indicator */}
            {currentStep && totalSteps && (
                <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">
                        {currentStep} of {totalSteps}
                    </div>
                </div>
            )}

            {/* Skip button */}
            {onSkip && (
                <button
                    onClick={onSkip}
                    className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-[--Neutrals-NeutralSlate200] transition-colors"
                >
                    <div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
                </button>
            )}

            {/* Progress bar */}
            {currentStep && totalSteps && sectionName && (
                <SectionProgressBar
                    currentSection={currentStep}
                    totalSections={totalSteps}
                    sectionName={sectionName}
                />
            )}
        </div>
    );
};

// Rating Scale Question Component
export const RatingScaleQuestion: React.FC<{
    question: string;
    leftLabel: string;
    rightLabel: string;
    value?: number;
    onChange: (value: number) => void;
    onBack?: () => void;
    onNext: () => void;
    onSkip?: () => void;
    currentStep?: number;
    totalSteps?: number;
    sectionName?: string;
    scale?: number;
}> = ({ question, leftLabel, rightLabel, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName, scale = 10 }) => {
    return (
        <div className="w-full h-full py-6 relative bg-[--Neutrals-NeutralSlate0] grid grid-cols-12 grid-rows-5 justify-center items-center gap-3">
            <div className="w-full max-w-[464px] min-w-[464px] flex flex-col row-start-3 col-span-12 self-center justify-self-center justify-center gap-12">
                <div className="self-stretch flex flex-col justify-center items-center gap-8">
                    <div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
                        {question}
                    </div>
                    <div className="inline-flex justify-center w-max items-center gap-3">
                        <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
                            {leftLabel}
                        </div>
                        {Array.from({ length: scale }, (_, index) => {
                            const ratingValue = index + 1;
                            const isSelected = value === ratingValue;
                            return (
                                <button
                                    key={ratingValue}
                                    onClick={() => onChange(ratingValue)}
                                    className={`w-12 h-12 relative rounded-[576.35px] overflow-hidden transition-colors ${isSelected ? 'bg-[--Neutrals-NeutralSlate50]' : 'bg-[--Neutrals-NeutralSlate800] hover:bg-[--Neutrals-NeutralSlate50]'
                                        }`}
                                >
                                    <div className={`absolute inset-0 flex items-center justify-center text-xl font-medium font-['Inter'] leading-7 ${isSelected ? 'text-[--Neutrals-NeutralSlate950] bg-[--Neutrals-NeutralSlate50]' : 'text-[--Neutrals-NeutralSlate0] hover:text-[--Neutrals-NeutralSlate800]'
                                        }`}>
                                        {ratingValue}
                                    </div>
                                </button>
                            );
                        })}
                        <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
                            {rightLabel}
                        </div>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    {onBack && (
                        <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-neutral-200 transition-colors"
                        >
                            <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}
                        disabled={!value}
                        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 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-500 transition-colors"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Next</div>
                        </div>
                    </button>
                </div>
            </div>

            {/* Step indicator */}
            {currentStep && totalSteps && (
                <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">
                        {currentStep} of {totalSteps}
                    </div>
                </div>
            )}

            {/* Skip button */}
            {onSkip && (
                <button
                    onClick={onSkip}
                    className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-neutral-200 transition-colors"
                >
                    <div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
                </button>
            )}

            {/* Progress bar */}
            {currentStep && totalSteps && sectionName && (
                <SectionProgressBar
                    currentSection={currentStep}
                    totalSections={totalSteps}
                    sectionName={sectionName}
                />
            )}
        </div>
    );
};

// Yes/No Choice Component
export const YesNoChoice: React.FC<{
    question: string;
    value?: string;
    onChange: (value: string) => void;
    onBack?: () => void;
    onNext: () => void;
    onSkip?: () => void;
    currentStep?: number;
    totalSteps?: number;
    sectionName?: string;
}> = ({ question, value, onChange, onBack, onNext, onSkip, currentStep, totalSteps, sectionName }) => {
    return (
        <div className="w-full h-full py-6 relative bg-[--Neutrals-NeutralSlate0] grid grid-cols-12 grid-rows-5 justify-center items-center gap-3">
            <div className="w-full max-w-[464px] min-w-[464px] flex flex-col row-start-3 col-span-12 self-center justify-self-center justify-center 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">
                        {question}
                    </div>
                    <div className="self-stretch inline-flex justify-center items-center gap-3">
                        <button
                            onClick={() => onChange('No')}
                            className={`w-20 h-20 relative rounded-[999px] overflow-hidden transition-colors ${value === 'No' ? 'bg-[--Neutrals-NeutralSlate50]' : 'bg-[--Neutrals-NeutralSlate800] hover:bg-[--Neutrals-NeutralSlate50]'
                                }`}
                        >
                            <div className={`absolute inset-0 flex items-center justify-center text-base font-normal font-['Inter'] leading-normal ${value === 'No' ? 'text-[--Neutrals-NeutralSlate950] bg-[--Neutrals-NeutralSlate50]' : 'text-[--Neutrals-NeutralSlate50] hover:bg-[--Neutrals-NeutralSlate50] hover:text-[--Neutrals-NeutralSlate950]'
                                }`}>
                                No
                            </div>
                        </button>
                        <button
                            onClick={() => onChange('Yes')}
                            className={`w-20 h-20 relative rounded-[999px] overflow-hidden transition-colors ${value === 'Yes' ? 'bg-[--Neutrals-NeutralSlate50]' : 'bg-[--Neutrals-NeutralSlate800] hover:bg-[--Neutrals-NeutralSlate50]'
                                }`}
                        >
                            <div className={`absolute inset-0 flex items-center justify-center text-base font-normal font-['Inter'] leading-normal ${value === 'Yes' ? 'text-[--Neutrals-NeutralSlate950] bg-[--Neutrals-NeutralSlate50]' : 'text-[--Neutrals-NeutralSlate50] hover:bg-[--Neutrals-NeutralSlate50] hover:text-[--Neutrals-NeutralSlate950]'
                                }`}>
                                Yes
                            </div>
                        </button>
                    </div>
                </div>
                <div className="self-stretch inline-flex justify-start items-start gap-2">
                    {onBack && (
                        <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-neutral-200 transition-colors"
                        >
                            <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}
                        disabled={!value}
                        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 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-500 transition-colors"
                    >
                        <div className="px-1 flex justify-center items-center">
                            <div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Next</div>
                        </div>
                    </button>
                </div>
            </div>

            {/* Step indicator */}
            {currentStep && totalSteps && (
                <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">
                        {currentStep} of {totalSteps}
                    </div>
                </div>
            )}

            {/* Skip button */}
            {onSkip && (
                <button
                    onClick={onSkip}
                    className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden hover:bg-neutral-200 transition-colors"
                >
                    <div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
                </button>
            )}

            {/* Progress bar */}
            {currentStep && totalSteps && sectionName && (
                <SectionProgressBar
                    currentSection={currentStep}
                    totalSections={totalSteps}
                    sectionName={sectionName}
                />
            )}
        </div>
    );
};

// Thank You Page Component
export const ThankYouPage: React.FC = () => {
    return (
        <div className="w-full self-stretch bg-[--Neutrals-NeutralSlate0] 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">
                                <AuditlyIcon />
                            </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">
                                Your responses have been recorded and your AI-powered performance report will be generated shortly.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="flex-1 h-[810px] px-20 py-16 flex justify-center items-center gap-2.5">
                <div className="flex-1 self-stretch origin-top-left rotate-180 rounded-3xl inline-flex flex-col justify-center items-center gap-2.5">
                    <img className="self-stretch flex-1" src="/image/onboarding-robot.png" alt="Thank you" />
                </div>
            </div>
        </div>
    );
};