/* global React, useLang, Arrow, TypedHeadline */
const { useMemo: useMemoBlog } = React;

/** Mismo perfil que en Empresa / Sobre nosotros (about-page.jsx). */
const BLOG_AUTHOR_ADRIAN = {
  name: "Adrián Samartín",
  img: "assets/founders/founder_adrian_samartin_bw.png",
  linkedin: "https://www.linkedin.com/in/adriansamartin/",
  labelKey: "blog.article.authorLabel",
  bioKey: "blog.article.adrianAuthorBio"
};

const BLOG_AUTHOR_GUILLERMO = {
  name: "Guillermo de León",
  img: "assets/founders/founder_guillermo_deleon_bw.png",
  linkedin: "https://www.linkedin.com/in/guillermo-de-le%C3%B3n-sorhuet-89402959/",
  labelKey: "blog.article.redactorLabel",
  bioKey: "blog.article.guillermoAuthorBio"
};

const BLOG_POST_CONFIG = [
  {
    slug: "fraude-digital-riesgo-estructural-fintech",
    page: "blog-fraude-digital-riesgo-estructural-fintech.html",
    color: "#eef2f6",
    accent: "#1f7a8c",
    artwork: "assets/blog-artworks/manual-fintech.png",
    author: BLOG_AUTHOR_ADRIAN,
    keyPrefix: "blog.posts.p3",
    partner: "fintech",
    manualHref: "#",
    keys: {
      category: "blog.posts.p3.category",
      title: "blog.posts.p3.title",
      excerpt: "blog.posts.p3.excerpt",
      date: "blog.posts.p3.date",
      reading: "blog.posts.p3.reading",
      body: ["blog.posts.p3.body0", "blog.posts.p3.body1", "blog.posts.p3.body2", "blog.posts.p3.body3", "blog.posts.p3.body4", "blog.posts.p3.body5"]
    }
  },
  {
    slug: "fraude-transaccional-latinoamerica-problema-regional",
    page: "blog-fraude-transaccional-latinoamerica-problema-regional.html",
    color: "#eef0ea",
    accent: "#c59a2f",
    artwork: "assets/blog-artworks/reporte-regional.png",
    keyPrefix: "blog.posts.p4",
    manualHref: "https://www.bcu.gub.uy/NOVA-BCU/SiteAssets/Lists/Iniciativas%20en%20Agenda/AllItems/2_FORSVAR.pdf",
    keys: {
      category: "blog.posts.p4.category",
      title: "blog.posts.p4.title",
      excerpt: "blog.posts.p4.excerpt",
      date: "blog.posts.p4.date",
      reading: "blog.posts.p4.reading",
      body: ["blog.posts.p4.body0", "blog.posts.p4.body1", "blog.posts.p4.body2", "blog.posts.p4.body3", "blog.posts.p4.body4", "blog.posts.p4.body5"]
    }
  },
  {
    slug: "como-reducir-fraude-sin-frenar-crecimiento",
    page: "blog-como-reducir-fraude-sin-frenar-crecimiento.html",
    color: "var(--paper)",
    accent: "#CC9E37",
    artwork: "assets/blog-artworks/aprobacion-vs-perdidas.png",
    author: BLOG_AUTHOR_GUILLERMO,
    keyPrefix: "blog.posts.p0",
    keys: {
      category: "p2.blog.p0c",
      title: "p2.blog.p0t",
      excerpt: "p2.blog.p0d",
      date: "blog.posts.p0.date",
      reading: "blog.posts.p0.reading",
      body: ["blog.posts.p0.body0", "blog.posts.p0.body1", "blog.posts.p0.body2", "blog.posts.p0.body3", "blog.posts.p0.body4", "blog.posts.p0.body5"]
    }
  },
  {
    slug: "aml-operativo-alertas-casos-evidencia",
    page: "blog-aml-operativo-alertas-casos-evidencia.html",
    color: "#e8e3d6",
    accent: "#7a8496",
    artwork: "assets/blog-artworks/expediente-de-caso.png",
    author: BLOG_AUTHOR_GUILLERMO,
    keyPrefix: "blog.posts.p1",
    keys: {
      category: "p2.blog.p1c",
      title: "p2.blog.p1t",
      excerpt: "p2.blog.p1d",
      date: "blog.posts.p1.date",
      reading: "blog.posts.p1.reading",
      body: ["blog.posts.p1.body0", "blog.posts.p1.body1", "blog.posts.p1.body2", "blog.posts.p1.body3", "blog.posts.p1.body4", "blog.posts.p1.body5"]
    }
  },
  {
    slug: "riesgo-digital-en-cada-punto-del-recorrido",
    page: "blog-riesgo-digital-en-cada-punto-del-recorrido.html",
    color: "#dadfe8",
    accent: "#2c4063",
    artwork: "assets/blog-artworks/signal-matrix.png",
    author: BLOG_AUTHOR_GUILLERMO,
    keyPrefix: "blog.posts.p2",
    keys: {
      category: "p2.blog.p2c",
      title: "p2.blog.p2t",
      excerpt: "p2.blog.p2d",
      date: "blog.posts.p2.date",
      reading: "blog.posts.p2.reading",
      body: ["blog.posts.p2.body0", "blog.posts.p2.body1", "blog.posts.p2.body2", "blog.posts.p2.body3", "blog.posts.p2.body4", "blog.posts.p2.body5"]
    }
  }
];

function useBlogPosts() {
  const { t, lang } = useLang();
  return useMemoBlog(() =>
    BLOG_POST_CONFIG.map((post, i) => ({
      ...post,
      index: String(i + 1).padStart(2, "0"),
      category: t(post.keys.category),
      title: t(post.keys.title),
      excerpt: t(post.keys.excerpt),
      date: t(post.keys.date),
      reading: t(post.keys.reading),
      body: post.keys.body.map((key) => t(key)),
      takeaways: [0, 1, 2].map((i) => t(`${post.keyPrefix}.takeaway${i}`)),
      sections: [0, 1, 2].map((i) => ({
        heading: t(`${post.keyPrefix}.section${i}.heading`),
        body: [0, 1].map((j) => t(`${post.keyPrefix}.section${i}.body${j}`)),
        bullets: [0, 1, 2].map((j) => t(`${post.keyPrefix}.section${i}.bullet${j}`))
      })),
      manualLabel: post.manualHref ? t(`${post.keyPrefix}.manualLabel`) : null,
      author: post.author
        ? {
            name: post.author.name,
            img: post.author.img,
            linkedin: post.author.linkedin,
            label: t(post.author.labelKey),
            bio: t(post.author.bioKey)
          }
        : null,
      href: post.page
    })), [lang, t]);
}

function BlogPageHero() {
  const { t, lang } = useLang();
  const posts = useBlogPosts();
  const featured = posts[0];
  const heroSegments = useMemoBlog(() => [
    { type: "text", value: t("blog.typ.l1") },
    { type: "underline", value: t("blog.typ.u") },
    { type: "text", value: t("blog.typ.l3") }
  ], [lang, t]);
  return (
    <section className="hero blog-page-hero" id="top">
      <div className="container">
        <div className="blog-hero-grid">
          <div className="hero-lower-left">
            <span className="kicker"><span className="dot" />{t("blog.hero.kicker")}</span>
            <h1 className="hero-headline hero-headline-narrow" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={heroSegments} />
            </h1>
            <p className="hero-sub" style={{ maxWidth: "64ch", marginTop: 30 }}>
              {t("blog.hero.sub")}
            </p>
            <div className="fp-toc" aria-label={t("blog.toc.aria")}>
              {posts.map((post) => (
                <a key={post.slug} href={post.href}>{post.category}</a>
              ))}
            </div>
          </div>
          <a href={featured.href} className="blog-hero-feature">
            <BlogInsightVisual post={featured} large />
            <div className="blog-hero-feature-body">
              <span className="kicker">{t("blog.hero.featured")}</span>
              <h2>{featured.title}</h2>
              <p>{featured.excerpt}</p>
              <div className="read">{t("p2.blog.read")}</div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function BlogGrid() {
  const { t } = useLang();
  const posts = useBlogPosts();
  return (
    <section className="on-paper blog-listing" id="articulos">
      <div className="container">
        <div className="section-head" style={{ alignItems: "end" }}>
          <div>
            <span className="kicker"><span className="dot" />{t("blog.grid.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("blog.grid.title")}</h2>
          </div>
          <p className="lead">{t("blog.grid.lead")}</p>
        </div>

        <div className="cards-2 blog-page-grid">
          {posts.map((post) => <BlogPageCard key={post.slug} post={post} />)}
        </div>
      </div>
    </section>
  );
}

function BlogPageCard({ post }) {
  const { t } = useLang();
  return (
    <a className="blog-card blog-card-premium" href={post.href}>
      <BlogInsightVisual post={post} />
      <div className="body">
        <div className="meta">{post.category}</div>
        <h3>{post.title}</h3>
        <p className="blog-card-excerpt">{post.excerpt}</p>
        <ul className="blog-card-takeaways">
          {post.takeaways.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
        <div className="blog-meta-row">
          <span>{post.date}</span>
          <span>{post.reading}</span>
        </div>
        <div className="read">{t("p2.blog.read")}</div>
      </div>
    </a>
  );
}

function BlogInsightVisual({ post, large }) {
  return (
    <div className={`blog-insight-visual${large ? " is-large" : ""}${post.artwork ? " has-artwork" : ""}`} style={{ background: post.color, "--blog-accent": post.accent }}>
      <div className="blog-insight-grid">
        <span />
        <span />
        <span />
        <span />
      </div>
      {post.artwork ? (
        <div className="blog-insight-card blog-insight-card-image">
          <img
            src={post.artwork}
            loading="lazy"
            alt=""
          />
        </div>
      ) : (
        <div className="blog-insight-card">
          <div className="blog-insight-topline">
            <span>{post.category}</span>
            <strong>{post.index}</strong>
          </div>
          <div className="blog-insight-chart">
            <i style={{ height: "38%" }} />
            <i style={{ height: "68%" }} />
            <i style={{ height: "48%" }} />
            <i style={{ height: "82%" }} />
            <i style={{ height: "58%" }} />
          </div>
          <div className="blog-insight-rules">
            <span />
            <span />
            <span />
          </div>
        </div>
      )}
    </div>
  );
}

function BlogArticlePreviews() {
  const { t } = useLang();
  const posts = useBlogPosts();
  return (
    <section className="blog-article-previews">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("blog.preview.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>{t("blog.preview.title")}</h2>
          </div>
          <p className="lead">{t("blog.preview.lead")}</p>
        </div>

        <div className="blog-preview-list">
          {posts.map((post) => (
            <article id={post.slug} key={post.slug} className="blog-preview-article">
              <div>
                <span className="kicker">{post.category}</span>
                <h3>{post.title}</h3>
                <a href={post.href} className="blog-preview-title-link" aria-label={`${t("p2.blog.read")} ${post.title}`}>
                  {t("p2.blog.read")}
                </a>
                <div className="blog-meta-row">
                  <span>{post.date}</span>
                  <span>{post.reading}</span>
                </div>
              </div>
              <div className="blog-preview-copy">
                {post.body.map((paragraph, i) => <p key={i}>{paragraph}</p>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.BLOG_POST_CONFIG = BLOG_POST_CONFIG;
window.useBlogPosts = useBlogPosts;
window.BlogPageHero = BlogPageHero;
window.BlogGrid = BlogGrid;
window.BlogArticlePreviews = BlogArticlePreviews;
window.BlogInsightVisual = BlogInsightVisual;