/* Section 05 — Ownership, not rent (#ownership, black for drama). */

function PageOwnership() {
  const { L } = useLang();
  const t = L.ownership;
  return (
    <section id="ownership" className="cream-on-black">
      <div className="wrap">
        <div className="page-chapter" style={{ borderColor:'var(--line-cream)' }}><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/>
            <span style={{ display:'inline-block', background:'var(--yellow)', color:'var(--black)', padding:'0 18px 6px' }}>{t.title.accent}</span>
          </h2>
        </Reveal>

        <div style={{ marginTop:48, display:'grid', gap:22, maxWidth:780 }}>
          {t.body.map((p,i)=>(
            <Reveal key={i} delay={i*80} className="body-lg text-wrap-pretty" style={{ color:'var(--muted-cream)' }}>{p}</Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.PageOwnership = PageOwnership;