// Areas of work — six disciplines the lab covers.

const AreasOfWork = () => {
  const areas = window.CWL_DATA.AREAS;

  return (
    <section id="systems" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ Disciplines</Eyebrow>
          <div className="right" style={{ display: 'block' }}>
            <h2>Areas of work.</h2>
            <p className="lede">
              Six adjacent practices kept in conversation with each other. The
              lab's output is the cross-pollination.
            </p>
          </div>
        </div>

        <div className="areas">
          {areas.map((a) => (
            <article key={a.n} className="area">
              <div className="area__index">
                <span className="meta" style={{ color: 'var(--ink-3)' }}>§ {a.n}</span>
                <Icon name="arrow-up-right" size={14} style={{ opacity: 0.4 }} />
              </div>
              <h3 className="area__title">{a.title}</h3>
              <p className="area__desc">{a.desc}</p>
              <div className="area__foot">
                {a.tags.map((t) => <Pill key={t}>{t}</Pill>)}
              </div>
            </article>
          ))}
        </div>

        <div style={{
          marginTop: 18,
          display: 'flex', justifyContent: 'flex-end',
        }}>
          <a href="#projects"
             onClick={(e) => { e.preventDefault(); document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' }); }}
             style={{ fontSize: 14, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
            See what came of these <Icon name="arrow-right" size={12} />
          </a>
        </div>
      </div>
    </section>
  );
};

window.AreasOfWork = AreasOfWork;