/* Real photos for stock slots — keyed by `kind`. Images live in /assets/photos/.
   Sourced from Unsplash (free license, no attribution required). Replace any of these
   with art-directed photography when it lands. */

const PHOTO_FOR = {
  skyline:   { src: 'assets/photos/skyline.jpg',   alt: 'Manhattan skyline at sunset' },
  advisor:   { src: 'assets/photos/advisor.jpg',   alt: 'Hands working at a laptop' },
  office:    { src: 'assets/photos/office.jpg',    alt: 'Modern office interior' },
  handshake: { src: 'assets/photos/handshake.jpg', alt: 'Two professionals shaking hands' },
  laptop:    { src: 'assets/photos/laptop.jpg',    alt: 'Laptop and notebook on desk' },
};

const StockSlot = ({ label, kind, height = 320, ratio }) => {
  const photo = PHOTO_FOR[kind] || PHOTO_FOR.office;

  const wrap = {
    aspectRatio: ratio || 'auto',
    height: ratio ? 'auto' : height,
    width: '100%',
    position: 'relative',
    overflow: 'hidden',
    background: '#202020',
  };
  const img = {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    display: 'block',
  };
  const overlay = {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)',
    pointerEvents: 'none',
  };
  const cap = {
    position: 'absolute', bottom: 18, left: 20, right: 20,
    fontFamily: 'var(--f-display)', fontSize: 17, fontWeight: 600, color: 'white',
    letterSpacing: '-0.005em', maxWidth: '70%',
    textShadow: '0 2px 12px rgba(0,0,0,0.55)',
    pointerEvents: 'none',
  };

  return (
    <figure style={{ margin: 0 }}>
      <div style={wrap}>
        <img src={photo.src} alt={photo.alt} style={img} loading="lazy" decoding="async" />
        <div style={overlay}></div>
        {label ? <span style={cap}>{label}</span> : null}
      </div>
    </figure>
  );
};

window.StockSlot = StockSlot;