// frontend/src/app/[locale]/about/page.tsx
import Link from "next/link";
import type { Locale } from "@/lib/i18n";

export default async function AboutPage({
  params,
}: {
  params: Promise<{ locale: Locale }>;
}) {
  const { locale } = await params;

  const t =
    locale === "en"
      ? {
          title: "About",
          subtitle: "Who we are, how we work, and why you can trust Newsoras.",
          name: "Alejandro Márquez",
          role: "Political & Economic Analyst · Markets Specialist · AI Applications Developer",
          sections: {
            bio: "Bio",
            expertise: "Areas of expertise",
            methodology: "Methodology & editorial standards",
            ai: "How we use AI",
            featured: "Featured articles",
            contact: "Contact",
            disclaimers: "Disclosure",
          },
          bullets: {
            exp: [
              "15+ years analyzing political and economic dynamics with a focus on decision-making under uncertainty",
              "Postgraduate studies in Global Planning (strategic analysis, scenario-building, risk)",
              "Specialist in markets (macro, geopolitics → pricing, flows, incentives)",
              "Engineer and builder of AI-powered applications (automation, data pipelines, RAG)",
            ],
            focus: [
              "Geopolitics and power dynamics",
              "Markets and macroeconomics",
              "Technology, AI and digital transformation",
              "Scenario analysis and strategic planning",
            ],
            standards: [
              "Separate facts from analysis: what we know vs what we infer",
              "Prefer primary sources; link and name sources whenever possible",
              "Consistency checks for dates, numbers and names before publishing",
              "Corrections policy: we update and mark changes when errors are found",
            ],
            ai: [
              "AI helps summarize, detect contradictions, and structure drafts faster",
              "A human editor reviews and decides what is published",
              "We explicitly flag what is inference vs sourced facts",
            ],
          },
        }
      : locale === "zh"
      ? {
          title: "关于",
          subtitle: "我们是谁、如何工作，以及为什么你可以信任 Newsoras。",
          name: "Alejandro Márquez",
          role: "政治与经济分析 · 市场专家 · AI 应用开发者",
          sections: {
            bio: "简介",
            expertise: "专长领域",
            methodology: "方法与编辑标准",
            ai: "我们如何使用 AI",
            featured: "精选文章",
            contact: "联系",
            disclaimers: "披露说明",
          },
          bullets: {
            exp: [
              "15年以上政治与经济分析经验，专注不确定性下的决策与风险",
              "全球规划方向研究生学习（战略分析、情景推演、风险评估）",
              "市场专家（宏观与地缘政治 → 价格、资金流、激励机制）",
              "工程师与 AI 应用开发者（自动化、数据管道、RAG）",
            ],
            focus: ["地缘政治", "市场与宏观经济", "科技与 AI", "情景分析与战略规划"],
            standards: [
              "事实与观点分离：明确“已知”与“推断”",
              "尽可能优先使用一手来源并标注来源",
              "发布前核对日期、数字与关键姓名",
              "更正机制：发现错误会更新并标注变更",
            ],
            ai: [
              "AI 用于摘要、矛盾检测与更快生成结构化草稿",
              "最终发布由人工编辑审阅与决定",
              "明确标注推断与来源事实的边界",
            ],
          },
        }
      : {
          title: "Sobre mí",
          subtitle: "Quién soy, cómo trabajo y por qué podés confiar en Newsoras.",
          name: "Alejandro Márquez",
          role: "Analista político y económico · Especialista en Mercados · Desarrollador de Apps con IA",
          sections: {
            bio: "Biografía",
            expertise: "Áreas de especialización",
            methodology: "Metodología y estándares editoriales",
            ai: "Cómo usamos IA",
            featured: "Artículos destacados",
            contact: "Contacto",
            disclaimers: "Transparencia",
          },
          bullets: {
            exp: [
              "Más de 15 años analizando dinámicas políticas y económicas con foco en decisiones bajo incertidumbre",
              "Postgrado en Planificación Global (análisis estratégico, escenarios, riesgo)",
              "Especialista en mercados (macro y geopolítica → precios, flujos e incentivos)",
              "Ingeniero y desarrollador de aplicaciones basadas en IA (automatización, pipelines de datos, RAG)",
            ],
            focus: [
              "Geopolítica y poder",
              "Mercados, macroeconomía y política global",
              "Tecnologías emergentes e IA",
              "Planificación estratégica y análisis de escenarios",
            ],
            standards: [
              "Separar hechos de análisis: qué sabemos vs qué inferimos",
              "Priorizar fuentes primarias; citar y nombrar fuentes cuando sea posible",
              "Chequeo consistente de fechas, números y nombres antes de publicar",
              "Política de correcciones: si hay error, se actualiza y se marca el cambio",
            ],
            ai: [
              "La IA ayuda a resumir, detectar contradicciones y estructurar borradores más rápido",
              "Un humano edita, valida y decide qué se publica",
              "Se señala explícitamente qué es inferencia vs dato respaldado por fuentes",
            ],
          },
        };

  return (
    <main className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
      <div style={{ maxWidth: 920 }}>
        <h1 style={{ fontSize: "3rem", lineHeight: 1.05, marginBottom: 12 }}>
          {t.title}
        </h1>
        <p style={{ color: "var(--text-secondary)", fontSize: "1.05rem", lineHeight: 1.7 }}>
          {t.subtitle}
        </p>

        <div
          className="card"
          style={{
            marginTop: 22,
            padding: 22,
            borderRadius: "var(--radius)",
          }}
        >
          <h2 style={{ fontSize: "1.35rem", marginBottom: 6 }}>{t.name}</h2>
          <p style={{ color: "var(--text-secondary)", marginTop: 0, marginBottom: 14 }}>
            {t.role}
          </p>

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.bio}</h3>
          <ul style={{ marginTop: 0, color: "var(--text-secondary)", lineHeight: 1.7 }}>
            {t.bullets.exp.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>

          <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }} />

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.expertise}</h3>
          <ul style={{ marginTop: 0, color: "var(--text-secondary)", lineHeight: 1.7 }}>
            {t.bullets.focus.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>

          <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }} />

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.methodology}</h3>
          <ul style={{ marginTop: 0, color: "var(--text-secondary)", lineHeight: 1.7 }}>
            {t.bullets.standards.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>

          <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }} />

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.ai}</h3>
          <ul style={{ marginTop: 0, color: "var(--text-secondary)", lineHeight: 1.7 }}>
            {t.bullets.ai.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>

          <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }} />

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.featured}</h3>
          <ul style={{ marginTop: 0, color: "var(--text-secondary)", lineHeight: 1.7 }}>
            <li>
              <Link href={`/${locale}/article/tema1`} style={{ color: "var(--accent)" }}>
                Qué significa X para Y
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/article/tema2`} style={{ color: "var(--accent)" }}>
                Cómo afectará Z al futuro
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/article/tema3`} style={{ color: "var(--accent)" }}>
                Entendiendo W en contexto
              </Link>
            </li>
          </ul>

          <div style={{ height: 1, background: "var(--line)", margin: "16px 0" }} />

          <h3 style={{ fontSize: "1.05rem", marginBottom: 8 }}>{t.sections.disclaimers}</h3>
          <p style={{ marginTop: 0, color: "var(--text-muted)", lineHeight: 1.7 }}>
            {locale === "en"
              ? "Note: Newsoras publishes analysis and context. It is not investment advice. When AI is used, a human editor reviews the final output."
              : locale === "zh"
              ? "说明：Newsoras 提供分析与背景信息，不构成投资建议。若使用 AI，最终发布内容均经人工编辑审核。"
              : "Nota: Newsoras publica análisis y contexto. No es asesoramiento financiero. Cuando se usa IA, un editor humano revisa el resultado final."}
          </p>

          <h3 style={{ fontSize: "1.05rem", marginTop: 18, marginBottom: 8 }}>{t.sections.contact}</h3>
          <p style={{ marginTop: 0, color: "var(--text-secondary)" }}>
            {locale === "en"
              ? "For corrections, feedback or collaboration: contact@newsoras.com"
              : locale === "zh"
              ? "更正、建议或合作：contact@newsoras.com"
              : "Correcciones, feedback o colaboración: contact@newsoras.com"}
          </p>
        </div>
      </div>
    </main>
  );
}