// Real photo "cast" — Unsplash IDs curated for expressive, on-camera energy.
// Each character is a real photograph framed in a circular badge so they
// read as a casting roster (not stock slop).

const PHOTO = {
  dog:     'https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=400&h=400&fit=crop&crop=faces', // golden retriever face
  cat:     'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=400&h=400&fit=crop&crop=faces', // orange tabby
  robot:   'https://images.unsplash.com/photo-1531379410502-63bfe8cdaf6f?w=400&h=400&fit=crop', // toy robot
  tomato:  'https://images.unsplash.com/photo-1592841200221-a6898f307baa?w=400&h=400&fit=crop', // tomato closeup
  astro:   'https://images.unsplash.com/photo-1614728263952-84ea256f9679?w=400&h=400&fit=crop', // astronaut helmet
  ghost:   'https://images.unsplash.com/photo-1509557965875-b88c97052f0e?w=400&h=400&fit=crop', // spooky / mannequin
  dino:    'https://images.unsplash.com/photo-1606856110002-d0991ce78250?w=400&h=400&fit=crop', // toy dinosaur
  fox:     'https://images.unsplash.com/photo-1516934024742-b461fba47600?w=400&h=400&fit=crop&crop=faces', // fox
  banana:  'https://images.unsplash.com/photo-1571771894821-ce9b6c11b08e?w=400&h=400&fit=crop', // banana
  slime:   'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=400&fit=crop', // purple gradient / abstract
  duck:    'https://images.unsplash.com/photo-1527525443983-6e60c75fff46?w=400&h=400&fit=crop&crop=faces', // duck
  alien:   'https://images.unsplash.com/photo-1608178398319-48f814d0750c?w=400&h=400&fit=crop', // green alien toy
  unicorn: 'https://images.unsplash.com/photo-1598935898639-81586f7d2129?w=400&h=400&fit=crop', // unicorn plush / figure
};

// Photo badge — square framed photo with studio vignette + caption
const CharPhoto = ({ id, size = 120, rounded = true }) => {
  const src = PHOTO[id];
  return (
    <div style={{
      width: size, height: size,
      borderRadius: rounded ? '50%' : 18,
      overflow: 'hidden',
      position: 'relative',
      boxShadow: 'inset 0 -24px 40px -8px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35)',
      background: '#1a1a1a',
    }}>
      <img src={src} alt="" style={{
        width: '100%', height: '100%', objectFit: 'cover',
        filter: 'contrast(1.08) saturate(1.12)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.14), transparent 55%), radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.35), transparent 60%)',
        pointerEvents: 'none',
      }} />
    </div>
  );
};

// Full-bleed photo for hero/remix frames — fills container, vignette + grading
const CharScene = ({ id, className, style }) => {
  const src = PHOTO[id];
  return (
    <div className={className} style={{ position: 'relative', overflow: 'hidden', ...style }}>
      <img src={src} alt="" style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%', objectFit: 'cover',
        filter: 'contrast(1.1) saturate(1.15) brightness(0.95)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0,0,0,0.55) 100%)',
        pointerEvents: 'none',
      }} />
    </div>
  );
};

// Keep the Dog/Tomato named exports as photo renders so existing JSX still works
const makePhotoRender = (id) => ({ size = 120 }) => <CharPhoto id={id} size={size} />;
const Dog = makePhotoRender('dog');
const Cat = makePhotoRender('cat');
const Robot = makePhotoRender('robot');
const Tomato = makePhotoRender('tomato');
const Astronaut = makePhotoRender('astro');
const Ghost = makePhotoRender('ghost');
const Dino = makePhotoRender('dino');
const Fox = makePhotoRender('fox');
const Banana = makePhotoRender('banana');
const Slime = makePhotoRender('slime');
const Duck = makePhotoRender('duck');
const Alien = makePhotoRender('alien');
const Unicorn = makePhotoRender('unicorn');

const CHARACTERS = [
  { id: 'dog',     name: 'Goldie',   Component: Dog,       bg: '#FFD98A', bg2: '#E8A94A' },
  { id: 'cat',     name: 'Mango',    Component: Cat,       bg: '#FFB470', bg2: '#E8661A' },
  { id: 'robot',   name: 'Bleep',    Component: Robot,     bg: '#B8C4E8', bg2: '#6A78A8' },
  { id: 'tomato',  name: 'Señor T',  Component: Tomato,    bg: '#FFB0A0', bg2: '#E83C28' },
  { id: 'astro',   name: 'Nova',     Component: Astronaut, bg: '#9AB4FF', bg2: '#3A5AE0' },
  { id: 'ghost',   name: 'Boo',      Component: Ghost,     bg: '#E8DCFF', bg2: '#9A86E8' },
  { id: 'dino',    name: 'Rexie',    Component: Dino,      bg: '#A8F2C8', bg2: '#3FB888' },
  { id: 'fox',     name: 'Pip',      Component: Fox,       bg: '#FFC895', bg2: '#E8661A' },
  { id: 'banana',  name: 'Split',    Component: Banana,    bg: '#FFEC86', bg2: '#FFC420' },
  { id: 'slime',   name: 'Ooze',     Component: Slime,     bg: '#E8B0FF', bg2: '#9030D0' },
  { id: 'duck',    name: 'Quack',    Component: Duck,      bg: '#FFE894', bg2: '#E8A420' },
  { id: 'alien',   name: 'Blip',     Component: Alien,     bg: '#C8F2D8', bg2: '#3FB888' },
  { id: 'unicorn', name: 'Sprinkle', Component: Unicorn,   bg: '#FFD4E8', bg2: '#FF5E8A' },
];

Object.assign(window, {
  Dog, Cat, Robot, Tomato, Astronaut, Ghost, Dino, Fox,
  Banana, Slime, Duck, Alien, Unicorn,
  CharPhoto, CharScene, PHOTO,
  CHARACTERS,
});