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

export default function Ameba() {
  const { data } = useCMS(getCMSAmeba, null)
  const { data: texts } = useCMSTexts()
  const content = data || {}
  const text = (key: string, fallback: string) => texts[key] || fallback
  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="breadcrumb">
            <Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
              首页
            </Link>{' '}
              / {text('ameba.header_title', '阿美巴')}
          </div>
          <h1>{text('ameba.header_title', '阿美巴')}</h1>
          <p>{content.brand_position || text('ameba.header_description', '以企业进化经营哲学为底色，坚持利他、务实、陪跑，帮助企业把方法落到经营现场。')}</p>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <div className="grid-2">
            <div className="card">
              <h3>{text('ameba.philosophy_title', '经营哲学')}</h3>
              <p>{content.philosophy || '阿米巴哲学本土化实践，强调人人经营、数据透明、持续改善。'}</p>
            </div>
            <div className="card">
              <h3>{text('ameba.practice_title', '服务理念')}</h3>
              <p>{content.practice || '教练式陪跑：顾问入企，手把手带教，体系化交付 SOP 与工具包。'}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-muted">
        <div className="container">
          <h2 className="h2">{text('ameba.about_title', '我们是谁')}</h2>
          <div className="card">
            <p className="desc">
              {text('ameba.about_text', '围绕企业进化与体系化增长，提供长期、务实、可复盘的企业管理咨询服务。')}
            </p>
            {content.mission && <div className="placeholder" style={{ marginTop: 12 }}>{content.mission}</div>}
          </div>
        </div>
      </section>

      <GlobalCTA />
    </div>
  )
}