// SettlementScreen — settlement statement detail with WaterfallSteps + PricingBreakdown.

function SettlementScreen() {
  return (
    <React.Fragment>
      <div>
        <h1 className="page-title">รอบการชำระ #2026-03-W2</h1>
        <div className="page-sub">ชำระแล้วบางส่วน · ปิดรอบ 22 มี.ค. 2569</div>
      </div>

      <div className="metric-row">
        <div className="metric" style={{gridColumn:"span 2"}}>
          <div className="lbl">ยอดที่จะได้รับ</div>
          <div style={{display:"flex", alignItems:"baseline", gap:6}}>
            <span className="val" style={{fontSize:30}}>฿1,247,500</span>
            <span className="iso">THB</span>
          </div>
          <div className="trust">
            <span className="pill success sm">ล็อกแล้ว</span>
            <span style={{fontFamily:"var(--font-mono)", fontSize:11, color:"var(--on-surface-variant)"}}>≈¥262,000 CNY · fx_exec 1:0.21</span>
            <span className="audit-link"><i className="ti ti-link"></i>audit</span>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2>ขั้นตอนการชำระ</h2></div>
        <div className="list" style={{padding:"6px 14px"}}>
          <div className="waterfall">
            <div className="step">
              <div className="node done"><i className="ti ti-check" style={{fontSize:14}}></i></div>
              <div><div className="label">จองและขาย</div><div className="sub">22 ก.พ. – 15 มี.ค. · 142 ออเดอร์</div></div>
              <div className="num">¥298,500 CNY</div>
            </div>
            <div className="step">
              <div className="node done"><i className="ti ti-check" style={{fontSize:14}}></i></div>
              <div><div className="label">จัดส่งสำเร็จ</div><div className="sub">138 ออเดอร์ · 4 คืนสินค้า</div></div>
              <div className="num">¥289,400 CNY</div>
            </div>
            <div className="step">
              <div className="node now">3</div>
              <div><div className="label">กำลังกระทบยอด FX</div><div className="sub">fx_exec ล็อก 1:4.75</div></div>
              <div className="num">฿1,374,650 THB</div>
            </div>
            <div className="step">
              <div className="node next">4</div>
              <div><div className="label">โอนเข้าบัญชี</div><div className="sub">หักค่าธรรมเนียม 9.25%</div></div>
              <div className="num" style={{color:"var(--on-surface-variant)"}}>—</div>
            </div>
          </div>
        </div>
      </div>

      <div className="section">
        <div className="section-head"><h2>รายละเอียดค่าใช้จ่าย</h2></div>
        <div className="list">
          <div className="list-row" style={{gridTemplateColumns:"1fr auto"}}>
            <div><div className="title">ยอดขายรวม</div><div className="sub">หลังคืนสินค้า</div></div>
            <div className="num">¥289,400 CNY</div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"1fr auto"}}>
            <div><div className="title">ค่าธรรมเนียมแพลตฟอร์ม</div><div className="sub">6.0% · audit</div></div>
            <div className="num" style={{color:"var(--color-text-on-danger)"}}>−¥17,364 CNY</div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"1fr auto"}}>
            <div><div className="title">ค่าคอมมิชชั่น KOL</div><div className="sub">Li Wei 12% · Wang Jing 8%</div></div>
            <div className="num" style={{color:"var(--color-text-on-danger)"}}>−¥10,536 CNY</div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"1fr auto"}}>
            <div><div className="title">ค่าจัดส่งและขนส่ง</div><div className="sub">BEST Express · 138 พัสดุ</div></div>
            <div className="num" style={{color:"var(--color-text-on-danger)"}}>−¥3,500 CNY</div>
          </div>
          <div className="list-row" style={{gridTemplateColumns:"1fr auto", background:"var(--surface-container-low)"}}>
            <div><div className="title" style={{fontWeight:500}}>สุทธิ</div><div className="sub">หลังหักค่าใช้จ่ายและ FX</div></div>
            <div className="num" style={{fontSize:15}}>฿1,247,500 THB</div>
          </div>
        </div>
      </div>

      <button className="btn-primary"><i className="ti ti-download"></i>ดาวน์โหลดใบแจ้งยอด PDF</button>
      <div style={{height:8}}></div>
    </React.Fragment>
  );
}

window.SettlementScreen = SettlementScreen;