"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>
        <div style={{ marginTop: 12 }}>
          <a
            className="button secondary"
            href="/api/health"
            target="_blank"
            rel="noreferrer"
          >
            {t("ctaHealth")}
          </a>
        </div>
      </section>
    </main>
  );
}