function Detail({ item, owner, total, onClose, onContact }) {
  const [activeThumb, setActiveThumb] = React.useState(0);
  const closeRef = React.useRef(null);
  if (!item) return null;

  const status = getStatus(item);
  const photos = Array.isArray(item.photos) ? item.photos : [];
  const activePhoto = photos[activeThumb] || getPrimaryPhoto(item);
  const unavailable = item.status === "sold" || !validateStatus(item.status);

  React.useEffect(() => {
    const onKey = (event) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    closeRef.current && closeRef.current.focus();
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div className="detail" role="dialog" aria-modal="true" aria-labelledby="detail-title">
      <div className="detail-bar">
        <button ref={closeRef} className="back" type="button" onClick={onClose}>voltar ao índice</button>
        <div className="mono">No. {item.id} / {total} · {item.category}</div>
      </div>
      <div className="detail-body">
        <div className="detail-gallery">
          <div className="main">
            <PhotoFrame item={item} photo={activePhoto} variant={activeThumb} />
          </div>
          <div className="thumbs" role="list" aria-label={`Fotos de ${item.name}`}>
            {photos.map((photo, index) => (
              <button
                type="button"
                key={photo.src}
                className={`thumb ${activeThumb === index ? "active" : ""}`}
                onClick={() => setActiveThumb(index)}
                aria-label={`Mostrar foto ${index + 1} de ${item.name}`}
                aria-pressed={activeThumb === index}
              >
                <PhotoFrame item={item} photo={photo} variant={index} />
              </button>
            ))}
          </div>
        </div>
        <div className="detail-info">
          <div className="catno">Catálogo No. {item.id} · {item.category}</div>
          <h1 id="detail-title">{item.name}</h1>
          <div className={`status-row ${status.pill || item.status}`}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }}></span>
            {status.short}
          </div>

          <div className="price-big">{formatItemPrice(item)}</div>
          <div className="price-note">Preço cheio · aceito propostas razoáveis</div>

          <dl className="spec">
            {item.origin && (
              <React.Fragment>
                <dt>Origem</dt>
                <dd>
                  {item.referenceUrl
                    ? <a className="spec-link" href={item.referenceUrl} target="_blank" rel="noopener">{item.origin}</a>
                    : item.origin}
                </dd>
              </React.Fragment>
            )}
            {item.material && <React.Fragment><dt>Material</dt><dd>{item.material}</dd></React.Fragment>}
            {item.dimensions && <React.Fragment><dt>Medidas</dt><dd>{item.dimensions}</dd></React.Fragment>}
            {item.condition && <React.Fragment><dt>Estado</dt><dd>{item.condition}</dd></React.Fragment>}
            {item.included && <React.Fragment><dt>Incluso</dt><dd>{item.included}</dd></React.Fragment>}
            {item.year && <React.Fragment><dt>Ano</dt><dd>{item.year}</dd></React.Fragment>}
            <dt>Retirada</dt><dd>{item.pickupNotes || owner.pickupInstructions}</dd>
            <dt>Pagamento</dt><dd>{item.paymentNotes || owner.paymentInstructions}</dd>
          </dl>

          <div className="note-block">"{item.description}"</div>

          <div className="cta-row">
            <button className="btn primary" type="button" disabled={unavailable} onClick={() => onContact(item)}>
              {status.action}
            </button>
            <button className="btn" type="button" onClick={onClose}>Outros objetos</button>
          </div>

          <div style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid var(--stone)" }}>
            <div className="mono" style={{ marginBottom: 10 }}>Combinando a retirada</div>
            <p style={{ color: "var(--ink-soft)", fontSize: 16 }}>
              {owner.pickupInstructions} {owner.paymentInstructions}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactModal({ item, owner, onClose }) {
  if (!item) return null;
  const closeRef = React.useRef(null);
  const isCatalogue = item.type === "catalogue";
  const status = item.id && !isCatalogue ? getStatus(item) : null;
  const wa = makeWhatsappUrl(owner, item);

  React.useEffect(() => {
    const onKey = (event) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    closeRef.current && closeRef.current.focus();
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const title = isCatalogue
    ? "Vamos conversar sobre o catálogo"
    : item.status === "reserved"
      ? "Posso te colocar na fila"
      : "Vamos conversar sobre esta peça";

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="contact-title" onClick={(event) => event.stopPropagation()}>
        <button ref={closeRef} className="x" type="button" onClick={onClose} aria-label="Fechar contato">&times;</button>
        <div className="mono" style={{ marginBottom: 12 }}>
          {isCatalogue ? "Contato geral" : `Combinando No. ${item.id}`}
        </div>
        <h3 id="contact-title">{title}</h3>
        <p className="lead">
          {owner.responseExpectation}
        </p>
        {status && item.status === "sold" && (
          <p className="lead">Este item já foi vendido, mas posso te responder sobre outros itens do catálogo.</p>
        )}
        <div className="contact-methods">
          <a href={wa} target="_blank" rel="noopener" aria-label="Abrir conversa no WhatsApp">
            <span className="method">WhatsApp</span>
            <span className="detail-text">{owner.whatsappDisplay}</span>
          </a>
        </div>
        <div className="mono" style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--stone)", color: "var(--muted)", lineHeight: 1.6 }}>
          Retirada · até {formatDisplayDate(owner.pickupDeadlineISO)}<br/>
          Local · {owner.from}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Detail, ContactModal });