/* Sentosa Marketplace - Buyer Portal: Product detail, Itinerary/Checkout, Confirmation */

function Breadcrumb({ items }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--fg2)", marginBottom: 18, flexWrap: "wrap" }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <Icon name="chevron-right" size={14} color="var(--fg3)" />}
          {it.onClick ? <button onClick={it.onClick} style={{ background: "none", border: 0, color: "var(--orange-link)", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, padding: 0 }}>{it.label}</button>
            : <span style={{ color: "var(--fg1)", fontWeight: 500 }}>{it.label}</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function ProductScreen({ p, onBack, onAdd, onGoItin, onOpen }) {
  const [qty, setQty] = React.useState(20);
  const off = Math.round((1 - p.trade / p.rack) * 100);
  const recos = window.AI_RECOS.map(r => ({ ...r, p: window.PRODUCTS.find(x => x.id === r.id) })).filter(r => r.p && r.p.id !== p.id).slice(0, 3);
  return (
    <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "24px 24px 8px" }}>
      <Breadcrumb items={[{ label: "Catalogue", onClick: onBack }, { label: p.cat }, { label: p.name }]} />
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 32, alignItems: "start" }}>
        <div>
          <Photo src={p.photo} tint={p.img} alt={p.name}
            style={{ height: 460, borderRadius: "var(--radius-lg)" }} />
          <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
            {[0, 1, 2, 3].map(i => (
              <Photo key={i} src={p.photo} tint={p.img}
                style={{ width: 104, height: 74, borderRadius: "var(--radius-md)", opacity: i === 0 ? 1 : 0.5,
                  border: i === 0 ? "2px solid var(--orange-700)" : "1px solid var(--border)", flex: "none" }} />
            ))}
          </div>
          <div style={{ marginTop: 28 }}>
            <h3 style={{ marginBottom: 8 }}>About this product</h3>
            <p style={{ color: "var(--fg2)", lineHeight: 1.6 }}>A trade-rate {p.type.toLowerCase()} from {p.partner}, bookable for groups and individual travellers. Includes admission and standard amenities. Revalidation and refund terms follow SDC marketplace policy. eTickets are valid for 90 days.</p>
            {p.origin && window.ORIGINS[p.origin] && (
              <div style={{ display: "flex", gap: 11, padding: 14, marginTop: 14, background: "var(--neutral-50)",
                border: "1px solid var(--border)", borderRadius: "var(--radius-md)" }}>
                <Icon name="git-branch" size={18} color="var(--fg2)" style={{ marginTop: 1, flex: "none" }} />
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>Product origin · {window.ORIGINS[p.origin].label}</div>
                  <div style={{ fontSize: 13, color: "var(--fg2)", lineHeight: 1.55, marginTop: 3 }}>{window.ORIGINS[p.origin].detail}</div>
                </div>
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 18 }}>
              {[["calendar-check", "Valid 90 days from issue"], ["ticket", "Instant eTicket issuance"], ["refresh-cw", "Free revalidation"], ["users", "Group rates available"]].map(([ic, t]) => (
                <div key={t} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "var(--fg1)", padding: "10px 12px", border: "1px solid var(--border)", borderRadius: "var(--radius-md)" }}>
                  <Icon name={ic} size={18} color="var(--orange-700)" />{t}
                </div>
              ))}
            </div>
          </div>

          {/* Ticket template - what the buyer's guest receives */}
          <div style={{ marginTop: 30 }}>
            <h3 style={{ marginBottom: 4 }}>Ticket template</h3>
            <p className="caption" style={{ marginBottom: 14 }}>The eTicket your travellers receive. Branding follows the SDC template for this partner.</p>
            <TicketStub product={p} />
          </div>

          {/* AI recommendations */}
          {recos.length > 0 && (
            <div style={{ marginTop: 32 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <AiChip />
                <h3 style={{ margin: 0 }}>Often booked together</h3>
              </div>
              <p className="caption" style={{ marginBottom: 14 }}>Generated from your agency's booking history and island-wide trade patterns.</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }}>
                {recos.map(r => (
                  <Card key={r.id} pad={0} hover onClick={() => onOpen && onOpen(r.p)} style={{ overflow: "hidden" }}>
                    <Photo src={r.p.photo} tint={r.p.img} alt={r.p.name} style={{ height: 132 }} />
                    <div style={{ padding: 12 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>{r.p.name}</div>
                      <div style={{ fontSize: 12.5, color: "var(--fg2)", margin: "6px 0 8px", lineHeight: 1.45 }}>{r.why}</div>
                      <div style={{ fontSize: 15, fontWeight: 700 }}>S${r.p.trade.toFixed(2)}</div>
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Buy panel */}
        <Card style={{ position: "sticky", top: 96 }} pad={20}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span className="overline" style={{ color: "var(--fg2)" }}>{p.cat} · {p.type}</span>
            {p.origin && window.ORIGINS[p.origin] &&
              <Badge tone={window.ORIGINS[p.origin].tone} dot={false}>{window.ORIGINS[p.origin].label}</Badge>}
          </div>
          <h2 style={{ margin: "4px 0 6px", fontSize: "1.4rem" }}>{p.name}</h2>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13.5, color: "var(--fg2)", marginBottom: 16, flexWrap: "wrap" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 5 }}><Icon name="star" size={15} color="var(--warning)" /><strong style={{ color: "var(--fg1)" }}>{p.rating}</strong></span>
            <span>·</span><span>{p.sold}</span><span>·</span><Badge tone="success" dot>In stock</Badge>
          </div>
          <div style={{ padding: "14px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
              <span style={{ fontSize: 28, fontWeight: 700 }}>S${p.trade.toFixed(2)}</span>
              <span style={{ fontSize: 15, color: "var(--fg3)", textDecoration: "line-through" }}>S${p.rack.toFixed(2)}</span>
              {off > 0 && <Badge tone="brand" dot={false}>{off}% trade saving</Badge>}
            </div>
            <div style={{ fontSize: 13, color: "var(--fg2)", marginTop: 2 }}>per {p.unit} · excludes GST · Singapore Dollars</div>
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 13, color: "var(--fg2)", padding: "12px 0", borderBottom: "1px solid var(--border)" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="clock" size={14} color="var(--fg3)" />Lead time {p.lead}</span>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}><Icon name="boxes" size={14} color="var(--fg3)" />{p.stock.toLocaleString()} available</span>
          </div>
          {/* Reservation - S/No. 37-40: date + time-slot selection against synchronised capacity */}
          <SlotPicker origin={p.origin} />

          <div style={{ margin: "18px 0" }}>
            <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Quantity ({p.unit})</label>
            <div style={{ display: "flex", alignItems: "center", gap: 0, border: "1.5px solid var(--border)", borderRadius: "var(--radius-md)", width: "fit-content", overflow: "hidden" }}>
              <button onClick={() => setQty(q => Math.max(1, q - 1))} aria-label="Decrease quantity" style={{ width: 44, height: 44, border: 0, background: "var(--neutral-50)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="minus" size={18} /></button>
              <div style={{ width: 64, textAlign: "center", fontSize: 16, fontWeight: 600 }}>{qty}</div>
              <button onClick={() => setQty(q => q + 1)} aria-label="Increase quantity" style={{ width: 44, height: 44, border: 0, background: "var(--neutral-50)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="plus" size={18} /></button>
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 15, marginBottom: 16 }}>
            <span style={{ color: "var(--fg2)" }}>Subtotal ({qty} × S${p.trade.toFixed(2)})</span>
            <strong>S${(qty * p.trade).toFixed(2)}</strong>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <Btn variant="primary" full icon="plus" onClick={() => { onAdd(p, qty); }}>Add to itinerary</Btn>
            <Btn variant="secondary" full icon="shopping-cart" onClick={onGoItin}>View itinerary</Btn>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16, fontSize: 12.5, color: "var(--fg2)", justifyContent: "center" }}>
            <Icon name="shield-check" size={14} color="var(--success)" />Secure SDC checkout · multiple payment methods
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ---- Reservation: date + time slot against synchronised capacity (S/No. 37-42) ---- */
function SlotPicker({ origin }) {
  const dates = [["Thu", "14 Aug"], ["Fri", "15 Aug"], ["Sat", "16 Aug"], ["Sun", "17 Aug"]];
  const slots = [["09:00", 180], ["11:30", 64], ["14:00", 0], ["16:30", 210]];
  const [d, setD] = React.useState(0);
  const [s, setS] = React.useState(0);
  return (
    <div style={{ paddingTop: 16 }}>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Reservation date</label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 7, marginBottom: 14 }}>
        {dates.map(([dow, day], i) => (
          <button key={day} onClick={() => setD(i)} aria-pressed={d === i}
            style={{ padding: "8px 4px", cursor: "pointer", fontFamily: "var(--font-sans)", borderRadius: "var(--radius-md)",
              border: `1.5px solid ${d === i ? "var(--orange-700)" : "var(--border)"}`, background: d === i ? "var(--orange-50)" : "#fff" }}>
            <span style={{ display: "block", fontSize: 11, color: "var(--fg2)" }}>{dow}</span>
            <span style={{ display: "block", fontSize: 13, fontWeight: 600, color: d === i ? "var(--orange-900)" : "var(--fg1)" }}>{day}</span>
          </button>
        ))}
      </div>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8 }}>Time slot</label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 7 }}>
        {slots.map(([t, left], i) => {
          const out = left === 0;
          const sel = s === i && !out;
          return (
            <button key={t} onClick={() => !out && setS(i)} disabled={out} aria-pressed={sel}
              style={{ padding: "9px 8px", textAlign: "left", cursor: out ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)",
                borderRadius: "var(--radius-md)", opacity: out ? 0.55 : 1,
                border: `1.5px solid ${sel ? "var(--orange-700)" : "var(--border)"}`, background: sel ? "var(--orange-50)" : out ? "var(--neutral-50)" : "#fff" }}>
              <span style={{ display: "block", fontSize: 13.5, fontWeight: 600, color: sel ? "var(--orange-900)" : "var(--fg1)" }}>{t}</span>
              <span style={{ display: "block", fontSize: 11.5, color: out ? "var(--danger)" : "var(--fg2)" }}>{out ? "Fully booked" : `${left} left`}</span>
            </button>
          );
        })}
      </div>
      <div style={{ fontSize: 11.5, color: "var(--fg2)", marginTop: 9, display: "flex", alignItems: "flex-start", gap: 6, lineHeight: 1.45 }}>
        <Icon name="refresh-cw" size={13} color="var(--fg3)" style={{ marginTop: 1, flex: "none" }} />
        {origin === "gate"
          ? "Availability read in real time from the island partner's own ticketing system."
          : "Capacity synchronised in real time with the SnApp Ticketing System."}
      </div>
    </div>
  );
}

/* ---- eTicket stub ---- */
function TicketStub({ product, serial = "SDC-TKT-4820-0001", holder = "Wanderlust Travel Pte Ltd" }) {
  return (
    <div style={{ display: "flex", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "#fff", maxWidth: 560 }}>
      <div style={{ width: 8, background: "var(--action)", flex: "none" }}></div>
      <div style={{ flex: 1, padding: "16px 18px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
          <div>
            <div className="overline" style={{ color: "var(--fg2)" }}>Sentosa eTicket</div>
            <div style={{ fontSize: 16, fontWeight: 700, margin: "3px 0 2px" }}>{product.name}</div>
            <div style={{ fontSize: 13, color: "var(--fg2)" }}>{product.partner}</div>
          </div>
          <Badge tone="success">Valid</Badge>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14, fontSize: 12.5 }}>
          <div><div style={{ color: "var(--fg2)" }}>Issued to</div><div style={{ fontWeight: 600 }}>{holder}</div></div>
          <div><div style={{ color: "var(--fg2)" }}>Valid until</div><div style={{ fontWeight: 600 }}>25 Oct 2026</div></div>
          <div style={{ gridColumn: "1 / -1" }}><div style={{ color: "var(--fg2)" }}>Serial</div><div style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{serial}</div></div>
        </div>
      </div>
      <div style={{ width: 116, borderLeft: "1px dashed var(--border-strong)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: 12, flex: "none" }}>
        <QrBlock size={72} seed={7} />
        <span style={{ fontSize: 11, color: "var(--fg2)", textAlign: "center", lineHeight: 1.35 }}>Scan at gate<br /><span style={{ color: "var(--fg3)" }}>QR issued by SnApp</span></span>
      </div>
    </div>
  );
}

/* ---- Deterministic QR-style block (visual only) ---- */
function QrBlock({ size = 132, seed = 3 }) {
  const n = 21;
  const cells = React.useMemo(() => {
    const out = [];
    let s = seed * 9301 + 49297;
    const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
    for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) {
      const finder = (fx, fy) => x >= fx && x < fx + 7 && y >= fy && y < fy + 7;
      const inner = (fx, fy) => x >= fx + 2 && x < fx + 5 && y >= fy + 2 && y < fy + 5;
      const ring = (fx, fy) => finder(fx, fy) && !(x > fx && x < fx + 6 && y > fy && y < fy + 6);
      let on;
      if (finder(0, 0) || finder(14, 0) || finder(0, 14)) {
        on = ring(0, 0) || ring(14, 0) || ring(0, 14) || inner(0, 0) || inner(14, 0) || inner(0, 14);
      } else { on = rnd() > 0.52; }
      out.push(on);
    }
    return out;
  }, [seed]);
  return (
    <div aria-hidden="true" style={{ width: size, height: size, display: "grid", gridTemplateColumns: `repeat(${n},1fr)`, gridTemplateRows: `repeat(${n},1fr)`, background: "#fff", padding: 4, boxSizing: "border-box", borderRadius: 4 }}>
      {cells.map((on, i) => <span key={i} style={{ background: on ? "var(--true-black)" : "transparent" }}></span>)}
    </div>
  );
}

/* ---- AI chip ---- */
function AiChip({ label = "AI" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 700, letterSpacing: ".04em",
      padding: "3px 9px", borderRadius: "var(--radius-pill)", background: "var(--orange-50)", color: "#9A4F0C", border: "1px solid #E8CFB4", flex: "none" }}>
      <Icon name="sparkles" size={13} />{label}
    </span>
  );
}

/* ---- Payment methods ---- */
/* Phase 1 mandatory payment set per SDC Reply No. 4, Q5:
   credit card, eWallet (native), bank transfer, PayNow Dynamic QR.
   Credit terms (NET-30) is S/No. 69 - Phase 2. Asian methods (Alipay/WeChat/UPI) - Phase 2. */
const PAY_METHODS = [
  { k: "paynow", label: "PayNow", sub: "Dynamic QR", icon: "qr-code", phase: 1 },
  { k: "card", label: "Credit card", sub: "Visa / Mastercard", icon: "credit-card", phase: 1 },
  { k: "ewallet", label: "eWallet", sub: "Native to platform", icon: "wallet", phase: 1 },
  { k: "bank", label: "Bank transfer", sub: "FAST / GIRO", icon: "building-2", phase: 1 },
  { k: "net30", label: "Credit terms", sub: "NET-30 invoice", icon: "file-text", phase: 2 },
];

function ItineraryScreen({ items, onQty, onRemove, onBack, onPlace, onAdd, onOpen }) {
  const [method, setMethod] = React.useState("paynow");
  const [card, setCard] = React.useState({ num: "", exp: "", cvv: "" });
  const setCardF = (k) => (e) => setCard(p => ({ ...p, [k]: e.target.value }));
  const sub = items.reduce((s, i) => s + i.trade * i.qty, 0);
  const savings = items.reduce((s, i) => s + (i.rack - i.trade) * i.qty, 0);
  const partners = [...new Set(items.map(i => i.partner))];
  const recos = window.AI_RECOS.map(r => ({ ...r, p: window.PRODUCTS.find(x => x.id === r.id) }))
    .filter(r => r.p && !items.some(i => i.id === r.p.id)).slice(0, 2);

  if (items.length === 0) {
    return (
      <div style={{ maxWidth: 640, margin: "0 auto", padding: "64px 24px", textAlign: "center" }}>
        <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--neutral-100)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px" }}><Icon name="shopping-cart" size={28} color="var(--fg3)" /></div>
        <h2>Your itinerary is empty</h2>
        <p className="caption" style={{ marginBottom: 22 }}>Browse the catalogue to add tickets, experiences and venues to your order.</p>
        <Btn variant="primary" icon="arrow-left" onClick={onBack}>Browse catalogue</Btn>
      </div>
    );
  }
  return (
    <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "24px 24px 8px" }}>
      <Breadcrumb items={[{ label: "Catalogue", onClick: onBack }, { label: "Itinerary & checkout" }]} />
      <h1 style={{ fontSize: "1.8rem", marginBottom: 6 }}>Itinerary &amp; checkout</h1>
      <p className="caption" style={{ marginBottom: 20 }}>
        {items.length} product{items.length !== 1 && "s"} across {partners.length} island partner{partners.length !== 1 && "s"} - settled in one order.
        {partners.length > 1 && <> <strong style={{ color: "var(--fg1)" }}>Cross-partner bundle</strong> (non-hotel, Phase 1).</>}
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 28, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* Line items */}
          <Card pad={0}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}><Icon name="list" size={17} />{items.length} item{items.length !== 1 && "s"} in this order</div>
            {items.map((i, idx) => (
              <div key={i.id} style={{ display: "flex", gap: 14, padding: 16, borderBottom: idx < items.length - 1 ? "1px solid var(--border)" : 0, alignItems: "center" }}>
                <Photo src={i.photo} tint={i.img} alt={i.name} style={{ width: 104, height: 78, borderRadius: "var(--radius-md)", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>{i.name}</div>
                  <div style={{ fontSize: 13, color: "var(--fg2)" }}>{i.partner} · S${i.trade.toFixed(2)} / {i.unit}</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", border: "1.5px solid var(--border)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
                  <button onClick={() => onQty(i.id, Math.max(1, i.qty - 1))} aria-label={`Decrease ${i.name}`} style={{ width: 36, height: 38, border: 0, background: "var(--neutral-50)", cursor: "pointer" }}>−</button>
                  <div style={{ width: 44, textAlign: "center", fontWeight: 600 }}>{i.qty}</div>
                  <button onClick={() => onQty(i.id, i.qty + 1)} aria-label={`Increase ${i.name}`} style={{ width: 36, height: 38, border: 0, background: "var(--neutral-50)", cursor: "pointer" }}>+</button>
                </div>
                <div style={{ width: 96, textAlign: "right", fontWeight: 600 }}>S${(i.trade * i.qty).toFixed(2)}</div>
                <button onClick={() => onRemove(i.id)} aria-label={`Remove ${i.name}`} style={{ background: "none", border: 0, cursor: "pointer", color: "var(--fg3)", display: "flex" }}><Icon name="trash-2" size={18} /></button>
              </div>
            ))}
          </Card>

          {/* AI upsell */}
          {recos.length > 0 && (
            <Card>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
                <AiChip /><span style={{ fontWeight: 600 }}>Complete this itinerary</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                {recos.map(r => (
                  <div key={r.id} style={{ display: "flex", gap: 12, alignItems: "center", padding: 12, border: "1px solid var(--border)", borderRadius: "var(--radius-md)" }}>
                    <Photo src={r.p.photo} tint={r.p.img} alt={r.p.name} style={{ width: 72, height: 62, borderRadius: "var(--radius-md)", flex: "none" }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>{r.p.name}</div>
                      <div style={{ fontSize: 12, color: "var(--fg2)" }}>S${r.p.trade.toFixed(2)} / {r.p.unit}</div>
                    </div>
                    <Btn size="sm" variant="secondary" icon="plus" onClick={() => onAdd(r.p, 10)} ariaLabel={`Add ${r.p.name}`}>Add</Btn>
                  </div>
                ))}
              </div>
            </Card>
          )}

          {/* Payment method */}
          <Card>
            <div style={{ fontWeight: 600, marginBottom: 4, display: "flex", alignItems: "center", gap: 8 }}><Icon name="credit-card" size={17} />Payment method</div>
            <p className="caption" style={{ marginBottom: 14 }}>Four methods are mandatory at Phase 1 launch. Credit terms is a Phase 2 capability.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
              {PAY_METHODS.map(m => {
                const sel = method === m.k;
                const p2 = m.phase === 2;
                return (
                  <button key={m.k} onClick={() => setMethod(m.k)} aria-pressed={sel}
                    style={{ display: "flex", alignItems: "center", gap: 9, padding: "12px 13px", textAlign: "left", cursor: "pointer", position: "relative",
                      border: `1.5px solid ${sel ? "var(--orange-700)" : "var(--border)"}`, borderRadius: "var(--radius-md)",
                      background: sel ? "var(--orange-50)" : p2 ? "var(--neutral-50)" : "#fff", fontFamily: "var(--font-sans)" }}>
                    <Icon name={m.icon} size={19} color={sel ? "var(--orange-900)" : "var(--fg2)"} />
                    <span style={{ minWidth: 0 }}>
                      <span style={{ display: "block", fontSize: 13.5, fontWeight: 600, color: sel ? "var(--orange-900)" : "var(--fg1)" }}>{m.label}</span>
                      <span style={{ display: "block", fontSize: 11.5, color: "var(--fg2)" }}>{m.sub}</span>
                    </span>
                    {p2 && <span style={{ position: "absolute", top: -8, right: 8, fontSize: 11, fontWeight: 700, letterSpacing: ".04em", padding: "2px 7px", borderRadius: "var(--radius-pill)", background: "var(--neutral-100)", color: "var(--fg2)", border: "1px solid var(--border)" }}>PHASE 2</span>}
                  </button>
                );
              })}
            </div>

            <div style={{ marginTop: 18 }}>
              {method === "paynow" && <PayNowPanel amount={sub} />}
              {method === "card" && (
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <div style={{ gridColumn: "1 / -1" }}><Field label="Card number" required placeholder="1234 5678 9012 3456" value={card.num} onChange={setCardF("num")} prefix={<Icon name="credit-card" size={16} />} /></div>
                  <Field label="Expiry" required placeholder="MM / YY" value={card.exp} onChange={setCardF("exp")} />
                  <Field label="CVV" required placeholder="123" value={card.cvv} onChange={setCardF("cvv")} />
                </div>
              )}
              {method === "ewallet" && <MethodNote icon="wallet" title="Island eWallet" body="Balance S$24,180.50 available. The order total is deducted on confirmation. Migrated eWallet balances carry over from the existing platform." />}
              {method === "bank" && <BankTransferPanel amount={sub} />}
              {method === "net30" && <MethodNote icon="file-text" title="Credit terms (NET-30) - Phase 2" body="The credit terms facility is a Phase 2 capability (S/No. 69). At Phase 1 launch, verified corporate accounts settle by credit card, eWallet, bank transfer or PayNow Dynamic QR. Shown here to illustrate where it lands in the roadmap." />}
            </div>
          </Card>
        </div>

        {/* Summary */}
        <Card style={{ position: "sticky", top: 96 }} pad={20}>
          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>Order summary</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5 }}>
            <Row l={`Subtotal (${items.length} item${items.length !== 1 ? "s" : ""})`} r={`S$${sub.toFixed(2)}`} />
            <Row l="GST" r="Excluded" sub />
            <Row l="Booking / service fee" r="Nil" sub />
          </div>
          <div style={{ borderTop: "1px solid var(--border)", margin: "14px 0", paddingTop: 14, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontWeight: 600 }}>Total payable</span>
            <span style={{ fontSize: 22, fontWeight: 700 }}>S${sub.toFixed(2)}</span>
          </div>
          <div style={{ background: "var(--success-bg)", borderRadius: "var(--radius-md)", padding: "10px 12px", fontSize: 12.5, color: "#0f5e35", display: "flex", gap: 8, marginBottom: 12, fontWeight: 500 }}>
            <Icon name="tag" size={15} style={{ marginTop: 1 }} />You save S${savings.toFixed(2)} against published rates.
          </div>
          <div style={{ background: "var(--info-bg)", border: "1px solid #c4d4f7", borderRadius: "var(--radius-md)", padding: "10px 12px", fontSize: 12.5, color: "#1a44a8", display: "flex", gap: 8, marginBottom: 16 }}>
            <Icon name="info" size={15} style={{ marginTop: 1 }} />All prices in Singapore Dollars and exclude GST, per SDC trade terms.
          </div>
          <Btn variant="primary" full icon="lock" onClick={() => onPlace(method)}>Place order · S${sub.toFixed(2)}</Btn>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7, marginTop: 14, fontSize: 12.5, color: "var(--fg2)" }}><Icon name="shield-check" size={14} color="var(--success)" />Secure payment · PCI-DSS compliant</div>
        </Card>
      </div>
    </div>
  );
}

function MethodNote({ icon, title, body, tone }) {
  const bg = tone === "success" ? "var(--success-bg)" : "var(--neutral-50)";
  const fg = tone === "success" ? "#0f5e35" : "var(--fg2)";
  return (
    <div style={{ display: "flex", gap: 12, padding: 14, background: bg, border: "1px solid var(--border)", borderRadius: "var(--radius-md)" }}>
      <Icon name={icon} size={20} color={fg} style={{ marginTop: 1 }} />
      <div>
        <div style={{ fontWeight: 600, fontSize: 14, color: "var(--fg1)" }}>{title}</div>
        <div style={{ fontSize: 13, color: fg, lineHeight: 1.5, marginTop: 3 }}>{body}</div>
      </div>
    </div>
  );
}

function PayNowPanel({ amount }) {
  const [sec, setSec] = React.useState(283);
  React.useEffect(() => {
    const t = setInterval(() => setSec(s => (s > 0 ? s - 1 : 0)), 1000);
    return () => clearInterval(t);
  }, []);
  const mm = String(Math.floor(sec / 60)).padStart(2, "0");
  const ss = String(sec % 60).padStart(2, "0");
  return (
    <div style={{ display: "flex", gap: 20, padding: 18, border: "1.5px solid var(--orange-700)", borderRadius: "var(--radius-lg)", background: "var(--orange-50)", alignItems: "flex-start" }}>
      <div style={{ background: "#fff", padding: 10, borderRadius: "var(--radius-md)", border: "1px solid var(--border)", flex: "none" }}>
        <QrBlock size={132} seed={11} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
          <span style={{ fontSize: 15, fontWeight: 700 }}>PayNow Dynamic QR</span>
          <Badge tone="success">Phase 1</Badge>
        </div>
        <p style={{ fontSize: 13.5, color: "var(--fg2)", lineHeight: 1.5, margin: "0 0 12px" }}>
          Scan with any Singapore banking app. The amount and reference are embedded in the code - no manual entry.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 16px", fontSize: 13 }}>
          <span style={{ color: "var(--fg2)" }}>Payable to</span><span style={{ fontWeight: 600 }}>Sentosa Development Corporation</span>
          <span style={{ color: "var(--fg2)" }}>UEN</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>197200ALL</span>
          <span style={{ color: "var(--fg2)" }}>Reference</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>SDC-PN-00482</span>
          <span style={{ color: "var(--fg2)" }}>Amount</span><span style={{ fontWeight: 700 }}>S${amount.toFixed(2)}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12, fontSize: 12.5, color: "var(--fg2)" }}>
          <Icon name="timer" size={15} color="var(--orange-900)" />
          QR expires in <strong style={{ fontFamily: "var(--font-mono)", color: "var(--fg1)" }}>{mm}:{ss}</strong> · regenerates automatically
        </div>
      </div>
    </div>
  );
}

/* Bank transfer - S/No. 72 (offline payment processing), S/No. 117 (payment notification),
   S/No. 133 (Finance as approving role). SDC's Reply No. 2 Q20/Q26 workflow:
   buyer uploads proof of payment → Sales and Finance notified → Finance matches and approves
   → tickets released ONLY on Finance approval. Tickets are NOT released on receipt of funds. */
function BankTransferPanel({ amount }) {
  const [proof, setProof] = React.useState(null);
  return (
    <div style={{ border: "1.5px solid var(--border-strong)", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
      <div style={{ padding: "14px 18px", background: "var(--neutral-50)", borderBottom: "1px solid var(--border)",
        display: "flex", alignItems: "center", gap: 10 }}>
        <Icon name="building-2" size={18} color="var(--fg2)" />
        <span style={{ fontWeight: 600, fontSize: 15 }}>Bank transfer</span>
        <Badge tone="neutral" dot={false}>Offline payment</Badge>
      </div>

      <div style={{ padding: 18 }}>
        <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 10 }}>Transfer to</div>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "7px 16px", fontSize: 13.5, marginBottom: 16 }}>
          <span style={{ color: "var(--fg2)" }}>Payee</span><span style={{ fontWeight: 600 }}>Sentosa Development Corporation</span>
          <span style={{ color: "var(--fg2)" }}>Bank</span><span style={{ fontWeight: 600 }}>DBS Bank Ltd, Singapore</span>
          <span style={{ color: "var(--fg2)" }}>Account</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>003-901234-5</span>
          <span style={{ color: "var(--fg2)" }}>Swift</span><span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>DBSSSGSG</span>
          <span style={{ color: "var(--fg2)" }}>Amount</span><span style={{ fontWeight: 700 }}>S${amount.toFixed(2)}</span>
        </div>

        <div style={{ display: "flex", gap: 10, padding: 13, background: "var(--orange-50)", border: "1px solid #E8CFB4",
          borderRadius: "var(--radius-md)", marginBottom: 16 }}>
          <Icon name="hash" size={17} color="#9A4F0C" style={{ marginTop: 1, flex: "none" }} />
          <div style={{ fontSize: 13, lineHeight: 1.5 }}>
            <strong>Quote reference SDC-BT-00482</strong> on the transfer. A unique reference per invoice lets SDC Finance
            match your payment automatically instead of by hand.
          </div>
        </div>

        {/* Proof of payment upload - Reply No. 2 Q20 step 1 */}
        <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 8 }}>Upload proof of payment <span style={{ color: "var(--fg3)", fontWeight: 400 }}>(required)</span></div>
        {proof ? (
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", border: "1px solid var(--border)",
            borderRadius: "var(--radius-md)", background: "var(--success-bg)" }}>
            <Icon name="file-check" size={18} color="var(--success)" />
            <span style={{ fontSize: 13.5, fontWeight: 600, flex: 1 }}>{proof}</span>
            <button onClick={() => setProof(null)} aria-label="Remove file"
              style={{ background: "none", border: 0, cursor: "pointer", display: "flex", color: "var(--fg2)" }}><Icon name="x" size={16} /></button>
          </div>
        ) : (
          <button onClick={() => { setProof("remittance-advice-2026-07-27.pdf"); window.toast("Proof of payment uploaded", "success", "SDC Sales and Finance have been notified"); }}
            style={{ width: "100%", padding: "20px 16px", borderRadius: "var(--radius-md)", border: "1.5px dashed var(--border-strong)",
              background: "var(--neutral-50)", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center",
              gap: 6, fontFamily: "var(--font-sans)" }}>
            <Icon name="upload-cloud" size={24} color="var(--fg3)" />
            <span style={{ fontSize: 13.5, fontWeight: 600 }}>Upload remittance advice or bank receipt</span>
            <span style={{ fontSize: 12.5, color: "var(--fg2)" }}>PDF, JPG or PNG · up to 10 MB</span>
          </button>
        )}

        {/* The mandated verification workflow */}
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 12 }}>What happens next</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {[["You submit the order with proof of payment", !!proof],
              ["SDC Sales and Finance are notified", !!proof],
              ["SDC Finance matches the payment and approves", false],
              ["eTickets are issued on Finance approval", false]].map(([label, done], i, arr) => (
              <div key={label} style={{ display: "flex", gap: 11 }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flex: "none" }}>
                  <span style={{ width: 18, height: 18, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center",
                    background: done ? "var(--success)" : "var(--neutral-100)", border: done ? 0 : "1.5px solid var(--border-strong)" }}>
                    {done && <Icon name="check" size={11} color="#fff" strokeWidth={3} />}
                  </span>
                  {i < arr.length - 1 && <span style={{ width: 2, flex: 1, minHeight: 14, background: "var(--border)" }}></span>}
                </div>
                <div style={{ paddingBottom: i < arr.length - 1 ? 12 : 0, fontSize: 13,
                  fontWeight: done ? 600 : 500, color: done ? "var(--fg1)" : "var(--fg2)" }}>{label}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 9, marginTop: 12, fontSize: 12.5, color: "var(--fg2)", lineHeight: 1.5 }}>
            <Icon name="info" size={14} style={{ marginTop: 1, flex: "none" }} />
            Tickets are not released until SDC Finance verifies receipt of funds. For instant issuance, use PayNow Dynamic QR.
          </div>
        </div>
      </div>
    </div>
  );
}

function Row({ l, r, sub }) {
  return <div style={{ display: "flex", justifyContent: "space-between", color: sub ? "var(--fg2)" : "var(--fg1)" }}><span>{l}</span><span style={{ fontWeight: sub ? 400 : 600 }}>{r}</span></div>;
}

function ConfirmationScreen({ items, method, onDone, onBookings }) {
  const [invoice, setInvoice] = React.useState(false);
  const total = items.reduce((s, i) => s + i.trade * i.qty, 0);
  const tickets = items.reduce((s, i) => s + i.qty, 0);
  const m = PAY_METHODS.find(x => x.k === method) || PAY_METHODS[0];
  const pending = method === "bank";   // Finance must verify before tickets issue (S/No. 72, Reply 2 Q20)
  return (
    <div style={{ maxWidth: 680, margin: "0 auto", padding: "56px 24px" }}>
      <div style={{ textAlign: "center", marginBottom: 28 }}>
        <div style={{ width: 68, height: 68, borderRadius: 999, background: pending ? "var(--warning-bg)" : "var(--success-bg)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px" }}>
          <Icon name={pending ? "clock" : "check"} size={34} color={pending ? "var(--warning)" : "var(--success)"} strokeWidth={2.5} /></div>
        <h1 style={{ fontSize: "1.8rem", marginBottom: 8 }}>{pending ? "Order submitted" : "Order confirmed"}</h1>
        <p style={{ color: "var(--fg2)", fontSize: 16 }}>
          Order <strong style={{ color: "var(--fg1)", fontFamily: "var(--font-mono)" }}>SDC-00482</strong>
          {pending
            ? <> is awaiting <strong style={{ color: "var(--fg1)" }}>SDC Finance verification</strong> of your bank transfer.</>
            : <> is confirmed and paid by <strong style={{ color: "var(--fg1)" }}>{m.label}</strong>.</>}
        </p>
      </div>

      <Card pad={0} style={{ marginBottom: 16 }}>
        <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontWeight: 600 }}>Order details</span>
          <Badge tone={pending ? "warning" : "success"}>{pending ? "Awaiting Finance verification" : "Confirmed"}</Badge>
        </div>
        {items.map(i => (
          <div key={i.id} style={{ display: "flex", justifyContent: "space-between", padding: "12px 18px", borderBottom: "1px solid var(--border)", fontSize: 14.5 }}>
            <span>{i.name} <span style={{ color: "var(--fg2)" }}>× {i.qty}</span></span><strong>S${(i.trade * i.qty).toFixed(2)}</strong>
          </div>
        ))}
        <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 18px", fontSize: 16 }}>
          <span style={{ fontWeight: 600 }}>{pending ? "Total pending verification" : "Total paid"}</span><strong>S${total.toFixed(2)}</strong></div>
      </Card>

      {/* eTicket issuance - Phase 1 distribution rule.
          On bank transfer, issuance is gated on SDC Finance approval (S/No. 72; Reply No. 2 Q20). */}
      {pending && (
        <Card style={{ marginBottom: 16, borderColor: "var(--warning)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
            <Icon name="clock" size={20} color="var(--warning)" style={{ marginTop: 1, flex: "none" }} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 16 }}>{tickets} eTickets pending release</div>
              <p style={{ fontSize: 13.5, color: "var(--fg2)", lineHeight: 1.55, margin: "5px 0 12px" }}>
                Your proof of payment has been received and SDC Sales and Finance have been notified.
                eTickets are issued once SDC Finance has matched the transfer against reference
                <strong style={{ color: "var(--fg1)", fontFamily: "var(--font-mono)" }}> SDC-BT-00482</strong> and approved the order.
              </p>
              <div style={{ display: "flex", gap: 20, flexWrap: "wrap", fontSize: 13 }}>
                <span><span style={{ color: "var(--fg2)" }}>Typical verification</span> <strong>1 business day</strong></span>
                <span><span style={{ color: "var(--fg2)" }}>You will be notified</span> <strong>by email and in-platform</strong></span>
              </div>
            </div>
          </div>
        </Card>
      )}

      {!pending && (
      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
          <Icon name="ticket" size={18} color="var(--orange-900)" />
          <span style={{ fontWeight: 600, fontSize: 16 }}>{tickets} eTickets issued</span>
        </div>
        <p style={{ fontSize: 13.5, color: "var(--fg2)", lineHeight: 1.55, margin: "0 0 14px" }}>
          Issued to <strong style={{ color: "var(--fg1)" }}>Wanderlust Travel Pte Ltd</strong> and released to its authorised sub-users.
          In Phase 1, eTickets are distributed to the buyer organisation and its authorised sub-users only.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["ops@wanderlust.com", "Operations · authorised"], ["groups@wanderlust.com", "Group bookings · authorised"]].map(([e, r]) => (
            <div key={e} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", fontSize: 13.5 }}>
              <Icon name="user-check" size={16} color="var(--success)" />
              <span style={{ fontWeight: 600 }}>{e}</span>
              <span style={{ color: "var(--fg2)", marginLeft: "auto" }}>{r}</span>
            </div>
          ))}
        </div>
      </Card>
      )}

      {items[0] && !pending && <div style={{ marginBottom: 20 }}><TicketStub product={items[0]} /></div>}

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        {!pending && <Btn variant="secondary" icon="download"
          onClick={() => window.toast(`${tickets} eTickets downloaded`, "success", "SDC-00482-etickets.pdf · issued via SnApp")}>Download eTickets</Btn>}
        <Btn variant="secondary" icon="file-text" onClick={() => setInvoice(true)}>GST tax invoice</Btn>
        <Btn variant="primary" icon="calendar-check" onClick={onBookings}>View in My bookings</Btn>
      </div>
      <div style={{ marginTop: 14 }}><Btn variant="ghost" icon="arrow-left" onClick={onDone}>Back to catalogue</Btn></div>

      <TaxInvoiceModal open={invoice} onClose={() => setInvoice(false)} items={items} total={total} method={m.label} />
    </div>
  );
}

/* GST-ready tax invoice - S/No. 73 multi-format invoicing, S/No. 75 GST calculation */
function TaxInvoiceModal({ open, onClose, items, total, method }) {
  const gst = total * 0.09;
  return (
    <Modal open={open} onClose={onClose} width={680}
      title="Tax invoice INV-2026-00482"
      subtitle="GST-ready invoice generated in the marketplace financial sub-ledger"
      footer={<>
        <Btn variant="ghost" onClick={onClose}>Close</Btn>
        <Btn variant="secondary" icon="file-text" onClick={() => window.toast("Invoice downloaded", "success", "INV-2026-00482.pdf")}>PDF</Btn>
        <Btn variant="primary" icon="mail" onClick={() => { window.toast("Invoice emailed", "success", "Sent to accounts@wanderlust.com"); onClose(); }}>Email to accounts</Btn>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
        <div>
          <div className="overline" style={{ color: "var(--fg2)" }}>Billed to</div>
          <div style={{ fontSize: 14.5, fontWeight: 600, marginTop: 4 }}>Wanderlust Travel Pte Ltd</div>
          <div style={{ fontSize: 13, color: "var(--fg2)", lineHeight: 1.5 }}>UEN 201644821M<br />12 Marina Boulevard, Singapore 018982</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="overline" style={{ color: "var(--fg2)" }}>Issued by</div>
          <div style={{ fontSize: 14.5, fontWeight: 600, marginTop: 4 }}>Sentosa Development Corporation</div>
          <div style={{ fontSize: 13, color: "var(--fg2)", lineHeight: 1.5 }}>GST Reg. 197200ALL<br />Invoice date 27 Jul 2026</div>
        </div>
      </div>
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead><tr>
            {["Description", "Qty", "Unit (S$)", "Amount (S$)"].map((h, i) => (
              <th key={h} style={{ textAlign: i === 0 ? "left" : "right", padding: "10px 14px", fontSize: 11.5, fontWeight: 600,
                letterSpacing: ".04em", textTransform: "uppercase", color: "var(--fg2)", background: "var(--neutral-50)",
                borderBottom: "1px solid var(--border)" }}>{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {items.map(i => (
              <tr key={i.id}>
                <td style={{ padding: "11px 14px", fontSize: 13.5, borderBottom: "1px solid var(--border)" }}>{i.name}</td>
                <td style={{ padding: "11px 14px", fontSize: 13.5, textAlign: "right", borderBottom: "1px solid var(--border)", fontFamily: "var(--font-mono)" }}>{i.qty}</td>
                <td style={{ padding: "11px 14px", fontSize: 13.5, textAlign: "right", borderBottom: "1px solid var(--border)", fontFamily: "var(--font-mono)" }}>{i.trade.toFixed(2)}</td>
                <td style={{ padding: "11px 14px", fontSize: 13.5, textAlign: "right", borderBottom: "1px solid var(--border)", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{(i.trade * i.qty).toFixed(2)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding: "14px 14px", display: "flex", flexDirection: "column", gap: 8, background: "var(--neutral-50)" }}>
          <Row l="Subtotal (excl. GST)" r={`S$${total.toFixed(2)}`} />
          <Row l="GST @ 9%" r={`S$${gst.toFixed(2)}`} sub />
          <div style={{ borderTop: "1px solid var(--border)", paddingTop: 9, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontWeight: 700 }}>Total payable</span>
            <span style={{ fontSize: 19, fontWeight: 700, fontFamily: "var(--font-mono)" }}>S${(total + gst).toFixed(2)}</span>
          </div>
        </div>
      </div>
      <div style={{ fontSize: 12.5, color: "var(--fg2)", marginTop: 12, display: "flex", alignItems: "center", gap: 7 }}>
        <Icon name="info" size={14} />Settled by {method}. Financial reconciliation posts downstream to Workday/Cumulus.
      </div>
    </Modal>
  );
}

Object.assign(window, { TaxInvoiceModal, ProductScreen, ItineraryScreen, ConfirmationScreen, Breadcrumb, TicketStub, QrBlock, AiChip, PayNowPanel, SlotPicker, Row, PAY_METHODS });
