/** Card da banca (Feira do Beco). Mesma carcaça do RestaurantCard horizontal —
 *  borda forte, sombra dura, mídia de 88px — mas a gramática troca de eixo:
 *  no lugar de ETA/taxa entram o carimbo de FORNADA (o ciclo do produtor) e
 *  retirada/entrega. A tag ASSINATURA marca quem vende recorrência. */
function ProducerCard({ place, style, onClick }) {
  const [hover, setHover] = React.useState(false);
  const PR = place.producer;
  const B = place.brand || null;

  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "row", position: "relative",
        background: "var(--surface-card)",
        border: "var(--border-w) solid var(--border-strong)",
        borderRadius: "var(--radius-lg)", overflow: "hidden", cursor: "pointer",
        boxShadow: hover ? "6px 6px 0 var(--shadow-color)" : "4px 4px 0 var(--shadow-color)",
        transform: hover ? "translate(-2px, -2px)" : "none",
        transition: "transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)",
        ...style
      }}>
      {/* mídia: a placa da banca — tile de marca quando existe, hachura quando não */}
      <div style={{
        flex: "0 0 88px", height: 96, position: "relative",
        borderRight: "var(--border-w) solid var(--border-strong)",
        background: B ? B.bg : "var(--surface-sunken)",
        backgroundImage: B ? "none" : "var(--hatch-45)",
        opacity: B ? 1 : 0.3,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1
      }}>
        {B && (<>
          <span style={{
            fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 6.5, letterSpacing: "0.2em",
            textTransform: "uppercase", color: B.dimmer
          }}>{B.kicker}</span>
          <span style={{
            width: 44, height: 44, borderRadius: "50%", background: B.paper,
            border: "2px solid " + B.accent, boxShadow: "0 0 0 3px " + B.gold,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: B.display, fontSize: 16, lineHeight: 1, color: B.accent, overflow: "hidden"
          }}>{B.logo ? <img src={B.logo} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : B.mark}</span>
        </>)}
      </div>

      <div style={{ padding: "var(--space-4)", flex: 1, minWidth: 0 }}>
        <div style={{
          display: "flex", alignItems: "baseline", gap: 8,
          fontFamily: "var(--font-display)", fontWeight: 900, fontStretch: "125%", textTransform: "uppercase",
          fontSize: "var(--size-body-lg)", lineHeight: 1.05, color: "var(--text-strong)",
          whiteSpace: "nowrap", overflow: "hidden"
        }}>
          <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{place.name}</span>
        </div>
        <div style={{ fontSize: "var(--size-body-sm)", color: "var(--text-muted)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {["banca", PR.kind, place.distance].filter(Boolean).join(" · ")}
        </div>
        <div style={{
          display: "flex", alignItems: "center", flexWrap: "nowrap", gap: "var(--space-3)",
          marginTop: "var(--space-3)",
          fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 10.5,
          letterSpacing: "0.06em", textTransform: "uppercase", whiteSpace: "nowrap",
          color: "var(--text-strong)"
        }}>
          {/* o carimbo: a próxima fornada é a informação que manda no card */}
          <span style={{
            background: "var(--accent)", color: "var(--accent-fg)",
            padding: "2px 6px", borderRadius: "var(--radius-xs)", letterSpacing: "0.08em"
          }}>{PR.next}</span>
          <span style={{ color: "var(--text-muted)" }}>{PR.fulfil}</span>
        </div>
      </div>

      {PR.sub && (
        <span style={{
          position: "absolute", top: 8, right: 8,
          fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 8.5,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--text-strong)", border: "1px solid var(--border-strong)",
          borderRadius: "var(--radius-xs)", padding: "3px 5px", background: "var(--surface-card)"
        }}>assinatura</span>
      )}
    </div>
  );
}
Object.assign(window, { ProducerCard });