// frontend/app/[locale]/advertising/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";

const ADS_EMAIL = process.env.NEXT_PUBLIC_ADS_EMAIL || "ads@newsoras.com";
const LAST_UPDATED_ISO = process.env.NEXT_PUBLIC_ADS_LAST_UPDATED || "2026-01-04";

// ✅ Si querés mostrar números reales en la página
const MEDIA_KIT_URL = process.env.NEXT_PUBLIC_MEDIA_KIT_URL || ""; // ej: https://newsoras.com/media-kit.pdf
const PRESS_KIT_URL = process.env.NEXT_PUBLIC_PRESS_KIT_URL || ""; // opcional

type PackageCard = {
  id: string;
  title: string;
  bestFor: string;
  bullets: string[];
};

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

  metaTitle: string;
  metaDescription: string;

  lastUpdatedLabel: string;

  tocTitle: string;
  toc: { id: string; label: string }[];

  introTitle: string;
  introP: string[];
  valuesTitle: string;
  values: { t: string; d: string }[];

  packagesTitle: string;
  packages: PackageCard[];

  formatsTitle: string;
  formatsP: string[];
  formats: { t: string; d: string }[];

  guidelinesTitle: string;
  guidelinesP: string[];
  guidelinesBullets: string[];

  disclosureTitle: string;
  disclosureP: string[];
  disclosureBullets: string[];

  faqTitle: string;
  faqs: { q: string; a: string }[];

  contactTitle: string;
  contactP: string;
  contactCta: string;

  footerNote: string;
};

function fmtDate(locale: Locale, iso: string) {
  const d = new Date(iso + "T00:00:00Z");
  const y = d.getUTCFullYear();
  const m = d.getUTCMonth() + 1;
  const day = d.getUTCDate();
  const pad = (n: number) => String(n).padStart(2, "0");

  if (locale === "es") return `${pad(day)}/${pad(m)}/${y}`;
  if (locale === "zh") return `${y}-${pad(m)}-${pad(day)}`;
  return `${y}-${pad(m)}-${pad(day)}`;
}

function getCopy(locale: Locale): Copy {
  if (locale === "es") {
    return {
      title: "Publicidad",
      subtitle:
        "Anuncios con estándares editoriales: transparencia, calidad y foco en lectores reales.",

      metaTitle: "Publicidad — Newsoras",
      metaDescription:
        "Publicidad en Newsoras: formatos, paquetes, estándares, disclosures de contenido patrocinado y contacto comercial. Enfoque en calidad, veracidad y audiencia real.",

      lastUpdatedLabel: "Última actualización",

      tocTitle: "Índice",
      toc: [
        { id: "por-que", label: "Por qué Newsoras" },
        { id: "paquetes", label: "Paquetes" },
        { id: "formatos", label: "Formatos" },
        { id: "lineamientos", label: "Lineamientos" },
        { id: "transparencia", label: "Transparencia" },
        { id: "faq", label: "FAQ" },
        { id: "contacto", label: "Contacto" },
      ],

      introTitle: "Por qué anunciar en Newsoras",
      introP: [
        "Newsoras es periodismo independiente con foco en geopolítica, mercados y tecnología. Nuestra audiencia busca contexto y claridad, no ruido.",
        "Trabajamos con marcas que valoran la credibilidad y la transparencia. Priorizamos anuncios útiles, no invasivos, y respetamos la experiencia móvil.",
      ],

      valuesTitle: "Principios comerciales",
      values: [
        {
          t: "Transparencia",
          d: "Todo contenido patrocinado se marca como tal. No mezclamos publicidad con noticias sin disclosure.",
        },
        {
          t: "Calidad sobre volumen",
          d: "Preferimos pocos anuncios bien integrados, con buena creatividad y segmentación responsable.",
        },
        {
          t: "Brand safety",
          d: "Evitamos categorías sensibles o engañosas. Revisamos creatividades antes de publicar.",
        },
        {
          t: "Mobile-first",
          d: "Formatos optimizados para smartphone: velocidad, legibilidad y mínimos CLS/LCP.",
        },
      ],

      packagesTitle: "Paquetes",
      packages: [
        {
          id: "starter",
          title: "Starter",
          bestFor: "Validar canal y mensaje",
          bullets: [
            "1 placement destacado (home/section) por X días",
            "UTM + reporte básico",
            "Revisión creativa + brand safety",
          ],
        },
        {
          id: "growth",
          title: "Growth",
          bestFor: "Escalar tráfico y performance",
          bullets: [
            "2–3 placements rotativos",
            "A/B simple (titular/creativa)",
            "Reporte semanal + recomendaciones",
          ],
        },
        {
          id: "sponsor",
          title: "Sponsor (Patrocinio)",
          bestFor: "Asociación de marca",
          bullets: [
            "Patrocinio de sección o newsletter (si aplica)",
            "Creatividad premium + integración nativa",
            "Etiqueta visible de patrocinio",
          ],
        },
      ],

      formatsTitle: "Formatos disponibles",
      formatsP: [
        "Mantenemos formatos limpios para que el usuario confíe y la marca se vea mejor.",
        "Podemos adaptar a tu stack (ad server o integración directa), siempre priorizando performance.",
      ],
      formats: [
        { t: "Display (banner)", d: "Placements discretos: arriba, inline o sidebar (desktop)." },
        { t: "Native / Sponsored", d: "Contenido patrocinado marcado claramente, con layout editorial." },
        { t: "Takeover suave", d: "Alta visibilidad en home por tiempo limitado (sin bloquear lectura)." },
        { t: "Afiliados (selectivo)", d: "Solo si aporta valor y se declara relación de afiliación." },
      ],

      guidelinesTitle: "Lineamientos creativos",
      guidelinesP: [
        "Aceptamos anuncios de alta calidad. Rechazamos contenido engañoso, sensacionalista o que comprometa confianza.",
      ],
      guidelinesBullets: [
        "Nada de “clickbait” extremo o claims imposibles.",
        "Creatividades livianas (ideal WebP/AVIF) y sin trackers agresivos.",
        "Landing pages seguras (HTTPS) y coherentes con el anuncio.",
        "No se permite malware, software no deseado, ni prácticas de dark patterns.",
      ],

      disclosureTitle: "Transparencia y disclosures",
      disclosureP: [
        "La credibilidad es nuestro activo. Por eso separamos claramente editorial y publicidad.",
        "Los artículos patrocinados se etiquetan, y los enlaces de afiliados se declaran cuando existan.",
      ],
      disclosureBullets: [
        "Etiqueta visible: “Patrocinado” / “Publicidad” cuando corresponda.",
        "No vendemos cobertura editorial como si fuera noticia.",
        "Correcciones editoriales se hacen igual, aunque un anunciante esté activo.",
      ],

      faqTitle: "FAQ",
      faqs: [
        {
          q: "¿Puedo comprar cobertura editorial?",
          a: "No. Podés contratar contenido patrocinado, pero siempre con etiqueta clara y sin confundirlo con noticias.",
        },
        {
          q: "¿Qué métricas reportan?",
          a: "Impresiones, clics, CTR y performance por placement (y UTM si se usa). Podemos sumar métricas acordadas.",
        },
        {
          q: "¿Aceptan anuncios políticos o sensibles?",
          a: "En general evitamos categorías sensibles. Se evalúa caso a caso por brand safety y normativa local.",
        },
        {
          q: "¿Cómo garantizan performance en mobile?",
          a: "Limitamos peso, evitamos scripts pesados, y priorizamos formatos que no rompan la lectura.",
        },
      ],

      contactTitle: "Contacto comercial",
      contactP:
        "Contanos tu objetivo (awareness, performance, sponsor), país/mercado y presupuesto estimado. Respondemos con propuestas claras.",
      contactCta: "Escribir a Ads",

      footerNote:
        "Newsoras — Independencia editorial + estándares altos. Publicidad sí, pero con transparencia.",
    };
  }

  if (locale === "zh") {
    return {
      title: "广告合作",
      subtitle: "以编辑标准为前提：透明、质量、读者体验优先。",

      metaTitle: "广告合作 — Newsoras",
      metaDescription:
        "Newsoras 广告合作：可用形式、合作套餐、品牌安全、赞助声明（Sponsored/Ads）与商务联系。强调真实受众与高质量体验。",

      lastUpdatedLabel: "最后更新",

      tocTitle: "目录",
      toc: [
        { id: "por-que", label: "为什么选择 Newsoras" },
        { id: "paquetes", label: "套餐" },
        { id: "formatos", label: "形式" },
        { id: "lineamientos", label: "规范" },
        { id: "transparencia", label: "透明声明" },
        { id: "faq", label: "FAQ" },
        { id: "contacto", label: "联系" },
      ],

      introTitle: "为什么在 Newsoras 投放",
      introP: [
        "Newsoras 是独立新闻与分析网站，聚焦地缘政治、市场与科技。我们的读者重视背景与可信度。",
        "我们优先考虑移动端体验与品牌安全：少而精、清晰标注、不过度打扰。",
      ],

      valuesTitle: "商业原则",
      values: [
        { t: "透明", d: "赞助内容明确标注，不混淆新闻与广告。" },
        { t: "质量优先", d: "优先少量高质量广告，避免刷屏与干扰。" },
        { t: "品牌安全", d: "拒绝误导与敏感高风险类别，投放前审核。" },
        { t: "移动优先", d: "优化速度与阅读体验，避免破坏页面性能。" },
      ],

      packagesTitle: "合作套餐",
      packages: [
        { id: "starter", title: "Starter", bestFor: "验证渠道与信息", bullets: ["首页/栏目位 X 天", "UTM + 基础报告", "创意审核 + 品牌安全"] },
        { id: "growth", title: "Growth", bestFor: "扩大流量与转化", bullets: ["2–3 个轮换位置", "简单 A/B", "每周报告 + 建议"] },
        { id: "sponsor", title: "Sponsor（赞助）", bestFor: "品牌合作", bullets: ["栏目/产品赞助（如适用）", "高级创意 + 原生整合", "明确“赞助”标识"] },
      ],

      formatsTitle: "可用形式",
      formatsP: ["我们保持干净的广告形态，让读者信任、品牌更体面。", "可按你的投放方式对接，但性能优先。"],
      formats: [
        { t: "展示广告", d: "顶部/文中/侧栏（桌面）等位置。" },
        { t: "原生/赞助内容", d: "明确标注的赞助文章/版位。" },
        { t: "轻量主页占位", d: "短期高曝光，不阻断阅读。" },
        { t: "联盟（谨慎）", d: "仅在对读者有价值且声明关系时使用。" },
      ],

      guidelinesTitle: "创意规范",
      guidelinesP: ["拒绝误导、夸张承诺与破坏信任的内容。"],
      guidelinesBullets: ["避免极端 clickbait", "素材轻量（WebP/AVIF 优先），少用重脚本", "落地页必须 HTTPS 且内容一致", "禁止恶意软件/欺诈/暗黑模式"],

      disclosureTitle: "透明与声明",
      disclosureP: ["可信度是核心资产，因此广告与编辑严格区分。", "赞助内容会标注，联盟链接会声明（如有）。"],
      disclosureBullets: ["明确标签：Sponsored/Ads", "不把广告包装成新闻", "即使有广告合作，编辑更正照常进行"],

      faqTitle: "FAQ",
      faqs: [
        { q: "可以购买新闻报道吗？", a: "不可以。可合作赞助内容，但必须清晰标注。" },
        { q: "提供哪些数据？", a: "展示/点击/CTR/位置表现，UTM 可选。" },
        { q: "敏感类广告可以吗？", a: "通常避免，按品牌安全与法规评估。" },
      ],

      contactTitle: "商务联系",
      contactP: "请说明目标（曝光/转化/赞助）、地区与预算范围，我们会给出清晰方案。",
      contactCta: "发送商务邮件",

      footerNote: "Newsoras — 独立编辑判断 + 高标准。广告可以，但必须透明。",
    };
  }

  return {
    title: "Advertising",
    subtitle: "Ads with editorial standards: transparent, high-quality, reader-first.",

    metaTitle: "Advertising — Newsoras",
    metaDescription:
      "Advertise on Newsoras: formats, packages, brand safety, sponsored disclosures, and commercial contact. Focused on quality, trust, and real readers.",

    lastUpdatedLabel: "Last updated",

    tocTitle: "Contents",
    toc: [
      { id: "por-que", label: "Why Newsoras" },
      { id: "paquetes", label: "Packages" },
      { id: "formatos", label: "Formats" },
      { id: "lineamientos", label: "Guidelines" },
      { id: "transparencia", label: "Transparency" },
      { id: "faq", label: "FAQ" },
      { id: "contacto", label: "Contact" },
    ],

    introTitle: "Why advertise on Newsoras",
    introP: [
      "Newsoras is independent journalism focused on geopolitics, markets, and technology. Our audience values clarity and credible context.",
      "We work with brands that respect trust. Ads are clean, non-invasive, and optimized for mobile performance.",
    ],

    valuesTitle: "Commercial principles",
    values: [
      { t: "Transparency", d: "Sponsored content is always labeled. Editorial and advertising don’t mix without disclosure." },
      { t: "Quality over volume", d: "Fewer, better placements—strong creative and responsible targeting." },
      { t: "Brand safety", d: "We avoid deceptive or high-risk categories. Creatives are reviewed before publishing." },
      { t: "Mobile-first", d: "Designed for smartphones: speed, readability, minimal CLS/LCP impact." },
    ],

    packagesTitle: "Packages",
    packages: [
      {
        id: "starter",
        title: "Starter",
        bestFor: "Validate channel & messaging",
        bullets: ["1 featured placement (home/section) for X days", "UTM + basic reporting", "Creative review + brand safety"],
      },
      {
        id: "growth",
        title: "Growth",
        bestFor: "Scale traffic & performance",
        bullets: ["2–3 rotating placements", "Simple A/B (headline/creative)", "Weekly reporting + recommendations"],
      },
      {
        id: "sponsor",
        title: "Sponsor",
        bestFor: "Brand association",
        bullets: ["Section or product sponsorship (if applicable)", "Premium creative + native integration", "Clear sponsor labeling"],
      },
    ],

    formatsTitle: "Available formats",
    formatsP: [
      "We keep formats clean so readers trust the experience and brands look better.",
      "We can integrate via ad server or direct placement—performance first.",
    ],
    formats: [
      { t: "Display (banner)", d: "Non-intrusive placements: top, inline, or sidebar (desktop)." },
      { t: "Native / Sponsored", d: "Clearly labeled sponsored content with editorial layout." },
      { t: "Soft takeover", d: "High-visibility homepage presence for limited time (without blocking reading)." },
      { t: "Affiliate (selective)", d: "Only when it adds value and is disclosed." },
    ],

    guidelinesTitle: "Creative guidelines",
    guidelinesP: ["We accept high-quality ads and reject deceptive or trust-damaging creatives."],
    guidelinesBullets: ["No extreme clickbait or impossible claims", "Lightweight assets (WebP/AVIF) and no aggressive trackers", "Secure landing pages (HTTPS) consistent with the ad", "No malware, unwanted software, or dark patterns"],

    disclosureTitle: "Transparency & disclosures",
    disclosureP: [
      "Credibility is the asset. We clearly separate editorial and advertising.",
      "Sponsored posts are labeled, and affiliate relationships are disclosed when present.",
    ],
    disclosureBullets: ["Visible label: “Sponsored” / “Advertising” when applicable", "No selling editorial coverage as news", "Editorial corrections remain independent even with active advertisers"],

    faqTitle: "FAQ",
    faqs: [
      { q: "Can I buy editorial coverage?", a: "No. You can sponsor content, but it will be clearly labeled and not presented as news." },
      { q: "What do you report?", a: "Impressions, clicks, CTR, and performance by placement (plus UTMs if used)." },
      { q: "Do you accept political/sensitive ads?", a: "We generally avoid sensitive categories; reviewed case-by-case for brand safety and local rules." },
    ],

    contactTitle: "Commercial contact",
    contactP: "Tell us your goal (awareness, performance, sponsorship), market, and budget range—then we’ll propose a clear plan.",
    contactCta: "Email Ads",

    footerNote: "Newsoras — Independent editorial standards. Ads are welcome, but transparency is non-negotiable.",
  };
}

// --- 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: ADS_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 jsonLdAdvertisingPage(locale: Locale) {
  const inLanguage = locale === "es" ? "es" : locale === "zh" ? "zh" : "en";
  const url = `${SITE_URL}/${locale}/advertising`;

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

function jsonLdBreadcrumbs(locale: Locale) {
  const url = `${SITE_URL}/${locale}/advertising`;
  const home = `${SITE_URL}/${locale}`;

  return {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: home },
      { "@type": "ListItem", position: 2, name: "Advertising", item: url },
    ],
  };
}

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

  const subject =
    locale === "es" ? "Publicidad — Newsoras" : locale === "zh" ? "广告合作 — Newsoras" : "Advertising — Newsoras";

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

  const orgLd = jsonLdOrganization(locale);
  const siteLd = jsonLdWebsite(locale);
  const pageLd = jsonLdAdvertisingPage(locale);
  const crumbsLd = jsonLdBreadcrumbs(locale);

  return (
    <main className="container" style={{ paddingTop: 22, paddingBottom: 30 }}>
      {/* ✅ JSON-LD: Organization + WebSite + WebPage + Breadcrumbs */}
      <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) }}
      />
      <script
        type="application/ld+json"
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: JSON.stringify(crumbsLd) }}
      />

      {/* 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: 10 }}>
            <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: 10, alignItems: "center", marginTop: 10 }}>
            <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
              {t.lastUpdatedLabel}: {lastUpdated}
            </span>
            <span className="badge">Brand Safety</span>
            <span className="badge">Mobile-first</span>
            <span className="badge">Transparency</span>
          </div>
        </div>
      </section>

      {/* Optional: Media/Press kit */}
      {(MEDIA_KIT_URL || PRESS_KIT_URL) && (
        <section className="card" style={{ padding: 20, marginTop: 18 }}>
          <h2 className="h2" style={{ marginBottom: 10 }}>
            {locale === "es" ? "Kits" : locale === "zh" ? "资料包" : "Kits"}
          </h2>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {MEDIA_KIT_URL ? (
              <a className="badge" style={{ borderColor: "var(--text-muted)", padding: "10px 14px" }} href={MEDIA_KIT_URL}>
                {locale === "es" ? "Media Kit" : locale === "zh" ? "媒体资料" : "Media Kit"}
              </a>
            ) : null}
            {PRESS_KIT_URL ? (
              <a className="badge" style={{ borderColor: "var(--text-muted)", padding: "10px 14px" }} href={PRESS_KIT_URL}>
                {locale === "es" ? "Press Kit" : locale === "zh" ? "新闻资料" : "Press Kit"}
              </a>
            ) : null}
          </div>
        </section>
      )}

      {/* TOC */}
      <section className="card" style={{ padding: 20, marginTop: 18 }}>
        <h2 className="h2" style={{ marginBottom: 12 }}>
          {t.tocTitle}
        </h2>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {t.toc.map((x) => (
            <a key={x.id} href={`#${x.id}`} className="badge" style={{ borderColor: "var(--text-muted)" }}>
              {x.label}
            </a>
          ))}
        </div>
      </section>

      {/* Why */}
      <section className="card" style={{ padding: 20, marginTop: 18 }} id="por-que">
        <h2 className="h2" style={{ marginBottom: 10 }}>
          {t.introTitle}
        </h2>
        {t.introP.map((p) => (
          <p key={p} className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
            {p}
          </p>
        ))}

        <div style={{ marginTop: 14 }}>
          <h3 style={{ margin: 0, fontWeight: 900, fontSize: "1rem" }}>{t.valuesTitle}</h3>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12, marginTop: 12 }}>
            {t.values.map((v) => (
              <div
                key={v.t}
                style={{
                  border: "1px solid var(--line)",
                  borderRadius: 16,
                  padding: 14,
                  background: "rgba(255,255,255,0.02)",
                }}
              >
                <div style={{ fontWeight: 900, marginBottom: 6 }}>{v.t}</div>
                <div style={{ color: "var(--text-secondary)", fontSize: 14, lineHeight: 1.6 }}>{v.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Packages */}
      <section className="card" style={{ padding: 20, marginTop: 18 }} id="paquetes">
        <h2 className="h2" style={{ marginBottom: 12 }}>
          {t.packagesTitle}
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12 }}>
          {t.packages.map((pkg) => (
            <div
              key={pkg.id}
              style={{
                border: "1px solid var(--line)",
                borderRadius: 18,
                padding: 16,
                background: "rgba(255,255,255,0.02)",
                display: "flex",
                flexDirection: "column",
                gap: 10,
              }}
            >
              {/* <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10 }}>
                <div style={{ fontWeight: 1000, fontSize: "1.05rem" }}>{pkg.title}</div>
                <span className="badge" style={{ borderColor: "var(--text-muted)" }}>
                  {pkg.priceHint}
                </span>
              </div> */}

              <div style={{ color: "var(--text-secondary)", fontSize: 14 }}>
                <strong style={{ color: "var(--text-primary)" }}>
                  {locale === "es" ? "Ideal para:" : locale === "zh" ? "适合：" : "Best for:"}
                </strong>{" "}
                {pkg.bestFor}
              </div>

              <ul style={{ margin: 0, paddingLeft: 18, color: "var(--text-secondary)", lineHeight: 1.7 }}>
                {pkg.bullets.map((b) => (
                  <li key={b}>{b}</li>
                ))}
              </ul>

              <div style={{ marginTop: "auto", display: "flex", gap: 10, flexWrap: "wrap" }}>
                <a href={mailtoHref} className="badge" style={{ padding: "10px 14px", borderColor: "var(--text-muted)" }}>
                  {locale === "es" ? "Cotizar" : locale === "zh" ? "询价" : "Request quote"}
                </a>
                <a href="#contacto" className="badge" style={{ padding: "10px 14px" }}>
                  {locale === "es" ? "Hablar" : locale === "zh" ? "联系" : "Talk"}
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Formats */}
      <section className="card" style={{ padding: 20, marginTop: 18 }} id="formatos">
        <h2 className="h2" style={{ marginBottom: 10 }}>
          {t.formatsTitle}
        </h2>
        {t.formatsP.map((p) => (
          <p key={p} className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
            {p}
          </p>
        ))}

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12, marginTop: 12 }}>
          {t.formats.map((f) => (
            <div
              key={f.t}
              style={{
                border: "1px solid var(--line)",
                borderRadius: 16,
                padding: 14,
                background: "rgba(255,255,255,0.02)",
              }}
            >
              <div style={{ fontWeight: 900, marginBottom: 6 }}>{f.t}</div>
              <div style={{ color: "var(--text-secondary)", fontSize: 14, lineHeight: 1.6 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Guidelines + Transparency */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18, marginTop: 18 }}>
        <div className="card" style={{ padding: 20 }} id="lineamientos">
          <h2 className="h2" style={{ marginBottom: 10 }}>
            {t.guidelinesTitle}
          </h2>
          {t.guidelinesP.map((p) => (
            <p key={p} className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
              {p}
            </p>
          ))}
          <ul style={{ marginTop: 12, paddingLeft: 18, color: "var(--text-secondary)", lineHeight: 1.75 }}>
            {t.guidelinesBullets.map((b) => (
              <li key={b}>{b}</li>
            ))}
          </ul>
        </div>

        <div className="card" style={{ padding: 20 }} id="transparencia">
          <h2 className="h2" style={{ marginBottom: 10 }}>
            {t.disclosureTitle}
          </h2>
          {t.disclosureP.map((p) => (
            <p key={p} className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
              {p}
            </p>
          ))}
          <ul style={{ marginTop: 12, paddingLeft: 18, color: "var(--text-secondary)", lineHeight: 1.75 }}>
            {t.disclosureBullets.map((b) => (
              <li key={b}>{b}</li>
            ))}
          </ul>
        </div>
      </section>

      {/* FAQ */}
      <section className="card" style={{ padding: 20, marginTop: 18 }} id="faq">
        <h2 className="h2" style={{ marginBottom: 14 }}>
          {t.faqTitle}
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10 }}>
          {t.faqs.map((x, idx) => (
            <details
              key={x.q}
              style={{
                border: "1px solid var(--line)",
                borderRadius: 16,
                padding: 14,
                background: "rgba(255,255,255,0.02)",
              }}
              open={idx === 0}
            >
              <summary style={{ cursor: "pointer", fontWeight: 900, color: "var(--text-primary)", listStyle: "none" }}>
                {x.q}
              </summary>
              <p className="p" style={{ marginTop: 10, color: "var(--text-secondary)" }}>
                {x.a}
              </p>
            </details>
          ))}
        </div>
      </section>

      {/* Contact */}
      <section className="card" style={{ padding: 20, marginTop: 18 }} id="contacto">
        <h2 className="h2" style={{ marginBottom: 8 }}>
          {t.contactTitle}
        </h2>
        <p className="p" style={{ marginTop: 8, color: "var(--text-secondary)" }}>
          {t.contactP}
        </p>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 12 }}>
          <a href={mailtoHref} className="badge" style={{ padding: "10px 14px", borderColor: "var(--text-muted)" }}>
            {t.contactCta} ({ADS_EMAIL})
          </a>
          <Link href={`/${locale}/contact`} className="badge" style={{ padding: "10px 14px" }}>
            {locale === "es" ? "Página de contacto" : locale === "zh" ? "联系页面" : "Contact page"}
          </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>
      </section>
    </main>
  );
}

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

  return {
    title: t.metaTitle,
    description: t.metaDescription,
    alternates: {
      canonical,
      languages: {
        en: new URL(`/en/advertising`, SITE_URL).toString(),
        es: new URL(`/es/advertising`, SITE_URL).toString(),
        zh: new URL(`/zh/advertising`, 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/advertising.png (1200x630)
          url: new URL(`/og/advertising.png`, SITE_URL).toString(),
          width: 1200,
          height: 630,
          alt: `${SITE_NAME} — Advertising`,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: t.metaTitle,
      description: t.metaDescription,
      images: [new URL(`/og/advertising.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,
      },
    },
  };
}

// --- Notes (files + env) ----------------------------------------------------
// 1) /public/og/advertising.png (1200x630)
// 2) /public/logo.png           (512x512)
// 3) .env.local:
//    NEXT_PUBLIC_SITE_URL=https://newsoras.com
//    NEXT_PUBLIC_ADS_EMAIL=ads@newsoras.com
//    NEXT_PUBLIC_ADS_LAST_UPDATED=2026-01-04
//    NEXT_PUBLIC_MEDIA_KIT_URL=https://newsoras.com/media-kit.pdf   (opcional)
//    NEXT_PUBLIC_PRESS_KIT_URL=https://newsoras.com/press-kit.pdf   (opcional)
