/* global React, Icon */

// TIWIB-style product card: white bg, square image fills the card, title+desc below, big CTA
function ProductCard({ product, onOpen, onWishlist, saved }) {
  const [hover, setHover] = React.useState(false);
  const href = product.url || '#';
  const go = (e) => {
    if (!product.url) { e.preventDefault(); }
  };
  return (
    <a
      href={href}
      target="_blank" rel="sponsored nofollow noopener"
      onClick={go}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff', cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
        transition: 'transform 160ms ease',
        transform: hover ? 'translateY(-2px)' : 'none',
        textDecoration: 'none', color: 'inherit',
      }}>
      <div style={{ position: 'relative', aspectRatio: '1 / 1', background: '#fafafa', overflow: 'hidden', border: '1px solid #000' }}>
        <img src={product.img} alt={product.title}
             style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 250ms ease', transform: hover ? 'scale(1.04)' : 'scale(1)' }}/>
      </div>
      <div style={{ padding: '16px 4px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, margin: 0, lineHeight: 1.35, color: '#111', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {product.title}
        </h3>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 10 }}>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            {product.origPrice && (
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#999', textDecoration: 'line-through' }}>
                ₩{product.origPrice.toLocaleString()}
              </span>
            )}
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 17, color: '#111' }}>
              ₩{product.price.toLocaleString()}
            </span>
          </div>
          <span
            onClick={(e) => { e.stopPropagation(); }}
            style={{
              background: 'var(--coral)', color: '#fff', border: 0,
              fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 700,
              letterSpacing: '0.04em',
              padding: '11px 22px', borderRadius: 3, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              transition: 'background 140ms ease',
              textShadow: '0 1px 2px rgba(0,0,0,0.2)',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--coral-deep)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'var(--coral)'}
          >
            바로낚기
          </span>
        </div>
      </div>
    </a>
  );
}

function ProductGrid({ products, onOpen, onWishlist, wishlist }) {
  return (
    <div className="product-grid">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} onOpen={onOpen} onWishlist={onWishlist} saved={wishlist.has(p.id)}/>
      ))}
    </div>
  );
}
Object.assign(window, { ProductCard, ProductGrid });