// Problem section + Solution promise strip

function Problem({ t }) {
  return (
    <section className="problem">
      <div className="container">
        <div className="section-label">
          <span className="left">§ 01 — {t.problem.label}</span>
          <span className="right">FOUR REALITIES</span>
        </div>
        <h2 className="problem-title">{t.problem.title}</h2>
        <div className="problem-grid">
          {t.problem.items.map((item, i) => (
            <div className="problem-item" key={i}>
              <div className="num">
                <span>0{i + 1}</span>
                <span>—</span>
              </div>
              <div className="big">{item.n}</div>
              <div className="lab">{item.t}</div>
              <div className="desc">{item.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PromiseStrip({ t }) {
  return (
    <section className="promise">
      <span className="promise-bg">IDNA</span>
      <div className="container">
        <div className="section-label" style={{ borderTopColor: 'var(--paper)', borderBottomColor: 'color-mix(in oklab, var(--paper) 28%, transparent)' }}>
          <span className="left" style={{ color: 'var(--paper)' }}>§ 02 — The Promise</span>
          <span className="right" style={{ color: 'color-mix(in oklab, var(--paper) 55%, transparent)' }}>FIVE PROMISES</span>
        </div>
        <div className="label">{t.solution.label}</div>
        <div className="promise-list">
          {t.solution.items.map((line, i) => (
            <div className="promise-item" key={i}>
              <div className="n">P/0{i + 1}</div>
              <div className="t">{line}</div>
              <div className="ico">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;
window.Promise2 = PromiseStrip;