/* eslint-disable */
// Article screen — single article view. Content comes from window.ARTICLES
// keyed by slug, with per-language fields. Falls back to English if the
// active language isn't translated yet.

const useArticle = (slug) => {
  const { lang } = (window.useLang && window.useLang()) || { lang: 'en' };
  const article = (window.ARTICLES && window.ARTICLES[slug]) || null;
  if (!article) return null;
  const body = article[lang] || article.en;
  return { ...article, body };
};

const ArticleScreen = ({ setRoute }) => {
  const t = (window.useT && window.useT()) || ((k) => k);
  // Slug is hard-coded for now — when there are multiple articles, pass it via setRoute.
  const slug = 'building-a-stronger-curacao';
  const article = useArticle(slug);

  if (!article) {
    return (
      <div data-screen-label="Article">
        <section className="cbm-section">
          <div className="cbm-section__inner">
            <h1>Article not found</h1>
          </div>
        </section>
      </div>
    );
  }

  const b = article.body;

  return (
    <div data-screen-label="Article">
      <section className="cbm-article-hero" style={{backgroundImage: 'url(' + article.image + ')'}}>
        <div className="cbm-article-hero__inner">
          <span className="cbm-chip cbm-chip--gold">{b.category}</span>
          <h1>{b.title}</h1>
          <p style={{fontSize: 16, color: 'rgba(255,255,255,0.85)', marginTop: 14, maxWidth: 600}}>
            {b.lead}
          </p>
        </div>
      </section>

      <article className="cbm-article-body">
        {b.paragraphs.map((p, i) => <p key={'p' + i}>{p}</p>)}

        {b.pullquote && (
          <div className="cbm-pullquote">{b.pullquote}</div>
        )}

        {b.sections.map((s, i) => (
          <React.Fragment key={'s' + i}>
            <h2>{s.heading}</h2>
            {s.paragraphs.map((p, j) => <p key={'sp' + i + j}>{p}</p>)}
          </React.Fragment>
        ))}

        <div className="cbm-author">
          <div className="cbm-author__avatar" />
          <div>
            <p className="cbm-author__name">{article.author}</p>
            <p className="cbm-author__role">{b.role} · {b.date}</p>
          </div>
        </div>
      </article>

      <section className="cbm-section">
        <div className="cbm-section__inner">
          <div className="cbm-section__head">
            <span className="cbm-eyebrow">Keep Reading</span>
            <div className="cbm-section-rule" />
            <h2 className="cbm-section__title">More from Leadership.</h2>
          </div>
          <div className="cbm-article-grid cbm-article-grid--three">
            <ArticleCard onClick={() => setRoute('article')} article={{
              category: b.category, title: 'The Future is Local',
              excerpt: "Insights from Curaçao's top business leaders, in their own words.",
              author: 'J. Martijn', date: b.date,
              image: article.image,
            }} />
            <ArticleCard onClick={() => setRoute('article')} article={{
              category: b.category, title: 'Innovate. Adapt. Succeed.',
              excerpt: 'How businesses thrive in a changing world.',
              author: 'A. Pourier', date: b.date,
              image: article.image,
            }} />
            <ArticleCard onClick={() => setRoute('article')} article={{
              category: b.category, title: 'Investing in People. Powering Progress.',
              excerpt: "Why talent development tops every CEO's 2026 agenda.",
              author: 'CBM Desk', date: b.date,
              image: article.image,
            }} />
          </div>
        </div>
      </section>

      <NewsletterCTA />
    </div>
  );
};

Object.assign(window, { ArticleScreen });