interface VipAuthModalProps {
  onClose: () => void;
}

export const VipAuthModal = ({ onClose }: VipAuthModalProps) => {
  return (
    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
      <div className='w-[560px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
        <div className='px-4 py-3 border-b flex items-center justify-between'>
          <div className='font-semibold'>太平 VIP 认证说明</div>
          <button className='text-xs text-gray-500' onClick={onClose}>
            关闭
          </button>
        </div>
        <div className='px-4 py-4 bg-gray-50/60'>
          <div className='flex gap-4 items-center'>
            <div className='flex-1 text-xs text-gray-700 space-y-2'>
              <p>通过「太平 VIP 认证」二维码，可完成太平渠道客户的身份绑定与权益确认。</p>
              <ul className='list-disc ml-5 space-y-1'>
                <li>客户出示太平 APP 内会员二维码，由工作人员扫码完成认证。</li>
                <li>认证成功后，系统会自动标记为「太平 VIP 客户」，并记录在体检档案中。</li>
                <li>支持后续报告寄送、复查预约等专属服务。</li>
              </ul>
            </div>
            <div className='w-40 h-40 rounded-3xl bg-white border flex items-center justify-center text-xs text-gray-500'>
              <img
                src='https://datacenter-open.oss-cn-hangzhou.aliyuncs.com/his/taiping-vip.jpg'
                alt='太平 VIP 认证二维码'
                className='w-full h-full object-cover'
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};