/* global React, AJANKOHTAISTA */

function ajKindLabel(kind, lang) {
  if (lang !== "en") return kind;
  if (kind === "Tiedote") return "Press release";
  if (kind === "Blogi") return "Blog";
  if (kind === "Webinaari") return "Webinar";
  return kind;
}
function AjankohtaistaIndex() {
  const lang = window.SOFTERA_LANG || "fi";
  const T = (a) => (lang === "en" && a.enTitle) ? a.enTitle : a.title;
  const Ld = (a) => (lang === "en" && a.enLede) ? a.enLede : a.lede;
  const [filter, setFilter] = React.useState("Kaikki");

  React.useEffect(() => {
    const t = setInterval(() => { if (window.lucide) lucide.createIcons(); }, 200);
    setTimeout(() => clearInterval(t), 2000);
  }, [filter]);

  const sorted = [...AJANKOHTAISTA].sort((a, b) => (a.dateISO < b.dateISO ? 1 : -1));
  const kinds = ["Kaikki", ...Array.from(new Set(sorted.map((a) => a.kind)))];
  const counts = kinds.reduce((acc, k) => {
    acc[k] = k === "Kaikki" ? sorted.length : sorted.filter((a) => a.kind === k).length;
    return acc;
  }, {});

  const visible = filter === "Kaikki" ? sorted : sorted.filter((a) => a.kind === filter);
  const [featured, ...rest] = visible;

  return (
    <div className="aj-page" data-screen-label="Ajankohtaista">
      <div style={{ position: "relative" }}>
        <Header />
        <section className="aj-hero">
          <div className="aj-hero__inner">
            <div className="aj-hero__eye">{window.L("Ajankohtaista · Uutiset, blogit ja tiedotteet","Latest · News, blogs and releases")}</div>
            <h1 className="aj-hero__h">{window.L("Mitä Softerassa tapahtuu juuri nyt.","What's happening at Softera right now.")}</h1>
            <p className="aj-hero__sub">
              {window.L("Täältä pääset lukemaan ajankohtaisia uutisia ja blogitekstejä liittyen Softeraan sekä toimialan kiinnostaviin aiheisiin – tiedotteita, asiakastarinoita ja kirjoittajiemme havaintoja jätehuollon, laajakaistan ja energia-alan järjestelmistä.","Here you can read the latest news and blog posts about Softera and topics of interest in our industries — press releases, customer stories and our writers' observations on systems for waste management, broadband and energy.")}
            </p>
          </div>
        </section>
      </div>

      <div className="aj-filterbar">
        <div className="aj-filterbar__inner">
          <div className="aj-filters">
            {kinds.map((k) => (
              <button
                key={k}
                className={"aj-filter" + (filter === k ? " is-active" : "")}
                onClick={() => setFilter(k)}
              >
                {k === "Kaikki" ? window.L("Kaikki","All") : ajKindLabel(k, lang)}
                <span className="aj-filter__count">{counts[k]}</span>
              </button>
            ))}
          </div>
          <div className="aj-filterbar__hint">
            {visible.length} {lang === "en" ? (visible.length === 1 ? "post" : "posts") : (visible.length === 1 ? "julkaisu" : "julkaisua")}
          </div>
        </div>
      </div>

      <section className="aj-listing">
        <div className="aj-listing__inner">
          {visible.length === 0 ? (
            <div className="aj-empty">{window.L("Ei julkaisuja tässä kategoriassa.","No posts in this category.")}</div>
          ) : (
            <React.Fragment>
              {featured && (
                <a href={window.langHref("ajankohtaista-" + featured.slug)} className="aj-featured">
                  <div className={"aj-featured__art aj-featured__art--" + (featured.hue || "cyan")}>
                    <div className="aj-featured__art-ico">
                      <i data-lucide={featured.icon || "newspaper"}></i>
                    </div>
                    <div className="aj-featured__art-badge">{window.L("Uusin julkaisu","Latest post")}</div>
                  </div>
                  <div className="aj-featured__body">
                    <div className="aj-featured__meta">
                      <span>{ajKindLabel(featured.kind, lang)}</span>
                      <span>·</span>
                      <span>{featured.date}</span>
                    </div>
                    <h2 className="aj-featured__h">{T(featured)}</h2>
                    <p className="aj-featured__lede">{Ld(featured)}</p>
                    <span className="aj-featured__cta">
                      {window.L("Lue koko juttu","Read the full story")} <i data-lucide="arrow-right"></i>
                    </span>
                  </div>
                </a>
              )}

              {rest.length > 0 && (
                <div className="aj-grid">
                  {rest.map((a) => (
                    <a key={a.slug} href={window.langHref("ajankohtaista-" + a.slug)} className="aj-card">
                      <div className={"aj-card__art aj-card__art--" + (a.hue || "cyan")}>
                        <div className="aj-card__ico">
                          <i data-lucide={a.icon || "newspaper"}></i>
                        </div>
                        <div className="aj-card__kind">{ajKindLabel(a.kind, lang)}</div>
                      </div>
                      <div className="aj-card__body">
                        <div className="aj-card__date">{a.date}</div>
                        <h3 className="aj-card__h">{T(a)}</h3>
                        <p className="aj-card__lede">{Ld(a)}</p>
                        <span className="aj-card__cta">
                          {window.L("Lue lisää","Read more")} <i data-lucide="arrow-right"></i>
                        </span>
                      </div>
                    </a>
                  ))}
                </div>
              )}
            </React.Fragment>
          )}
        </div>
      </section>

      <section className="aj-follow">
        <div className="aj-follow__inner">
          <div>
            <div className="aj-follow__eye">{window.L("Pysy ajan tasalla","Stay up to date")}</div>
            <h2 className="aj-follow__h">{window.L("Seuraa Softeraa – kuule ensimmäisten joukossa.","Follow Softera — be among the first to hear.")}</h2>
            <p className="aj-follow__p">
              {window.L("Uudet tiedotteet ja blogikirjoitukset julkaistaan ensin LinkedInissä ja Instagramissa. Seuraa meitä, niin et missaa toimialan kiinnostavimpia kuulumisia.","New releases and blog posts are published first on LinkedIn and Instagram. Follow us so you don't miss the most interesting news in our field.")}
            </p>
          </div>
          <div className="aj-follow__side">
            <a href="https://linkedin.com/company/softera-oy" target="_blank" rel="noopener" className="aj-follow__row">
              <div className="aj-follow__icon">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{width:22,height:22}}>
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 11-.001-4.121A2.06 2.06 0 015.34 7.43zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
                </svg>
              </div>
              <div>
                <div className="aj-follow__row-h">{window.L("Softera LinkedInissä","Softera on LinkedIn")}</div>
                <div className="aj-follow__row-d">{window.L("Yritysuutiset ja kuulumiset asiakasprojekteista","Company news and updates from customer projects")}</div>
              </div>
            </a>
            <a href="https://instagram.com/softeraoy" target="_blank" rel="noopener" className="aj-follow__row">
              <div className="aj-follow__icon">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{width:22,height:22}}>
                  <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 01-1.38-.9 3.72 3.72 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.9 5.9 0 00-2.13 1.39A5.9 5.9 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.73 1.46 1.39 2.13.66.66 1.34 1.08 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 002.13-1.39 5.9 5.9 0 001.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 00-1.39-2.13A5.9 5.9 0 0019.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm7.84-10.4a1.44 1.44 0 11-2.88 0 1.44 1.44 0 012.88 0z" />
                </svg>
              </div>
              <div>
                <div className="aj-follow__row-h">{window.L("Softera Instagramissa","Softera on Instagram")}</div>
                <div className="aj-follow__row-d">{window.L("Arkea, tiimiä ja softeralaisten hetkiä","Daily life, the team and moments from Softera people")}</div>
              </div>
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

window.AjankohtaistaIndex = AjankohtaistaIndex;