// ProductCard.jsx — Funny Farm Creations
// Dashed-border product card with image, optional badge, title, subtitle, price, add-to-cart

const ProductCard = ({ title, subtitle, price, badge, badgeDark, imgSrc, imgBg, onAdd }) => {
  const [hovered, setHovered] = React.useState(false);
  const [adding, setAdding] = React.useState(false);

  const handleAdd = () => {
    setAdding(true);
    setTimeout(() => setAdding(false), 600);
    onAdd && onAdd();
  };

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: 'var(--bg-card)',
        border: '2px dashed #e4beba',
        borderRadius: 16,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        boxShadow: hovered
          ? '0 12px 32px -4px rgba(119,87,77,0.16)'
          : '0 4px 20px -2px rgba(119,87,77,0.08)',
        transform: hovered ? 'translateY(-6px)' : 'translateY(0)',
        transition: 'transform 300ms cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 300ms',
      }}
    >
      {/* Image */}
      <div style={{
        aspectRatio: '1', position: 'relative', overflow: 'hidden',
        background: imgBg || '#ffdad6',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {imgSrc
          ? <img src={imgSrc} alt={title} style={{
              width: '100%', height: '100%', objectFit: 'cover',
              transform: hovered ? 'scale(1.08)' : 'scale(1)',
              transition: 'transform 500ms',
            }}/>
          : <span className="material-symbols-outlined" style={{ fontSize: 64, color: '#e7bdb1' }}>inventory_2</span>
        }
        {badge && (
          <span style={{
            position: 'absolute', top: 10, right: 10,
            background: badgeDark ? '#af101a' : 'rgba(255,255,255,0.92)',
            color: badgeDark ? '#fff' : '#af101a',
            backdropFilter: 'blur(4px)',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
            padding: '3px 9px', borderRadius: 9999,
            boxShadow: '0 1px 4px rgba(119,87,77,0.12)',
          }}>{badge}</span>
        )}
      </div>

      {/* Body */}
      <div style={{ padding: '14px 16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 16, fontWeight: 600, color: 'var(--text-primary)' }}>{title}</div>
        {subtitle && <div style={{ fontFamily: "'Newsreader', serif", fontSize: 13, color: 'var(--text-muted)', fontStyle: 'italic' }}>{subtitle}</div>}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
          <span style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 19, fontWeight: 700, color: '#af101a' }}>${price}</span>
          <button onClick={handleAdd} style={{
            width: 36, height: 36, borderRadius: '50%',
            background: adding ? '#af101a' : '#ffdad6',
            color: adding ? '#fff' : '#410003',
            border: 'none', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transition: 'background 200ms, transform 150ms cubic-bezier(0.175,0.885,0.32,1.275)',
            transform: adding ? 'scale(0.9)' : 'scale(1)',
          }}>
            <span className="material-symbols-outlined" style={{ fontSize: 17 }}>
              {adding ? 'check' : 'add_shopping_cart'}
            </span>
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ProductCard });