import { Link } from 'react-router-dom'
import { METHODS as FALLBACK_METHODS } from '@/data/mock'
import { useCMS, getCMSMethods } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function Methods() {
  const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
  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>方法决定路径，能力决定落地。二者闭环，支撑企业进化。</p>
          <div className="placeholder" style={{ marginTop: 12 }}>
            【占位｜待业务确认】方法论体系、工具、交付标准待知识母盘灌入。
          </div>
        </div>
      </div>
      <section className="section">
        <div className="container">
          <div className="grid-2">
            {METHODS.map(m => (
              <Link key={m.id} to={`/methods/${m.slug}`} className="card" style={{ display: 'block' }}>
                <p className="eyebrow">{m.group === 'method' ? '方法' : '能力'}</p>
                <h3>{m.title}</h3>
                <p>{m.summary}</p>
                {m.steps && (
                  <ol style={{ fontSize: 13, color: '#475569', paddingLeft: 18, marginTop: 8 }}>
                    {m.steps.map(s => (
                      <li key={s}>{s}</li>
                    ))}
                  </ol>
                )}
                <span style={{ fontSize: 12, color: '#0f6b5b', fontWeight: 700, marginTop: 10, display: 'inline-block' }}>查看详情 →</span>
              </Link>
            ))}
          </div>
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}