// Mobile screens 1-4: Onboarding, Discover, Property Detail, Buy

// ─── 1. ONBOARDING / eKYC ──────────────────────────────────────
function ScrOnboarding() {
  return (
    <div className="gr gr-noscroll" style={{
      width: '100%', height: '100%', background: 'var(--gr-cream)',
      paddingTop: 70, paddingBottom: 0,
    }}>
      {/* Header */}
      <div style={{ padding: '8px 22px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
        <button style={{
          width: 36, height: 36, borderRadius: 12, border: 0,
          background: '#fff', color: 'var(--gr-ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><I.chevL/></button>
        <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--gr-line)', position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '40%', background: 'var(--gr-coral)', borderRadius: 3 }}/>
        </div>
        <span style={{ fontSize: 12, color: 'var(--gr-muted)' }}>2 / 5</span>
      </div>

      {/* Title */}
      <div style={{ padding: '28px 28px 0' }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--gr-coral)', letterSpacing: '.08em', textTransform: 'uppercase' }}>Bước 2 · eKYC</div>
        <h1 style={{
          margin: '8px 0 6px', fontSize: 28, lineHeight: 1.15, fontWeight: 700, letterSpacing: '-0.01em',
          textWrap: 'balance',
        }}>Quét CCCD gắn chip<br/>để xác minh nhanh</h1>
        <p style={{ margin: 0, color: 'var(--gr-muted)', fontSize: 14, lineHeight: 1.5 }}>
          Đưa CCCD vào khung. Hệ thống tự đọc thông tin trong ~30 giây.
        </p>
      </div>

      {/* Viewfinder */}
      <div style={{ padding: '24px 28px 0', position: 'relative' }}>
        <div style={{
          position: 'relative', height: 220, borderRadius: 22, overflow: 'hidden',
          background: 'linear-gradient(180deg, #2A1F18 0%, #1A1612 100%)',
        }}>
          {/* CCCD mock */}
          <div style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%,-50%) rotate(-3deg)',
            width: 240, height: 150, borderRadius: 14,
            background: 'linear-gradient(135deg, #F2B544 0%, #E04E39 100%)',
            padding: 12, color: '#fff', fontSize: 9,
            boxShadow: '0 12px 24px rgba(0,0,0,.4)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ fontWeight: 700, fontSize: 10, lineHeight: 1.1 }}>CỘNG HOÀ XÃ HỘI<br/>CHỦ NGHĨA VIỆT NAM</div>
              <div style={{ width: 16, height: 16, borderRadius: 3, background: 'rgba(255,255,255,.4)' }}/>
            </div>
            <div style={{ marginTop: 14, fontSize: 7, opacity: .9 }}>CĂN CƯỚC CÔNG DÂN</div>
            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
              <div style={{ width: 38, height: 48, borderRadius: 4, background: 'rgba(0,0,0,.25)' }}/>
              <div style={{ flex: 1, fontSize: 7, lineHeight: 1.5 }}>
                <div>Họ tên: NGUYEN VAN HUNG</div>
                <div>Ngày sinh: 12/05/1995</div>
                <div>Số: 0790•••••420</div>
              </div>
            </div>
          </div>

          {/* corners */}
          {[0,1,2,3].map(i => {
            const [t, l] = [Math.floor(i/2), i%2];
            return (
              <div key={i} style={{
                position: 'absolute',
                ...(t ? { bottom: 16 } : { top: 16 }),
                ...(l ? { right: 16 } : { left: 16 }),
                width: 28, height: 28,
                borderTop: t ? 0 : '3px solid #F2B544',
                borderBottom: t ? '3px solid #F2B544' : 0,
                borderLeft: l ? 0 : '3px solid #F2B544',
                borderRight: l ? '3px solid #F2B544' : 0,
                borderRadius: l ? (t ? '0 0 8px 0' : '0 8px 0 0') : (t ? '0 0 0 8px' : '8px 0 0 0'),
              }}/>
            );
          })}

          {/* status */}
          <div style={{
            position: 'absolute', bottom: 16, left: 16, right: 16,
            display: 'flex', alignItems: 'center', gap: 8,
            background: 'rgba(31,138,91,.95)', color: '#fff',
            padding: '8px 12px', borderRadius: 12, fontSize: 12, fontWeight: 500,
          }}>
            <div style={{
              width: 16, height: 16, borderRadius: '50%', background: '#fff',
              color: '#1F8A5B', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><I.check/></div>
            Đã nhận diện · đang đọc chip NFC…
          </div>
        </div>
      </div>

      {/* checklist */}
      <div style={{ padding: '20px 28px 0' }}>
        {[
          ['Nhận diện khuôn CCCD', true],
          ['Đọc thông tin (OCR)', true],
          ['Xác minh chip NFC', false],
          ['So khớp ảnh chân dung', false],
        ].map(([t, on]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
            <div style={{
              width: 20, height: 20, borderRadius: '50%',
              background: on ? 'var(--gr-jade)' : 'var(--gr-line)',
              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{on && <I.check/>}</div>
            <span style={{ fontSize: 14, color: on ? 'var(--gr-ink)' : 'var(--gr-muted)' }}>{t}</span>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '0 24px 36px' }}>
        <div style={{
          padding: '10px 14px', borderRadius: 12, background: '#fff',
          border: '1px solid var(--gr-line-2)', display: 'flex', alignItems: 'center', gap: 10,
          marginBottom: 14, fontSize: 12, color: 'var(--gr-muted)',
        }}>
          <I.shield/> Dữ liệu được mã hoá end-to-end · NAPAS, Bộ Công an
        </div>
        <button className="gr-btn" style={{ width: '100%' }}>Tiếp tục → quét khuôn mặt</button>
      </div>
    </div>
  );
}

// ─── 2. DISCOVER / HOME ────────────────────────────────────────
function ScrDiscover() {
  const props = [
    {
      id: 1, name: 'Villa Phú Quốc 01', loc: 'Bãi Trường, Phú Quốc',
      tag: 'Nghỉ dưỡng', value: 8e9, sold: 612, total: 800,
      irr: 14.2, ai: 82, days: 12, hot: true,
      img: 'villa · ocean view',
    },
    {
      id: 2, name: 'Office HCMC Q1', loc: '14 Lê Lợi, Quận 1',
      tag: 'Thương mại', value: 32e9, sold: 1840, total: 3200,
      irr: 11.8, ai: 76, days: 8,
      img: 'office tower',
    },
    {
      id: 3, name: 'Shophouse HN Cầu Giấy', loc: 'Trần Thái Tông, HN',
      tag: 'Thương mại', value: 12e9, sold: 980, total: 1200,
      irr: 12.5, ai: 79, days: 5, hot: true,
      img: 'shophouse facade',
    },
  ];

  return (
    <div className="gr gr-noscroll" style={{
      width: '100%', minHeight: '100%', background: 'var(--gr-cream)',
      paddingTop: 60, paddingBottom: 120,
    }}>
      {/* Header */}
      <div style={{ padding: '12px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <GMark size={36}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>Xin chào, anh Hùng 👋</div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 1 }}>Ví GoRealty <span className="gr-num">100.000.000đ</span></div>
        </div>
        <button style={{
          width: 40, height: 40, borderRadius: 14, border: '1px solid var(--gr-line-2)',
          background: '#fff', position: 'relative', color: 'var(--gr-ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I.bell/>
          <span style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: '50%', background: 'var(--gr-coral)' }}/>
        </button>
      </div>

      {/* Search */}
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          height: 46, padding: '0 14px',
          background: '#fff', border: '1px solid var(--gr-line-2)',
          borderRadius: 14, color: 'var(--gr-muted)',
        }}>
          <I.search/>
          <span style={{ fontSize: 14, flex: 1 }}>Tìm BĐS, mã, khu vực…</span>
          <I.filter/>
        </div>
      </div>

      {/* Hero promo */}
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{
          position: 'relative', borderRadius: 20, overflow: 'hidden',
          background: 'linear-gradient(135deg, #1A1612 0%, #3A2E27 100%)',
          color: '#fff', padding: '18px 18px 16px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <span className="gr-pill saffron" style={{ background: 'rgba(242,181,68,.2)', color: '#F2B544' }}>
              <I.spark/> IPO HOT
            </span>
            <span style={{ fontSize: 11, color: 'rgba(255,255,255,.6)' }}>Khoá trong 12 ngày</span>
          </div>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.01em' }}>Villa Phú Quốc 01</div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,.7)', marginTop: 2 }}>IRR dự kiến 14,2%/năm · 8 tỷ · 800 phần hùn</div>
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ flex: 1, height: 5, borderRadius: 3, background: 'rgba(255,255,255,.15)', overflow: 'hidden' }}>
              <div style={{ width: '76%', height: '100%', background: 'linear-gradient(90deg, #F2B544, #E04E39)' }}/>
            </div>
            <span className="gr-num" style={{ fontSize: 12, fontWeight: 600 }}>612/800</span>
          </div>
        </div>
      </div>

      {/* Filter tabs */}
      <div style={{ display: 'flex', gap: 8, padding: '18px 20px 0', overflowX: 'auto' }} className="gr-noscroll">
        {[['Tất cả', true], ['🌴 Nghỉ dưỡng'], ['🏢 Thương mại'], ['🏘 Shophouse'], ['🌱 Đất nền']].map(([t, on]) => (
          <button key={t} className={`gr-tab ${on ? 'on' : ''}`} style={{ flexShrink: 0 }}>{t}</button>
        ))}
      </div>

      {/* Property list */}
      <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {props.map(p => (
          <div key={p.id} className="gr-card" style={{ boxShadow: 'var(--gr-shadow-sm)' }}>
            <PropImg label={p.img} height={140}>
              <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6 }}>
                <span className="gr-pill" style={{ background: 'rgba(255,255,255,.92)', color: 'var(--gr-ink)' }}>{p.tag}</span>
                {p.hot && <span className="gr-pill coral"><I.flame/> HOT</span>}
              </div>
              <div style={{ position: 'absolute', top: 12, right: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,.92)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gr-ink)',
                }}><I.heart/></div>
              </div>
            </PropImg>
            <div style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--gr-muted)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <I.mapPin/> {p.loc}
                  </div>
                </div>
                <AIScore score={p.ai}/>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>Giá trị</div>
                  <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }} className="gr-num">{fmtShort(p.value)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>IRR dự kiến</div>
                  <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2, color: 'var(--gr-jade)' }} className="gr-num">{p.irr}%/năm</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>Còn lại</div>
                  <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }} className="gr-num">{p.days} ngày</div>
                </div>
              </div>

              <div style={{ marginTop: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 6 }}>
                  <span style={{ color: 'var(--gr-muted)' }}>Đã bán <b className="gr-num" style={{ color: 'var(--gr-ink)' }}>{p.sold}</b>/{p.total} phần hùn</span>
                  <span className="gr-num" style={{ fontWeight: 600 }}>{Math.round((p.sold/p.total)*100)}%</span>
                </div>
                <div className="gr-bar"><i style={{ width: `${(p.sold/p.total)*100}%` }}/></div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <TabBar active="home"/>
    </div>
  );
}

// ─── 3. PROPERTY DETAIL ────────────────────────────────────────
function ScrProperty() {
  return (
    <div className="gr gr-noscroll" style={{
      width: '100%', minHeight: '100%', background: 'var(--gr-cream)',
      paddingBottom: 112,
    }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 320 }}>
        <PropImg label="3d tour · villa phú quốc" height={320}>
          {/* status bar overlay buttons */}
          <div style={{ position: 'absolute', top: 56, left: 16, right: 16, display: 'flex', justifyContent: 'space-between' }}>
            <button style={{
              width: 38, height: 38, borderRadius: 12, border: 0,
              background: 'rgba(255,255,255,.92)', backdropFilter: 'blur(8px)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><I.chevL/></button>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ width: 38, height: 38, borderRadius: 12, border: 0, background: 'rgba(255,255,255,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.heart/></button>
              <button style={{ width: 38, height: 38, borderRadius: 12, border: 0, background: 'rgba(255,255,255,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><I.message/></button>
            </div>
          </div>
          {/* media tabs at bottom of hero */}
          <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', gap: 8 }}>
            {[['3D tour', I.cube, true], ['Drone', I.drone], ['Ảnh', null], ['Bản đồ', null]].map(([t, Ic, on], i) => (
              <span key={i} className={`gr-pill ${on ? 'dark' : ''}`} style={{
                background: on ? 'var(--gr-ink)' : 'rgba(255,255,255,.92)',
                color: on ? '#fff' : 'var(--gr-ink)', height: 30,
              }}>{Ic && <Ic/>}{t}</span>
            ))}
            <span style={{ flex: 1 }}/>
            <span className="gr-pill" style={{ background: 'rgba(255,255,255,.92)', color: 'var(--gr-ink)' }}>1/24</span>
          </div>
        </PropImg>
      </div>

      {/* Title block */}
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
          <span className="gr-pill saffron">🌴 Nghỉ dưỡng</span>
          <span className="gr-pill coral"><I.flame/> 76% đã bán</span>
          <span className="gr-pill jade"><I.check/> SPV pháp lý</span>
        </div>
        <h1 style={{ margin: '4px 0 4px', fontSize: 24, fontWeight: 700, letterSpacing: '-0.01em' }}>Villa Phú Quốc 01</h1>
        <div style={{ fontSize: 13, color: 'var(--gr-muted)', display: 'flex', alignItems: 'center', gap: 5 }}>
          <I.mapPin/> Bãi Trường, Phú Quốc · 320m² · 4 phòng ngủ
        </div>
      </div>

      {/* Key stats card */}
      <div style={{ padding: '16px 20px 0' }}>
        <div className="gr-card" style={{ padding: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>Giá trị BĐS</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginTop: 2 }} className="gr-num">8,0 tỷ</div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)', marginTop: 2 }}>10tr / phần hùn × 800</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>IRR dự kiến</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginTop: 2, color: 'var(--gr-jade)' }} className="gr-num">14,2%</div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)', marginTop: 2 }}>~7% cổ tức + 8% lãi vốn</div>
            </div>
          </div>
          <hr className="gr-hr" style={{ margin: '14px 0' }}/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <div>
              <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>AI Score</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                <AIScore score={82} size={36}/>
                <span style={{ fontSize: 11, color: 'var(--gr-jade)', fontWeight: 600 }}>Tốt</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>Đóng IPO</div>
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }} className="gr-num">12 ngày</div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>NĐT tham gia</div>
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }} className="gr-num">284</div>
            </div>
          </div>
        </div>
      </div>

      {/* Progress with FOMO */}
      <div style={{ padding: '14px 20px 0' }}>
        <div className="gr-card" style={{ padding: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 8 }}>
            <span style={{ color: 'var(--gr-muted)' }}>Tiến độ huy động</span>
            <span className="gr-num" style={{ fontWeight: 700 }}>6,12 / 8,0 tỷ</span>
          </div>
          <div className="gr-bar" style={{ height: 8 }}><i style={{ width: '76.5%' }}/></div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--gr-muted)', marginTop: 6 }}>
            <span>612/800 phần hùn đã bán</span>
            <span style={{ color: 'var(--gr-coral)', fontWeight: 600 }}>Còn 188 phần</span>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, padding: '18px 20px 12px', overflowX: 'auto' }} className="gr-noscroll">
        {[['Tổng quan', true], ['Tài chính'], ['Pháp lý'], ['Đội ngũ'], ['Rủi ro']].map(([t, on]) => (
          <button key={t} className={`gr-tab ${on ? 'on' : ''}`} style={{ flexShrink: 0 }}>{t}</button>
        ))}
      </div>

      {/* Overview content */}
      <div style={{ padding: '0 20px' }}>
        <div className="gr-card" style={{ padding: 16 }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>Giới thiệu</div>
          <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: 'var(--gr-ink-2)' }}>
            Villa 4 phòng ngủ tại Bãi Trường, Phú Quốc. Chủ sở hữu (Chị Mai) cần thanh khoản trong 2 tháng nên đưa lên GoRealty IPO. <b>Property Manager</b>: Holm Property — đã vận hành 12 villa khu vực, công suất TB 78%.
          </p>
          <hr className="gr-hr" style={{ margin: '14px 0' }}/>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              ['Diện tích', '320 m²'], ['Phòng ngủ', '4'],
              ['Đã xây', '2022'], ['Pháp lý', 'Sổ hồng riêng'],
              ['Doanh thu thuê', '600tr/năm'], ['Công suất', '78%'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>{k}</div>
                <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Trust card */}
        <div className="gr-card" style={{ padding: 14, marginTop: 12, background: 'linear-gradient(135deg, #FDF6EC 0%, #FCEFD0 100%)', border: '1px solid #F0E4D2' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <I.shield/>
            <span style={{ fontSize: 13, fontWeight: 700 }}>5 lớp giám sát độc lập</span>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['Vietcombank lưu ký', 'KPMG audit', 'YKVN tư vấn luật', 'Savills định giá', 'GSXD độc lập'].map(t => (
              <span key={t} className="gr-pill" style={{ background: 'rgba(255,255,255,.7)' }}><I.check/>{t}</span>
            ))}
          </div>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '14px 20px 28px',
        background: 'linear-gradient(180deg, rgba(253,246,236,0) 0%, var(--gr-cream) 30%)',
      }}>
        <div className="gr-card" style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--gr-shadow-md)' }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, color: 'var(--gr-muted)' }}>1 phần hùn từ</div>
            <div style={{ fontSize: 18, fontWeight: 800 }} className="gr-num">10.000.000đ</div>
          </div>
          <button className="gr-btn" style={{ paddingInline: 24 }}>Mua phần hùn</button>
        </div>
      </div>
    </div>
  );
}

// ─── 4. BUY FLOW (bottom sheet) ────────────────────────────────
function ScrBuy() {
  const qty = 10;
  const perShare = 10_000_000;
  const total = qty * perShare;
  return (
    <div className="gr" style={{
      width: '100%', height: '100%',
      background: 'rgba(26,22,18,.55)',
      paddingTop: 60, position: 'relative',
    }}>
      {/* dimmed background hint */}
      <div style={{ padding: '20px 20px 0', opacity: .55 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#fff' }}>
          <I.chevL/> <span style={{ fontSize: 13 }}>Villa Phú Quốc 01</span>
        </div>
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'var(--gr-cream)',
        borderRadius: '28px 28px 0 0',
        padding: '12px 20px 32px',
        boxShadow: '0 -20px 60px rgba(0,0,0,.3)',
      }}>
        {/* drag handle */}
        <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--gr-line)', margin: '0 auto 16px' }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <PropImg label="" height={48} style={{ width: 48, borderRadius: 12 }}/>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Mua phần hùn</div>
            <div style={{ fontSize: 12, color: 'var(--gr-muted)' }}>Villa Phú Quốc 01 · 10tr/phần</div>
          </div>
        </div>

        {/* Stepper */}
        <div className="gr-card" style={{ padding: 16 }}>
          <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>Số phần hùn muốn mua</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8 }}>
            <button style={{
              width: 40, height: 40, borderRadius: 12, border: '1px solid var(--gr-line)',
              background: '#fff', fontSize: 22, fontWeight: 600, color: 'var(--gr-ink)',
            }}>−</button>
            <div style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.02em' }} className="gr-num">{qty}</div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)', marginTop: -2 }}>phần hùn</div>
            </div>
            <button style={{
              width: 40, height: 40, borderRadius: 12, border: 0,
              background: 'var(--gr-ink)', color: '#fff', fontSize: 22, fontWeight: 600,
            }}>+</button>
          </div>
          {/* slider rail */}
          <div style={{ marginTop: 12, position: 'relative', height: 28 }}>
            <div style={{ position: 'absolute', left: 0, right: 0, top: 12, height: 4, borderRadius: 2, background: 'var(--gr-line)' }}/>
            <div style={{ position: 'absolute', left: 0, top: 12, width: '12%', height: 4, borderRadius: 2, background: 'var(--gr-coral)' }}/>
            <div style={{
              position: 'absolute', left: 'calc(12% - 10px)', top: 4, width: 20, height: 20,
              borderRadius: '50%', background: '#fff', border: '3px solid var(--gr-coral)',
              boxShadow: '0 2px 6px rgba(224,78,57,.3)',
            }}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--gr-muted)', marginTop: 4 }}>
            <span>1</span><span>20</span><span>50</span><span>80 (max)</span>
          </div>
        </div>

        {/* Cost breakdown */}
        <div className="gr-card" style={{ padding: '4px 16px', marginTop: 12 }}>
          <div className="gr-kv"><span className="gr-kv-k">Đơn giá</span><span className="gr-kv-v gr-num">10.000.000đ</span></div>
          <div className="gr-kv"><span className="gr-kv-k">Số phần</span><span className="gr-kv-v gr-num">× 10</span></div>
          <div className="gr-kv"><span className="gr-kv-k">Phí giao dịch (0%)</span><span className="gr-kv-v gr-num" style={{ color: 'var(--gr-jade)' }}>Miễn phí</span></div>
          <div className="gr-kv" style={{ borderTop: '1px solid var(--gr-line)', paddingTop: 14 }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Tổng thanh toán</span>
            <span style={{ fontSize: 20, fontWeight: 800 }} className="gr-num">{fmt(total)}đ</span>
          </div>
        </div>

        {/* Expected returns highlight */}
        <div style={{
          marginTop: 12, padding: 14, borderRadius: 16,
          background: 'linear-gradient(135deg, #DFF1E5 0%, #FCEFD0 100%)',
          border: '1px solid #DAE9CC',
        }}>
          <div style={{ fontSize: 11, color: 'var(--gr-ink-2)', fontWeight: 600, letterSpacing: '.04em', textTransform: 'uppercase' }}>Dự kiến năm 1</div>
          <div style={{ display: 'flex', gap: 16, marginTop: 6, alignItems: 'baseline' }}>
            <div>
              <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--gr-jade)' }} className="gr-num">+14,1tr</div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>tổng lợi nhuận</div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: 'rgba(31,138,91,.25)' }}/>
            <div>
              <div style={{ fontSize: 16, fontWeight: 700 }} className="gr-num">~625K/tháng</div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)' }}>cổ tức cho thuê</div>
            </div>
          </div>
        </div>

        {/* Payment + CTA */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px',
            background: '#fff', borderRadius: 14, border: '1px solid var(--gr-line-2)', flex: 1,
          }}>
            <div style={{ width: 26, height: 26, borderRadius: 6, background: '#007934', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 11 }}>VCB</div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--gr-muted)', lineHeight: 1 }}>Vietcombank</div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>•••• 4420</div>
            </div>
            <I.chevR style={{ marginLeft: 'auto', color: 'var(--gr-muted)' }}/>
          </div>
        </div>
        <button className="gr-btn" style={{ width: '100%', marginTop: 12 }}>Trượt để xác nhận · {fmt(total)}đ</button>
      </div>
    </div>
  );
}

Object.assign(window, { ScrOnboarding, ScrDiscover, ScrProperty, ScrBuy });