/* PropertyCard.jsx — signature card used everywhere */

function PropertyCard({ p, onSelect, featured = false }) {
  const [hover, setHover] = React.useState(false);
  const [liked, setLiked] = React.useState(false);

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => onSelect?.(p)}
      style={{
        background: '#fff',
        border: '1px solid var(--line)',
        borderRadius: 14,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'all 220ms var(--ease-novus)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        boxShadow: hover ? 'var(--shadow-soft)' : 'none',
      }}
    >
      <div style={{ position: 'relative', aspectRatio: featured ? '16/10' : '4/3', background: 'var(--sand-100)' }}>
        <img src={p.photo} alt={p.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover',
                   transform: hover ? 'scale(1.03)' : 'scale(1)',
                   transition: 'transform 600ms var(--ease-novus)' }} />
        <div style={{
          position: 'absolute', left: 12, bottom: 12,
          padding: '6px 12px',
          background: 'rgba(10,31,51,0.62)', backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          color: '#FBF8F3', borderRadius: 999,
          fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>{p.badge}</div>

        <button
          aria-label={liked ? 'Remove from favorites' : 'Add to favorites'}
          aria-pressed={liked}
          onClick={(e) => { e.stopPropagation(); setLiked(v => !v); }}
          style={{
            position: 'absolute', right: 10, top: 10,
            width: 44, height: 44, borderRadius: 999, border: 0,
            background: 'rgba(255,255,255,0.92)', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: liked ? 'var(--sun-pink)' : 'var(--navy-700)',
            transition: 'all 240ms var(--ease-novus)',
            backdropFilter: 'blur(6px)',
            WebkitBackdropFilter: 'blur(6px)',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.transform = 'scale(1.06)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.92)'; e.currentTarget.style.transform = 'scale(1)'; }}
        >
          <svg width="18" height="18" viewBox="0 0 24 24"
               fill={liked ? 'currentColor' : 'none'}
               stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5L12 21z"/>
          </svg>
        </button>
      </div>

      <div style={{ padding: '18px 20px 20px' }}>
        <div className="overline" style={{ fontSize: 11, marginBottom: 4 }}>{p.neighborhood}</div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 24, color: 'var(--navy-900)',
          margin: '0 0 4px 0', letterSpacing: '-0.01em', lineHeight: 1.15,
        }}>{p.name}</h3>
        <div style={{ color: 'var(--ink-500)', fontSize: 13 }}>{p.short}</div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)',
        }}>
          <span style={{ fontFeatureSettings: '"tnum"', fontSize: 18, fontWeight: 500, color: 'var(--navy-900)' }}>
            ${p.rate.toLocaleString()}
            <span style={{ fontSize: 12, color: 'var(--ink-500)', fontWeight: 400 }}> / night</span>
          </span>
          {Number(p.reviews) > 0 ? (
            <span style={{ fontSize: 12, color: 'var(--ink-500)' }}>★ {p.rating} · {p.reviews} {Number(p.reviews) === 1 ? 'stay' : 'stays'}</span>
          ) : (
            <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', color: 'var(--navy-900)', background: 'var(--sand-100, #F2EFEA)', borderRadius: 999, padding: '3px 10px' }}>New collection</span>
          )}
        </div>
      </div>
    </article>
  );
}

window.PropertyCard = PropertyCard;