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

export default function MethodDetail() {
  const { data: METHODS } = useCMS(getCMSMethods, FALLBACK_METHODS)
  const { data: texts } = useCMSTexts()
  const { slug } = useParams()
  const item = METHODS.find(m => m.slug === slug)
  if (!item)
    return (
      <div className="container section">
        <div className="placeholder">未找到：{slug}</div>
        <Link to="/methods" className="btn btn-secondary" style={{ marginTop: 16 }}>
          返回方法与能力
        </Link>
      </div>
    )
  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="breadcrumb">
            <Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
              首页
            </Link>{' '}
            /{' '}
            <Link to="/methods" style={{ color: 'rgba(255,255,255,0.8)' }}>
              方法与能力
            </Link>{' '}
            / {item.title}
          </div>
          <h1>{item.title}</h1>
          <p>{item.summary}</p>
        </div>
      </div>
      <section className="section">
        <div className="container">
          <div className="card">
            <h3>关键步骤</h3>
            <ol style={{ paddingLeft: 18, lineHeight: 2, fontSize: 14 }}>
              {item.steps?.map(s => (
                <li key={s}>{s}</li>
              ))}
            </ol>
            <div className="placeholder" style={{ marginTop: 12 }}>
              {texts['methods.detail_note'] || '完整方法阐述、工具清单和交付物清单请在后台维护。'}
            </div>
          </div>
          <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
            <Link to="/methods" className="btn btn-ghost">
              ← 返回
            </Link>
            <Link to="/contact" className="btn btn-primary">
              咨询获取方案
            </Link>
          </div>
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}