function ExecutiveScreen({ setRoute }) {
  const stateVals = Object.fromEntries(STATES.map(s => [s.code, s.value]));

  const monthLabels = ["Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar"];
  const revActual = [180,192,205,198,215,224,232,240,252,268,275,288];
  const revTarget = [200,205,210,215,220,225,230,240,245,255,265,280];

  const catData = [
    { label: "IT & Electronics", value: 428 },
    { label: "Medical & Pharma", value: 312 },
    { label: "Infrastructure", value: 268 },
    { label: "Defence Supplies", value: 214 },
    { label: "Services & Consulting", value: 186 },
    { label: "Other", value: 118 },
  ];

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Executive Dashboard</div>
          <div className="screen-sub">FY 2025–26 · Q2 · Last refreshed 2 minutes ago · <span style={{ color: 'var(--ok)' }}>All systems operational</span></div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="calendar"/>Q2 FY26</button>
          <button className="btn"><Icon name="filter"/>Filters</button>
          <button className="btn"><Icon name="refresh"/>Refresh</button>
          <button className="btn"><Icon name="share"/>Share</button>
          <button className="btn primary"><Icon name="download"/>Export</button>
        </div>
      </div>

      {/* AI insight strip */}
      <div className="ai-strip" style={{ marginBottom: 14 }}>
        <div className="glyph"><Icon name="sparkles"/></div>
        <div style={{ flex: 1 }}>
          <div className="title">Executive summary generated by VyaparBI Copilot <span className="tag primary">RAG · 3 sources</span></div>
          <div className="body">Q2 procurement is <b>tracking 12.4% above last quarter</b>, driven by Karnataka (+18.4%) and Delhi NCR (+22.1%). <b>Punjab shows an anomaly</b> — tender activity down 2.1% pending MCC review. Prophet forecast: Q4 revenue <b>₹3,480 Cr (±3.2%)</b>. <a href="#" style={{ color: 'var(--primary)' }}>See 3 recommended actions →</a></div>
          <div className="actions">
            <button className="btn sm"><Icon name="lightbulb" size={12}/>Explain</button>
            <button className="btn sm"><Icon name="eye" size={12}/>View sources</button>
            <button className="btn sm" onClick={() => setRoute('copilot')}><Icon name="sparkles" size={12}/>Ask follow-up</button>
          </div>
        </div>
      </div>

      {/* KPI row */}
      <div className="grid g-4" style={{ marginBottom: 14 }}>
        {KPIS.map(k => (
          <div className="card kpi" key={k.id}>
            <div className="label">{k.label}</div>
            <div className="value">{k.value}<span className="unit">{k.unit}</span></div>
            <div className={`delta ${k.up ? 'up' : 'down'}`}>
              <Icon name={k.up ? 'trending' : 'trendingDown'} size={13}/>
              {fmtPct(k.delta)} <span className="vs">{k.vs}</span>
            </div>
            <div className="foot">
              <Sparkline data={k.series} w={220} h={40} stroke={k.up ? 'var(--ok)' : 'var(--danger)'} fill={k.up ? 'var(--ok)' : 'var(--danger)'} area strokeWidth={1.75}/>
            </div>
          </div>
        ))}
      </div>

      {/* Row: revenue trend + donut */}
      <div className="grid" style={{ gridTemplateColumns: '2fr 1fr', marginBottom: 14 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Revenue Collection — Actual vs Target</h3>
              <div className="sub">₹ Crore · Monthly · FY 2025–26</div>
            </div>
            <div className="card-actions">
              <div className="hstack" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--primary)' }}/>Actual</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--accent)' }}/>Target</span>
              </div>
              <button className="icon-btn"><Icon name="moreH"/></button>
            </div>
          </div>
          <div className="card-body">
            <LineChart series={[{ name: "Actual", data: revActual }, { name: "Target", data: revTarget }]} labels={monthLabels} h={240} colors={["var(--primary)", "var(--accent)"]}/>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>GeM Spend by Category</h3>
            <button className="icon-btn"><Icon name="moreH"/></button>
          </div>
          <div className="card-body">
            <Donut data={catData} w={140} centerLabel="₹1,526" centerSub="Cr · Q2"/>
          </div>
        </div>
      </div>

      {/* Row: State map + department table */}
      <div className="grid" style={{ gridTemplateColumns: '1.1fr 1.4fr', marginBottom: 14 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Procurement by State</h3>
              <div className="sub">Click a state to drill down · Q2 FY26</div>
            </div>
            <button className="btn sm" onClick={() => setRoute('geo')}><Icon name="external" size={12}/>Open Map</button>
          </div>
          <div className="card-body" style={{ display: 'flex', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <IndiaMap values={stateVals} h={340}/>
            </div>
            <div style={{ width: 130, flexShrink: 0 }}>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600, marginBottom: 6 }}>Top 5</div>
              {STATES.slice(0, 5).map((s, i) => (
                <div key={s.code} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 0', borderBottom: i < 4 ? '1px solid var(--border)' : 0 }}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', width: 16 }}>{i + 1}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11.5, fontWeight: 500, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>₹{s.value.toFixed(0)} Cr</div>
                  </div>
                  <span className={`mono`} style={{ fontSize: 10, color: s.delta >= 0 ? 'var(--ok)' : 'var(--danger)', fontWeight: 600 }}>{fmtPct(s.delta)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <h3>Top Departments by Procurement Value</h3>
              <div className="sub">Q2 FY26 · Live GeM feed</div>
            </div>
            <div className="card-actions">
              <span className="tag ok"><span className="live-dot"/>Live</span>
              <button className="icon-btn"><Icon name="moreH"/></button>
            </div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>Department / PSU</th>
                <th className="num">Value</th>
                <th className="num">Orders</th>
                <th className="num">Change</th>
                <th style={{ width: 90 }}></th>
              </tr></thead>
              <tbody>
                {DEPARTMENTS.map((d, i) => (
                  <tr key={i}>
                    <td>
                      <div style={{ fontWeight: 500 }}>{d.name}</div>
                    </td>
                    <td className="num" style={{ fontWeight: 600 }}>₹{d.value.toFixed(1)} Cr</td>
                    <td className="num">{fmtNum(d.orders)}</td>
                    <td className="num" style={{ color: d.delta >= 0 ? 'var(--ok)' : 'var(--danger)', fontWeight: 600 }}>{fmtPct(d.delta)}</td>
                    <td><Sparkline data={[42,48,45,52,58,55,62,68].map(v => v + i * 3)} w={80} h={22} stroke={d.delta >= 0 ? 'var(--ok)' : 'var(--danger)'}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Bottom: recent tenders + insights */}
      <div className="grid" style={{ gridTemplateColumns: '1.6fr 1fr' }}>
        <div className="card">
          <div className="card-head">
            <div>
              <h3>Recent Tenders</h3>
              <div className="sub">Live from GeM Portal · GEM/2026</div>
            </div>
            <button className="btn sm"><Icon name="external" size={12}/>Open GeM Portal</button>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr>
                <th>Tender ID</th>
                <th>Buyer</th>
                <th>Category</th>
                <th className="num">Value</th>
                <th className="num">Bids</th>
                <th>Status</th>
                <th>Closes</th>
              </tr></thead>
              <tbody>
                {RECENT_TENDERS.map((t, i) => (
                  <tr key={i}>
                    <td className="mono" style={{ fontSize: 11.5, color: 'var(--primary)' }}>{t.id}</td>
                    <td>{t.dept}</td>
                    <td style={{ color: 'var(--ink-2)' }}>{t.cat}</td>
                    <td className="num" style={{ fontWeight: 600 }}>₹{t.value} Cr</td>
                    <td className="num">{t.bids}</td>
                    <td><span className={`tag ${t.status === 'Live' ? 'ok' : t.status === 'L1 Selected' ? 'primary' : 'warn'}`}>{t.status}</span></td>
                    <td className="mono" style={{ fontSize: 11.5, color: t.closes === 'closed' ? 'var(--ink-3)' : 'var(--ink-2)' }}>{t.closes}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>AI Auto-Insights</h3>
            <span className="tag primary"><Icon name="sparkles" size={10}/>3 new</span>
          </div>
          <div className="card-body vstack" style={{ gap: 10 }}>
            {AI_INSIGHTS.map((ins, i) => (
              <div key={i} style={{ padding: 10, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)' }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <div style={{ width: 22, height: 22, borderRadius: 5, background: ins.severity === 'warn' ? 'var(--accent-tint)' : 'var(--primary-tint)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name={ins.kind === 'trend' ? 'trending' : ins.kind === 'anomaly' ? 'alert' : 'lightbulb'} size={12} style={{ color: ins.severity === 'warn' ? 'var(--accent-2)' : 'var(--primary)' }}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                      <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>{ins.title}</span>
                    </div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{ins.body}</div>
                    <div style={{ marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
                      <span className="tag">{ins.tag}</span>
                      <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>· Confidence 92%</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.ExecutiveScreen = ExecutiveScreen;