// dashboard.jsx — premium Kyndrid Intelligence dashboard mock used in heroes
// and the Intelligence product page. Built from wf.jsx primitives.

function Dashboard({ w = 640, compact = false }) {
  const pad = compact ? 16 : 20;
  return (
    <div style={{ width: w, background: '#fff', borderRadius: 16, border: `1px solid ${WF.line}`, boxShadow: '0 24px 60px -20px rgba(16,24,40,.28), 0 8px 24px -12px rgba(16,24,40,.12)', overflow: 'hidden', fontFamily: WF.font }}>
      {/* topbar */}
      <div style={{ height: 46, borderBottom: `1px solid ${WF.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', background: WF.fill2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ width: 24, height: 24, borderRadius: 7, background: WF.navy, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="15" height="16" viewBox="-1 -2 40 44" fill="none" overflow="hidden">
              <rect x="0" y="0" width="11" height="40" rx="5.5" fill="#0DAD9F"/>
              <polygon points="15,25 39,9 33,-1 9,15" fill="#fff"/>
              <polygon points="9,25 33,41 39,31 15,15" fill="#fff"/>
              <circle cx="12" cy="20" r="5.5" fill="#0DAD9F"/>
            </svg>
          </span>
          <span style={{ fontSize: 13, fontWeight: 700, color: WF.navy }}>Kyndrid <span style={{ fontWeight: 600, color: WF.slate2 }}>Intelligence</span></span>
          <span style={{ fontSize: 11.5, color: WF.mute }}>· Riverside Group</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: WF.slate2, padding: '4px 10px', border: `1px solid ${WF.line2}`, borderRadius: 6 }}>Today ▾</span>
          <span style={{ width: 24, height: 24, borderRadius: 12, background: WF.fill }} />
        </div>
      </div>
      <div style={{ display: 'flex' }}>
        {/* sidebar */}
        {!compact && (
          <div style={{ width: 132, borderRight: `1px solid ${WF.line}`, padding: '14px 10px', background: WF.fill2, display: 'flex', flexDirection: 'column', gap: 3 }}>
            {[['Overview', true], ['Sales', false], ['Inventory', false], ['Labour', false], ['Compliance', false], ['Suppliers', false], ['Menu', false]].map(([n, a]) => (
              <span key={n} style={{ fontSize: 12, fontWeight: a ? 700 : 600, color: a ? WF.navy : WF.slate2, background: a ? '#fff' : 'transparent', border: a ? `1px solid ${WF.line}` : '1px solid transparent', borderRadius: 7, padding: '7px 10px' }}>{n}</span>
            ))}
          </div>
        )}
        {/* main */}
        <div style={{ flex: 1, padding: pad, display: 'flex', flexDirection: 'column', gap: 12, background: '#fff' }}>
          {/* metric row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
            <Metric label="Sales today" value="£8,420" delta="6.2%" chart={<Bars data={[40, 55, 48, 62, 58, 75, 82]} h={26} />} />
            <Metric label="Gross margin" value="64.1%" delta="1.4%" chart={<Bars data={[60, 58, 62, 61, 63, 64, 64]} h={26} color={WF.line} />} />
            <Metric label="Labour cost" value="28.6%" delta="2.1%" deltaUp={false} alert="amber" chart={<Bars data={[24, 26, 25, 27, 28, 29, 29]} h={26} color={WF.line} />} />
            <Metric label="Compliance" value="92" chart={<div style={{ height: 26, display: 'flex', alignItems: 'center' }}><div style={{ flex: 1, height: 6, borderRadius: 3, background: WF.line, overflow: 'hidden' }}><div style={{ width: '92%', height: '100%', background: WF.accent }} /></div></div>} />
          </div>
          {/* second row: trend + recommendations */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 10 }}>
            <div style={{ border: `1px solid ${WF.line}`, borderRadius: 12, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: WF.navy }}>Sales vs demand forecast</span>
                <span style={{ fontSize: 10.5, color: WF.mute }}>7 days</span>
              </div>
              <Line pts={[30, 45, 38, 60, 52, 72, 64, 88]} h={72} w={300} />
            </div>
            <div style={{ border: `1px solid ${WF.accentSoft}`, borderRadius: 12, padding: 14, background: '#fbfdff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: WF.accent }} />
                <span style={{ fontSize: 12, fontWeight: 700, color: WF.navy }}>Recommendations</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {['Reorder draught lines before Fri', 'Cut Tue evening labour by 1 shift', 'Menu item #14 margin slipping'].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ marginTop: 2, color: WF.accent }}><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 8h9M9 4l4 4-4 4" /></svg></span>
                    <span style={{ fontSize: 11.5, lineHeight: 1.35, color: WF.slate }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* third row: alerts table */}
          <div style={{ border: `1px solid ${WF.line}`, borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 14px', borderBottom: `1px solid ${WF.line}` }}>
              <span style={{ fontSize: 12, fontWeight: 700, color: WF.navy }}>Needs attention</span>
              <span style={{ fontSize: 10.5, color: WF.mute }}>4 items</span>
            </div>
            {[['Low stock', 'Semi-skimmed milk · 2 sites', 'red'], ['Compliance', 'Fridge temp log overdue', 'amber'], ['Supplier spend', 'Brakes +14% vs budget', 'amber']].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 70px', gap: 10, alignItems: 'center', padding: '9px 14px', borderTop: i ? `1px solid ${WF.fill}` : 'none' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 600, color: WF.slate }}><span style={{ width: 6, height: 6, borderRadius: 3, background: r[2] === 'red' ? WF.red : WF.amber }} />{r[0]}</span>
                <span style={{ fontSize: 11.5, color: WF.slate2 }}>{r[1]}</span>
                <span style={{ fontSize: 10.5, fontWeight: 700, color: WF.accent, textAlign: 'right' }}>Review →</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });