/* global React */
const { useState: useStateNR } = React;

/* ---------------------------------------------------------------
   Newsroom — a simple list of company articles.
   Sources content.js `news.items` (shared with the home-page teaser).
   Each item: { date, tag, t, p (standfirst), body: [paragraphs], cta: { label, page } }
   Click an article to expand the full body in place.
   --------------------------------------------------------------- */

function NewsroomList({ lang, navigate }) {
  const nr = window.FL_CONTENT[lang].newsroom;
  const items = window.FL_CONTENT[lang].news.items;
  const rlang = lang === 'gr' ? 'el' : 'en';
  const buildPath = (window.FL_ROUTER && window.FL_ROUTER.buildPath) || (() => '#');

  const [openId, setOpenId] = useStateNR(null);

  return (
    <div className="page active" data-screen-label="07 Newsroom">
      <section className="page-hero">
        <div className="container">
          <div className="breadcrumb mono">HOME &nbsp;/&nbsp; <span>{nr.eyebrow.toUpperCase()}</span></div>
          <h1>{nr.title_a} <span className="serif">{nr.title_b}</span></h1>
          <p className="lede">{nr.lede}</p>
        </div>
      </section>

      <section className="section section-light">
        <div className="container">
          <div className="nr-list reveal in">
            {items.map((n, i) => {
              const isOpen = openId === i;
              return (
                <article
                  key={i}
                  className={`nr-item ${isOpen ? 'nr-open' : ''}`}
                  onClick={() => setOpenId(isOpen ? null : i)}
                >
                  {n.img && <div className="nr-img"><img src={n.img} alt={n.t} loading="lazy" /></div>}
                  <div className="nr-eyebrow-row mono">
                    <span className="nr-tag">{n.tag}</span>
                    {n.date && <span className="nr-date">{n.date}</span>}
                  </div>

                  <h2>{n.t}</h2>
                  {n.p && <p className="nr-standfirst">{n.p}</p>}

                  {isOpen && Array.isArray(n.body) && (
                    <div className="nr-article-body">
                      {n.body.map((para, j) => <p key={j}>{para}</p>)}
                      {n.cta && (
                        <a
                          className="nr-cta mono"
                          href={buildPath(rlang, n.cta.page)}
                          onClick={(e) => { e.preventDefault(); e.stopPropagation(); if (navigate) navigate(n.cta.page); }}
                        >
                          {n.cta.label}
                          <svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
                        </a>
                      )}
                    </div>
                  )}

                  {n.p && (
                    <div className="nr-toggle mono">{isOpen ? nr.collapse : nr.readMore}</div>
                  )}
                </article>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

function NewsroomPage({ lang, navigate }) {
  return <NewsroomList lang={lang} navigate={navigate} />;
}

window.NewsroomPage = NewsroomPage;