// Editorial photography components · duotone treatment, captioned, plate-numbered

const PHOTOS = {
  // Federal/govcon-relevant editorial photography
  capitol: 'https://images.unsplash.com/photo-1541872703-74c5e44368f9?w=1400&q=80',
  meeting: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&q=80',
  desk: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=1200&q=80',
  paperwork: 'https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=1200&q=80',
  team: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1400&q=80',
  fela: 'assets/fela-fagbure.png',
  office: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=1400&q=80',
  blueprint: 'https://images.unsplash.com/photo-1581094288338-2314dddb7ece?w=1400&q=80',
  signing: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1400&q=80',
  server: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1400&q=80',
  vault: 'https://images.unsplash.com/photo-1633265486064-086b219458ec?w=1400&q=80',
  newcity: 'https://images.unsplash.com/photo-1555109307-f7d9da25c244?w=1400&q=80',
};

function EditorialPhoto({ src, alt, plate, caption, height = 'auto', aspect = '4 / 5' }) {
  return (
    <figure style={{ margin: 0 }}>
      <div className="photo-frame" style={{ aspectRatio: aspect, height }}>
        <div className="photo-duotone" style={{ position: 'absolute', inset: 0 }}>
          <img src={src} alt={alt} loading="lazy" />
        </div>
        <div className="photo-ticks"></div>
      </div>
      {(plate || caption) && (
        <figcaption className="photo-caption">
          {plate && <span className="photo-caption-num">{plate}</span>}
          {caption && <span style={{ fontStyle: 'italic', fontFamily: 'var(--serif)', color: 'var(--ink-soft)' }}>{caption}</span>}
        </figcaption>
      )}
    </figure>
  );
}

Object.assign(window, { PHOTOS, EditorialPhoto });