const { Button, StarRating } = window.GDVExpressDesignSystem_766357;

/* Faithful recreation of the GDV Express booking card: photo header with title
   overlay, member-rate strip, labeled detail rows, guest rating, dates, ID, Reserve. */
function CondoCard({ condo, onReserve }) {
  const c = condo;
  const Row = ({ label, children }) => (
    <div style={{ fontSize: "13px", color: "var(--ink-700)", lineHeight: 1.5 }}>
      <span style={{ fontWeight: 700, color: "var(--navy-800)" }}>{label}:</span> {children}
    </div>
  );
  return (
    <div style={{
      background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)",
      overflow: "hidden", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column",
      fontFamily: "var(--font-sans)",
    }}>
      <div style={{ position: "relative", height: "152px", background: `center/cover url('../../assets/photos/${c.image}')` }}>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6))" }}></div>
        <span style={{ position: "absolute", left: "14px", right: "14px", bottom: "11px", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16.5px", lineHeight: 1.2, textShadow: "0 1px 5px rgba(0,0,0,.5)" }}>{c.title}</span>
      </div>

      <div style={{ background: "var(--surface-sunken)", padding: "9px 14px", display: "flex", alignItems: "baseline", justifyContent: "flex-end", gap: "6px" }}>
        <span style={{ fontSize: "11.5px", color: "var(--muted)" }}>member rate</span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "19px", color: "var(--navy-800)" }}>{c.price}</span>
      </div>

      <div style={{ padding: "14px", display: "flex", flexDirection: "column", gap: "2px", flex: 1 }}>
        <Row label="City">{c.city}</Row>
        <Row label="Location">{c.location}</Row>
        <Row label="Avail Units">{c.units}</Row>
        <Row label="Unit Size – Max Occ">{c.unitSize}</Row>
        <Row label="Kitchen Type – Priv Occ">{c.kitchen}</Row>
        {c.rating > 0 && (
          <div style={{ display: "flex", alignItems: "center", gap: "8px", marginTop: "2px" }}>
            <span style={{ fontSize: "13px", fontWeight: 700, color: "var(--navy-800)" }}>Guest Rated:</span>
            <StarRating value={c.rating} size={14} />
          </div>
        )}

        <div style={{ display: "inline-flex", alignItems: "center", gap: "8px", alignSelf: "flex-start", background: "var(--navy-800)", color: "#fff", borderRadius: "var(--radius-pill)", padding: "7px 14px", fontSize: "12.5px", fontWeight: 700, marginTop: "10px" }}>
          <span aria-hidden="true">📅</span>{c.dates}
        </div>
        <div style={{ fontSize: "11px", color: "var(--muted)", marginTop: "6px" }}>
          <span style={{ fontWeight: 700, color: "var(--ink-700)" }}>ID#</span> {c.id}
        </div>

        <div style={{ marginTop: "14px" }}>
          <Button variant="primary" size="sm" iconRight="›" onClick={() => onReserve && onReserve(c)}>Reserve</Button>
        </div>
      </div>
    </div>
  );
}
window.CondoCard = CondoCard;