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

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://newsoras.com";
const SITE_NAME = "Newsoras";

// ✅ Ajustá si querés: email para aplicar / colaborar
const CAREERS_EMAIL = process.env.NEXT_PUBLIC_CAREERS_EMAIL || "careers@newsoras.com";

type Job = {
  id: string;
  title: string;
  location: string;
  type: string;
  level: string;
  summary: string;
  bullets: string[];
  whatYouBring: string[];
  niceToHave: string[];
  howToApply: string[];
};

type Copy = {
  title: string;
  subtitle: string;

  metaTitle: string;
  metaDescription: string;

  introTitle: string;
  introP1: string;
  introP2: string;

  valuesTitle: string;
  values: { title: string; desc: string }[];

  rolesTitle: string;
  rolesHint: string;

  processTitle: string;
  processSteps: string[];

  applyTitle: string;
  applyP: string;
  applyCta: string;

  footerNote: string;

  jobs: Job[];
};

function getCopy(locale: Locale): Copy {
  if (locale === "es") {
    return {
      title: "Carreras",
      subtitle:
        "Sumate a Newsoras: periodismo independiente, análisis con criterio y herramientas modernas.",

      metaTitle: "Carreras — Newsoras",
      metaDescription:
        "Oportunidades para colaborar con Newsoras. Buscamos periodistas, editores, analistas, investigadores y perfiles técnicos para construir periodismo independiente con asistencia de IA.",

      introTitle: "Por qué Newsoras",
      introP1:
        "Newsoras es un medio independiente enfocado en geopolítica, mercados y tecnología. Construimos contenido con rigor: hechos verificables + análisis responsable + contexto real.",
      introP2:
        "Usamos IA como asistente (no como piloto automático) para acelerar borradores, mejorar claridad y detectar inconsistencias. La decisión editorial final siempre es humana.",

      valuesTitle: "Lo que valoramos",
      values: [
        {
          title: "Rigor",
          desc: "Fuentes primarias, datos verificables, y transparencia cuando hay incertidumbre.",
        },
        {
          title: "Independencia",
          desc: "Sin agendas partidistas ni intereses corporativos. Lealtad al lector.",
        },
        {
          title: "Claridad",
          desc: "Explicar el porqué y el contexto, no solo repetir titulares.",
        },
        {
          title: "Responsabilidad",
          desc: "Opinión argumentada, separada de los hechos, sin sensacionalismo.",
        },
      ],

      rolesTitle: "Roles abiertos",
      rolesHint:
        "Si no ves tu rol, igual podés escribirnos. Nos interesan colaboradores fuertes y confiables.",

      processTitle: "Proceso (simple y humano)",
      processSteps: [
        "1) Nos mandás tu propuesta/portfolio.",
        "2) Te pedimos una muestra corta (o revisamos trabajos previos).",
        "3) Una charla breve para alinear estilo, rigor y tiempos.",
        "4) Arrancamos con una prueba pagada / colaboración inicial.",
      ],

      applyTitle: "Cómo aplicar",
      applyP:
        "Mandanos un email con asunto “Careers — [Rol]” + links a trabajos previos. Si no tenés, mandá una muestra corta y concreta.",
      applyCta: "Enviar email",

      footerNote:
        "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System. Hechos verificables + análisis con criterio.",

      jobs: [
        {
          id: "editorial-analyst",
          title: "Analista editorial (Geopolítica / Mercados)",
          location: "Remoto",
          type: "Colaboración / Part-time",
          level: "Mid / Senior",
          summary:
            "Buscamos alguien que convierta noticias en entendimiento: escenarios, incentivos, consecuencias y síntesis clara.",
          bullets: [
            "Escribir análisis con estructura (hechos → contexto → escenarios).",
            "Citar fuentes primarias y documentar datos clave.",
            "Separar con claridad opinión vs hecho verificable.",
            "Trabajar con asistencia de IA (borradores) y revisión final humana.",
          ],
          whatYouBring: [
            "Excelente escritura (clara, directa, sin humo).",
            "Conocimiento real en política internacional, economía o mercados.",
            "Criterio para priorizar lo importante sobre lo viral.",
          ],
          niceToHave: [
            "Experiencia en investigación OSINT y fuentes públicas.",
            "Capacidad de leer documentos largos y extraer puntos clave.",
            "Manejo de datos (tablas, series, conceptos básicos).",
          ],
          howToApply: [
            "2–3 links de artículos (o textos) tuyos.",
            "Un párrafo: por qué Newsoras y qué aportarías.",
            "Disponibilidad semanal aproximada.",
          ],
        },
        {
          id: "copy-editor",
          title: "Editor/a de estilo y verificación básica",
          location: "Remoto",
          type: "Freelance",
          level: "Mid",
          summary:
            "Queremos un editor que mejore claridad, coherencia y consistencia factual. No es corregir comas: es elevar calidad.",
          bullets: [
            "Revisión de texto (claridad, ritmo, estructura).",
            "Chequeo básico de consistencia: fechas, nombres, cifras.",
            "Estandarizar títulos, subtítulos y formatos.",
            "Aplicar guidelines editoriales y tono Newsoras.",
          ],
          whatYouBring: [
            "Ojo clínico para incoherencias y errores sutiles.",
            "Excelencia en ortografía y estilo (ES y/o EN).",
            "Mentalidad de calidad: detalle + velocidad.",
          ],
          niceToHave: [
            "Experiencia editando medios digitales.",
            "Conocimiento básico de SEO on-page.",
            "Familiaridad con Markdown y flujos en Git.",
          ],
          howToApply: [
            "Portfolio o ejemplos de edición (antes/después si tenés).",
            "Idiomas (ES/EN/ZH) y nivel real.",
            "Rango de tarifas o modalidad.",
          ],
        },
        {
          id: "frontend-dev",
          title: "Frontend (Next.js) — UI/SEO",
          location: "Remoto",
          type: "Proyecto / Part-time",
          level: "Mid / Senior",
          summary:
            "Buscamos alguien obsesivo con UX y SEO técnico: performance, metadata, schema, accesibilidad y mobile-first.",
          bullets: [
            "Mejorar templates (Home, Article, About, Discover-ready).",
            "Optimizar Core Web Vitals y performance.",
            "Implementar JSON-LD (NewsArticle/Organization/Person).",
            "Mejorar UX móvil y accesibilidad (semántica, ARIA, contraste).",
          ],
          whatYouBring: [
            "Next.js App Router sólido + TypeScript.",
            "Criterio de UX y diseño minimalista moderno.",
            "Conocimiento práctico de SEO técnico.",
          ],
          niceToHave: [
            "Experiencia con i18n y rutas por locale.",
            "Experiencia con imágenes OG y social previews.",
            "Conocimiento de seguridad web básica (headers, sanitización).",
          ],
          howToApply: [
            "GitHub / ejemplos de proyectos reales.",
            "Qué mejorarías en 3 bullets al ver Newsoras.",
            "Disponibilidad y zona horaria.",
          ],
        },
      ],
    };
  }

  if (locale === "zh") {
    return {
      title: "招聘 / 合作",
      subtitle: "加入 Newsoras：独立新闻、清晰分析与现代化工具。",

      metaTitle: "招聘 — Newsoras",
      metaDescription:
        "加入 Newsoras。我们寻找记者、编辑、分析师、研究者与技术人才，共同打造独立新闻与 AI 辅助分析的高质量内容。",

      introTitle: "为什么是 Newsoras",
      introP1:
        "Newsoras 聚焦地缘政治、市场与科技。我们强调严谨：可核查事实 + 负责任分析 + 真实背景。",
      introP2:
        "我们把 AI 当作助手（不是自动写作）。AI 负责提效，人类负责判断与最终发布。",

      valuesTitle: "我们重视什么",
      values: [
        { title: "严谨", desc: "优先一手资料与可验证数据，不确定时透明说明。" },
        { title: "独立", desc: "不服务政治或商业议程，对读者负责。" },
        { title: "清晰", desc: "提供背景与因果，而非重复标题。" },
        { title: "责任", desc: "观点与事实分离，拒绝耸动与误导。" },
      ],

      rolesTitle: "开放角色",
      rolesHint: "如果没有合适岗位，也欢迎来信介绍你的能力与想法。",

      processTitle: "流程（简单、尊重）",
      processSteps: [
        "1) 发送作品/提案。",
        "2) 简短试稿或评估既往作品。",
        "3) 快速沟通对齐风格与节奏。",
        "4) 以付费试合作开始。",
      ],

      applyTitle: "如何申请",
      applyP:
        "邮件主题：“Careers — [Role]”，附作品链接或短样稿，并说明可投入时间与合作方式。",
      applyCta: "发送邮件",

      footerNote:
        "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System（基于来源的实时分析体系）。",

      jobs: [
        {
          id: "editorial-analyst",
          title: "编辑分析师（地缘政治 / 市场）",
          location: "远程",
          type: "合作 / 兼职",
          level: "中高级",
          summary: "将新闻转化为理解：背景、激励机制、后果与情景推演。",
          bullets: [
            "结构化写作（事实→背景→情景）。",
            "引用一手来源并记录关键数据。",
            "清晰区分事实与观点。",
            "AI 辅助 + 人工最终审核。",
          ],
          whatYouBring: ["优秀写作能力", "相关领域知识", "判断力与克制"],
          niceToHave: ["OSINT/公开信息研究", "阅读长文档并提炼要点", "数据素养"],
          howToApply: ["2–3 篇作品链接", "一句话说明你能带来什么", "每周可投入时间"],
        },
      ],
    };
  }

  return {
    title: "Careers",
    subtitle: "Join Newsoras: independent journalism, thoughtful analysis, modern tooling.",

    metaTitle: "Careers — Newsoras",
    metaDescription:
      "Work with Newsoras. We’re looking for journalists, editors, analysts, researchers, and technical contributors to build independent journalism with AI assistance.",

    introTitle: "Why Newsoras",
    introP1:
      "Newsoras is independent journalism focused on geopolitics, markets, and technology. We aim for rigor: verifiable facts + responsible analysis + real context.",
    introP2:
      "We use AI as an assistant (not autopilot) to speed up drafts, improve clarity, and surface inconsistencies. Final editorial responsibility stays human.",

    valuesTitle: "What we value",
    values: [
      { title: "Rigor", desc: "Primary sources, verifiable data, transparency under uncertainty." },
      { title: "Independence", desc: "No partisan agenda. Loyalty to readers." },
      { title: "Clarity", desc: "Explain incentives and consequences—not just headlines." },
      { title: "Responsibility", desc: "Argued opinion, clearly separated from facts." },
    ],

    rolesTitle: "Open roles",
    rolesHint: "Don’t see your role? Reach out anyway—we love strong collaborators.",

    processTitle: "Process (simple & human)",
    processSteps: [
      "1) Send your pitch/portfolio.",
      "2) Short paid test (or review prior work).",
      "3) Quick alignment call on style and cadence.",
      "4) Start with a paid trial / initial collaboration.",
    ],

    applyTitle: "How to apply",
    applyP:
      "Email us with subject “Careers — [Role]” plus links to prior work. No portfolio? Send a short, concrete writing sample.",
    applyCta: "Email us",

    footerNote:
      "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System. Verifiable facts + thoughtful analysis.",

    jobs: [
      {
        id: "editorial-analyst",
        title: "Editorial analyst (Geopolitics / Markets)",
        location: "Remote",
        type: "Contract / Part-time",
        level: "Mid / Senior",
        summary: "Turn news into understanding: scenarios, incentives, consequences, crisp synthesis.",
        bullets: [
          "Write structured analysis (facts → context → scenarios).",
          "Cite primary sources and track key data points.",
          "Separate opinion from verifiable facts clearly.",
          "Work with AI assistance + human final review.",
        ],
        whatYouBring: ["Strong writing", "Domain knowledge", "Good judgment under uncertainty"],
        niceToHave: ["OSINT research", "Data literacy", "Comfort with Markdown/Git workflows"],
        howToApply: ["2–3 links to your work", "A short note: why Newsoras", "Weekly availability"],
      },
    ],
  };
}

// --- SEO: generateMetadata ---------------------------------------------------
export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale: rawLocale } = await params;
  const locale: Locale = isLocale(rawLocale) ? rawLocale : "en";
  const t = getCopy(locale);

  const canonical = new URL(`/${locale}/careers`, SITE_URL).toString();

  return {
    title: t.metaTitle,
    description: t.metaDescription,
    alternates: {
      canonical,
      languages: {
        en: new URL(`/en/careers`, SITE_URL).toString(),
        es: new URL(`/es/careers`, SITE_URL).toString(),
        zh: new URL(`/zh/careers`, SITE_URL).toString(),
      },
    },
    openGraph: {
      type: "website",
      url: canonical,
      siteName: SITE_NAME,
      title: t.metaTitle,
      description: t.metaDescription,
      locale: locale === "es" ? "es_ES" : locale === "zh" ? "zh_CN" : "en_US",
      images: [
        {
          // ✅ crear: /public/og/careers.png (1200x630)
          url: new URL(`/og/careers.png`, SITE_URL).toString(),
          width: 1200,
          height: 630,
          alt: `${SITE_NAME} — Careers`,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: t.metaTitle,
      description: t.metaDescription,
      images: [new URL(`/og/careers.png`, SITE_URL).toString()],
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-image-preview": "large",
        "max-snippet": -1,
        "max-video-preview": -1,
      },
    },
  };
}

// --- JSON-LD ---------------------------------------------------------------
function jsonLdOrganization(locale: Locale) {
  const inLanguage = locale === "es" ? "es" : locale === "zh" ? "zh" : "en";

  return {
    "@context": "https://schema.org",
    "@type": "Organization",
    "@id": `${SITE_URL}#organization`,
    name: SITE_NAME,
    url: SITE_URL,
    logo: `${SITE_URL}/logo.png`,
    email: CAREERS_EMAIL,
    inLanguage,
  };
}

function jsonLdWebsite(locale: Locale) {
  const inLanguage = locale === "es" ? "es" : locale === "zh" ? "zh" : "en";
  return {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "@id": `${SITE_URL}#website`,
    url: SITE_URL,
    name: SITE_NAME,
    publisher: { "@id": `${SITE_URL}#organization` },
    inLanguage,
  };
}

function jsonLdCareersPage(locale: Locale) {
  const inLanguage = locale === "es" ? "es" : locale === "zh" ? "zh" : "en";
  const url = `${SITE_URL}/${locale}/careers`;

  return {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "@id": `${url}#webpage`,
    url,
    name: `${SITE_NAME} — Careers`,
    isPartOf: { "@id": `${SITE_URL}#website` },
    about: { "@id": `${SITE_URL}#organization` },
    inLanguage,
  };
}

function jsonLdJobPosting(locale: Locale, job: Job) {
  const inLanguage = locale === "es" ? "es" : locale === "zh" ? "zh" : "en";
  const url = `${SITE_URL}/${locale}/careers#${job.id}`;

  // NOTE: JobPosting usually wants a datePosted and sometimes employmentType, etc.
  // We keep it simple but valid; you can add datePosted later if you want.
  return {
    "@context": "https://schema.org",
    "@type": "JobPosting",
    "@id": `${url}#jobposting`,
    title: job.title,
    description:
      `${job.summary}\n\nResponsibilities:\n- ${job.bullets.join("\n- ")}\n\nWhat you bring:\n- ${job.whatYouBring.join(
        "\n- "
      )}\n\nNice to have:\n- ${job.niceToHave.join("\n- ")}\n\nHow to apply:\n- ${job.howToApply.join(
        "\n- "
      )}`,
    hiringOrganization: { "@id": `${SITE_URL}#organization` },
    employmentType: job.type,
    jobLocationType: job.location.toLowerCase().includes("remoto") || job.location.toLowerCase().includes("remote")
      ? "TELECOMMUTE"
      : undefined,
    applicantLocationRequirements:
      job.location.toLowerCase().includes("remoto") || job.location.toLowerCase().includes("remote")
        ? { "@type": "Country", name: "Worldwide" }
        : undefined,
    url,
    inLanguage,
  };
}

// --- Page -------------------------------------------------------------------
export default async function CareersPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale: rawLocale } = await params;
  const locale: Locale = isLocale(rawLocale) ? rawLocale : "en";
  const t = getCopy(locale);

  const orgLd = jsonLdOrganization(locale);
  const siteLd = jsonLdWebsite(locale);
  const pageLd = jsonLdCareersPage(locale);

  const subject =
    locale === "es"
      ? "Careers — Newsoras"
      : locale === "zh"
      ? "招聘 — Newsoras"
      : "Careers — Newsoras";

  const mailtoHref = `mailto:${encodeURIComponent(CAREERS_EMAIL)}?subject=${encodeURIComponent(subject)}`;

  return (
    <main className="container" style={{ paddingTop: 22, paddingBottom: 30 }}>
      {/* ✅ JSON-LD: Organization + WebSite + Careers page */}
      <script
        type="application/ld+json"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: JSON.stringify(orgLd) }}
      />
      <script
        type="application/ld+json"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: JSON.stringify(siteLd) }}
      />
      <script
        type="application/ld+json"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: JSON.stringify(pageLd) }}
      />

      {/* ✅ JSON-LD: JobPosting for each role */}
      {t.jobs.map((job) => (
        <script
          key={job.id}
          type="application/ld+json"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdJobPosting(locale, job)) }}
        />
      ))}

      {/* Hero */}
      <section className="card" style={{ position: "relative", overflow: "hidden", padding: 22 }}>
        <div
          aria-hidden
          style={{
            position: "absolute",
            inset: -60,
            background:
              "radial-gradient(600px 220px at 20% 0%, var(--accent-glow), transparent 70%), radial-gradient(500px 220px at 80% 20%, rgba(37, 99, 235, 0.25), transparent 70%)",
            filter: "blur(8px)",
            opacity: 0.9,
          }}
        />

        <div style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <div
              style={{
                width: 44,
                height: 44,
                borderRadius: 12,
                background: "linear-gradient(135deg, var(--accent), #2563eb)",
                boxShadow: "0 0 18px var(--accent-glow)",
              }}
            />
            <div>
              <h1 className="h1" style={{ margin: 0 }}>
                {t.title}
              </h1>
              <p className="p" style={{ margin: "6px 0 0 0", color: "var(--text-secondary)" }}>
                {t.subtitle}
              </p>
            </div>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
            <span className="badge">Independent</span>
            <span className="badge">Editorial</span>
            <span className="badge">AI-assisted</span>
            <span className="badge">Remote</span>
          </div>
        </div>
      </section>

      {/* Content */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18, marginTop: 18 }}>
        {/* Intro */}
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.introTitle}
          </h2>
          <p className="p" style={{ marginTop: 8 }}>
            {t.introP1}
          </p>
          <p className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
            {t.introP2}
          </p>
        </div>

        {/* Values */}
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 14 }}>
            {t.valuesTitle}
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
            {t.values.map((v) => (
              <div
                key={v.title}
                style={{
                  border: "1px solid var(--line)",
                  borderRadius: 16,
                  padding: 14,
                  background: "rgba(255,255,255,0.02)",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                  <div
                    style={{
                      width: 10,
                      height: 10,
                      borderRadius: 999,
                      background: "var(--accent)",
                      boxShadow: "0 0 10px var(--accent-glow)",
                    }}
                  />
                  <h3 style={{ margin: 0, fontSize: "1rem", fontWeight: 800 }}>{v.title}</h3>
                </div>
                <p className="p" style={{ margin: 0, color: "var(--text-secondary)" }}>
                  {v.desc}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* Roles */}
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.rolesTitle}
          </h2>
          <p className="p" style={{ marginTop: 8, color: "var(--text-secondary)" }}>
            {t.rolesHint}
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12, marginTop: 14 }}>
            {t.jobs.map((job) => (
              <article
                key={job.id}
                id={job.id}
                className="card"
                style={{
                  padding: 16,
                  border: "1px solid var(--line)",
                  background: "rgba(255,255,255,0.02)",
                }}
              >
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
                  <h3 style={{ margin: 0, fontSize: "1.05rem", fontWeight: 900, letterSpacing: "-0.01em" }}>
                    {job.title}
                  </h3>
                  <span className="badge" style={{ marginLeft: "auto" }}>
                    {job.location}
                  </span>
                </div>

                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
                  <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
                    {job.type}
                  </span>
                  <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
                    {job.level}
                  </span>
                </div>

                <p className="p" style={{ marginTop: 12 }}>
                  {job.summary}
                </p>

                <div style={splitGrid}>
                  <div>
                    <div style={sectionLabelStyle(locale)}>
                      {locale === "es" ? "Responsabilidades" : locale === "zh" ? "职责" : "Responsibilities"}
                    </div>
                    <ul style={ulStyle}>
                      {job.bullets.map((x) => (
                        <li key={x}>{x}</li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <div style={sectionLabelStyle(locale)}>
                      {locale === "es" ? "Qué buscamos" : locale === "zh" ? "你需要具备" : "What you bring"}
                    </div>
                    <ul style={ulStyle}>
                      {job.whatYouBring.map((x) => (
                        <li key={x}>{x}</li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <div style={sectionLabelStyle(locale)}>
                      {locale === "es" ? "Plus" : locale === "zh" ? "加分项" : "Nice to have"}
                    </div>
                    <ul style={ulStyle}>
                      {job.niceToHave.map((x) => (
                        <li key={x}>{x}</li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <div style={sectionLabelStyle(locale)}>
                      {locale === "es" ? "Cómo aplicar" : locale === "zh" ? "申请方式" : "How to apply"}
                    </div>
                    <ul style={ulStyle}>
                      {job.howToApply.map((x) => (
                        <li key={x}>{x}</li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 12 }}>
                  <a href={mailtoHref} className="badge" style={{ ...ctaStyle, borderColor: "var(--text-muted)" }}>
                    {locale === "es" ? "Aplicar" : locale === "zh" ? "申请" : "Apply"}
                  </a>

                  <Link href={`/${locale}/about`} className="badge" style={ctaStyle}>
                    {locale === "es" ? "Sobre nosotros" : locale === "zh" ? "关于我们" : "About"}
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>

        {/* Process */}
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.processTitle}
          </h2>
          <ul style={{ marginTop: 12, paddingLeft: 18, color: "var(--text-secondary)", lineHeight: 1.75 }}>
            {t.processSteps.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>
        </div>

        {/* Apply */}
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.applyTitle}
          </h2>
          <p className="p" style={{ marginTop: 8, color: "var(--text-secondary)" }}>
            {t.applyP}
          </p>

          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 12 }}>
            <a href={mailtoHref} className="badge" style={{ ...ctaStyle, borderColor: "var(--text-muted)" }}>
              {t.applyCta}
            </a>
            <Link href={`/${locale}`} className="badge" style={ctaStyle}>
              Home
            </Link>
          </div>

          <div style={{ marginTop: 14, color: "var(--text-muted)", fontSize: 12 }}>{t.footerNote}</div>
        </div>
      </section>
    </main>
  );
}

// --- UI helpers (consistent, mobile-first) ----------------------------------
const splitGrid: React.CSSProperties = {
  display: "grid",
  gridTemplateColumns: "1fr",
  gap: 12,
  marginTop: 12,
};

const ulStyle: React.CSSProperties = {
  marginTop: 10,
  paddingLeft: 18,
  color: "var(--text-secondary)",
  lineHeight: 1.75,
};

function sectionLabelStyle(locale: Locale): React.CSSProperties {
  return {
    fontSize: 12,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "var(--text-muted)",
    fontWeight: 800,
  };
}

const ctaStyle: React.CSSProperties = {
  padding: "10px 14px",
  display: "inline-flex",
  alignItems: "center",
  gap: 8,
};

// --- Notes (files to add) ---------------------------------------------------
// 1) /public/og/careers.png  (1200x630)
// 2) /public/logo.png        (512x512)
// 3) .env.local (prod):
//    NEXT_PUBLIC_SITE_URL=https://newsoras.com
//    NEXT_PUBLIC_CAREERS_EMAIL=careers@newsoras.com
