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 LearningItem = {
  id: string
  titleZh: string
  titleEn: string
  descZh: string
  descEn: string
}

const learningItems: LearningItem[] = [
  {
    id: 'topic-1',
    titleZh: '专题课程（占位）',
    titleEn: 'Topic Courses (Placeholder)',
    descZh: '用于发布培训课程、专题学习、内部分享等内容。',
    descEn: 'For publishing courses, learning topics, and internal knowledge sharing.',
  },
  {
    id: 'topic-2',
    titleZh: '视频学习（占位）',
    titleEn: 'Video Learning (Placeholder)',
    descZh: '用于沉淀公开视频/回放与配套资料。',
    descEn: 'For public videos/recordings and supporting materials.',
  },
  {
    id: 'topic-3',
    titleZh: '资料下载（占位）',
    titleEn: 'Downloads (Placeholder)',
    descZh: '用于提供白皮书、指南、研究简报等下载入口。',
    descEn: 'For whitepapers, guides, and research briefs downloads.',
  },
]

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

  usePageMeta({
    title: locale === 'en' ? 'Learning' : PAGE_META.learning.title,
    description: PAGE_META.learning.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' ? 'Learning' : '培训学习'}
            </h1>
            <p className="mt-4 text-gray-600 max-w-3xl leading-relaxed">
              {locale === 'en'
                ? 'A placeholder section for learning resources. 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">
              {learningItems.map((item) => (
                <div key={item.id} className="bg-white rounded-2xl border border-gray-100 p-6">
                  <h2 className="text-lg font-semibold text-primary-dark">
                    {locale === 'en' ? item.titleEn : item.titleZh}
                  </h2>
                  <p className="mt-2 text-sm text-gray-600 leading-relaxed">
                    {locale === 'en' ? item.descEn : item.descZh}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

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

export default Learning
