// Leaderboards — top brands + top KOLs side-by-side.

const TOP_BRANDS = [
  { name: "Siam Cosmetic",     country: "🇹🇭", gmv: 4.28, share: 17.3, trend: [3.2, 3.4, 3.7, 3.9, 4.0, 4.1, 4.2, 4.3], grow: "+18%" },
  { name: "Krua Phuket",       country: "🇹🇭", gmv: 2.84, share: 11.5, trend: [2.0, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8], grow: "+14%" },
  { name: "Khao Hom Thai",     country: "🇹🇭", gmv: 1.96, share:  7.9, trend: [1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.96], grow: "+22%" },
  { name: "Sanya Traders",     country: "🇨🇳", gmv: 1.42, share:  5.7, trend: [0.6, 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.42], grow: "+38%" },
  { name: "Riang Mai Coffee",  country: "🇹🇭", gmv: 1.18, share:  4.8, trend: [0.8, 0.9, 0.95, 1.0, 1.05, 1.1, 1.15, 1.18], grow: "+9%" },
  { name: "Lanna Tea",         country: "🇹🇭", gmv: 0.62, share:  2.5, trend: [0.4, 0.5, 0.55, 0.55, 0.58, 0.6, 0.6, 0.62], grow: "+4%" },
];

const TOP_KOLS = [
  { name: "Li Wei",     loc: "🇨🇳 Beijing",  followers: "8.4M", gmv: 1.84, conversion: 4.8, trend: [1.2, 1.3, 1.4, 1.45, 1.55, 1.7, 1.8, 1.84] },
  { name: "Chen Mei",   loc: "🇨🇳 Guangzhou",followers: "5.4M", gmv: 0.98, conversion: 4.1, trend: [0.6, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 0.98] },
  { name: "Wang Jing",  loc: "🇨🇳 Shanghai", followers: "1.8M", gmv: 0.62, conversion: 3.6, trend: [0.4, 0.45, 0.5, 0.52, 0.55, 0.58, 0.6, 0.62] },
  { name: "Lin Xia",    loc: "🇹🇭 Bangkok",  followers: "920K", gmv: 0.41, conversion: 3.2, trend: [0.2, 0.25, 0.28, 0.3, 0.34, 0.36, 0.4, 0.41] },
  { name: "Zhao Tao",   loc: "🇨🇳 Chengdu",  followers: "1.2M", gmv: 0.34, conversion: 3.2, trend: [0.3, 0.31, 0.32, 0.33, 0.32, 0.33, 0.34, 0.34] },
  { name: "Ploy Saisuda",loc:"🇹🇭 Bangkok",  followers: "380K", gmv: 0.18, conversion: 5.4, trend: [0.04, 0.06, 0.08, 0.1, 0.12, 0.14, 0.16, 0.18] },
];

function Leaderboards() {
  return (
    <div>
      <div className="page-head">
        <h1>Leaderboards</h1>
        <span className="count">Top revenue contributors · MTD</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn secondary"><i className="ti ti-share"></i>Share with board</button>
        </div>
      </div>

      <div className="reveal-gate">
        <i className="ti ti-shield-lock" style={{fontSize:18}}></i>
        <div>
          <strong style={{fontWeight:500}}>Drill-down is audited.</strong>
          <span style={{marginLeft:6}}>Opening a brand or KOL row writes an `EXEC_DRILL` entry with reason code. Available reasons: board prep, strategic review, due diligence.</span>
        </div>
      </div>

      <div className="dash-grid" style={{gridTemplateColumns: "1fr 1fr"}}>
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Top brands by GMV</h3>
              <span className="label-caps">{TOP_BRANDS.length} of 247</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th style={{width:30}}>#</th>
                  <th>Brand</th>
                  <th style={{width:120}}>30-day trend</th>
                  <th style={{textAlign:"right"}}>GMV</th>
                  <th style={{textAlign:"right", width:80}}>Share</th>
                  <th style={{textAlign:"right", width:80}}>Growth</th>
                </tr>
              </thead>
              <tbody>
                {TOP_BRANDS.map((b, i) => (
                  <tr key={b.name}>
                    <td className="data-mono" style={{color:"var(--on-surface-variant)"}}>{i+1}</td>
                    <td><span style={{marginRight:8}}>{b.country}</span>{b.name}</td>
                    <td><Sparkline data={b.trend} width={100} height={20} mini={true} area={false} /></td>
                    <td className="num">${b.gmv.toFixed(2)}M</td>
                    <td className="num">{b.share}%</td>
                    <td className="num" style={{color:"var(--color-text-on-success)"}}>{b.grow}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Top KOLs by GMV</h3>
              <span className="label-caps">{TOP_KOLS.length} of 142</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th style={{width:30}}>#</th>
                  <th>KOL</th>
                  <th style={{width:120}}>30-day trend</th>
                  <th style={{textAlign:"right"}}>GMV</th>
                  <th style={{textAlign:"right", width:100}}>Followers</th>
                  <th style={{textAlign:"right", width:60}}>CTR</th>
                </tr>
              </thead>
              <tbody>
                {TOP_KOLS.map((k, i) => (
                  <tr key={k.name}>
                    <td className="data-mono" style={{color:"var(--on-surface-variant)"}}>{i+1}</td>
                    <td>
                      <div className="org-name">{k.name}</div>
                      <div className="org-id" style={{fontFamily:"var(--font-sans)"}}>{k.loc}</div>
                    </td>
                    <td><Sparkline data={k.trend} width={100} height={20} mini={true} area={false} /></td>
                    <td className="num">${k.gmv.toFixed(2)}M</td>
                    <td className="num">{k.followers}</td>
                    <td className="num">{k.conversion}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Leaderboards = Leaderboards;