/* Photo — real brand photography when `image` is given, otherwise a tonal
   placeholder. Placeholders keep a hairline frame and a caption naming what
   belongs there; real photos drop the caption and use a soft inset frame. */
function Photo({ label = 'Photography', tone = 'oak', ratio = '4 / 3', image, alt, position = 'center', style = {}, ...rest }) {
  const tones = {
    oak:     'linear-gradient(155deg, #D3C3AC, #C4B4A7 62%, #B6A188)',
    linen:   'linear-gradient(155deg, #EFE7D9, #E0D6C4)',
    oxblood: 'linear-gradient(155deg, #5C2F31, #4A2426 62%, #3A1B1E)',
    ink:     'linear-gradient(155deg, #3A2E26, #2B211B)',
    walnut:  'linear-gradient(155deg, #503B2E, #3A2A20)',
  };
  const dark = ['oxblood', 'ink', 'walnut'].includes(tone);

  if (image) {
    return (
      <div style={{
        position: 'relative', width: '100%', aspectRatio: ratio,
        overflow: 'hidden', background: 'var(--parchment)',
        ...style,
      }} {...rest}>
        <img src={image} alt={alt || label} loading="lazy" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: position, display: 'block',
        }} />
        <span aria-hidden style={{ position: 'absolute', inset: '10px', border: '1px solid rgba(244,240,230,.34)', pointerEvents: 'none' }} />
      </div>
    );
  }

  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: ratio,
      background: tones[tone] || tones.oak, overflow: 'hidden',
      display: 'flex', alignItems: 'flex-end', ...style,
    }} role="img" aria-label={alt || label}>
      <span style={{ position: 'absolute', inset: '10px', border: `1px solid ${dark ? 'rgba(244,240,230,.24)' : 'rgba(43,33,27,.14)'}`, pointerEvents: 'none' }} />
      <span style={{
        position: 'relative', margin: '18px', fontFamily: 'var(--font-sans)',
        fontSize: '11px', fontWeight: 600, letterSpacing: '.2em', textTransform: 'uppercase',
        color: dark ? 'rgba(244,240,230,.82)' : 'rgba(43,33,27,.52)',
      }}>{label}</span>
    </div>
  );
}
window.Photo = Photo;