// PetPhoto — real warm pet photography. Same API as before.

const U = (id, w=600) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=80`;

const PHOTO_URLS = {
  goldenDog:    U('1552053831-71594a27632d', 700),
  smallDog:     U('1583337130417-3346a1be7dee', 500),
  tabbyCat:     U('1573865526739-10659fec78a5', 600),
  blackCat:     U('1495360010541-f48722b34f7d', 500),
  kitten:       U('1574158622682-e40e69881006', 500),
  rabbit:       U('1535241749838-299277b6305f', 500),
  brownBunny:   U('1452857297128-d9c29adba80b', 500),
  parrot:       U('1444464666168-49d633b86797', 500),
  hamster:      U('1425082661705-1834bfd09dca', 500),
  bondHug:      U('1444212477490-ca407925329e', 900),
  girlWithDog:  U('1548858806-e064cf9872c0', 900),
  womanCatHug:  U('1606214174585-fe31582dc6ee', 700),
  manWithDog:   U('1568572933382-74d440642117', 700),
  pawHand:      U('1450778869180-41d0601e046e', 800),
  catHand:      U('1511044568932-338cba0ad803', 600),
  vetCat:       U('1559059699-085698eba48c', 300),
  dogBlanket:   U('1530281700549-e82e7bf110d6', 600),
  vetTeam:      U('1576091160550-2173dba999ef', 800),
};

const PetPhoto = ({ kind='goldenDog', alt='', style={}, ratio='4/5', radius=14, ...rest }) => (
  <div role="img" aria-label={alt} style={{
    position:'relative', overflow:'hidden', borderRadius: radius,
    aspectRatio: ratio, background:'var(--accent-soft)',
    boxShadow:'0 24px 48px -24px rgba(74,42,18,0.25), 0 6px 16px -8px rgba(74,42,18,0.12)',
    ...style
  }} {...rest}>
    <img src={PHOTO_URLS[kind] || PHOTO_URLS.goldenDog} alt={alt} loading="lazy" style={{
      width:'100%', height:'100%', objectFit:'cover', display:'block'
    }}/>
  </div>
);

const PetPolaroid = ({ kind='goldenDog', alt='', caption='', tilt=0, style={}, w=200 }) => (
  <div style={{
    background:'#FFFCF6', padding:'10px 10px 18px',
    boxShadow:'0 18px 38px -18px rgba(74,42,18,0.28), 0 4px 10px -4px rgba(74,42,18,0.15)',
    transform:`rotate(${tilt}deg)`, width:w,
    border:'1px solid rgba(74,42,18,0.06)', ...style
  }}>
    <div style={{ aspectRatio:'1/1', overflow:'hidden', background:'var(--accent-soft)' }}>
      <img src={PHOTO_URLS[kind] || PHOTO_URLS.goldenDog} alt={alt} loading="lazy" style={{
        width:'100%', height:'100%', objectFit:'cover', display:'block'
      }}/>
    </div>
    {caption && (
      <div className="serif" style={{
        fontSize: w < 180 ? 13 : 15, marginTop:8, textAlign:'center',
        fontStyle:'italic', color:'#5A3A1F'
      }}>{caption}</div>
    )}
  </div>
);

const PetAvatar = ({ kind='goldenDog', size=44, border=3, borderColor='var(--bg)' }) => (
  <div style={{
    width:size, height:size, borderRadius:99, overflow:'hidden',
    border:`${border}px solid ${borderColor}`,
    boxShadow:'0 4px 8px -2px rgba(74,42,18,0.15)',
    background:'var(--accent-soft)', flexShrink:0
  }}>
    <img src={PHOTO_URLS[kind] || PHOTO_URLS.goldenDog} alt="" loading="lazy" style={{
      width:'100%', height:'100%', objectFit:'cover', display:'block'
    }}/>
  </div>
);

const PHOTOS = {
  labradorPuppy:'goldenDog', goldenSmile:'goldenDog', dogTutorHug:'bondHug',
  vetWithDog:'vetCat', smallDog:'smallDog', dogBlanket:'dogBlanket',
  catCloseup:'tabbyCat', catKitten:'kitten', catSleeping:'blackCat',
  vetWithCat:'vetCat', rabbit:'rabbit', rabbit2:'brownBunny',
  bird:'parrot', parrot:'parrot', hamster:'hamster', guineaPig:'hamster',
  bondPawHand:'pawHand', bondCatHand:'catHand', bondHug:'bondHug',
  girlWithDog:'girlWithDog', womanCatHug:'womanCatHug', manWithDog:'manWithDog',
  vetExam:'vetCat', vetTeam:'vetTeam',
};

window.PetPhoto = PetPhoto;
window.PetPolaroid = PetPolaroid;
window.PetAvatar = PetAvatar;
window.PHOTOS = PHOTOS;