// FlipCard — adapté du composant FlipHover (shadcn) pour notre contexte React + Babel.
// Mécanique identique : au survol, rotateY(180deg) + translateY(-40px) sur 700ms,
// puis revient à 0. Recto et verso composés librement.

const FlipCard = ({
  width = '100%',
  height = 480,
  front,
  back,
  radius = 0,
  shadow = '0 12px 40px rgba(0,0,0,0.5)',
}) => {
  const [isFlipped, setIsFlipped] = React.useState(false);

  const handleEnter = () => setIsFlipped(true);
  const handleLeave = () => setIsFlipped(false);

  return (
    <div
      onMouseEnter={handleEnter}
      onMouseLeave={handleLeave}
      style={{
        width, height,
        perspective: '1000px',
        cursor: 'pointer',
      }}
    >
      <div
        style={{
          position: 'relative',
          width: '100%', height: '100%',
          transition: 'transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1)',
          transformStyle: 'preserve-3d',
          transform: isFlipped
            ? 'rotateY(180deg) translateY(-40px)'
            : 'rotateY(0deg) translateY(0px)',
        }}
      >
        {/* Front */}
        <div style={{
          position: 'absolute', inset: 0,
          borderRadius: radius, overflow: 'hidden',
          boxShadow: shadow,
          backfaceVisibility: 'hidden',
          WebkitBackfaceVisibility: 'hidden',
        }}>
          {front}
        </div>
        {/* Back */}
        <div style={{
          position: 'absolute', inset: 0,
          borderRadius: radius, overflow: 'hidden',
          boxShadow: shadow,
          backfaceVisibility: 'hidden',
          WebkitBackfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)',
        }}>
          {back}
        </div>
      </div>
    </div>
  );
};

window.FlipCard = FlipCard;