/* SER-OS — Casket option card */

function CasketCard({ casket, selected, onSelect, onCompare }) {
  return (
    <button
      onClick={onSelect}
      style={{
        all: "unset", cursor: "pointer", display: "block",
        width: "100%", boxSizing: "border-box",
        background: "#FFFFFF", borderRadius: 8, overflow: "hidden",
        border: `1px solid ${selected ? "var(--border-strong)" : "var(--border-subtle)"}`,
        padding: 2,
        boxShadow: selected ? "0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10)" : "none",
        transition: "border-color 150ms, box-shadow 150ms",
      }}
    >
      <div style={{
        position: "relative", aspectRatio: "357/268", overflow: "hidden",
        background: casket.image
          ? `url(${casket.image}) center / cover no-repeat`
          : "linear-gradient(180deg, #F0EDE6 0%, #E5E2D9 100%)",
      }}>
        {selected && (
          <div style={{
            position: "absolute", left: 12, top: 12, width: 28, height: 28,
            borderRadius: "50%", background: "var(--brand-navy)", color: "#FFFFFF",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10)",
          }}>
            <SerIcons.Check size={14} />
          </div>
        )}
        <button
          onClick={(e) => { e.stopPropagation(); onCompare && onCompare(); }}
          style={{
            position: "absolute", right: 12, top: 12, width: 40, height: 40,
            borderRadius: 10, background: "rgba(255,255,255,0.92)", border: "none",
            color: "var(--fg-primary)", display: "flex", alignItems: "center", justifyContent: "center",
            cursor: "pointer",
          }}
        >
          <SerIcons.Compare size={20} />
        </button>
        <div style={{
          position: "absolute", left: "50%", bottom: 14,
          transform: "translateX(-50%)", display: "flex", gap: 4,
        }}>
          {[0, 1, 2].map(i => (
            <span key={i} style={{
              width: 6, height: 6, borderRadius: "50%",
              background: i === 0 ? "#FFFFFF" : "rgba(255,255,255,0.55)",
            }} />
          ))}
        </div>
        {!casket.image && (
          <div style={{
            position: "absolute", inset: 0, display: "flex",
            alignItems: "center", justifyContent: "center",
            color: "var(--fg-tertiary)", fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase",
          }}>
            Photo placeholder
          </div>
        )}
      </div>
      <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ fontSize: 18, lineHeight: "28px", fontWeight: 500, letterSpacing: "-0.439px", color: "var(--fg-primary)" }}>
          {casket.name}
        </div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 20, lineHeight: "28px", fontWeight: 500, letterSpacing: "-0.449px", color: "var(--fg-primary)" }}>
            {casket.price}
          </div>
          <div style={{ fontSize: 12, lineHeight: "16px", color: "var(--fg-secondary)" }}>{casket.sides}</div>
        </div>
      </div>
    </button>
  );
}

Object.assign(window, { CasketCard });