// Photo gallery — "how the store actually looks". Each frame carries one of
// the shop's own photos from CORNER_GALLERY, rendered through <image-slot> so
// the client can still drop a replacement over it, same as the menu photos.
//
// Desktop lays the three frames out as a four-column mosaic (the first runs
// double width, see CORNER_GALLERY `span`); `compact` collapses that to a
// two-column grid for the 390px surface. Slot ids are prefixed per surface so
// the two never share persisted images.
function CornerGallery({ t, compact = false }) {
  const g = t.aboutPage.gallery;
  const prefix = compact ? 'm-gallery-' : 'gallery-';
  return (
    <section style={{ padding: compact ? '0 20px 40px' : '0 var(--page-gutter) 72px' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto' }}>
        <h2 style={{
          font: compact ? 'var(--text-h3)' : 'var(--text-h2)',
          color: 'var(--text-primary)', margin: '0 0 8px',
        }}>
          {g.title}
        </h2>
        <p style={{
          font: 'var(--text-body-m)', color: 'var(--text-secondary)',
          margin: compact ? '0 0 20px' : '0 0 28px', maxWidth: 520,
        }}>
          {g.lead}
        </p>
        <div className="c-gallery-grid" style={{
          display: 'grid',
          gridTemplateColumns: compact ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          // A fixed row height rather than a per-cell aspect ratio: a span-2
          // frame is twice as wide as a span-1 one, so any shared aspect ratio
          // would give them different heights and leave holes in the mosaic.
          gridAutoRows: compact ? '148px' : '224px',
          gap: compact ? 12 : 16,
        }}>
          {window.CORNER_GALLERY.map((photo) => (
            <div
              key={photo.key}
              className="c-gallery-item"
              style={{
                gridColumn: compact ? 'span 1' : 'span ' + photo.span,
                height: '100%',
                background: 'var(--surface-sunken)',
                borderRadius: 'var(--radius-md)',
                overflow: 'hidden',
                border: 'var(--border-width-hairline) solid var(--border-default)',
                boxShadow: 'var(--shadow-stamp-sm)',
              }}
            >
              <image-slot
                id={prefix + photo.key}
                shape="rect"
                fit="cover"
                src={photo.src}
              ></image-slot>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CornerGallery = CornerGallery;