import { Link } from 'react-router-dom'
import { INSIGHTS as FALLBACK_INSIGHTS } from '@/data/mock'
import { useCMS, getCMSInsights } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function Insights() {
  const { data: INSIGHTS } = useCMS(getCMSInsights, FALLBACK_INSIGHTS)
  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>围绕企业进化、价值坐标、A/M/B 与方法论的持续观察与沉淀。</p>
        </div>
      </div>
      <section className="section">
        <div className="container">
          <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.readingMinutes} 分钟 · {i.author} · 权重 {i.sortWeight}
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}