'use client';

import Link from 'next/link';
import { useI18n } from '../components/I18nProvider';

const highlights = [
  { keyTitle: 'highlightQualityTitle', keyBody: 'highlightQualityBody' },
  { keyTitle: 'highlightLocalTitle', keyBody: 'highlightLocalBody' },
  { keyTitle: 'highlightApiTitle', keyBody: 'highlightApiBody' },
];

export default function AboutPage() {
  const { t } = useI18n();
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
  const apiBase = process.env.NEXT_PUBLIC_API_BASE || 'http://localhost:3000/api';
  const appEnv = process.env.APP_ENV || 'local';
  const appVersion = process.env.NEXT_PUBLIC_VERSION || 'dev';

  return (
    <main>
      <section className="panel">
        <div className="breadcrumb">
          <Link href="/">{t('homeCrumb')}</Link> / <span>{t('aboutTitle')}</span>
        </div>
        <h1>{t('aboutTitle')}</h1>
        <p style={{ marginTop: 8 }}>{t('aboutLead')}</p>
      </section>

      <div className="cards" style={{ marginTop: 18 }}>
        {highlights.map((item) => (
          <div key={item.keyTitle} className="panel">
            <h3 className="card-title">{t(item.keyTitle as any)}</h3>
            <p>{t(item.keyBody as any)}</p>
          </div>
        ))}
      </div>

      <section className="panel env-card" style={{ marginTop: 18 }}>
        <h2 className="card-title">{t('runtimeConfigTitle')}</h2>
        <p style={{ marginTop: 4 }}>{t('runtimeConfigLead')}</p>
        <div className="meta-grid">
          <span>
            <strong>{t('runtimeAppEnv')}</strong> <code>{appEnv}</code>
          </span>
          <span>
            <strong>{t('runtimeSiteUrl')}</strong> <code>{siteUrl}</code>
          </span>
          <span>
            <strong>{t('runtimeApiBase')}</strong> <code>{apiBase}</code>
          </span>
          <span>
            <strong>Version</strong> <code>{appVersion}</code>
          </span>
        </div>
      </section>
    </main>
  );
}