// PhotoStrip.jsx — Full-bleed photo gallery strip
const PhotoStrip = () => {
  const photos = [
    './assets/photos/berry-bush-pink.jpg',
    './assets/photos/berries-closeup-blue.jpg',
    './assets/photos/berry-cluster-branch.jpg',
    './assets/photos/berry-branch-blue.jpg',
    './assets/photos/berry-garden.jpg',
  ];

  return (
    <section style={{ display: 'flex', height: '260px', overflow: 'hidden' }}>
      {photos.map((src, i) => (
        <div key={i} style={{
          flex: 1, backgroundImage: `url(${src})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          transition: 'flex 0.4s ease',
          cursor: 'pointer',
        }}
          onMouseEnter={e => e.currentTarget.style.flex = '2'}
          onMouseLeave={e => e.currentTarget.style.flex = '1'}
        />
      ))}
    </section>
  );
};

Object.assign(window, { PhotoStrip });