// SalesHome — Alex Chen's daily landing. Pipeline kanban + KPIs + week activities.

const SALES_PIPELINE = {
  lead: [
    { name: "Riang Mai Coffee", city: "Chiang Mai", value: 24000, stage_days: 3 },
    { name: "Phuket Spice Co",  city: "Phuket",     value: 18000, stage_days: 1 },
    { name: "Bangkok Beauty",   city: "Bangkok",    value: 42000, stage_days: 6 },
  ],
  demo: [
    { name: "Northern Silk",    city: "Chiang Rai", value: 28000, stage_days: 4 },
    { name: "Thai Wellness",    city: "Bangkok",    value: 56000, stage_days: 2 },
  ],
  proposal: [
    { name: "Krua Phuket",      city: "Phuket",     value: 84000, stage_days: 8 },
    { name: "Hat Yai Fresh",    city: "Hat Yai",    value: 32000, stage_days: 11 },
  ],
  closing: [
    { name: "Khao Hom Premium", city: "Surin",      value: 120000, stage_days: 5 },
  ],
};

const SALES_KPIS = [
  { lbl: "MRR booked · MTD", val: "฿412K", trend: [180, 220, 260, 300, 340, 370, 400, 412], tone: "success", foot: "+24% vs target" },
  { lbl: "Active deals",      val: "24",    trend: [16, 18, 20, 22, 23, 24, 24, 24],        tone: "success", foot: "+3 this week" },
  { lbl: "Conversion · 30d",  val: "32%",   trend: [25, 26, 28, 29, 30, 31, 32, 32],        tone: "success", foot: "+4pp vs Q4" },
  { lbl: "Demos this week",   val: "5",     trend: [2, 2, 3, 3, 4, 4, 5, 5],                tone: "primary", foot: "2 with C-level" },
];

function SalesHome() {
  return (
    <div>
      <div className="page-head">
        <h1>Good morning, Alex</h1>
        <span className="count">Mar 18, 2026 · Sales · TH-east territory</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Weekly report</button>
          <button className="btn primary"><i className="ti ti-plus"></i>Add producer</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        {SALES_KPIS.map((k, i) => (
          <div key={i} className="kpi">
            <div className="head"><span className="lbl">{k.lbl}</span></div>
            <div className="val">{k.val}</div>
            <Sparkline data={k.trend} width={240} height={28} tone={k.tone} />
            <div className="foot">{k.foot}</div>
          </div>
        ))}
      </div>

      <div className="panel">
        <div className="panel-head">
          <h3>My pipeline</h3>
          <span className="label-caps">{Object.values(SALES_PIPELINE).flat().length} deals · ฿424K weighted</span>
        </div>
        <div className="pipeline-board">
          {[
            { code: "lead",     name: "Lead",     dot: "var(--on-surface-variant)" },
            { code: "demo",     name: "Demo",     dot: "var(--color-text-on-info)" },
            { code: "proposal", name: "Proposal", dot: "var(--color-text-on-warning)" },
            { code: "closing",  name: "Closing",  dot: "var(--thaihao-primary)" },
          ].map(col => (
            <div key={col.code} className="pipeline-col">
              <div className="col-head">
                <span className="live-dot" style={{background: col.dot, width: 8, height: 8}}></span>
                <span className="col-name">{col.name}</span>
                <span className="col-count">{SALES_PIPELINE[col.code].length}</span>
              </div>
              {SALES_PIPELINE[col.code].map((d, i) => (
                <div key={i} className="deal-card">
                  <div className="name">{d.name}</div>
                  <div className="meta">{d.city} · {d.stage_days}d in stage</div>
                  <div className="val">฿{d.value.toLocaleString()} MRR</div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div className="dash-grid" style={{marginTop: 16}}>
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head"><h3>This week's demos</h3></div>
            <table>
              <thead>
                <tr><th>Producer</th><th>Contact</th><th style={{width:120}}>When</th><th style={{width:90}}>Stage</th></tr>
              </thead>
              <tbody>
                <tr><td>Northern Silk</td><td className="body-sm" style={{color:"var(--on-surface-variant)"}}>Khun Ananda</td><td className="data-mono">Tue 14:00</td><td><span className="pill info">Demo</span></td></tr>
                <tr><td>Thai Wellness</td><td className="body-sm" style={{color:"var(--on-surface-variant)"}}>Khun Pakorn</td><td className="data-mono">Wed 10:30</td><td><span className="pill info">Demo</span></td></tr>
                <tr><td>Krua Phuket</td><td className="body-sm" style={{color:"var(--on-surface-variant)"}}>Khun Surin</td><td className="data-mono">Thu 09:00</td><td><span className="pill warning">Proposal</span></td></tr>
                <tr><td>Khao Hom Premium</td><td className="body-sm" style={{color:"var(--on-surface-variant)"}}>Khun Somchai</td><td className="data-mono">Fri 15:00</td><td><span className="pill primary">Closing</span></td></tr>
                <tr><td>Phuket Spice Co</td><td className="body-sm" style={{color:"var(--on-surface-variant)"}}>Khun Mali</td><td className="data-mono">Fri 16:30</td><td><span className="pill neutral">Lead</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="dash-right">
          <div className="panel">
            <div className="panel-head"><h3>Target attainment · Q1</h3><span className="label-caps">฿412K of ฿600K</span></div>
            <div className="pipe-dist">
              <div className="pipe-row"><div className="pname">New MRR</div><div className="track"><div className="fill success" style={{width:"68%"}}></div></div><div className="pval">68%</div></div>
              <div className="pipe-row"><div className="pname">New tenants</div><div className="track"><div className="fill primary" style={{width:"82%"}}></div></div><div className="pval">82%</div></div>
              <div className="pipe-row"><div className="pname">Conversion</div><div className="track"><div className="fill info" style={{width:"94%"}}></div></div><div className="pval">94%</div></div>
              <div className="pipe-row"><div className="pname">Demo→close ratio</div><div className="track"><div className="fill warning" style={{width:"58%"}}></div></div><div className="pval">58%</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SalesHome = SalesHome;