import React, { useState } from 'react';

const EmployeeFormNew: React.FC = () => {
    const [currentStep, setCurrentStep] = useState(1);
    
    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.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_981_10577)" />
                                    <path opacity="0.7" fillRule="evenodd" clipRule="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_981_10577)" />
                                    <defs>
                                        <linearGradient id="paint0_linear_981_10577" x1="1.57463" y1="17.4004" x2="1.57463" y2="20.2513" gradientUnits="userSpaceOnUse">
                                            <stop stopColor="white" stopOpacity="0.8" />
                                            <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                        </linearGradient>
                                        <linearGradient id="paint1_linear_981_10577" x1="6.20827" y1="17.8223" x2="6.20827" y2="24.5401" 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-3">
                            <div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-2xl font-semibold font-['Inter'] leading-8">Welcome to the Auditly Employee Assessment</div>
                            <div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-base font-normal font-['Inter'] leading-normal">Let's learn about your role, contribution and help us get a better understand of how you work best.</div>
                        </div>
                    </div>
                    <div className="self-stretch flex flex-col justify-start items-start gap-8">
                        <div className="self-stretch flex flex-col justify-start items-start gap-6">
                            <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-NeutralSlate950 text-sm font-normal font-['Inter'] leading-tight">Your Role & Output</div>
                                </div>
                                <div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">Tell us about your current role and what you work on</div>
                            </div>
                            <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">Your Name</div>
                                    <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="text"
                                            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"
                                        />
                                    </div>
                                </div>
                            </div>
                            <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">What is your role at the company?</div>
                                    <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="text"
                                            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"
                                        />
                                    </div>
                                </div>
                            </div>
                            <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">What department do you work in?</div>
                                    <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="text"
                                            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"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="self-stretch inline-flex justify-start items-center gap-3">
                            <button className="flex-1 px-6 py-3.5 bg-Brand-Orange rounded-[999px] inline-flex justify-center items-center gap-2 overflow-hidden">
                                <div className="justify-center text-Neutrals-NeutralSlate0 text-base font-medium font-['Inter'] leading-normal">Continue</div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EmployeeFormNew;