import React from 'react';

const ChatLight: React.FC = () => {
    return (
        <div className="w-full h-[810px] p-4 bg-Neutrals-NeutralSlate200 inline-flex justify-start items-start overflow-hidden">
            <div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
                {/* Sidebar */}
                <div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-Neutrals-NeutralSlate0 border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
                    <div className="self-stretch flex flex-col justify-start items-start gap-5">
                        {/* Company Selector */}
                        <div className="w-60 pl-2 pr-4 py-2 bg-Neutrals-NeutralSlate0 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
                            <div className="flex-1 flex justify-start items-center gap-2">
                                <div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
                                    <div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
                                        <div className="w-8 h-8 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
                                        <div className="left-[8.80px] top-[7.20px] absolute">
                                            <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g filter="url(#filter0_d_1042_1443)">
                                                    <path opacity="0.5" fillRule="evenodd" clipRule="evenodd" d="M4.34347 10.6855C4.67003 11.0162 4.67003 11.5524 4.34346 11.8831L4.32674 11.9C4.00017 12.2307 3.4707 12.2307 3.14414 11.9C2.81758 11.5693 2.81758 11.0331 3.14415 10.7024L3.16087 10.6855C3.48744 10.3548 4.01691 10.3548 4.34347 10.6855Z" fill="url(#paint0_linear_1042_1443)" />
                                                </g>
                                                <defs>
                                                    <linearGradient id="paint0_linear_1042_1443" x1="3.7438" y1="10.4375" x2="3.7438" y2="12.148" gradientUnits="userSpaceOnUse">
                                                        <stop stopColor="white" stopOpacity="0.8" />
                                                        <stop offset="1" stopColor="white" stopOpacity="0.5" />
                                                    </linearGradient>
                                                </defs>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
                                    <div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">Zitlac Media</div>
                                </div>
                            </div>
                            <div className="relative">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.83333 12.4987L9.99999 16.6654L14.1667 12.4987M5.83333 7.4987L9.99999 3.33203L14.1667 7.4987" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </div>
                        </div>

                        {/* Navigation Menu */}
                        <div className="self-stretch flex flex-col justify-start items-start gap-5">
                            <div className="self-stretch flex flex-col justify-start items-start gap-1.5">
                                <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7.5 17.5016V11.3349C7.5 10.8682 7.5 10.6348 7.59083 10.4566C7.67072 10.2998 7.79821 10.1723 7.95501 10.0924C8.13327 10.0016 8.36662 10.0016 8.83333 10.0016H11.1667C11.6334 10.0016 11.8667 10.0016 12.045 10.0924C12.2018 10.1723 12.3293 10.2998 12.4092 10.4566C12.5 10.6348 12.5 10.8682 12.5 11.3349V17.5016M9.18141 2.30492L3.52949 6.70086C3.15168 6.99471 2.96278 7.14163 2.82669 7.32563C2.70614 7.48862 2.61633 7.67224 2.56169 7.86746C2.5 8.08785 2.5 8.32717 2.5 8.8058V14.8349C2.5 15.7683 2.5 16.235 2.68166 16.5916C2.84144 16.9052 3.09641 17.1601 3.41002 17.3199C3.76654 17.5016 4.23325 17.5016 5.16667 17.5016H14.8333C15.7668 17.5016 16.2335 17.5016 16.59 17.3199C16.9036 17.1601 17.1586 16.9052 17.3183 16.5916C17.5 16.235 17.5 15.7683 17.5 14.8349V8.8058C17.5 8.32717 17.5 8.08785 17.4383 7.86746C17.3837 7.67224 17.2939 7.48862 17.1733 7.32563C17.0372 7.14163 16.8483 6.99471 16.4705 6.70086L10.8186 2.30492C10.5258 2.07721 10.3794 1.96335 10.2178 1.91959C10.0752 1.88097 9.92484 1.88097 9.78221 1.91959C9.62057 1.96335 9.47418 2.07721 9.18141 2.30492Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
                                </div>
                                <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11.6667 9.16797H6.66667M8.33333 12.5013H6.66667M13.3333 5.83464H6.66667M16.6667 5.66797V14.3346C16.6667 15.7348 16.6667 16.4348 16.3942 16.9696C16.1545 17.44 15.772 17.8225 15.3016 18.0622C14.7669 18.3346 14.0668 18.3346 12.6667 18.3346H7.33333C5.9332 18.3346 5.23314 18.3346 4.69836 18.0622C4.22795 17.8225 3.8455 17.44 3.60582 16.9696C3.33333 16.4348 3.33333 15.7348 3.33333 14.3346V5.66797C3.33333 4.26784 3.33333 3.56777 3.60582 3.03299C3.8455 2.56259 4.22795 2.18014 4.69836 1.94045C5.23314 1.66797 5.9332 1.66797 7.33333 1.66797H12.6667C14.0668 1.66797 14.7669 1.66797 15.3016 1.94045C15.772 2.18014 16.1545 2.56259 16.3942 3.03299C16.6667 3.56777 16.6667 4.26784 16.6667 5.66797Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
                                </div>
                                <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clipPath="url(#clip0_1042_1469)">
                                                <path d="M10 1.66797C11.0943 1.66797 12.178 1.88352 13.189 2.30231C14.2001 2.7211 15.1187 3.33493 15.8926 4.10875C16.6664 4.88257 17.2802 5.80123 17.699 6.81228C18.1178 7.82332 18.3333 8.90696 18.3333 10.0013M10 1.66797V10.0013M10 1.66797C5.39763 1.66797 1.66667 5.39893 1.66667 10.0013C1.66667 14.6037 5.39763 18.3346 10 18.3346C14.6024 18.3346 18.3333 14.6037 18.3333 10.0013M10 1.66797C14.6024 1.66797 18.3333 5.39893 18.3333 10.0013M18.3333 10.0013L10 10.0013M18.3333 10.0013C18.3333 11.3164 18.0221 12.6128 17.4251 13.7846C16.828 14.9563 15.9621 15.9701 14.8982 16.7431L10 10.0013" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </g>
                                        </svg>
                                    </div>
                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Reports</div>
                                </div>
                                {/* Active Chat Item */}
                                <div className="w-60 px-4 py-2.5 bg-Neutrals-NeutralSlate100 rounded-[34px] inline-flex justify-start items-center gap-2">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M17.4997 9.58333C17.4997 13.4953 14.3284 16.6667 10.4164 16.6667C9.51904 16.6667 8.66069 16.4998 7.87065 16.1954C7.7262 16.1398 7.65398 16.112 7.59655 16.0987C7.54006 16.0857 7.49917 16.0803 7.44124 16.0781C7.38234 16.0758 7.31772 16.0825 7.18849 16.0958L2.92097 16.537C2.5141 16.579 2.31067 16.6001 2.19067 16.5269C2.08614 16.4631 2.01495 16.3566 1.996 16.2356C1.97425 16.0968 2.07146 15.9168 2.26588 15.557L3.62893 13.034C3.74118 12.8262 3.79731 12.7223 3.82273 12.6225C3.84784 12.5238 3.85391 12.4527 3.84588 12.3512C3.83775 12.2484 3.79266 12.1147 3.7025 11.8472C3.46289 11.1363 3.33302 10.375 3.33302 9.58333C3.33302 5.67132 6.50434 2.5 10.4164 2.5C14.3284 2.5 17.4997 5.67132 17.4997 9.58333Z" stroke="var(--Brand-Orange, #3399FF)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                    <div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Chat</div>
                                </div>
                                <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clipPath="url(#clip0_1042_1477)">
                                                <path d="M7.575 7.5013C7.77092 6.94436 8.15763 6.47472 8.66663 6.17558C9.17563 5.87643 9.77408 5.76708 10.356 5.8669C10.9379 5.96671 11.4657 6.26924 11.8459 6.72091C12.2261 7.17258 12.4342 7.74424 12.4333 8.33464C12.4333 10.0013 9.93333 10.8346 9.93333 10.8346M10 14.168H10.0083M18.3333 10.0013C18.3333 14.6037 14.6024 18.3346 10 18.3346C5.39763 18.3346 1.66667 14.6037 1.66667 10.0013C1.66667 5.39893 5.39763 1.66797 10 1.66797C14.6024 1.66797 18.3333 5.39893 18.3333 10.0013Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </g>
                                        </svg>
                                    </div>
                                    <div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Help</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Bottom Section */}
                    <div className="self-stretch flex flex-col justify-start items-start gap-3">
                        <div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
                            <div className="relative">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clipPath="url(#clip0_1042_1482)">
                                        <path d="M10 12.5013C11.3807 12.5013 12.5 11.382 12.5 10.0013C12.5 8.62059 11.3807 7.5013 10 7.5013C8.61929 7.5013 7.5 8.62059 7.5 10.0013C7.5 11.382 8.61929 12.5013 10 12.5013Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                    </g>
                                </svg>
                            </div>
                            <div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
                        </div>

                        {/* Company Report Card */}
                        <div className="self-stretch bg-Neutrals-NeutralSlate0 rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
                            <div className="self-stretch h-24 relative">
                                <div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
                                <div className="w-60 p-3 left-[18.12px] top-[42.52px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
                                <div className="w-60 p-3 left-[31.44px] top-[22px] absolute origin-top-left rotate-[-28.34deg] bg-Neutrals-NeutralSlate0 rounded-xl shadow-[0px_10px_20px_4px_rgba(14,18,27,0.08)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start gap-3 overflow-hidden" />
                            </div>
                            <div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
                                <div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
                                <div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
                            </div>
                            <div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
                                <div className="self-stretch inline-flex justify-start items-start gap-2">
                                    <div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
                                        <div className="px-1 flex justify-center items-center">
                                            <div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Invite</div>
                                        </div>
                                        <div className="relative">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M8.00004 3.33398V12.6673M3.33337 8.00065H12.6667" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div className="flex-1 px-3 py-1.5 bg-Brand-Orange rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
                                        <div className="relative">
                                            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M8.97167 12.2423L8.02886 13.1851C6.72711 14.4868 4.61656 14.4868 3.31481 13.1851C2.01306 11.8834 2.01306 9.7728 3.31481 8.47106L4.25762 7.52825M12.7429 8.47106L13.6857 7.52825C14.9875 6.2265 14.9875 4.11595 13.6857 2.8142C12.384 1.51245 10.2734 1.51245 8.97167 2.8142L8.02886 3.75701M6.16693 10.333L10.8336 5.6663" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </svg>
                                        </div>
                                        <div className="px-1 flex justify-center items-center">
                                            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Copy</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Main Chat Area */}
                <div className="flex-1 self-stretch py-6 bg-Neutrals-NeutralSlate0 inline-flex flex-col justify-center items-center gap-2.5">
                    <div className="w-[736px] flex-1 max-w-[736px] pt-48 flex flex-col justify-between items-center">
                        <div className="self-stretch flex flex-col justify-start items-center gap-6">
                            <div className="justify-start text-Text-Gray-800 text-2xl font-medium font-['Neue_Montreal'] leading-normal">What would you like to understand?</div>
                            <div className="p-1 bg-Neutrals-NeutralSlate100 rounded-xl inline-flex justify-start items-center gap-1">
                                <div className="px-3 py-1.5 bg-white rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
                                    <div className="px-0.5 flex justify-center items-center">
                                        <div className="justify-start text-Neutrals-NeutralSlate900 text-xs font-medium font-['Inter'] leading-none">Accountability</div>
                                    </div>
                                </div>
                                <div className="px-3 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
                                    <div className="px-0.5 flex justify-center items-center">
                                        <div className="justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none">Employee Growth</div>
                                    </div>
                                </div>
                                <div className="px-3 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
                                    <div className="px-0.5 flex justify-center items-center">
                                        <div className="justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none">Customer Focus</div>
                                    </div>
                                </div>
                                <div className="px-3 py-1.5 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
                                    <div className="px-0.5 flex justify-center items-center">
                                        <div className="justify-start text-Neutrals-NeutralSlate600 text-xs font-medium font-['Inter'] leading-none">Teamwork</div>
                                    </div>
                                </div>
                            </div>
                            <div className="self-stretch flex flex-col justify-start items-start gap-3">
                                <div className="self-stretch inline-flex justify-start items-center gap-3">
                                    <div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
                                        <div className="relative">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clipPath="url(#clip0_818_19218)">
                                                    <path d="M7.57499 7.5013C7.77091 6.94436 8.15762 6.47472 8.66662 6.17558C9.17562 5.87643 9.77407 5.76708 10.356 5.8669C10.9379 5.96671 11.4657 6.26924 11.8459 6.72091C12.2261 7.17258 12.4342 7.74424 12.4333 8.33464C12.4333 10.0013 9.93332 10.8346 9.93332 10.8346M9.99999 14.168H10.0083M18.3333 10.0013C18.3333 14.6037 14.6024 18.3346 9.99999 18.3346C5.39762 18.3346 1.66666 14.6037 1.66666 10.0013C1.66666 5.39893 5.39762 1.66797 9.99999 1.66797C14.6024 1.66797 18.3333 5.39893 18.3333 10.0013Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
                                    </div>
                                    <div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
                                        <div className="relative">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clipPath="url(#clip0_818_19221)">
                                                    <path d="M7.57502 7.5013C7.77094 6.94436 8.15765 6.47472 8.66665 6.17558C9.17565 5.87643 9.7741 5.76708 10.356 5.8669C10.9379 5.96671 11.4657 6.26924 11.8459 6.72091C12.2261 7.17258 12.4342 7.74424 12.4334 8.33464C12.4334 10.0013 9.93335 10.8346 9.93335 10.8346M10 14.168H10.0084M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
                                    </div>
                                    <div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
                                        <div className="relative">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clipPath="url(#clip0_818_19224)">
                                                    <path d="M7.57502 7.5013C7.77094 6.94436 8.15765 6.47472 8.66665 6.17558C9.17565 5.87643 9.7741 5.76708 10.356 5.8669C10.9379 5.96671 11.4657 6.26924 11.8459 6.72091C12.2261 7.17258 12.4342 7.74424 12.4334 8.33464C12.4334 10.0013 9.93335 10.8346 9.93335 10.8346M10 14.168H10.0084M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
                                    </div>
                                    <div className="flex-1 h-48 px-3 py-4 bg-Main-BG-Gray-50 rounded-2xl inline-flex flex-col justify-between items-start overflow-hidden">
                                        <div className="relative">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clipPath="url(#clip0_818_19227)">
                                                    <path d="M7.57502 7.5013C7.77094 6.94436 8.15765 6.47472 8.66665 6.17558C9.17565 5.87643 9.7741 5.76708 10.356 5.8669C10.9379 5.96671 11.4657 6.26924 11.8459 6.72091C12.2261 7.17258 12.4342 7.74424 12.4334 8.33464C12.4334 10.0013 9.93335 10.8346 9.93335 10.8346M10 14.168H10.0084M18.3334 10.0013C18.3334 14.6037 14.6024 18.3346 10 18.3346C5.39765 18.3346 1.66669 14.6037 1.66669 10.0013C1.66669 5.39893 5.39765 1.66797 10 1.66797C14.6024 1.66797 18.3334 5.39893 18.3334 10.0013Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                </g>
                                            </svg>
                                        </div>
                                        <div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">How can the company serve them better?</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="self-stretch pl-5 pr-3 pt-5 pb-3 bg-Main-BG-Gray-50 rounded-3xl flex flex-col justify-start items-start gap-4">
                            <div className="self-stretch justify-start text-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">Ask anything, use @ to tag staff and ask questions.</div>
                            <div className="self-stretch inline-flex justify-between items-center">
                                <div className="flex justify-start items-center gap-4">
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M17.6271 9.08442L10.1141 16.5974C8.40553 18.306 5.63543 18.306 3.92688 16.5974C2.21834 14.8889 2.21834 12.1188 3.92688 10.4102L11.4399 2.89724C12.5789 1.75821 14.4257 1.75821 15.5647 2.89724C16.7037 4.03627 16.7037 5.883 15.5647 7.02203L8.3463 14.2404C7.77679 14.8099 6.85342 14.8099 6.28391 14.2404C5.71439 13.6709 5.71439 12.7475 6.28391 12.178L12.6184 5.84352" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M13.5 17.5H5.77614C5.2713 17.5 5.01887 17.5 4.90199 17.4002C4.80056 17.3135 4.74674 17.1836 4.75721 17.0506C4.76927 16.8974 4.94776 16.7189 5.30474 16.3619L12.3905 9.27614C12.7205 8.94613 12.8855 8.78112 13.0758 8.7193C13.2432 8.66492 13.4235 8.66492 13.5908 8.7193C13.7811 8.78112 13.9461 8.94613 14.2761 9.27614L17.5 12.5V13.5M13.5 17.5C14.9001 17.5 15.6002 17.5 16.135 17.2275C16.6054 16.9878 16.9878 16.6054 17.2275 16.135C17.5 15.6002 17.5 14.9001 17.5 13.5M13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V6.5C2.5 5.09987 2.5 4.3998 2.77248 3.86502C3.01217 3.39462 3.39462 3.01217 3.86502 2.77248C4.3998 2.5 5.09987 2.5 6.5 2.5H13.5C14.9001 2.5 15.6002 2.5 16.135 2.77248C16.6054 3.01217 16.9878 3.39462 17.2275 3.86502C17.5 4.3998 17.5 5.09987 17.5 6.5V13.5M8.75 7.08333C8.75 8.00381 8.00381 8.75 7.08333 8.75C6.16286 8.75 5.41667 8.00381 5.41667 7.08333C5.41667 6.16286 6.16286 5.41667 7.08333 5.41667C8.00381 5.41667 8.75 6.16286 8.75 7.08333Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                    <div className="relative">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <g clipPath="url(#clip0_818_19240)">
                                                <path d="M13.3334 6.66745V10.8341C13.3334 11.4972 13.5968 12.133 14.0656 12.6019C14.5344 13.0707 15.1703 13.3341 15.8334 13.3341C16.4964 13.3341 17.1323 13.0707 17.6011 12.6019C18.07 12.133 18.3334 11.4972 18.3334 10.8341V10.0008C18.3332 8.11998 17.6969 6.29452 16.5278 4.82123C15.3586 3.34794 13.7255 2.31347 11.8939 1.88603C10.0623 1.45859 8.13997 1.66332 6.43949 2.46692C4.739 3.27053 3.36036 4.62575 2.52774 6.31222C1.69513 7.99869 1.4575 9.91723 1.8535 11.7559C2.2495 13.5945 3.25584 15.2451 4.70889 16.4393C6.16193 17.6335 7.97622 18.3011 9.85675 18.3334C11.7373 18.3657 13.5735 17.761 15.0667 16.6175M13.3334 10.0008C13.3334 11.8417 11.841 13.3341 10 13.3341C8.15908 13.3341 6.6667 11.8417 6.6667 10.0008C6.6667 8.15984 8.15908 6.66745 10 6.66745C11.841 6.66745 13.3334 8.15984 13.3334 10.0008Z" stroke="var(--Text-Gray-500, #717680)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                            </g>
                                        </svg>
                                    </div>
                                </div>
                                <div className="p-2.5 bg-Text-Gray-300 rounded-[999px] flex justify-start items-center gap-2.5 overflow-hidden">
                                    <div className="relative">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 13.3346V2.66797M8 2.66797L4 6.66797M8 2.66797L12 6.66797" stroke="var(--Text-White-00, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ChatLight;