import { Card, CardContent } from '../ui';

export const SupportSection = () => (
  <Card>
    {/* <CardHeader>客服咨询 · 圆圆客服台卡</CardHeader> */}
    <CardContent>
      <div className='items-center'>
        {/* <div className='space-y-3 text-sm text-gray-700'>
          <p>通过「圆圆客服」二维码，客户可获得一站式健康服务：包含体检预约、报告查询、报告解读等。</p>
          <ul className='list-disc ml-5 space-y-1 text-xs text-gray-600'>
            <li>支持体检当天现场扫码添加，绑定客户信息</li>
            <li>扫码后可在线查看体检进度、报告结果</li>
            <li>提供一对一健康咨询与报告解读服务</li>
          </ul>
          <div className='text-xs text-gray-500'>注：实际系统中可上传设计好的「圆圆客服二维码台卡」图片，用于前台展示与打印。</div>
        </div> */}

        <div className='h-[70vh] rounded-3xl overflow-hidden shadow-inner flex items-center justify-center bg-gradient-to-b from-[#152749] to-[#c73545]'>
          <div className='flex flex-col items-center gap-5 text-white'>
            <div className='text-base tracking-[0.2em] opacity-80'>CIRCLE HARMONY · 圆和医疗</div>
            <div className='text-lg font-medium'>圆圆客服 · 一站式健康服务</div>
            <div className='w-72 h-72 bg-none flex items-center justify-center'>
              <div className='w-72 h-72 rounded-md overflow-hidden'>
                <img src="https://datacenter-open.oss-cn-hangzhou.aliyuncs.com/his/kefu-zixun.png" alt='圆圆客服二维码' className='w-full h-full object-cover' />
              </div>
            </div>
            <div className='text-lg font-semibold'>一对一专属服务</div>
            <div className='px-6 py-2 rounded-full border border-white/70 text-sm flex gap-2'>
              <span>服务预约</span>
              <span>/</span>
              <span>报告查询</span>
              <span>/</span>
              <span>报告解读</span>
            </div>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
);


