'use client'

/**
 * 說明文件 Page
 * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
 * @updated 2026-04-02 ogt - 升級為靜態系統版本資訊頁
 */

import { useTranslations } from 'next-intl'
import { AppLayout } from '@/components/layout'

export default function HelpPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('help')
  const tb = useTranslations('brand')

  return (
    <AppLayout locale={params.locale}>
      <div style={{ padding: '24px', background: '#f5f4ed', minHeight: '100%' }}>
        <div style={{ marginBottom: '20px' }}>
          <h1 style={{ fontSize: 18, fontWeight: 700, color: '#141413', margin: 0, fontFamily: 'var(--font-body), monospace' }}>{t('title')}</h1>
          <p style={{ fontSize: 12, color: '#87867f', margin: '4px 0 0', fontFamily: 'var(--font-body), monospace' }}>{t('subtitle')}</p>
        </div>

        {/* Version Info Card */}
        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, overflow: 'hidden', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, padding: '10px 14px', borderBottom: '0.5px solid #e0ddd4', background: '#faf9f3', fontFamily: 'var(--font-body), monospace', color: '#141413' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', display: 'inline-block' }} />
            {t('version')}
          </div>
          <div style={{ padding: '16px 14px', fontFamily: 'var(--font-body), monospace' }}>
            {[
              { label: t('appVersion'), value: tb('version') },
              { label: t('platform'), value: tb('name') },
              { label: tb('environment'), value: tb('environment') },
            ].map(row => (
              <div key={row.label} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '0.5px solid #f0eee7' }}>
                <span style={{ fontSize: 13, color: '#87867f' }}>{row.label}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: '#141413' }}>{row.value}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Docs Card */}
        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 700, padding: '10px 14px', borderBottom: '0.5px solid #e0ddd4', background: '#faf9f3', fontFamily: 'var(--font-body), monospace', color: '#141413' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#d97757', display: 'inline-block' }} />
            {t('docs')}
          </div>
          <div style={{ padding: '16px 14px', fontSize: 13, color: '#87867f', fontFamily: 'var(--font-body), monospace' }}>
            {t('docsDescription')}
          </div>
        </div>
      </div>
    </AppLayout>
  )
}
