/* Sections C: Network — abstract, kinetic */

const NetworkSection = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });

  // build marquee from category string (split on " · " then re-stitch with separator)
  const buildMarquee = (text) => {
    const items = text.split(' · ');
    return items;
  };

  return (
    <section className="net section-pad" id="network">
      <div className="section-head reveal">
        <span className="section-num">{t('net.num')}</span>
        <h2 className="section-title" dangerouslySetInnerHTML={html('net.title.html')} />
        <span className="section-kicker">{t('net.kicker')}</span>
      </div>

      <div className="net__intro">
        <p className="net__lede reveal" dangerouslySetInnerHTML={html('net.lede.html')} />
      </div>

      <div className="net__stats reveal">
        <div className="net__stat">
          <div className="net__stat-num">{t('net.stat1.num')}<span className="plus">+</span></div>
          <div className="net__stat-label">{t('net.stat1.label')}</div>
        </div>
        <div className="net__stat">
          <div className="net__stat-num">{t('net.stat2.num')}<span className="plus">+</span></div>
          <div className="net__stat-label">{t('net.stat2.label')}</div>
        </div>
        <div className="net__stat">
          <div className="net__stat-num">{t('net.stat3.num')}<span className="plus">+</span></div>
          <div className="net__stat-label">{t('net.stat3.label')}</div>
        </div>
        <div className="net__stat">
          <div className="net__stat-num">{t('net.stat4.num')}<span className="plus">+</span></div>
          <div className="net__stat-label">{t('net.stat4.label')}</div>
        </div>
      </div>

      <div className="net__wall">
        <div className="net__row net__row--a">
          <div className="net__track">
            {[0,1].map(k => (
              <span className="net__track-inner" key={k}>
                {t('net.categories').split(' · ').map((c, i) => (
                  <React.Fragment key={i}>
                    <span className="net__word">{c}</span>
                    <span className="net__sep">✦</span>
                  </React.Fragment>
                ))}
              </span>
            ))}
          </div>
        </div>
        <div className="net__row net__row--b">
          <div className="net__track net__track--rev">
            {[0,1].map(k => (
              <span className="net__track-inner" key={k}>
                {t('net.categories2').split(' · ').map((c, i) => (
                  <React.Fragment key={i}>
                    <span className="net__word net__word--accent">{c}</span>
                    <span className="net__sep">→</span>
                  </React.Fragment>
                ))}
              </span>
            ))}
          </div>
        </div>
      </div>

      <p className="net__closing reveal" dangerouslySetInnerHTML={html('net.closing.html')} />
    </section>
  );
};

Object.assign(window, { NetworkSection });