// gallery.jsx — past trips strip

function Gallery({ pastTrips }) {
  return (
    <section className="gallery">
      <div className="td-section-head gallery-head">
        <h3>Arkivet</h3>
        <div className="td-section-rule"></div>
        <span className="td-section-meta">Tidligere ture</span>
      </div>
      <div className="gallery-strip">
        {pastTrips.map((t) => (
          <div key={t.id} className="gallery-card" style={{ '--card-bg': t.color }}>
            <div className="gallery-card-img" aria-hidden="true">
              <svg viewBox="0 0 200 140" preserveAspectRatio="none" width="100%" height="100%">
                <defs>
                  <pattern id={`stripes-${t.id}`} x="0" y="0" width="8" height="8"
                           patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
                    <rect width="8" height="8" fill={t.color}/>
                    <line x1="0" y1="0" x2="0" y2="8" stroke="rgba(255,255,255,.06)" strokeWidth="1"/>
                  </pattern>
                </defs>
                <rect width="200" height="140" fill={`url(#stripes-${t.id})`}/>
                <text x="100" y="78" fill="rgba(245,236,214,.32)" fontSize="9"
                      fontFamily="var(--font-mono)" textAnchor="middle" letterSpacing="0.18em">
                  BILLEDE FRA {t.year}
                </text>
              </svg>
            </div>
            <div className="gallery-card-body">
              {t.tag && <span className="gallery-card-tag">{t.tag}</span>}
              <div className="gallery-card-name">{t.name}</div>
              <div className="gallery-card-meta">
                <span>{t.year}</span>
                <span className="gallery-card-dot">·</span>
                <em>{t.motif}</em>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Gallery });