// ── Shared fetch-based markdown renderer ──────────────────────────────────────

function MarkdownAboutPage({ src, onBack, shellClass }) {
  const [markdown, setMarkdown] = React.useState('');
  const contentRef = React.useRef(null);

  React.useEffect(() => {
    fetch(src)
      .then(r => r.text())
      .then(setMarkdown)
      .catch(() => setMarkdown('_Unable to load content._'));
  }, [src]);

  React.useEffect(() => {
    if (!contentRef.current || !markdown) return;
    if (typeof marked === 'undefined') {
      contentRef.current.textContent = markdown;
      return;
    }
    contentRef.current.innerHTML = marked.parse(markdown);
  }, [markdown]);

  return (
    <div className={shellClass}>
      <div className="about-page-card">
        <button className="chapter-back-btn" style={{ marginBottom: '1.25rem' }} onClick={onBack}>
          ← Back
        </button>
        {!markdown && <p style={{ color: '#94a3b8', fontSize: '0.9rem' }}>Loading…</p>}
        <div className="about-page-content" ref={contentRef} />
      </div>
    </div>
  );
}

// ── Child About ───────────────────────────────────────────────────────────────

function ChildAboutPage({ navigate }) {
  return (
    <MarkdownAboutPage
      src="/About-Child.md"
      onBack={() => navigate('')}
      shellClass="child-home-shell"
    />
  );
}

// ── Parent About ──────────────────────────────────────────────────────────────

function ParentAboutPage({ navigate }) {
  return (
    <MarkdownAboutPage
      src="/About-Parent.md"
      onBack={() => navigate('')}
      shellClass="parent-shell"
    />
  );
}