// frontend/app/[locale]/about/page.tsx

// Crear:
// frontend/public/og/about.png (ideal 1200x630)

// frontend/public/logo.png (ideal 512x512)

import type { Metadata } from "next";
import Link from "next/link";
import type { Locale } from "@/lib/i18n";
import { isLocale } from "@/lib/i18n";

// ✅ Ajustá esto a tu dominio real (con https)
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://newsoras.com";
const SITE_NAME = "Newsoras";

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

  metaTitle: string;
  metaDescription: string;

  missionTitle: string;
  missionP1: string;
  missionP2: string;

  principlesTitle: string;
  principles: { title: string; desc: string }[];

  aiTitle: string;
  aiP1: string;
  aiBullets: string[];
  aiNote: string;

  integrityTitle: string;
  integrityBullets: string[];

  contactTitle: string;
  contactP1: string;
  contactCta: string;

  footerNote: string;
};

function getCopy(locale: Locale): Copy {
  if (locale === "es") {
    return {
      title: "Sobre Newsoras",
      subtitle: "Periodismo independiente. Contexto real. Opinión con criterio.",

      metaTitle: "Sobre Newsoras — periodismo independiente con apoyo de IA",
      metaDescription:
        "Newsoras es periodismo independiente enfocado en geopolítica, mercados y tecnología. Combinamos criterio humano con asistencia de IA para ofrecer contexto, claridad y análisis responsable.",

      missionTitle: "Nuestra misión",
      missionP1:
        "Newsoras nace para explicar el mundo sin gritarlo: geopolítica, mercados y tecnología contados con claridad, contexto y honestidad intelectual.",
      missionP2:
        "No perseguimos agendas partidistas ni titulares vacíos. Buscamos que entiendas qué pasó, por qué importa, quién gana y quién pierde, y cuáles son los escenarios posibles.",

      principlesTitle: "Principios editoriales",
      principles: [
        {
          title: "Independencia",
          desc: "No respondemos a partidos, gobiernos ni intereses corporativos. Nuestra lealtad es con el lector y con la evidencia.",
        },
        {
          title: "Rigor y veracidad",
          desc: "Priorizamos fuentes primarias, documentos oficiales y datos verificables. Cuando un dato es incierto, lo decimos.",
        },
        {
          title: "Contexto antes que ruido",
          desc: "Explicamos antecedentes, incentivos y consecuencias. Preferimos comprensión profunda sobre viralidad.",
        },
        {
          title: "Opinión responsable",
          desc: "La opinión es bienvenida si está bien argumentada y separada claramente de los hechos.",
        },
      ],

      aiTitle: "Cómo usamos IA (sin perder lo humano)",
      aiP1:
        "Usamos inteligencia artificial como asistente editorial, no como piloto automático. La IA acelera tareas; la responsabilidad final es humana.",
      aiBullets: [
        "Borradores y estructura inicial (con revisión humana completa).",
        "Mejora de claridad, estilo y resumen de antecedentes.",
        "Chequeos básicos de consistencia: fechas, nombres, cifras y comparaciones.",
        "Detección de puntos débiles: qué falta, qué se asume y qué debe citarse.",
      ],
      aiNote:
        "Transparencia: cuando un artículo fue trabajado con asistencia de IA, lo indicamos. La IA no es “fuente”; las fuentes son los documentos y reportes citados.",

      integrityTitle: "Lo que no hacemos",
      integrityBullets: [
        "No publicamos contenido que intente engañar (incluyendo imágenes o videos manipulados presentados como reales).",
        "No copiamos textos ni fotos de otros medios sin permiso. Citamos, enlazamos y aportamos valor propio.",
        "No “inventamos” datos. Si algo no está confirmado, se presenta como hipótesis o se omite.",
      ],

      contactTitle: "Contacto y colaboración",
      contactP1:
        "¿Querés sugerir un tema, corregir un dato o proponer una colaboración? Nos interesa el debate con respeto y evidencia.",
      contactCta: "Escribinos",
      footerNote:
        "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System. Hechos verificables + análisis con criterio.",
    };
  }

  if (locale === "zh") {
    return {
      title: "关于 Newsoras",
      subtitle: "独立新闻 · 清晰背景 · 有理有据的观点",

      metaTitle: "关于 Newsoras — 独立新闻与 AI 辅助分析",
      metaDescription:
        "Newsoras 是独立新闻媒体，聚焦地缘政治、市场与科技。我们结合人类编辑判断与 AI 工具，提供背景、清晰解读与负责任的分析。",

      missionTitle: "我们的使命",
      missionP1:
        "Newsoras 致力于用清晰、克制且可验证的方式讲述世界：聚焦地缘政治、市场与科技，帮助读者理解“发生了什么、为何重要、接下来可能怎样”。",
      missionP2:
        "我们不追逐空洞的噱头，也不服务于任何政治或商业议程。我们追求的是可读性、背景信息与诚实的分析。",

      principlesTitle: "编辑原则",
      principles: [
        {
          title: "独立性",
          desc: "不隶属于政党、政府或企业利益。我们的责任首先对读者与证据负责。",
        },
        {
          title: "严谨与真实性",
          desc: "优先使用一手资料、官方文件与可核查数据。如存在不确定性，我们会明确说明。",
        },
        {
          title: "背景胜过噪音",
          desc: "解释历史脉络、激励机制与可能后果。我们更重视理解，而非流量。",
        },
        {
          title: "负责任的观点",
          desc: "观点可以鲜明，但必须与事实区分清楚，并以论证与证据支撑。",
        },
      ],

      aiTitle: "我们如何使用 AI（以人为本）",
      aiP1:
        "我们把 AI 当作编辑助手，而不是自动写作机器。AI 负责提效，人类负责判断与最终发布。",
      aiBullets: [
        "生成结构与初稿（由编辑完整复核）。",
        "提升表达清晰度、修订语言与背景摘要。",
        "进行基本一致性检查：日期、姓名、数字与对比。",
        "提示潜在缺口：哪些假设需要说明、哪些信息需要引用。",
      ],
      aiNote:
        "透明说明：若文章使用了 AI 协助，我们会标注。AI 不是信息来源；来源是被引用的文件与报道。",

      integrityTitle: "我们不会做的事",
      integrityBullets: [
        "不发布误导性内容（包括把 AI 图像/视频当作真实事件）。",
        "不在无授权情况下复制他人图片或全文内容。我们引用、链接并提供增量价值。",
        "不凭空编造数据。如未确认，我们会标注为假设或不采用。",
      ],

      contactTitle: "联系与合作",
      contactP1:
        "欢迎提供线索、勘误或合作提案。我们重视基于证据与尊重的讨论。",
      contactCta: "联系我们",
      footerNote:
        "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System（基于来源的实时分析体系）。",
    };
  }

  return {
    title: "About Newsoras",
    subtitle: "Independent journalism. Real context. Opinion with judgment.",

    metaTitle: "About Newsoras — independent journalism with AI assistance",
    metaDescription:
      "Newsoras is independent journalism focused on geopolitics, markets, and technology. We combine human editorial judgment with AI support to deliver context, clarity, and responsible analysis.",

    missionTitle: "Our mission",
    missionP1:
      "Newsoras exists to explain the world without shouting: geopolitics, markets, and technology—written with clarity, context, and intellectual honesty.",
    missionP2:
      "We don’t chase empty headlines or serve partisan agendas. We aim to help you understand what happened, why it matters, who benefits, who pays the cost, and what scenarios may unfold next.",

    principlesTitle: "Editorial principles",
    principles: [
      {
        title: "Independence",
        desc: "We don’t answer to parties, governments, or corporate interests. Our loyalty is to readers and evidence.",
      },
      {
        title: "Rigor & truthfulness",
        desc: "We prioritize primary sources, official documents, and verifiable data. When something is uncertain, we say so.",
      },
      {
        title: "Context over noise",
        desc: "We explain history, incentives, and consequences. Understanding beats virality.",
      },
      {
        title: "Responsible opinion",
        desc: "Opinion is welcome when it’s argued well and clearly separated from facts.",
      },
    ],

    aiTitle: "How we use AI (without losing the human)",
    aiP1:
      "We use AI as an editorial assistant—not an autopilot. It speeds up work, but final responsibility is human.",
    aiBullets: [
      "Drafting and initial structure (with full human review).",
      "Improving clarity, style, and background summaries.",
      "Basic consistency checks: dates, names, numbers, comparisons.",
      "Surfacing weak spots: what’s missing, what’s assumed, what needs citations.",
    ],
    aiNote:
      "Transparency: when AI assistance is used, we disclose it. AI is not a “source”; sources are the documents and reports we cite.",

    integrityTitle: "What we don’t do",
    integrityBullets: [
      "We don’t publish misleading content (including AI imagery presented as real events).",
      "We don’t copy text or photos from other outlets without permission. We cite, link, and add original value.",
      "We don’t invent data. If it’s not confirmed, we label it as hypothesis—or we omit it.",
    ],

    contactTitle: "Contact & collaboration",
    contactP1:
      "Want to suggest a topic, flag a correction, or propose a collaboration? We welcome respectful debate grounded in evidence.",
    contactCta: "Reach out",
    footerNote:
      "Newsoras — S.O.R.A.S.: Source-Oriented, Real-time Analysis System. Verifiable facts + thoughtful analysis.",
  };
}

// --- 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}/about`, SITE_URL).toString();

  return {
    title: t.metaTitle,
    description: t.metaDescription,
    alternates: {
      canonical,
      languages: {
        en: new URL(`/en/about`, SITE_URL).toString(),
        es: new URL(`/es/about`, SITE_URL).toString(),
        zh: new URL(`/zh/about`, 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: [
        {
          // ✅ Poné este archivo en /public/og/about.png (1200x630)
          url: new URL(`/og/about.png`, SITE_URL).toString(),
          width: 1200,
          height: 630,
          alt: `${SITE_NAME} — About`,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: t.metaTitle,
      description: t.metaDescription,
      images: [new URL(`/og/about.png`, SITE_URL).toString()],
    },
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        // ✅ importante para Discover: permitir preview de imágenes grandes
        "max-image-preview": "large",
        "max-snippet": -1,
        "max-video-preview": -1,
      },
    },
  };
}

// --- JSON-LD helpers ---------------------------------------------------------
function jsonLdOrganization(locale: Locale) {
  // Idiomas para Organization; Google lo acepta como una lista o uno solo.
  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,
    // ✅ Poné un logo real en /public/logo.png (ideal 512x512)
    logo: `${SITE_URL}/logo.png`,
    sameAs: [
      // ✅ opcional: agrega redes reales cuando existan
      // "https://x.com/newsoras",
      // "https://www.youtube.com/@newsoras",
      // "https://www.linkedin.com/company/newsoras",
    ],
    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,
    // ✅ opcional si tenés búsqueda interna
    // potentialAction: {
    //   "@type": "SearchAction",
    //   target: `${SITE_URL}/search?q={search_term_string}`,
    //   "query-input": "required name=search_term_string",
    // },
  };
}

// --- Page -------------------------------------------------------------------
export default async function AboutPage({ 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);

  return (
    <main className="container" style={{ paddingTop: 22, paddingBottom: 30 }}>
      {/* ✅ JSON-LD (Organization + WebSite) */}
      <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) }}
      />

      {/* 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">Geopolitics</span>
            <span className="badge">Markets</span>
            <span className="badge">AI + Editorial Judgment</span>
          </div>
        </div>
      </section>

      {/* Content */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18, marginTop: 18 }}>
        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.missionTitle}
          </h2>
          <p className="p" style={{ marginTop: 8 }}>
            {t.missionP1}
          </p>
          <p className="p" style={{ marginTop: 10 }}>
            {t.missionP2}
          </p>

          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14 }}>
            <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
              Fact-first
            </span>
            <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
              Context
            </span>
            <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
              Scenarios
            </span>
            <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
              No clickbait
            </span>
          </div>
        </div>

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

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
            {t.principles.map((p) => (
              <div
                key={p.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 }}>{p.title}</h3>
                </div>
                <p className="p" style={{ margin: 0, color: "var(--text-secondary)" }}>
                  {p.desc}
                </p>
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.aiTitle}
          </h2>
          <p className="p" style={{ marginTop: 8 }}>
            {t.aiP1}
          </p>

          <ul style={{ marginTop: 12, paddingLeft: 18, color: "var(--text-secondary)", lineHeight: 1.75 }}>
            {t.aiBullets.map((x) => (
              <li key={x}>{x}</li>
            ))}
          </ul>

          <div
            style={{
              marginTop: 14,
              padding: 14,
              borderRadius: 16,
              border: "1px dashed var(--line)",
              background: "rgba(255,255,255,0.02)",
            }}
          >
            <p className="p" style={{ margin: 0, color: "var(--text-secondary)" }}>
              {t.aiNote}
            </p>
          </div>
        </div>

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

        <div className="card" style={{ padding: 20 }}>
          <h2 className="h2" style={{ marginBottom: 8 }}>
            {t.contactTitle}
          </h2>
          <p className="p" style={{ marginTop: 8 }}>
            {t.contactP1}
          </p>

          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14 }}>
            <Link
              href={`/${locale}/contact`}
              className="badge"
              style={{ borderColor: "var(--text-muted)", padding: "10px 14px" }}
            >
              {t.contactCta}
            </Link>

            <Link href={`/${locale}`} className="badge" style={{ padding: "10px 14px" }}>
              Home
            </Link>
          </div>

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