/* Property listing card — gold hairline frame, photo with protection
   gradient, serif name + price, sans spec row. Hover lifts + zooms. */
function ListingCard({ item, onOpen, href }) {
  const [hover, setHover] = React.useState(false);
  const cardBody = (
    <React.Fragment>
      <div style={{ position: "relative", height: 228, overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, transform: hover ? "scale(1.045)" : "scale(1)", transition: "transform var(--dur-slow) var(--ease)" }}>
          <Photo
            src={CARINA_LISTING_IMAGE(item)}
            alt={item.name}
            tone={item.tone}
            watermark={false}
            corner={false}
          />
        </div>
        <span style={{
          position: "absolute", left: 16, top: 16, zIndex: 2,
          fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 500,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--accent-ink)", background: "var(--accent)",
          padding: "6px 12px", borderRadius: "var(--r-pill)"
        }}>{item.tag}</span>
        <div style={{
          position: "absolute", left: 18, bottom: 15, zIndex: 2,
          fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.18em",
          textTransform: "uppercase", color: "var(--ink-200)"
        }}>{item.type}</div>
      </div>

      <div style={{ padding: "20px 22px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{
          fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: "0.12em",
          textTransform: "uppercase", color: "var(--fg-muted)", display: "flex", alignItems: "center", gap: 7
        }}>
          <Icon name="marker" size={13} color="var(--accent)" /> {item.bairro} · {item.cidade}
        </div>
        <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: 23, color: "var(--fg)", margin: "8px 0 0", lineHeight: 1.12 }}>{item.name}</h3>

        <div style={{ display: "flex", gap: 18, marginTop: 15, paddingTop: 14, borderTop: "1px solid var(--surface-line)", flexWrap: "wrap" }}>
          {item.short.map(([ic, label]) => <Spec key={label} icon={ic} label={label} />)}
        </div>

        <div style={{ marginTop: "auto", paddingTop: 18, display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 18 }}>
          <span style={{ fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: 25, color: "var(--accent)" }}>{CARINA_FMT(item.price)}</span>
          <span style={{
            fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: "0.11em", textTransform: "uppercase",
            color: hover ? "var(--accent-hover)" : "var(--fg-muted)", display: "flex", alignItems: "center", gap: 6,
            transition: "color var(--dur) var(--ease)", whiteSpace: "nowrap"
          }}>Ver detalhes <span style={{ display: "inline-block", transform: hover ? "translateX(3px)" : "none", transition: "transform var(--dur) var(--ease)" }}>→</span></span>
        </div>
      </div>
    </React.Fragment>
  );
  const baseStyle = {
    width: "100%", height: "100%", textAlign: "left",
    background: "var(--bg-card)", border: "1px solid var(--border-gold)",
    borderRadius: "var(--r-md)", overflow: "hidden", cursor: "pointer",
    boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-sm)",
    transform: hover ? "translateY(-6px)" : "none",
    transition: "transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)",
    borderColor: hover ? "var(--border-gold-strong)" : "var(--border-gold)",
    display: "flex", flexDirection: "column", padding: 0, color: "inherit", textDecoration: "none"
  };
  return (
    <article style={{ display: "flex" }}>
      {href ? (
        <a className="cn-listing-card-action" href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={baseStyle}>
          {cardBody}
        </a>
      ) : (
        <button className="cn-listing-card-action" type="button" onClick={() => onOpen(item)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={baseStyle}>
          {cardBody}
        </button>
      )}
    </article>
  );
}

function Spec({ icon, label }) {
  return (
    <span style={{ display: "flex", alignItems: "center", gap: 7, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.35, color: "var(--ink-300)" }}>
      <Icon name={icon} size={15} color="var(--gold-600)" /> {label}
    </span>
  );
}
Object.assign(window, { ListingCard, Spec });