import { Link } from 'react-router-dom'
import { SERVICES as FALLBACK_SERVICES } from '@/data/mock'
import { useCMS, useCMSTexts, getCMSServices } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function Services() {
  const { data: SERVICES } = useCMS(getCMSServices, FALLBACK_SERVICES)
  const { data: texts } = useCMSTexts()
  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="breadcrumb">
            <Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
              首页
            </Link>{' '}
            / 产品服务
          </div>
          <h1>产品服务</h1>
          <p>{texts['services.header_description'] || '围绕下一步行动展示标准产品与定制陪跑服务。'}</p>
        </div>
      </div>
      <section className="section">
        <div className="container">
          <div className="grid-3">
            {SERVICES.map(s => (
              <div key={s.id} className="card" style={{ display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.08em', color: s.serviceType === 'standard' ? '#163E70' : '#0f6b5b', fontWeight: 800 }}>
                  {s.serviceType === 'standard' ? '标准产品' : '深度定制'}
                </div>
                <h3 style={{ marginTop: 6 }}>{s.title}</h3>
                <p>{s.summary}</p>
                {s.highlights && (
                  <ul style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
                    {s.highlights.map(h => (
                      <li key={h}>{h}</li>
                    ))}
                  </ul>
                )}
                <div style={{ marginTop: 'auto', paddingTop: 16 }}>
                  {s.serviceType === 'standard' && s.price ? (
                    <div style={{ fontWeight: 900, color: 'var(--primary)', fontSize: 18 }}>
                      ¥{(s.price / 1000).toFixed(2)}k <span style={{ fontSize: 12, fontWeight: 400 }}>{s.priceUnit}</span>
                    </div>
                  ) : (
                    <div style={{ fontSize: 13, color: '#0f6b5b', fontWeight: 700 }}>咨询/获取方案（无价格）</div>
                  )}
                  {s.priceNote && <div style={{ fontSize: 11, color: '#94a3b8' }}>{s.priceNote}</div>}
                  <Link to={`/services/${s.slug}`} className="btn btn-primary" style={{ width: '100%', marginTop: 10 }}>
                    {s.ctaText} →
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}