/* ============================================================
   FLOREA GRUP — News & Media (with inline articles)
   ============================================================ */
function ArticleBody({ article }) {
  const { L } = useL();
  return (
    <div className="article__body" style={{ paddingTop: "2rem" }}>
      {article.content.map((block, i) => {
        switch (block.t) {
          case "toc":
            return (
              <div key={i} className="article__toc">
                <strong className="article__toc-h">{L({ ro: "Cuprins", en: "Contents" })}</strong>
                <ul>{block.items.map((item, j) => (
                  <li key={j}><a href={"#s-" + item.id} onClick={(e) => { e.preventDefault(); document.getElementById("s-" + item.id)?.scrollIntoView({ behavior: "smooth" }); }}>{L(item)}</a></li>
                ))}</ul>
              </div>
            );
          case "h2":
            return <h2 key={i} id={block.id ? "s-" + block.id : null} className="h-lg" style={{ marginTop: "2em", marginBottom: ".5em" }}>{L(block)}</h2>;
          case "h3":
            return <h3 key={i} className="h-md" style={{ marginTop: "1.6em", marginBottom: ".3em" }}>{L(block)}</h3>;
          case "p":
            return <p key={i} className="article__p">{L(block)}</p>;
          case "img":
            return block.url
              ? <img key={i} src={block.url} alt={block.ph} className="article__img" style={{ width: "100%", borderRadius: "var(--radius)" }} />
              : <div key={i} className="article__img"><Ph label={block.ph} ratio="16/9" /></div>;
          case "pullquote":
            return <div key={i} className="article__pq"><blockquote>{L(block)}</blockquote></div>;
          default:
            return null;
        }
      })}
    </div>
  );
}

function News() {
  const { L, lang } = useL();
  const cats = Array.from(new Set(FG.NEWS.map(n => n.cat[lang])));
  const [cat, setCat] = useState("all");
  const items = cat === "all" ? FG.NEWS : FG.NEWS.filter(n => n.cat[lang] === cat);
  const [feat, ...rest] = items;
  const [expandedId, setExpandedId] = useState(null);

  const matchArticle = (item) => item.articleId ? FG.ARTICLES?.find(a => a.id === item.articleId) : null;

  const handleToggle = (item) => {
    const a = matchArticle(item);
    if (!a) return;
    setExpandedId(prev => prev === a.id ? null : a.id);
  };

  return (
    <main>
      <PageHero crumb={L(FG.UI.nav_news)}
        title={L({ ro: "Noutăți & Media", en: "News & Media" })}
        sub={L({ ro: "Investiții, premii, sustenabilitate și momentele care marchează cei 30 de ani Florea Grup.",
                 en: "Investments, awards, sustainability and the moments marking 30 years of Florea Grup." })} />
      <section className="section--tight">
        <div className="wrap">
          <div className="filters">
            <button className={"filter" + (cat === "all" ? " is-active" : "")} onClick={() => setCat("all")}>{L(FG.UI.all)}</button>
            {cats.map(c => <button key={c} className={"filter" + (cat === c ? " is-active" : "")} onClick={() => setCat(c)}>{c}</button>)}
          </div>

          {feat && (() => {
            const art = matchArticle(feat);
            const open = expandedId === art?.id;
            return (
              <div className={"feat-news-wrap" + (open ? " is-open" : "")}>
                <div className="feat-news" onClick={() => handleToggle(feat)} style={{ cursor: art ? "pointer" : "default" }}>
                  {feat.img ? <img src={feat.img} alt={L(feat.title)} className="feat-news__img" /> : <Ph label={feat.ph} className="feat-news__img" />}
                  <div className="feat-news__body">
                    <div className="ncard__meta"><span className="chip">{L(feat.cat)}</span><span className="muted">{L(feat.date)}</span></div>
                    <h2 className="h-lg" style={{ marginTop: ".5em" }}>{L(feat.title)}</h2>
                    <p className="lead" style={{ marginTop: ".7em" }}>{L(feat.excerpt)}</p>
                    <span className="tlink" style={{ marginTop: "1.2em" }}>
                      {open ? L({ ro: "Ascunde articolul", en: "Hide article" }) : L(FG.UI.read_more)} <Ic.arrow style={{ transform: open ? "rotate(180deg)" : "" }} />
                    </span>
                  </div>
                </div>
                {open && art && <ArticleBody article={art} />}
              </div>
            );
          })()}

          <div className="nteaser-grid" style={{ marginTop: "clamp(2rem,4vw,3.5rem)" }}>
            {rest.map((n, i) => <NewsCard key={i} n={n} i={i} />)}
          </div>
        </div>
      </section>
      <CTABand />
    </main>
  );
}

function NewsCard({ n, i }) {
  const { L } = useL();
  return (
    <Reveal d={(i % 3) + 1} className="ncard">
      {n.img ? <img src={n.img} alt={L(n.title)} className="ncard__img" /> : <Ph label={n.ph} className="ncard__img" />}
      <div className="ncard__body">
        <div className="ncard__meta">
          <span className="chip">{L(n.cat)}</span>
          <span className="muted">{L(n.date)}</span>
        </div>
        <h3 className="h-md">{L(n.title)}</h3>
        <p className="muted ncard__ex">{L(n.excerpt)}</p>
        <span className="tlink">{L(FG.UI.read_more)} <Ic.arrow /></span>
      </div>
    </Reveal>
  );
}

Object.assign(window, { News });