function StoryCard({ title, image }) {
  const [hover, setHover] = React.useState(false);
  return React.createElement('div', {
    onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { cursor: 'pointer' },
  },
    React.createElement('div', {
      style: {
        aspectRatio: '4/5', borderRadius: 'var(--radius-md)', overflow: 'hidden', marginBottom: 20,
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'transform var(--duration-base) var(--ease-out-soft)',
      },
    }, React.createElement('img', { src: image, alt: title, style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } })),
    React.createElement('h3', { style: { fontSize: 'var(--text-lg)', margin: '0 0 8px', color: 'var(--text-primary)' } }, title)
  );
}