// Client Portal — rewards.com.sg

const { useState, useEffect, useRef } = React;

// ── tiny helpers ───────────────────────────────────────────
function TagBadge({ type, label }) {
  const colors = {
    agent:  { bg: "rgba(132,227,243,0.14)", color: "#84e3f3" },
    client: { bg: "rgba(150,231,178,0.14)", color: "#96e7b2" },
    paid:   { bg: "rgba(255,105,126,0.14)", color: "#ff697e" },
    free:   { bg: "rgba(167,139,250,0.18)", color: "#c4b5fd" },
  };
  const s = colors[type] || colors.client;
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", gap:4, flexWrap:"wrap", maxWidth:"100%",
      padding:"3px 10px", borderRadius:999,
      fontSize:"0.7rem", fontWeight:800, letterSpacing:"0.06em", lineHeight:1.25,
      background: s.bg, color: s.color,
    }}>{label}</span>
  );
}

function VoucherColorBar({ color }) {
  return (
    <div style={{
      height: 4, borderRadius: "4px 4px 0 0",
      background: `linear-gradient(90deg, ${color}, ${color}88)`,
    }} />
  );
}

// Shows original price struck-through beside promo price
function PriceDisplay({ value, originalPrice, color, large }) {
  return (
    <div style={{ display:"flex", alignItems:"baseline", gap:7, flexWrap:"wrap" }}>
      <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize: large ? "2rem" : "1.6rem", fontWeight:800, color: color || "#84e3f3", lineHeight:1 }}>{value}</span>
      {originalPrice && (
        <span style={{ fontSize: large ? "1rem" : "0.85rem", color:"#8b97ab", textDecoration:"line-through", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600 }}>{originalPrice}</span>
      )}
    </div>
  );
}

function getMonthlyResetLabel() {
  const now = new Date();
  const nextReset = new Date(now.getFullYear(), now.getMonth() + 1, 1);
  return nextReset.toLocaleDateString("en-SG", { day: "numeric", month: "short" });
}

function getAvailabilityMeta(monthlyLimit, monthlyRemaining) {
  if (!monthlyLimit && monthlyLimit !== 0) return null;
  const remaining = Math.max(0, Number(monthlyRemaining) || 0);
  const limit = Math.max(0, Number(monthlyLimit) || 0);
  const full = remaining === 0;
  const pct = limit > 0 ? Math.round((remaining / limit) * 100) : 0;

  return {
    full,
    pct,
    statusText: `${remaining}/${limit} slots left this month`,
    hintText: full ? `Restarts ${getMonthlyResetLabel()}` : "Claim before it runs out",
  };
}

// Monthly availability pill
function AvailabilityPill({ monthlyLimit, monthlyRemaining }) {
  const meta = getAvailabilityMeta(monthlyLimit, monthlyRemaining);
  if (!meta) return null;
  const { full, pct, statusText, hintText } = meta;
  return (
    <div style={{ borderRadius:10, overflow:"hidden", border: full ? "1px solid rgba(255,105,126,0.3)" : "1px solid rgba(132,227,243,0.18)" }}>
      <div style={{ padding:"7px 10px", display:"flex", justifyContent:"space-between", alignItems:"center", gap:8, background: full ? "rgba(255,105,126,0.08)" : "rgba(132,227,243,0.06)" }}>
        <span style={{ fontSize:"0.72rem", fontWeight:800, color: full ? "#ff697e" : "#84e3f3" }}>
          {statusText}
        </span>
        <span style={{ fontSize:"0.7rem", color:"#8b97ab" }}>{hintText}</span>
      </div>
      {!full && (
        <div style={{ height:3, background:"rgba(255,255,255,0.06)" }}>
          <div style={{ height:"100%", width:`${pct}%`, background:"#84e3f3", transition:"width 400ms ease" }} />
        </div>
      )}
    </div>
  );
}

// Voucher type explanation badge
function VoucherTypeBadge({ voucherType, voucherTypeLabel }) {
  if (!voucherType) return null;
  const styles = {
    price_discount: { bg:"rgba(251,146,60,0.12)", color:"#fb923c", icon:"🏷" },
    value_credit:   { bg:"rgba(167,139,250,0.12)", color:"#c084fc", icon:"💳" },
    price_item:     { bg:"rgba(132,227,243,0.12)", color:"#84e3f3", icon:"🎁" },
  };
  const s = styles[voucherType] || styles.price_item;
  return (
    <span style={{ display:"inline-flex", alignItems:"center", gap:5, flexWrap:"wrap", maxWidth:"100%", padding:"3px 10px", borderRadius:999, fontSize:"0.68rem", fontWeight:700, lineHeight:1.25, background:s.bg, color:s.color }}>
      {s.icon} {voucherTypeLabel}
    </span>
  );
}

function getUniqueBadgeItems(voucher) {
  const seen = new Set();
  const items = [];
  [
    { kind: "tag", label: voucher.tag, type: voucher.tagType },
    { kind: "type", label: voucher.voucherTypeLabel, voucherType: voucher.voucherType },
  ].forEach((item) => {
    const key = String(item.label || "").trim().toLowerCase();
    if (!key || seen.has(key)) return;
    seen.add(key);
    items.push(item);
  });
  return items;
}

// ── FUNDING BAR ────────────────────────────────────────────
// Horizontal segmented bar showing who pays what
const FUND_COLORS = {
  agent:    { bg:"#38bdf8", label:"Agent pays",          dot:"#38bdf8" },
  merchant: { bg:"#fb923c", label:"Merchant gives you", dot:"#fb923c" },
  client:   { bg:"rgba(148,163,184,0.5)", label:"You pay", dot:"rgba(148,163,184,0.7)" },
};

function getClientPayLabel(funding) {
  if (!funding) return "";
  const { clientPays, percentageBased, clientPaysPercent, merchantDiscountPercent } = funding;
  if (percentageBased) {
    const payPercent = clientPaysPercent ?? (merchantDiscountPercent != null ? 100 - merchantDiscountPercent : null);
    return payPercent != null ? `You pay ${payPercent}% of order` : "Special offer";
  }
  return clientPays === 0 ? "FREE for you" : `You pay SGD ${clientPays}`;
}

function FundingBar({ funding, compact }) {
  if (!funding) return null;
  const { clientPays, agentPays, merchantDiscount, totalValue, percentageBased, clientPaysPercent, merchantDiscountPercent } = funding;
  const mode = funding.displayMode || "default";

  if (mode === "muted_free") {
    return (
      <div style={{ padding: compact ? "8px 0 0" : "10px 0 0", width:"100%" }}>
        <div style={{
          borderRadius: 6,
          overflow: "hidden",
          height: compact ? 6 : 7,
          background: "rgba(0,0,0,0.82)",
        }} />
        <div style={{ display:"flex", gap: compact ? 8 : 10, marginTop: compact ? 5 : 7, flexWrap:"wrap", alignItems:"center" }}>
          <div style={{ display:"flex", alignItems:"center", gap:4 }}>
            <div style={{ width: compact ? 5 : 6, height: compact ? 5 : 6, borderRadius:2, background:"#8b97ab", flexShrink:0 }} />
            <span style={{ fontSize: compact ? "0.64rem" : "0.67rem", color:"#c6cedd", lineHeight:1.35 }}>
              <span style={{ color:"#c6cedd", fontWeight:800 }}>Nil - free offer</span>
            </span>
          </div>
        </div>
      </div>
    );
  }

  if (percentageBased) {
    const merchantPct = merchantDiscountPercent ?? (typeof merchantDiscount === "number" ? merchantDiscount : null);
    const clientPct = clientPaysPercent ?? (merchantPct != null ? 100 - merchantPct : null);
    if (merchantPct == null || clientPct == null) return null;

    return (
      <div style={{ padding: compact ? "8px 0 0" : "10px 0 0", width:"100%" }}>
        <div style={{ display:"flex", borderRadius:6, overflow:"hidden", height:6 }}>
          <div style={{ flex:clientPct, background:FUND_COLORS.client.bg, minWidth:3 }} />
          <div style={{ flex:merchantPct, background:"#fb923c" }} />
        </div>
        <div style={{ display:"flex", gap:10, marginTop:6, flexWrap:"wrap" }}>
          <div style={{ display:"flex", alignItems:"center", gap:4 }}>
            <div style={{ width:6, height:6, borderRadius:2, background:"#fb923c", flexShrink:0 }} />
            <span style={{ fontSize:"0.67rem", color:"#c6cedd", lineHeight:1.35 }}>Merchant gives you {merchantPct}% discount</span>
          </div>
        </div>
      </div>
    );
  }

  const total = totalValue || (clientPays + agentPays + merchantDiscount);
  if (!total) return null;
  const segs = [
    { key:"client",   val: clientPays,       pct: clientPays / total, show: true },
    { key:"agent",    val: agentPays,         pct: agentPays / total },
    { key:"merchant", val: merchantDiscount,  pct: merchantDiscount / total },
  ].filter(s => s.show || s.val > 0);

  return (
    <div style={{ padding: compact ? "8px 0 0" : "10px 0 0", width:"100%" }}>
      {/* Bar */}
      <div style={{ display:"flex", borderRadius:6, overflow:"hidden", height: compact ? 5 : 7, gap:1 }}>
        {segs.map(s => (
          <div key={s.key} style={{ flex: s.pct, background: FUND_COLORS[s.key].bg, minWidth:s.key === "client" ? 3 : 4 }} />
        ))}
      </div>
      {/* Legend */}
      <div style={{ display:"flex", gap: compact ? 8 : 10, marginTop: compact ? 5 : 7, flexWrap:"wrap", alignItems:"center" }}>
        {segs.map(s => (
          s.key === "client" ? null : (
          <div key={s.key} style={{ display:"flex", alignItems:"center", gap:4 }}>
            <div style={{ width: compact ? 5 : 6, height: compact ? 5 : 6, borderRadius:2, background: FUND_COLORS[s.key].bg, flexShrink:0 }} />
            <span style={{ fontSize: compact ? "0.64rem" : "0.67rem", color:"#c6cedd", lineHeight:1.35, whiteSpace:"normal", overflowWrap:"anywhere" }}>
              <span style={{ color: FUND_COLORS[s.key].bg, fontWeight:800 }}>
                {s.key === "merchant"
                  ? `${FUND_COLORS[s.key].label} ${s.val} SGD discount`
                  : `${FUND_COLORS[s.key].label} SGD ${s.val}`}
              </span>
            </span>
          </div>
          )
        ))}
        <div style={{ display:"flex", alignItems:"center", gap:4, marginLeft:"auto" }}>
          <span style={{ fontSize: compact ? "0.62rem" : "0.65rem", color:"#8b97ab" }}>Total value SGD {total}</span>
        </div>
      </div>
    </div>
  );
}

// ── YOU PAY BADGE ───────────────────────────────────────────
// The single most important thing on a card — what does the CLIENT actually pay?
function YouPayBadge({ funding, large }) {
  if (!funding) return null;
  const customLabel = funding.clientBadgeLabel;
  if (customLabel) {
    return (
      <div style={{ display:"inline-flex", alignItems:"center", gap:5, padding: large ? "5px 12px" : "3px 9px", borderRadius:999,
        background: "rgba(56,189,248,0.15)",
        border: "1px solid rgba(56,189,248,0.4)",
      }}>
        <span style={{ width: large ? 8 : 6, height: large ? 8 : 6, borderRadius:999, background: "#38bdf8", flexShrink:0 }} />
        <span style={{ fontSize: large ? "0.82rem" : "0.7rem", fontWeight:800, color: "#38bdf8" }}>
          {customLabel}
        </span>
      </div>
    );
  }

  const { clientPays, percentageBased } = funding;
  if (percentageBased || clientPays !== 0) return null;

  return (
    <div style={{ display:"inline-flex", alignItems:"center", gap:5, padding: large ? "5px 12px" : "3px 9px", borderRadius:999,
      background: "rgba(56,189,248,0.15)",
      border: "1px solid rgba(56,189,248,0.4)",
    }}>
      <span style={{ width: large ? 8 : 6, height: large ? 8 : 6, borderRadius:999, background: "#38bdf8", flexShrink:0 }} />
      <span style={{ fontSize: large ? "0.82rem" : "0.7rem", fontWeight:800, color: "#38bdf8" }}>
        {getClientPayLabel(funding)}
      </span>
    </div>
  );
}

// ── VIEW: GRID ─────────────────────────────────────────────
function GridView({ vouchers, selected, onSelect }) {
  return (
    <div style={{
      display:"grid",
      gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",
      gap:12,
    }}>
      {vouchers.map(v => (
        <button key={v.id} onClick={() => onSelect(v)}
          style={{
            all:"unset", cursor:"pointer", borderRadius:20,
            border: selected?.id === v.id ? `1.5px solid ${v.color}` : "1px solid rgba(255,255,255,0.08)",
            background: selected?.id === v.id ? `linear-gradient(145deg,${v.colorDark}55,rgba(7,14,26,0.98))` : "rgba(255,255,255,0.04)",
            overflow:"hidden", transition:"all 180ms ease",
            boxShadow: selected?.id === v.id ? `0 0 0 2px ${v.color}33` : "none",
            display:"flex", flexDirection:"column",
          }}>
          <VoucherColorBar color={v.color} />
          <div style={{ flex:1, padding:"12px 12px 0" }}>
            <div style={{ fontSize:"1.5rem", marginBottom:8 }}>{v.emoji}</div>
            <div style={{ marginBottom:6 }}><TagBadge type={v.tagType} label={v.tag} /></div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.25rem", fontWeight:700, lineHeight:1.1, color:"#f1ece7", marginBottom:4 }}>{v.title}</div>
            <div style={{ fontSize:"0.73rem", color:"#8b97ab", marginBottom:10 }}>{v.merchant}</div>
            <div style={{ marginBottom:8 }}>
              <YouPayBadge funding={v.funding} />
            </div>

            {/* Price */}
            <div style={{ display:"flex", alignItems:"baseline", gap:6, flexWrap:"wrap", marginBottom:4 }}>
              <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.5rem", fontWeight:800, color:v.color, lineHeight:1 }}>{v.value}</span>
              {v.originalPrice && <span style={{ fontSize:"0.85rem", color:"#8b97ab", textDecoration:"line-through", fontFamily:"'Barlow Condensed',sans-serif" }}>{v.originalPrice}</span>}
            </div>

            {/* Availability */}
	            {(() => {
	              const meta = getAvailabilityMeta(v.monthlyLimit, v.monthlyRemaining);
	              if (!meta) return null;
	              return (
	                <div style={{ marginBottom:6 }}>
	                  <div style={{ fontSize:"0.66rem", fontWeight:800, color:meta.full ? "#fb7185" : "#38bdf8" }}>{meta.statusText}</div>
	                  <div style={{ fontSize:"0.62rem", color:"#8b97ab", marginTop:2 }}>{meta.hintText}</div>
	                </div>
	              );
	            })()}
	          </div>

	          {/* Horizontal funding bar at bottom */}
	          <div style={{ padding:"0 12px 12px", minHeight:92, display:"flex", alignItems:"flex-start" }}>
	            <FundingBar funding={v.funding} compact={true} />
	          </div>
	        </button>
	      ))}
    </div>
  );
}

// ── VIEW: LIST ─────────────────────────────────────────────
function ListView({ vouchers, selected, onSelect }) {
  return (
    <div style={{ display:"grid", gap:8 }}>
      {vouchers.map(v => (
        <button key={v.id} onClick={() => onSelect(v)}
          style={{
            all:"unset", cursor:"pointer", borderRadius:16,
            border: selected?.id === v.id
              ? `1.5px solid ${v.color}`
              : "1px solid rgba(255,255,255,0.08)",
            background: selected?.id === v.id
              ? `linear-gradient(90deg, ${v.colorDark}44, rgba(7,14,26,0.98))`
              : "rgba(255,255,255,0.04)",
            display:"flex", alignItems:"center", gap:0,
            padding:"0", transition:"all 180ms ease",
            overflow:"hidden", flexDirection:"column",
          }}>
          <div style={{ display:"flex", alignItems:"center", gap:12, width:"100%", padding:"12px 14px 6px" }}>
          <div style={{
            width:44, height:44, borderRadius:12, flexShrink:0,
            background:`linear-gradient(135deg,${v.color}44,${v.colorDark})`,
            display:"grid", placeItems:"center", fontSize:"1.25rem",
          }}>{v.emoji}</div>
          <div style={{ flex:1, textAlign:"left" }}>
            <div style={{ fontWeight:700, fontSize:"0.92rem", color:"#f1ece7" }}>{v.title}</div>
            <div style={{ fontSize:"0.74rem", color:"#8b97ab" }}>{v.merchant} · {v.expiryText}</div>
	            {(() => {
	              const meta = getAvailabilityMeta(v.monthlyLimit, v.monthlyRemaining);
	              if (!meta) return null;
	              return (
	                <div style={{ marginTop:3 }}>
	                  <div style={{ fontSize:"0.68rem", color: meta.full ? "#ff697e" : "#84e3f3", fontWeight:700 }}>{meta.statusText}</div>
	                  <div style={{ fontSize:"0.64rem", color:"#8b97ab", marginTop:1 }}>{meta.hintText}</div>
	                </div>
	              );
	            })()}
          </div>
          <div style={{ textAlign:"right", flexShrink:0 }}>
            <YouPayBadge funding={v.funding} />
            <div style={{ marginTop:6 }}>
              <PriceDisplay value={v.value} originalPrice={v.originalPrice} color={v.color} />
            </div>
            <div style={{ marginTop:4 }}><TagBadge type={v.tagType} label={v.tag} /></div>
          </div>
          </div>
          <div style={{ padding:"0 14px 10px", width:"100%" }}>
            <FundingBar funding={v.funding} compact={true} />
          </div>
        </button>
      ))}
    </div>
  );
}

// ── VIEW: CAROUSEL ─────────────────────────────────────────
function CarouselView({ vouchers, selected, onSelect }) {
  const [idx, setIdx] = useState(0);
  const v = vouchers[idx];
  useEffect(() => { if (v) onSelect(v); }, [idx]);

  return (
    <div style={{ userSelect:"none" }}>
      {/* Big card */}
      <div style={{
        borderRadius:28, overflow:"hidden",
        border:`1.5px solid ${v?.color || "#84e3f3"}`,
        background:`linear-gradient(145deg, ${v?.colorDark || "#060d18"} 0%, rgba(7,14,26,0.98) 100%)`,
        marginBottom:16, minHeight:260, padding:28,
        boxShadow:`0 24px 60px rgba(0,0,0,0.36), 0 0 0 1px ${v?.color || "#84e3f3"}22`,
        transition:"all 240ms ease",
      }}>
        <div style={{ fontSize:"3rem", marginBottom:12 }}>{v?.emoji}</div>
        <div style={{ marginBottom:10 }}><TagBadge type={v?.tagType} label={v?.tag} /></div>
        <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"clamp(2rem,5vw,3rem)", fontWeight:800, lineHeight:0.97, color:"#f1ece7", marginBottom:8 }}>{v?.title}</div>
        <div style={{ color:"#c6cedd", fontSize:"0.9rem", marginBottom:16 }}>{v?.merchant}</div>
        <PriceDisplay value={v?.value} originalPrice={v?.originalPrice} color={v?.color} large />
        <div style={{ fontSize:"0.8rem", color:"#8b97ab", marginTop:6 }}>{v?.priceNote}</div>
        {v?.monthlyLimit !== null && v?.monthlyLimit !== undefined && (
          <div style={{ marginTop:10 }}>
            <AvailabilityPill monthlyLimit={v.monthlyLimit} monthlyRemaining={v.monthlyRemaining} />
          </div>
        )}
      </div>
      {/* Dots + arrows */}
      <div style={{ display:"flex", alignItems:"center", justifyContent:"center", gap:12 }}>
        <button onClick={() => setIdx(i => Math.max(0, i - 1))}
          style={{ all:"unset", cursor:"pointer", width:36, height:36, borderRadius:999, border:"1px solid rgba(132,227,243,0.2)", display:"grid", placeItems:"center", color:"#84e3f3", fontSize:"1rem" }}>←</button>
        {vouchers.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)}
            style={{ all:"unset", cursor:"pointer", width: i === idx ? 20 : 8, height:8, borderRadius:999, background: i === idx ? "#84e3f3" : "rgba(255,255,255,0.18)", transition:"all 200ms ease" }} />
        ))}
        <button onClick={() => setIdx(i => Math.min(vouchers.length - 1, i + 1))}
          style={{ all:"unset", cursor:"pointer", width:36, height:36, borderRadius:999, border:"1px solid rgba(132,227,243,0.2)", display:"grid", placeItems:"center", color:"#84e3f3", fontSize:"1rem" }}>→</button>
      </div>
    </div>
  );
}

// ── VOUCHER DETAIL PANEL ───────────────────────────────────
function VoucherDetail({ voucher, onClaim, claimed }) {
  const [faqOpen, setFaqOpen] = useState(null);
  if (!voucher) return (
    <div style={{ textAlign:"center", padding:"48px 24px", color:"#8b97ab" }}>
      <div style={{ fontSize:"2.5rem", marginBottom:12 }}>👈</div>
      <div style={{ fontWeight:700, color:"#c6cedd" }}>Pick a voucher to see details</div>
    </div>
  );
  const steps = [
    { icon:"🎯", label:"Browse" },
    { icon:"☑️", label:"Select" },
    { icon:"🤝", label:"Connect agent" },
    { icon:"📥", label:"Collect" },
    { icon:"✅", label:"Redeem" },
  ];
  return (
    <div style={{ display:"grid", gap:16 }}>
      {/* Header */}
      <div style={{
        borderRadius:20, padding:20,
        background:`linear-gradient(145deg,${voucher.colorDark}66, rgba(7,14,26,0.98))`,
        border:`1px solid ${voucher.color}33`,
      }}>
        <div style={{ display:"grid", gap:14 }}>
          <div style={{ display:"flex", gap:14, alignItems:"flex-start" }}>
            <div style={{ fontSize:"2.5rem", flexShrink:0 }}>{voucher.emoji}</div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ marginBottom:6, display:"flex", gap:6, flexWrap:"wrap", alignItems:"center" }}>
                {getUniqueBadgeItems(voucher).map((item) =>
                  item.kind === "tag"
                    ? <TagBadge key={`tag-${item.label}`} type={item.type} label={item.label} />
                    : <VoucherTypeBadge key={`type-${item.label}`} voucherType={item.voucherType} voucherTypeLabel={item.label} />
                )}
              </div>
              <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"clamp(1.6rem,3vw,2.2rem)", fontWeight:800, lineHeight:1, color:"#f1ece7", overflowWrap:"anywhere" }}>{voucher.title}</div>
              <div style={{ fontSize:"0.8rem", color:"#8b97ab", marginTop:4, overflowWrap:"anywhere" }}>{voucher.merchant}</div>
            </div>
          </div>
          <div style={{ display:"grid", gap:8, minWidth:0 }}>
            <YouPayBadge funding={voucher.funding} large />
            <div style={{ display:"flex", alignItems:"baseline", gap:8, flexWrap:"wrap" }}>
              <PriceDisplay value={voucher.value} originalPrice={voucher.originalPrice} color={voucher.color} />
            </div>
            <div style={{ fontSize:"0.8rem", color:"#8b97ab", lineHeight:1.5, overflowWrap:"anywhere" }}>{voucher.priceNote}</div>
          </div>
        </div>
        <p style={{ margin:"12px 0 0", color:"#c6cedd", fontSize:"0.87rem", lineHeight:1.6 }}>{voucher.description}</p>
        {/* Funding breakdown */}
        {voucher.funding && (
          <div style={{ marginTop:14 }}>
            <div style={{ fontSize:"0.68rem", fontWeight:800, letterSpacing:"0.12em", textTransform:"uppercase", color:"#8b97ab", marginBottom:8 }}>Who pays for this</div>
            <FundingBar funding={voucher.funding} />
          </div>
        )}
        {voucher.monthlyLimit !== null && voucher.monthlyLimit !== undefined && (
          <div style={{ marginTop:12 }}>
            <AvailabilityPill monthlyLimit={voucher.monthlyLimit} monthlyRemaining={voucher.monthlyRemaining} />
          </div>
        )}
      </div>

      {/* How to use — visual steps */}
      <div style={{ borderRadius:16, padding:"14px 16px", background:"rgba(255,255,255,0.03)", border:"1px solid rgba(255,255,255,0.07)" }}>
        <div style={{ fontSize:"0.68rem", fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:"#84e3f3", marginBottom:10 }}>How it works</div>
        <div style={{ display:"flex", alignItems:"center", gap:0 }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ flex:1, textAlign:"center" }}>
                <div style={{ fontSize:"1rem", marginBottom:3 }}>{s.icon}</div>
                <div style={{ fontSize:"0.63rem", color: i <= 1 ? "#84e3f3" : "#8b97ab", fontWeight: i <= 1 ? 800 : 500, lineHeight:1.2 }}>{s.label}</div>
              </div>
              {i < steps.length - 1 && <div style={{ width:16, height:1, background:"rgba(255,255,255,0.12)", flexShrink:0 }} />}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Key info pills */}
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:8 }}>
        {[
          { label:"Expires", val:voucher.expiryText },
          { label:"How to collect", val:voucher.claimRule.slice(0,38) + (voucher.claimRule.length > 38 ? "…" : "") },
          { label:"How to redeem", val:voucher.redemptionRule.slice(0,40) + (voucher.redemptionRule.length > 40 ? "…" : "") },
          { label:"Meeting", val:voucher.meetingRule },
        ].map((item, i) => (
          <div key={i} style={{ borderRadius:14, padding:"10px 12px", background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.07)", minWidth:0 }}>
            <div style={{ fontSize:"0.66rem", fontWeight:800, letterSpacing:"0.1em", textTransform:"uppercase", color:"#8b97ab", marginBottom:4 }}>{item.label}</div>
            <div style={{ fontSize:"0.8rem", color:"#c6cedd", lineHeight:1.45, overflowWrap:"anywhere" }}>{item.val}</div>
          </div>
        ))}
      </div>

      {/* FAQ */}
      {voucher.faq?.length > 0 && (
        <div style={{ borderRadius:16, overflow:"hidden", border:"1px solid rgba(255,255,255,0.07)" }}>
          <div style={{ padding:"10px 14px", background:"rgba(255,255,255,0.03)", fontSize:"0.68rem", fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:"#8b97ab" }}>FAQ</div>
          {voucher.faq.map((item, i) => (
            <div key={i} style={{ borderTop:"1px solid rgba(255,255,255,0.06)" }}>
              <button onClick={() => setFaqOpen(faqOpen === i ? null : i)}
                style={{ all:"unset", cursor:"pointer", width:"100%", padding:"12px 14px", display:"flex", justifyContent:"space-between", alignItems:"center", gap:8 }}>
                <span style={{ fontSize:"0.82rem", fontWeight:600, color:"#c6cedd", textAlign:"left" }}>{item.q}</span>
                <span style={{ color:"#84e3f3", fontSize:"0.8rem", flexShrink:0 }}>{faqOpen === i ? "−" : "+"}</span>
              </button>
              {faqOpen === i && (
                <div style={{ padding:"0 14px 12px", fontSize:"0.8rem", color:"#8b97ab", lineHeight:1.6 }}>{item.a}</div>
              )}
            </div>
          ))}
        </div>
      )}

      {/* CTA */}
      <button onClick={onClaim}
        style={{
          all:"unset", cursor:"pointer", borderRadius:999,
          padding:"14px 24px", textAlign:"center",
          background: claimed ? "#96e7b2" : `linear-gradient(90deg,${voucher.color},${voucher.color}cc)`,
          color: claimed ? "#064e3b" : "#08111f",
          fontWeight:800, fontSize:"0.95rem",
          boxShadow: claimed ? "none" : `0 8px 24px ${voucher.color}44`,
          transition:"all 200ms ease",
        }}>
        {claimed ? "✓ Collected — go to wallet" : (voucher.pricingMode === "paid" ? `Buy for ${voucher.value}` : voucher.monthlyRemaining === 0 ? "Fully claimed — check back next month" : "Connect to collect this voucher")}
      </button>
    </div>
  );
}

// ── AGENT PANEL ────────────────────────────────────────────
function AgentPanel({ connectedAgent, onConnect }) {
  const [code, setCode] = useState("");
  const [selected, setSelected] = useState(null);
  const [confirmed, setConfirmed] = useState(connectedAgent);

  const handleConnect = () => {
    const agent = RP.AGENTS.find(a => a.code === code.trim().toUpperCase()) ||
      RP.AGENTS.find(a => a.name.toLowerCase().includes(code.toLowerCase()));
    if (agent) { setConfirmed(agent); onConnect(agent); }
  };

  const displayAgent = confirmed || selected;

  return (
    <div style={{ display:"grid", gap:14 }}>
      <div style={{ fontSize:"0.68rem", fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:"#84e3f3" }}>My Advisor</div>
      <p style={{ margin:0, fontSize:"0.84rem", color:"#8b97ab", lineHeight:1.6 }}>
        Connect to your insurance advisor to collect any voucher. They sponsor or facilitate your rewards.
      </p>

      {/* Agent selector */}
      <div style={{ display:"grid", gap:8 }}>
        {RP.AGENTS.map(agent => (
          <button key={agent.code} onClick={() => { setSelected(agent); setCode(agent.code); }}
            style={{
              all:"unset", cursor:"pointer", borderRadius:16, padding:"12px 14px",
              border: (confirmed?.code === agent.code || selected?.code === agent.code)
                ? `1.5px solid ${agent.accentColor}`
                : "1px solid rgba(255,255,255,0.08)",
              background: (confirmed?.code === agent.code)
                ? `linear-gradient(90deg,${agent.accentColor}22, rgba(7,14,26,0.98))`
                : "rgba(255,255,255,0.03)",
              display:"flex", alignItems:"center", gap:12, transition:"all 180ms ease",
            }}>
            <div style={{
              width:40, height:40, borderRadius:12, flexShrink:0,
              background:`linear-gradient(135deg,${agent.accentColor}44,rgba(7,14,26,0.9))`,
              display:"grid", placeItems:"center",
              fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1rem", fontWeight:800, color:"#f1ece7",
            }}>{agent.initials}</div>
            <div style={{ flex:1, textAlign:"left" }}>
              <div style={{ fontWeight:700, fontSize:"0.88rem", color:"#f1ece7" }}>{agent.name}</div>
              <div style={{ fontSize:"0.72rem", color:"#8b97ab" }}>{agent.agency} · {agent.meetingLabel}</div>
            </div>
            {confirmed?.code === agent.code && <span style={{ fontSize:"0.8rem", color:agent.accentColor }}>✓</span>}
          </button>
        ))}
      </div>

      {/* Manual code */}
      <div style={{ display:"grid", gap:8 }}>
        <label style={{ fontSize:"0.78rem", fontWeight:700, color:"#c6cedd" }}>Or enter your insurance advisor's referral code</label>
        <div style={{ display:"flex", gap:8 }}>
          <input value={code} onChange={e => setCode(e.target.value)}
            placeholder="e.g. UNIQUECODE0001"
            style={{ flex:1, borderRadius:12, border:"1px solid rgba(132,227,243,0.2)", background:"rgba(255,255,255,0.04)", color:"#f1ece7", padding:"10px 14px", fontSize:"0.88rem" }} />
          <button onClick={handleConnect}
            style={{ all:"unset", cursor:"pointer", padding:"10px 16px", borderRadius:12, background:"#84e3f3", color:"#08111f", fontWeight:800, fontSize:"0.85rem" }}>
            Connect
          </button>
        </div>
      </div>

      {/* Connected agent card */}
      {displayAgent && (
        <div style={{
          borderRadius:18, padding:16,
          background:`linear-gradient(135deg,${displayAgent.accentColor}18,rgba(7,14,26,0.98))`,
          border:`1.5px solid ${displayAgent.accentColor}44`,
        }}>
          <div style={{ display:"flex", gap:12, alignItems:"flex-start", marginBottom:10 }}>
            <div style={{
              width:48, height:48, borderRadius:14,
              background:`linear-gradient(135deg,${displayAgent.accentColor}55,rgba(7,14,26,0.9))`,
              display:"grid", placeItems:"center",
              fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.25rem", fontWeight:800, color:"#f1ece7",
            }}>{displayAgent.initials}</div>
            <div>
              <div style={{ fontWeight:700, color:"#f1ece7" }}>{displayAgent.name}</div>
              <div style={{ fontSize:"0.75rem", color:"#8b97ab" }}>{displayAgent.description}</div>
              <div style={{ fontSize:"0.72rem", color:displayAgent.accentColor, marginTop:2 }}>{displayAgent.agency}</div>
            </div>
          </div>
          <p style={{ margin:"0 0 10px", fontSize:"0.8rem", color:"#c6cedd", lineHeight:1.6, fontStyle:"italic" }}>"{displayAgent.bio}"</p>
          <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
            {displayAgent.specialties.map(s => (
              <span key={s} style={{ padding:"3px 10px", borderRadius:999, fontSize:"0.7rem", fontWeight:700, background:`${displayAgent.accentColor}18`, color:displayAgent.accentColor }}>{s}</span>
            ))}
          </div>
          <div style={{ marginTop:12, display:"flex", gap:8 }}>
            <a href={`https://wa.me/${displayAgent.whatsapp?.replace(/\D/g,"")}`}
              style={{ display:"inline-flex", alignItems:"center", gap:6, padding:"8px 14px", borderRadius:999, background:"rgba(37,211,102,0.15)", color:"#25d366", textDecoration:"none", fontSize:"0.78rem", fontWeight:800 }}>
              💬 WhatsApp
            </a>
            {confirmed && <span style={{ display:"inline-flex", alignItems:"center", padding:"8px 14px", borderRadius:999, background:`${displayAgent.accentColor}18`, color:displayAgent.accentColor, fontSize:"0.78rem", fontWeight:800 }}>✓ Connected</span>}
          </div>
        </div>
      )}
    </div>
  );
}

// ── WALLET PANEL ───────────────────────────────────────────
function WalletPanel({ items }) {
  if (items.length === 0) return (
    <div style={{ textAlign:"center", padding:"36px 20px", border:"1px dashed rgba(132,227,243,0.2)", borderRadius:18, color:"#8b97ab" }}>
      <div style={{ fontSize:"2rem", marginBottom:8 }}>👜</div>
      <div style={{ fontWeight:700, color:"#c6cedd", marginBottom:6 }}>Your wallet is empty</div>
      <div style={{ fontSize:"0.82rem" }}>Claim a voucher to see it here</div>
    </div>
  );
  return (
    <div style={{ display:"grid", gap:10 }}>
      <div style={{ fontSize:"0.68rem", fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:"#84e3f3" }}>Collected vouchers · {items.length}</div>
      {items.map((item, i) => (
        <div key={i} style={{
          borderRadius:16, overflow:"hidden",
          border:`1px solid ${item.color}44`,
          background:`linear-gradient(90deg,${item.colorDark}55,rgba(7,14,26,0.98))`,
        }}>
          <VoucherColorBar color={item.color} />
          <div style={{ padding:"12px 14px", display:"flex", alignItems:"center", gap:12 }}>
            <span style={{ fontSize:"1.5rem" }}>{item.emoji}</span>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:700, fontSize:"0.88rem", color:"#f1ece7" }}>{item.title}</div>
              <div style={{ fontSize:"0.73rem", color:"#8b97ab" }}>{item.merchant} · Expires {item.expiryText}</div>
            </div>
            <div>
              <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.4rem", fontWeight:800, color:item.color }}>{item.value}</div>
              <button style={{
                all:"unset", cursor:"pointer", display:"block", marginTop:4,
                padding:"4px 10px", borderRadius:999,
                background:"rgba(132,227,243,0.12)", color:"#84e3f3",
                fontSize:"0.68rem", fontWeight:800, textAlign:"center",
              }}>Redeem</button>
            </div>
          </div>
        </div>
      ))}
      <div style={{ borderRadius:14, padding:"12px 14px", background:"rgba(255,255,255,0.03)", border:"1px solid rgba(255,255,255,0.07)" }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <span style={{ fontSize:"0.78rem", color:"#8b97ab" }}>Promo credit balance</span>
          <span style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.4rem", fontWeight:800, color:"#96e7b2" }}>SGD 5</span>
        </div>
        <div style={{ fontSize:"0.7rem", color:"#8b97ab", marginTop:4 }}>From friend referral bonus · usable on eligible offers</div>
      </div>
    </div>
  );
}

// ── PROFILE SETUP (relevance sorting) ─────────────────────
function ProfileSetup({ profile, onChange, onClose }) {
  return (
    <div style={{
      position:"fixed", inset:0, zIndex:100,
      background:"rgba(6,13,24,0.92)", display:"flex", alignItems:"center", justifyContent:"center",
      backdropFilter:"blur(8px)",
    }}>
      <div style={{
        borderRadius:28, padding:28, width:"min(480px,90vw)",
        background:"linear-gradient(145deg,rgba(11,25,45,0.98),rgba(7,13,24,0.98))",
        border:"1px solid rgba(132,227,243,0.18)",
        boxShadow:"0 32px 80px rgba(0,0,0,0.48)",
      }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
          <div>
            <div style={{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:"1.8rem", fontWeight:800, color:"#f1ece7" }}>Personalise</div>
            <div style={{ fontSize:"0.8rem", color:"#8b97ab" }}>Helps us sort vouchers by what's most relevant to you</div>
          </div>
          <button onClick={onClose} style={{ all:"unset", cursor:"pointer", color:"#8b97ab", fontSize:"1.2rem" }}>✕</button>
        </div>
        <div style={{ display:"grid", gap:14 }}>
          {[
            { label:"Your name", key:"name", type:"text", placeholder:"Display name" },
            { label:"Age group", key:"age", type:"select", options:["Under 30","30–45","45–60","60+"] },
            { label:"Gender", key:"gender", type:"select", options:["Prefer not to say","Female","Male","Non-binary"] },
            { label:"Marital status", key:"marital", type:"select", options:["Single","Married","Divorced","Widowed"] },
          ].map(field => (
            <label key={field.key} style={{ display:"grid", gap:6, fontWeight:700, fontSize:"0.82rem", color:"#c6cedd" }}>
              {field.label}
              {field.type === "select" ? (
                <select value={profile[field.key] || ""} onChange={e => onChange({ ...profile, [field.key]: e.target.value })}
                  style={{ borderRadius:12, border:"1px solid rgba(132,227,243,0.2)", background:"rgba(255,255,255,0.04)", color:"#f1ece7", padding:"10px 12px" }}>
                  <option value="">—</option>
                  {field.options.map(o => <option key={o} value={o}>{o}</option>)}
                </select>
              ) : (
                <input type="text" value={profile[field.key] || ""} onChange={e => onChange({ ...profile, [field.key]: e.target.value })}
                  placeholder={field.placeholder}
                  style={{ borderRadius:12, border:"1px solid rgba(132,227,243,0.2)", background:"rgba(255,255,255,0.04)", color:"#f1ece7", padding:"10px 12px" }} />
              )}
            </label>
          ))}
        </div>
        <button onClick={onClose} style={{
          all:"unset", cursor:"pointer", marginTop:20, width:"100%",
          textAlign:"center", padding:"13px", borderRadius:999,
          background:"#84e3f3", color:"#08111f", fontWeight:800,
        }}>Save & sort by relevance</button>
      </div>
    </div>
  );
}

// ── MAIN CLIENT PORTAL ─────────────────────────────────────
function ClientPortal() {
  const [viewMode, setViewMode] = useState("grid"); // grid | list | carousel
  const [sortMode, setSortMode] = useState("newest"); // newest | az | relevant
  const [category, setCategory] = useState("all");
  const [selected, setSelected] = useState(RP.VOUCHERS[0]);
  const [rightTab, setRightTab] = useState("detail"); // detail | agent | wallet
  const [connectedAgent, setConnectedAgent] = useState(null);
  const [wallet, setWallet] = useState([]);
  const [claimed, setClaimed] = useState({});
  const [profile, setProfile] = useState({});
  const [showProfile, setShowProfile] = useState(false);

  // Filter
  let vouchers = RP.VOUCHERS.filter(v => category === "all" || v.category === category);

  // Sort
  if (sortMode === "az") vouchers = [...vouchers].sort((a, b) => a.merchant.localeCompare(b.merchant));
  else if (sortMode === "newest") vouchers = [...vouchers].sort((a, b) => a.uploadedDaysAgo - b.uploadedDaysAgo);
  else if (sortMode === "relevant") {
    vouchers = [...vouchers].sort((a, b) => {
      const score = v => {
        let s = 0;
        if (profile.gender === "Female" && v.relevance?.female) s += 2;
        if ((profile.age === "30–45" || profile.age === "45–60") && v.relevance?.age35plus) s += 1;
        if (v.relevance?.anyGender) s += 0.5;
        return s;
      };
      return score(b) - score(a);
    });
  }

  const handleClaim = () => {
    if (!connectedAgent) { setRightTab("agent"); return; }
    if (!selected) return;
    if (!claimed[selected.id]) {
      setClaimed(c => ({ ...c, [selected.id]: true }));
      setWallet(w => [...w, selected]);
    }
    setRightTab("wallet");
  };

  return (
    <div style={{ display:"flex", flexDirection:"column", height:"100vh", overflow:"hidden", fontFamily:"'Manrope','Avenir Next','Segoe UI',sans-serif", background:"linear-gradient(180deg,#0b1829 0%,#060d18 100%)", color:"#f1ece7" }}>
      {showProfile && <ProfileSetup profile={profile} onChange={setProfile} onClose={() => { setShowProfile(false); setSortMode("relevant"); }} />}

      {/* TOP BAR */}
      <div style={{ display:"flex", alignItems:"center", gap:12, padding:"12px 20px", borderBottom:"1px solid rgba(255,255,255,0.07)", flexShrink:0 }}>
        {/* Brand */}
        <BrandLockup />

        {/* View modes */}
        <div style={{ display:"flex", borderRadius:10, border:"1px solid rgba(255,255,255,0.1)", overflow:"hidden" }}>
          {[["grid","⊞"],["list","≡"],["carousel","◎"]].map(([mode, icon]) => (
            <button key={mode} onClick={() => setViewMode(mode)}
              style={{ all:"unset", cursor:"pointer", padding:"6px 12px", fontSize:"0.85rem",
                background: viewMode === mode ? "rgba(132,227,243,0.15)" : "transparent",
                color: viewMode === mode ? "#84e3f3" : "#8b97ab",
                borderRight: mode !== "carousel" ? "1px solid rgba(255,255,255,0.08)" : "none",
                transition:"all 150ms ease",
              }}>{icon} {mode}</button>
          ))}
        </div>

        {/* Sort */}
        <select value={sortMode} onChange={e => setSortMode(e.target.value)}
          style={{ borderRadius:10, border:"1px solid rgba(255,255,255,0.1)", background:"rgba(255,255,255,0.04)", color:"#c6cedd", padding:"6px 12px", fontSize:"0.82rem", cursor:"pointer" }}>
          <option value="newest">↑ Newest first</option>
          <option value="az">A → Z</option>
          <option value="relevant">★ Most relevant</option>
        </select>

        <button onClick={() => setShowProfile(true)}
          style={{ all:"unset", cursor:"pointer", padding:"6px 14px", borderRadius:10, border:"1px solid rgba(132,227,243,0.18)", color:"#84e3f3", fontSize:"0.8rem", fontWeight:700 }}>
          {profile.name ? `👤 ${profile.name}` : "👤 My profile"}
        </button>

        <div style={{ flex:1 }} />

        {/* Right tab switcher */}
        <div style={{ display:"flex", borderRadius:10, border:"1px solid rgba(255,255,255,0.1)", overflow:"hidden" }}>
          {[
            ["detail","Voucher", null],
            ["agent", null, null],
            ["wallet","👜 Wallet", null],
          ].map(([tab, label]) => (
            <button key={tab} onClick={() => setRightTab(tab)}
              style={{ all:"unset", cursor:"pointer", padding:"6px 14px", fontSize:"0.8rem",
                background: rightTab === tab ? "rgba(132,227,243,0.15)" : "transparent",
                color: rightTab === tab ? "#84e3f3" : "#8b97ab",
                borderRight: tab !== "wallet" ? "1px solid rgba(255,255,255,0.08)" : "none",
                transition:"all 150ms ease", position:"relative",
                display:"flex", alignItems:"center", gap:6,
              }}>
              {tab === "agent" ? (
                <>
                  <span style={{ width:8, height:8, borderRadius:999, flexShrink:0, background: connectedAgent ? "#96e7b2" : "#ff697e", boxShadow: connectedAgent ? "0 0 6px #96e7b288" : "0 0 6px #ff697e88" }} />
                  My Advisor
                </>
              ) : label}
              {tab === "wallet" && wallet.length > 0 && (
                <span style={{ position:"absolute", top:4, right:4, width:8, height:8, borderRadius:999, background:"#ff697e" }} />
              )}
            </button>
          ))}
        </div>
      </div>

      {/* CATEGORY FILTER BAR */}
      <div style={{ display:"flex", gap:8, padding:"10px 20px", borderBottom:"1px solid rgba(255,255,255,0.06)", overflowX:"auto", flexShrink:0, msOverflowStyle:"none", scrollbarWidth:"none" }}>
        <style>{`div::-webkit-scrollbar{display:none}`}</style>
        {RP.CATEGORIES.map(cat => (
          <button key={cat.id} onClick={() => setCategory(cat.id)}
            style={{ all:"unset", cursor:"pointer", padding:"6px 16px", borderRadius:999, flexShrink:0,
              background: category === cat.id ? "#84e3f3" : "rgba(255,255,255,0.05)",
              color: category === cat.id ? "#08111f" : "#8b97ab",
              border: category === cat.id ? "none" : "1px solid rgba(255,255,255,0.09)",
              fontWeight: category === cat.id ? 800 : 500, fontSize:"0.82rem",
              transition:"all 150ms ease", whiteSpace:"nowrap",
            }}>{cat.label}</button>
        ))}
      </div>

      {/* MAIN CONTENT */}
      <div style={{ flex:1, display:"grid", gridTemplateColumns:"minmax(0,1fr) 380px", overflow:"hidden" }}>
        {/* LEFT: Voucher browser */}
        <div style={{ overflowY:"auto", padding:20, borderRight:"1px solid rgba(255,255,255,0.07)" }}>
          {vouchers.length === 0 ? (
            <div style={{ textAlign:"center", padding:"60px 20px", color:"#8b97ab" }}>No offers in this category yet</div>
          ) : viewMode === "grid" ? (
            <GridView vouchers={vouchers} selected={selected} onSelect={v => { setSelected(v); setRightTab("detail"); }} />
          ) : viewMode === "list" ? (
            <ListView vouchers={vouchers} selected={selected} onSelect={v => { setSelected(v); setRightTab("detail"); }} />
          ) : (
            <CarouselView vouchers={vouchers} selected={selected} onSelect={v => { setSelected(v); setRightTab("detail"); }} />
          )}
        </div>

        {/* RIGHT: Detail / Agent / Wallet */}
        <div style={{ overflowY:"auto", padding:20, background:"rgba(255,255,255,0.015)" }}>
          {rightTab === "detail" && (
            <VoucherDetail voucher={selected} onClaim={handleClaim} claimed={selected && claimed[selected.id]} />
          )}
          {rightTab === "agent" && (
            <AgentPanel connectedAgent={connectedAgent} onConnect={agent => { setConnectedAgent(agent); }} />
          )}
          {rightTab === "wallet" && (
            <WalletPanel items={wallet} />
          )}
        </div>
      </div>

      {/* BOTTOM: Journey progress (mobile-friendly hint) */}
      <div style={{ display:"flex", alignItems:"center", justifyContent:"center", gap:0, padding:"8px 20px", borderTop:"1px solid rgba(255,255,255,0.06)", flexShrink:0, fontSize:"0.7rem" }}>
        {[
          ["Browse","#84e3f3",true],
          ["→","#8b97ab",false],
          ["Select","#84e3f3", !!selected],
          ["→","#8b97ab",false],
          ["Connect agent", connectedAgent ? "#96e7b2" : "#8b97ab", !!connectedAgent],
          ["→","#8b97ab",false],
          ["Collect","#8b97ab", Object.keys(claimed).length > 0],
          ["→","#8b97ab",false],
          ["Redeem at merchant","#8b97ab", false],
        ].map(([label, color, active], i) => (
          <span key={i} style={{ color: active ? color : "#8b97ab", fontWeight: active ? 800 : 400, padding:"0 4px" }}>{label}</span>
        ))}
      </div>
    </div>
  );
}

window.ClientPortal = ClientPortal;