// Gallery page

function PageGallery({ content }) {
  const gallery = content.gallery;
  return (
    <main className="page-enter">
      <header className="page-head">
        <window.JacarandaSprig size={200} color="#9b7fb8" animated style={{ position: 'absolute', top: -20, left: '10%', opacity: 0.6 }} />
        <window.FernFrond size={220} color="var(--fern-bright)" animated flip style={{ position: 'absolute', top: -40, right: -60, opacity: 0.4 }} />
        <window.Butterfly size={36} color="var(--terra)" animated style={{ position: 'absolute', top: '40%', left: '8%', zIndex: 5 }} />
        <div className="container">
          <span className="eyebrow">{gallery.eyebrow}</span>
          <h1 className="h2" style={{ marginTop: 22 }}>{gallery.titleLine}<br/><i>{gallery.titleEmphasis}</i></h1>
        </div>
        <window.LeafSpray size={180} color="var(--fern)" flip style={{ position: 'absolute', top: 30, right: 80, transform: 'rotate(-25deg)', opacity: 0.55 }} />
      </header>

      <section className="container">
        <div className="gallery">
          {gallery.items.map((item, i) => (
            <div className={"g-" + (i + 1)} key={item.number} style={{ position: 'relative' }}>
              <window.PhotoCard
                src={window.imgUrl(item.photoKey, 1400)}
                caption={`${item.number} · ${item.title}`}
                ratio="auto"
                strength={0.12}
                style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
              />
            </div>
          ))}
        </div>

        <div style={{ borderTop: '1px solid var(--rule)', padding: '32px 0 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
          <span className="body" style={{ fontSize: 14 }}>{gallery.footerNote}</span>
          <span className="text-link">{gallery.submitLabel} →</span>
        </div>
      </section>
    </main>
  );
}

window.PageGallery = PageGallery;