// About page: a dark banded intro that reuses the hero's pattern treatment, the
// story set as a narrow measure, then the photo gallery, then the partner strip
// (who supplies the shop is part of what the shop is).
function AboutScreen({ t }) {
  return (
    <>
      <section style={{
        position: 'relative', overflow: 'hidden',
        background: 'var(--ink-900)',
        backgroundImage: 'url(../../assets/corner-pattern-single.svg)',
        backgroundRepeat: 'repeat',
        backgroundSize: '84px',
        padding: '64px var(--page-gutter)',
      }}>
        <div style={{ position: 'absolute', inset: 0, background: 'var(--ink-900)', opacity: 0.9, pointerEvents: 'none' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--content-max)', margin: '0 auto' }}>
          <h1 style={{
            font: 'var(--text-display-m)', color: 'var(--cream-0)',
            margin: '0 0 16px', letterSpacing: 'var(--tracking-tight)',
          }}>
            {t.aboutPage.title}
          </h1>
          <p style={{ font: 'var(--text-body-l)', color: 'var(--ink-100)', margin: 0, maxWidth: 560 }}>
            {t.aboutPage.lead}
          </p>
        </div>
      </section>

      <section style={{ padding: '56px var(--page-gutter)', background: 'var(--surface-page)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto' }}>
          {/* Held to a readable measure rather than the full content width. */}
          <div style={{ maxWidth: 660, display: 'flex', flexDirection: 'column', gap: 20 }}>
            {t.aboutPage.story.map((para, i) => (
              <p key={i} style={{ font: 'var(--text-body-l)', color: 'var(--text-secondary)', margin: 0 }}>
                {para}
              </p>
            ))}
          </div>
        </div>
      </section>

      <CornerGallery t={t} />
      <PartnerStrip t={t} />
    </>
  );
}
window.AboutScreen = AboutScreen;