import { Link } from 'react-router-dom'
import { useCMS, useCMSTexts, getCMSInsights } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function Insights() {
  const { data: INSIGHTS } = useCMS(getCMSInsights, [])
  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>{' '}
            / {texts['insights.title'] || '认知观察'}
          </div>
          <h1>{texts['insights.title'] || '认知观察'}</h1>
          <p>{texts['insights.header_description'] || '围绕企业进化、价值坐标、A/M/B 与方法论的持续观察与沉淀。'}</p>
        </div>
      </div>
      <section className="section">
        <div className="container">
          {INSIGHTS.length ? <div className="grid-2">
            {INSIGHTS.map(i => (
              <Link key={i.id} to={`/insights/${i.slug}`} className="card" style={{ display: 'block' }}>
                <div style={{ fontSize: 11, color: '#0f6b5b', fontWeight: 800, letterSpacing: '0.08em' }}>{i.category.toUpperCase()}</div>
                <h3 style={{ marginTop: 6 }}>{i.title}</h3>
                <p>{i.summary}</p>
                <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 8 }}>
                  {i.category} · {new Date(i.createdAt).toLocaleDateString('zh-CN')} · {i.author}
                </div>
              </Link>
            ))}
          </div> : <div className="empty-state"><div><h2>{texts['insights.empty_title'] || '内容正在持续沉淀'}</h2><p>{texts['insights.empty_description'] || '欢迎关注企业进化、价值坐标与经营现场的后续观察。'}</p></div></div>}
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}