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

export const SupportSection = () => (
  <Card>
    <CardHeader>客服咨询 · 圆圆客服台卡</CardHeader>
    <CardContent>
      <div className='grid grid-cols-[1.2fr_1fr] gap-6 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-64 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-3 text-white'>
            <div className='text-[11px] tracking-[0.2em] opacity-80'>CIRCLE HARMONY · 圆和医疗</div>
            <div className='text-sm font-medium'>圆圆客服 · 一站式健康服务</div>
            <div className='w-28 h-28 rounded-full bg-white flex items-center justify-center'>
              <div className='w-20 h-20 rounded-md bg-gray-200 flex items-center justify-center text-[10px] text-gray-500'>
                二维码占位
              </div>
            </div>
            <div className='text-sm font-semibold'>一对一专属服务</div>
            <div className='px-4 py-1.5 rounded-full border border-white/70 text-[11px] flex gap-2'>
              <span>服务预约</span>
              <span>/</span>
              <span>报告查询</span>
              <span>/</span>
              <span>报告解读</span>
            </div>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
);