/* Section 03 — Approach: we don't need a spec (#approach, yellow). */

function PageApproach() {
  const { L } = useLang();
  const t = L.approach;
  return (
    <section id="approach" style={{ background:'var(--yellow)' }}>
      <div className="wrap">
        <div className="page-chapter"><span>{t.chapter.left}</span><span>{t.chapter.right}</span></div>

        <Reveal>
          <h2 className="display display-md" style={{ marginTop:64, maxWidth:'16ch' }}>
            {t.title.line1}<br/>{t.title.pre2}
            <span style={{ display:'inline-block', background:'var(--black)', color:'var(--yellow)', padding:'0 16px 4px' }}>{t.title.accent}</span>
          </h2>
        </Reveal>

        <div style={{ marginTop:44, display:'grid', gap:18, maxWidth:720 }}>
          {t.body.map((p,i)=>(
            <Reveal key={i} delay={i*80} className="body-lg text-wrap-pretty" style={{ opacity:.82 }}>{p}</Reveal>
          ))}
        </div>

        <div style={{ marginTop:40 }}>
          {t.list.map((q,i)=>(
            <Reveal key={i} delay={i*70}>
              <div className="approach-q">
                <div className="display display-sm" style={{ opacity:.4 }}>{String(i+1).padStart(2,'0')}</div>
                <div className="display display-sm">{q}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={120}>
          <div className="body-lg text-wrap-pretty" style={{ marginTop:40, maxWidth:760 }}>{t.closing}</div>
        </Reveal>
      </div>
    </section>
  );
}

window.PageApproach = PageApproach;