import { motion } from 'framer-motion'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
import { PAGE_META } from '../lib/constants'

type CaseCategory = {
  id: string
  zh: string
  en: string
}

const caseCategories: CaseCategory[] = [
  { id: 'separation', zh: '分立类案例', en: 'Separation Cases' },
  { id: 'accounts', zh: '整账类案例', en: 'Accounts Cases' },
  { id: 'internal-audit', zh: '企业内审类案例', en: 'Internal Audit Cases' },
  { id: 'tax-advisory', zh: '财税顾问案例', en: 'Tax & Finance Advisory' },
  { id: 'planning', zh: '涉税筹划类案例', en: 'Tax Planning Cases' },
  { id: 'insolvency', zh: '破产清算类案例', en: 'Insolvency & Liquidation' },
]

export const Cases: React.FC = () => {
  const locale = getLocaleFromPathname(window.location.pathname)

  usePageMeta({
    title: locale === 'en' ? 'Cases' : PAGE_META.cases.title,
    description: PAGE_META.cases.description,
    locale,
  })

  return (
    <motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      <Header />

      <main>
        <section className="pt-32 pb-12 bg-white border-b border-gray-100">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 className="text-3xl md:text-4xl font-semibold text-primary-dark">
              {locale === 'en' ? 'Cases' : '服务案例'}
            </h1>
            <p className="mt-4 text-gray-600 max-w-3xl leading-relaxed">
              {locale === 'en'
                ? 'A placeholder showcase of representative engagements. Content will be updated after official materials are provided.'
                : '以典型项目为线索，展示工作方法与交付路径。本页面为占位示例，后续将根据集团正式资料完善。'}
            </p>
          </div>
        </section>

        <section className="py-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {caseCategories.map((c) => (
                <div key={c.id} className="bg-white rounded-2xl border border-gray-100 p-6">
                  <h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? c.en : c.zh}</h2>
                  <p className="mt-2 text-sm text-gray-600 leading-relaxed">
                    {locale === 'en'
                      ? 'Add representative case summaries, scope, and outcomes.'
                      : '后续补充：案例背景、服务范围、关键工作、成果与影响。'}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </motion.div>
  )
}

export default Cases
