// LiveDashboard — pixel-faithful rebuild of the ShopPanel dashboard screenshot,
// with real animated data: tweening KPI numbers, rising/falling bars, spawning
// activity-feed entries, pulsing sync indicators, ticking mini-sparkline.
//
// Rendered at the screenshot's native 2555×1437 coords using transform:scale
// so that the outer HeroMonitor can size it fluidly.

// ========== Primitives ==========

const useTweenedValue = (values, { duration = 1200, period = 1800, startDelay = 400 } = {}) => {
  const [display, setDisplay] = React.useState(values[0]);
  const idxRef = React.useRef(0);
  React.useEffect(() => {
    let raf, startTime, timeout, fromVal, toVal;
    const step = (now) => {
      const t = Math.min(1, (now - startTime) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setDisplay(fromVal + (toVal - fromVal) * eased);
      if (t < 1) raf = requestAnimationFrame(step);
      else timeout = setTimeout(advance, period);
    };
    const advance = () => {
      fromVal = values[idxRef.current];
      idxRef.current = (idxRef.current + 1) % values.length;
      toVal = values[idxRef.current];
      startTime = performance.now();
      raf = requestAnimationFrame(step);
    };
    timeout = setTimeout(advance, startDelay);
    return () => { cancelAnimationFrame(raf); clearTimeout(timeout); };
  }, [values, duration, period, startDelay]);
  return display;
};

const TweenNumber = ({ values, format = n => Math.round(n), style, duration, period, startDelay }) => {
  const v = useTweenedValue(values, { duration, period, startDelay });
  return <span style={style}>{format(v)}</span>;
};

// Tiny sparkline
const Sparkline = ({ color, width = 120, height = 28, points = 14, periodMs = 1400 }) => {
  const [data, setData] = React.useState(() =>
    Array.from({length: points}, (_, i) => 0.3 + Math.sin(i/2) * 0.2 + Math.random()*0.3)
  );
  React.useEffect(() => {
    const t = setInterval(() => {
      setData(prev => [...prev.slice(1), 0.25 + Math.random() * 0.7]);
    }, periodMs);
    return () => clearInterval(t);
  }, [periodMs]);
  const path = data.map((v, i) => {
    const x = (i / (points - 1)) * width;
    const y = height - v * height;
    return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1);
  }).join(' ');
  const area = path + ` L${width},${height} L0,${height} Z`;
  const id = `spark-${color.replace('#','')}`;
  return (
    <svg width={width} height={height} style={{display:'block',overflow:'visible'}}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.35" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#${id})`} />
      <path d={path} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

// Rising/falling animated bar
const LiveBar = ({ color, baseHeight = 0.4, variance = 0.5, periodMs = 1800, delay = 0, widthPx = 40, maxHeightPx = 60 }) => {
  const [h, setH] = React.useState(baseHeight);
  React.useEffect(() => {
    let i = 0;
    const first = setTimeout(() => {
      setH(baseHeight + Math.random() * variance);
      const t = setInterval(() => setH(baseHeight + Math.random() * variance), periodMs);
      first._int = t;
    }, delay);
    return () => { clearTimeout(first); if (first._int) clearInterval(first._int); };
  }, [baseHeight, variance, periodMs, delay]);
  return (
    <div style={{
      width: widthPx,
      height: h * maxHeightPx,
      background: `linear-gradient(180deg, ${color}, ${color}aa 60%, ${color}44)`,
      borderRadius: '3px 3px 1px 1px',
      transition: `height ${periodMs * 0.85}ms cubic-bezier(0.22,1,0.36,1)`,
      alignSelf: 'flex-end'
    }} />
  );
};

const PulseDot = ({ color = '#34d399', size = 7 }) => (
  <span style={{
    display:'inline-block',width:size,height:size,borderRadius:9999,
    background:color,boxShadow:`0 0 7px ${color}`,
    animation:'sp-pulse 1.4s ease-in-out infinite'
  }} />
);

// Progress gradient bar (Stock Alerts)
const GradientProgressBar = ({ width = 340, height = 10 }) => (
  <div style={{
    width, height, borderRadius: 6, overflow: 'hidden',
    background: 'linear-gradient(90deg, #ef4444 0%, #f97316 30%, #eab308 55%, #22c55e 100%)',
    position: 'relative'
  }}>
    <div style={{
      position:'absolute', top:-3, width: 3, height: height + 6,
      background:'#fff', boxShadow:'0 0 8px rgba(255,255,255,0.8)',
      borderRadius: 2,
      animation: 'sp-stock-marker 4s ease-in-out infinite'
    }} />
  </div>
);

// Icon helper (Material Symbols)
const Icon = ({ name, size = 18, color = 'currentColor', fill = 0 }) => (
  <span className="material-symbols-outlined" style={{
    fontSize: size, color, lineHeight: 1,
    fontVariationSettings: `'FILL' ${fill}, 'wght' 400, 'GRAD' 0, 'opsz' ${size}`
  }}>{name}</span>
);

// ========== Sidebar ==========
const Sidebar = () => {
  const nav = [
    { icon: 'dashboard', label: 'Dashboard', active: true },
    { icon: 'receipt_long', label: 'Orders' },
    { icon: 'inventory_2', label: 'Products' },
    { icon: 'price_change', label: 'Price Rules' },
    { icon: 'description', label: 'Invoices' },
    { icon: 'local_shipping', label: 'Shipping' },
    { icon: 'chat', label: 'Messages' },
    { icon: 'smart_toy', label: 'AI Agents' },
    { icon: 'bolt', label: 'Automations' },
    { icon: 'credit_card', label: 'Credits' },
    { icon: 'settings', label: 'Settings', chevron: true },
  ];
  return (
    <aside style={{
      width: 180, flexShrink: 0,
      background: '#121114',
      borderRight: '1px solid #1f1e22',
      display: 'flex', flexDirection: 'column',
      padding: '14px 10px 12px'
    }}>
      {/* Logo */}
      <div style={{display:'flex',alignItems:'center',gap:8,padding:'4px 8px 14px',borderBottom:'1px solid #1f1e22',marginBottom:12}}>
        <div style={{width:26,height:26,borderRadius:5,background:'linear-gradient(135deg,#FF6B00,#FF3D00)',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 0 10px rgba(255,107,0,0.4)'}}>
          <Icon name="storefront" size={16} color="#fff" fill={1} />
        </div>
        <div>
          <div style={{fontFamily:'"Space Grotesk", sans-serif',fontSize:14,fontWeight:900,color:'#FF6B00',letterSpacing:'-0.03em',lineHeight:1}}>ShopPanel</div>
          <div style={{fontFamily:'ui-monospace,monospace',fontSize:7,color:'#6b5d5a',marginTop:2,letterSpacing:'0.05em'}}>BIFAMO TASARIM<br/>LIMITED ŞIRKETI</div>
        </div>
      </div>

      {/* FX ticker mini-widget */}
      <div style={{padding:'8px 8px',background:'#16151a',borderRadius:4,border:'1px solid #1f1e22',marginBottom:10}}>
        {[
          {code:'USD', values:[44.12, 44.85, 45.23, 44.67], pct:[0.18,0.22,0.28,0.19]},
          {code:'EUR', values:[52.78, 53.03, 53.41, 52.91], pct:[0.24,0.31,0.36,0.28]},
          {code:'ALTIN', values:[7012, 7036, 7058, 7029], pct:[2.72,2.89,3.05,2.78]},
        ].map((r,i) => (
          <div key={i} style={{display:'flex',alignItems:'center',justifyContent:'space-between',fontSize:8,fontFamily:'ui-monospace,monospace',padding:'2px 0',borderBottom: i<2 ? '1px solid #1f1e22':'none'}}>
            <span style={{color:'#8a7a76',width:28}}>{r.code}</span>
            <TweenNumber values={r.values} format={n => n.toFixed(2).replace('.',',')} style={{color:'#e5e1e4',fontWeight:700}} startDelay={i*300} />
            <TweenNumber values={r.pct} format={n => '+'+n.toFixed(2)+'%'} style={{color:'#22c55e',fontWeight:700}} startDelay={i*300} />
          </div>
        ))}
      </div>
      <div style={{padding:'6px 8px',background:'#16151a',borderRadius:4,border:'1px solid #1f1e22',marginBottom:14,fontSize:8,fontFamily:'ui-monospace,monospace',color:'#8a7a76',display:'flex',alignItems:'center',gap:6}}>
        <Icon name="calendar_today" size={10} color="#FF6B00" />
        <div style={{flex:1}}>
          <div>17 Nis 2026</div>
          <div style={{display:'flex',justifyContent:'space-between',color:'#e5e1e4',fontWeight:700,marginTop:1}}><span>USD</span><span>44,47</span></div>
          <div style={{display:'flex',justifyContent:'space-between',color:'#e5e1e4',fontWeight:700}}><span>EUR</span><span>52,70</span></div>
          <div style={{display:'flex',justifyContent:'space-between',color:'#e5e1e4',fontWeight:700}}><span>ALTIN</span><span>6.852</span></div>
        </div>
      </div>

      {/* Nav */}
      <nav style={{display:'flex',flexDirection:'column',gap:2,flex:1}}>
        {nav.map((n,i) => (
          <div key={i} style={{
            display:'flex',alignItems:'center',gap:10,padding:'7px 10px',borderRadius:5,
            background: n.active ? 'linear-gradient(90deg,rgba(255,107,0,0.12),transparent)' : 'transparent',
            borderLeft: n.active ? '2px solid #FF6B00' : '2px solid transparent',
            color: n.active ? '#FF6B00' : '#8a7a76',
            fontSize:11, fontWeight: n.active ? 700 : 500, letterSpacing:'-0.01em'
          }}>
            <Icon name={n.icon} size={14} color={n.active ? '#FF6B00' : '#8a7a76'} fill={n.active ? 1 : 0} />
            <span style={{flex:1}}>{n.label}</span>
            {n.chevron && <Icon name="expand_more" size={12} color="#8a7a76" />}
          </div>
        ))}
      </nav>

      {/* Storage / plan block */}
      <div style={{padding:'8px',background:'#16151a',borderRadius:4,border:'1px solid #1f1e22',marginBottom:8}}>
        <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',marginBottom:4}}>PLAN</div>
        <div style={{display:'flex',alignItems:'center',gap:6}}>
          <PulseDot color="#22c55e" size={5} />
          <span style={{fontSize:9,color:'#e5e1e4',fontWeight:700}}>SHOPPANEL</span>
        </div>
      </div>
      <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',padding:'6px 8px',letterSpacing:'0.08em'}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span>CREDITS</span><span>24.7k</span></div>
        <div style={{display:'flex',justifyContent:'space-between'}}><span>SIGN IN</span><Icon name="arrow_forward" size={9} /></div>
      </div>

      {/* User */}
      <div style={{display:'flex',alignItems:'center',gap:8,padding:'8px',borderTop:'1px solid #1f1e22',marginTop:6}}>
        <div style={{width:20,height:20,borderRadius:9999,background:'linear-gradient(135deg,#FF6B00,#FF3D00)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:9,fontWeight:900,color:'#fff'}}>F</div>
        <span style={{fontSize:10,color:'#e5e1e4',flex:1}}>Fatih Ülkar</span>
        <Icon name="logout" size={12} color="#6b5d5a" />
      </div>
    </aside>
  );
};

// ========== TopBar ==========
const TopBar = () => (
  <div style={{
    height: 48, flexShrink: 0, display:'flex', alignItems:'center', gap:20,
    padding:'0 20px', background:'transparent', position:'relative', zIndex: 5
  }}>
    <div style={{fontFamily:'"Space Grotesk", sans-serif',fontSize:14,fontWeight:900,color:'#FF6B00',letterSpacing:'0.02em',textTransform:'uppercase'}}>Dashboard Overview</div>
    <div style={{flex:1,maxWidth:340,position:'relative'}}>
      <div style={{display:'flex',alignItems:'center',gap:6,padding:'6px 10px',background:'#16151a',borderRadius:5,border:'1px solid #1f1e22'}}>
        <Icon name="search" size={13} color="#6b5d5a" />
        <span style={{fontSize:10,color:'#6b5d5a',flex:1}}>Sipariş, ürün, fatura ara…</span>
        <span style={{fontSize:8,color:'#6b5d5a',padding:'2px 5px',background:'#201f23',borderRadius:3,fontFamily:'ui-monospace,monospace'}}>⌘K</span>
      </div>
    </div>
    <div style={{flex:1}} />
    <div style={{position:'relative'}}>
      <Icon name="notifications" size={15} color="#8a7a76" />
      <span style={{position:'absolute',top:-2,right:-2,width:6,height:6,borderRadius:9999,background:'#ef4444',boxShadow:'0 0 6px rgba(239,68,68,0.6)'}} />
    </div>
    <div style={{display:'flex',alignItems:'center',gap:7}}>
      <div style={{width:22,height:22,borderRadius:9999,background:'linear-gradient(135deg,#FF6B00,#FF3D00)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:900,color:'#fff'}}>F</div>
      <span style={{fontSize:10,color:'#e5e1e4',fontWeight:600}}>Fatih Ülkar</span>
    </div>
  </div>
);

// ========== Top KPI cards ==========

// Card 1 — Pending Orders with bar chart
const PendingOrdersCard = () => {
  const bars = [
    {h: 0.35, color:'#FF6B00', delay: 0},
    {h: 0.68, color:'#FF6B00', delay: 200},
    {h: 0.52, color:'#FF6B00', delay: 400},
    {h: 0.82, color:'#FF6B00', delay: 600},
    {h: 0.45, color:'#FF8C33', delay: 800, highlight: true},
    {h: 0.38, color:'#FF8C33', delay: 1000, highlight: true},
    {h: 0.22, color:'#FF8C33', delay: 1200, highlight: true},
  ];
  return (
    <div style={kpiCardStyle}>
      <div style={kpiHeaderStyle}>
        <span>PENDING ORDERS</span>
        <Icon name="pending_actions" size={14} color="#8a7a76" />
      </div>
      <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between',gap:12,marginTop:6,flex:1}}>
        <div style={{display:'flex',flexDirection:'column'}}>
          <TweenNumber
            values={[12, 23, 47, 34, 58, 19, 41, 28]}
            style={{fontFamily:'Inter',fontSize:38,fontWeight:900,color:'#FF6B00',letterSpacing:'-0.04em',lineHeight:1,textShadow:'0 0 12px rgba(255,107,0,0.35)'}}
          />
          <div style={{fontSize:8,color:'#6b5d5a',marginTop:4,fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>2 MARKET</div>
          <div style={{fontSize:8,color:'#FF8C33',marginTop:2,fontWeight:700,fontFamily:'ui-monospace,monospace'}}>3 YENI</div>
          <div style={{marginTop:8}}>
            <Sparkline color="#FF6B00" width={80} height={18} points={16} periodMs={1200} />
          </div>
          <div style={{fontSize:7,color:'#FF6B00',marginTop:2,fontFamily:'ui-monospace,monospace',fontWeight:700}}>+38%</div>
        </div>
        <div style={{display:'flex',gap:4,alignItems:'flex-end',height:76}}>
          {bars.map((b,i) => (
            <LiveBar key={i}
              color={b.color}
              baseHeight={b.h - 0.15}
              variance={0.3}
              periodMs={1500 + i*100}
              delay={b.delay}
              widthPx={14}
              maxHeightPx={70}
            />
          ))}
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em',marginTop:4}}>
        <span>150% HEDEF</span>
        <span>↑ 12.4% HAFTA</span>
      </div>
    </div>
  );
};

// Card 2 — Week Revenue with two marketplace rows
const WeekRevenueCard = () => (
  <div style={kpiCardStyle}>
    <div style={kpiHeaderStyle}>
      <span>WEEK REVENUE</span>
      <Icon name="payments" size={14} color="#8a7a76" />
    </div>
    <div style={{display:'flex',alignItems:'baseline',gap:2,marginTop:6}}>
      <span style={{fontFamily:'Inter',fontSize:34,fontWeight:900,color:'#FF6B00',letterSpacing:'-0.04em',lineHeight:1,textShadow:'0 0 12px rgba(255,107,0,0.35)'}}>₺</span>
      <TweenNumber
        values={[4812, 5257, 5603, 5124, 5988, 6210, 5433]}
        format={n => Math.round(n).toLocaleString('tr-TR')}
        style={{fontFamily:'Inter',fontSize:34,fontWeight:900,color:'#FF6B00',letterSpacing:'-0.04em',lineHeight:1,textShadow:'0 0 12px rgba(255,107,0,0.35)'}}
      />
    </div>
    <div style={{fontSize:8,color:'#6b5d5a',marginTop:2,fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>BUGÜN · +₺842</div>
    <div style={{marginTop:6}}>
      <Sparkline color="#FF6B00" width={150} height={22} points={20} periodMs={1100} />
    </div>
    <div style={{marginTop:'auto',paddingTop:8,display:'flex',flexDirection:'column',gap:5}}>
      <div style={{display:'flex',alignItems:'center',gap:6}}>
        <span style={{width:5,height:5,borderRadius:9999,background:'#FF6B00'}} />
        <span style={{fontSize:9,color:'#e5e1e4',fontWeight:700,flex:1}}>Trendyol</span>
        <TweenNumber values={[4012, 4257, 4403, 4188]} format={n=>'₺'+Math.round(n).toLocaleString('tr-TR')} style={{fontSize:9,color:'#e5e1e4',fontFamily:'ui-monospace,monospace',fontWeight:700}} startDelay={300} />
      </div>
      <div style={{height:3,background:'#1f1e22',borderRadius:2,overflow:'hidden'}}>
        <div style={{height:'100%',width:'78%',background:'linear-gradient(90deg,#FF6B00,#FF8C33)',animation:'sp-bar-grow 1.2s ease-out'}} />
      </div>
      <div style={{display:'flex',alignItems:'center',gap:6,marginTop:2}}>
        <span style={{width:5,height:5,borderRadius:9999,background:'#a855f7'}} />
        <span style={{fontSize:9,color:'#e5e1e4',fontWeight:700,flex:1}}>n11</span>
        <TweenNumber values={[912, 1012, 1144, 988]} format={n=>'₺'+Math.round(n).toLocaleString('tr-TR')} style={{fontSize:9,color:'#e5e1e4',fontFamily:'ui-monospace,monospace',fontWeight:700}} startDelay={600} />
      </div>
      <div style={{height:3,background:'#1f1e22',borderRadius:2,overflow:'hidden'}}>
        <div style={{height:'100%',width:'22%',background:'linear-gradient(90deg,#a855f7,#c084fc)',animation:'sp-bar-grow 1.4s ease-out'}} />
      </div>
    </div>
  </div>
);

// Card 3 — Stock Alerts (three numbers + gradient bar)
const StockAlertsCard = () => (
  <div style={kpiCardStyle}>
    <div style={kpiHeaderStyle}>
      <span>STOCK ALERTS</span>
      <Icon name="warning" size={14} color="#ef4444" />
    </div>
    <div style={{fontSize:8,color:'#6b5d5a',marginTop:2,fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>3 KATEGORI</div>
    <div style={{display:'flex',gap:12,marginTop:10,alignItems:'baseline'}}>
      {[
        {values:[112, 146, 158, 131, 149], color:'#ef4444', label:'CRITICAL'},
        {values:[178, 192, 203, 184, 196], color:'#fbbf24', label:'LOW'},
        {values:[124, 137, 148, 129, 142], color:'#34d399', label:'OK'},
      ].map((k,i) => (
        <div key={i} style={{flex:1}}>
          <TweenNumber values={k.values} style={{fontFamily:'Inter',fontSize:30,fontWeight:900,color:k.color,letterSpacing:'-0.04em',lineHeight:1,textShadow:`0 0 10px ${k.color}66`}} startDelay={i*300} />
          <div style={{fontSize:7,color:'#6b5d5a',marginTop:3,fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em'}}>{k.label}</div>
        </div>
      ))}
    </div>
    <div style={{marginTop:'auto',paddingTop:8}}>
      <GradientProgressBar width={285} height={8} />
      <div style={{display:'flex',justifyContent:'space-between',fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',marginTop:4,letterSpacing:'0.06em'}}>
        <span>RISK</span>
        <span>MID</span>
        <span>SAFE</span>
      </div>
    </div>
  </div>
);

// Card 4 — Shipments (7 big, timeline)
const ShipmentsCard = () => {
  const steps = [
    { label: 'PREP',    icon: 'inventory_2', color:'#34d399', filled:true },
    { label: 'PACK',    icon: 'package_2',   color:'#34d399', filled:true },
    { label: 'SHIP',    icon: 'local_shipping', color:'#34d399', filled:true },
    { label: 'OUT',     icon: 'outbox',      color:'#34d399', filled:true },
    { label: 'DELIV',   icon: 'check_circle',color:'#34d399', filled:true },
  ];
  return (
    <div style={kpiCardStyle}>
      <div style={kpiHeaderStyle}>
        <span>SHIPMENTS</span>
        <Icon name="local_shipping" size={14} color="#34d399" />
      </div>
      <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:6}}>
        <TweenNumber
          values={[4, 7, 9, 6, 11, 8]}
          style={{fontFamily:'Inter',fontSize:34,fontWeight:900,color:'#34d399',letterSpacing:'-0.04em',lineHeight:1,textShadow:'0 0 12px rgba(52,211,153,0.4)'}}
        />
        <span style={{fontSize:9,color:'#8a7a76',fontFamily:'ui-monospace,monospace'}}>/ gün</span>
      </div>
      <div style={{fontSize:8,color:'#6b5d5a',marginTop:2,fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>YOLDA BUGÜN</div>
      <div style={{display:'flex',alignItems:'center',marginTop:12}}>
        {steps.map((s,i) => (
          <React.Fragment key={i}>
            <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:3,position:'relative'}}>
              <div style={{
                width:22,height:22,borderRadius:9999,
                background: s.filled ? `${s.color}22` : '#1f1e22',
                border: `1.5px solid ${s.filled ? s.color : '#3a3940'}`,
                display:'flex',alignItems:'center',justifyContent:'center',
                boxShadow: s.filled ? `0 0 8px ${s.color}55` : 'none',
                animation: i === 4 ? 'sp-ship-pulse 2s ease-in-out infinite' : 'none'
              }}>
                <Icon name={s.icon} size={11} color={s.filled ? s.color : '#6b5d5a'} fill={i < 4 ? 1 : 0} />
              </div>
            </div>
            {i < steps.length - 1 && (
              <div style={{flex:1,height:1.5,background:'linear-gradient(90deg,#34d399,#34d399)',margin:'0 2px',position:'relative',overflow:'hidden'}}>
                <div style={{position:'absolute',top:0,left:0,height:'100%',width:'30%',background:'linear-gradient(90deg,transparent,#fff,transparent)',animation:`sp-ship-sweep 3s ease-in-out ${i*0.3}s infinite`}} />
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
      <div style={{marginTop:'auto',display:'flex',alignItems:'center',gap:7,paddingTop:8,borderTop:'1px solid #1f1e22'}}>
        <PulseDot color="#34d399" size={5} />
        <span style={{fontSize:9,color:'#e5e1e4',fontWeight:700}}>Mehmet Özdoğu</span>
        <span style={{marginLeft:'auto',fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace'}}>TESLIM</span>
      </div>
    </div>
  );
};

// ========== System Overview mini cards ==========
const SystemMiniCard = ({ icon, values, label, color, delay }) => (
  <div style={{
    background:'#16151a',border:'1px solid #1f1e22',borderRadius:6,
    padding:'10px 12px',display:'flex',flexDirection:'column',gap:4,
    position:'relative',overflow:'hidden'
  }}>
    <div style={{position:'absolute',right:-10,top:-10,width:50,height:50,borderRadius:9999,background:`radial-gradient(circle,${color}22,transparent 70%)`}} />
    <Icon name={icon} size={14} color={color} fill={1} />
    <TweenNumber values={values} style={{fontFamily:'Inter',fontSize:24,fontWeight:900,color:color,letterSpacing:'-0.04em',lineHeight:1,textShadow:`0 0 10px ${color}55`}} startDelay={delay} />
    <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',fontWeight:700}}>{label}</div>
  </div>
);

// ========== Platform Connections Row ==========
const PlatformRow = () => {
  const platforms = [
    { name:'Trendyol',    color:'#FF6B00', status:'Connected · 4 acc', pct: 78 },
    { name:'Shopify',     color:'#22c55e', status:'Connected · 2 acc', pct: 62 },
    { name:'Hepsiburada', color:'#FF8C33', status:'Connected · 3 acc · 4 uyarı', pct: 45 },
    { name:'n11',         color:'#a855f7', status:'Connected · 1 acc',  pct: 22 },
  ];
  return (
    <div style={{background:'#16151a',border:'1px solid #1f1e22',borderRadius:6,padding:'12px 14px'}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
        <span style={{fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>PLATFORM CONNECTIONS</span>
        <span style={{fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>TÜM PAZARIYERLERI →</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:14}}>
        {platforms.map((p,i) => (
          <div key={i} style={{display:'flex',flexDirection:'column',gap:5,borderLeft:`2px solid ${p.color}`,paddingLeft:10}}>
            <div style={{display:'flex',alignItems:'center',gap:6}}>
              <span style={{fontSize:11,color:p.color,fontWeight:900,letterSpacing:'-0.02em'}}>{p.name}</span>
              <PulseDot color={p.color} size={4} />
            </div>
            <div style={{fontSize:8,color:'#8a7a76',fontFamily:'ui-monospace,monospace',letterSpacing:'0.04em'}}>{p.status}</div>
            <div style={{height:2,background:'#1f1e22',borderRadius:1,overflow:'hidden',marginTop:2}}>
              <div style={{height:'100%',width:p.pct+'%',background:p.color,boxShadow:`0 0 6px ${p.color}`,animation:'sp-bar-grow 1.5s ease-out'}} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ========== Right column: Activity Feed, User Activity, Sync ==========
const FEED_TEMPLATES = [
  { user:'Mustafa Demirmelen', action:'siparişi 4 dakika önce onayladı', color:'#34d399' },
  { user:'Nişantaşı Mağazası', action:'stok uyarısı verdi · 12 ürün', color:'#fbbf24' },
  { user:'Ayşegül K.', action:'yeni sipariş verdi · Trendyol', color:'#FF6B00' },
  { user:'Hepsiburada Sync', action:'tamamlandı · 847 ürün güncellendi', color:'#5de6ff' },
  { user:'Mehmet Özdoğu', action:'kargo yolladı · MNG', color:'#a855f7' },
];

const FeedEntry = ({ entry, age }) => {
  const opacity = Math.max(0, 1 - age * 0.18);
  const translate = age * 2;
  return (
    <div style={{
      display:'flex',alignItems:'flex-start',gap:8,padding:'6px 0',
      opacity, transform:`translateY(-${translate}px)`,
      transition:'opacity 0.5s, transform 0.5s',
      borderBottom:'1px solid #1a1920'
    }}>
      <span style={{width:6,height:6,borderRadius:9999,background:entry.color,boxShadow:`0 0 6px ${entry.color}`,marginTop:4,flexShrink:0}} />
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:9,color:'#e5e1e4',fontWeight:700,letterSpacing:'-0.01em'}}>{entry.user}</div>
        <div style={{fontSize:8,color:'#8a7a76',marginTop:1,fontFamily:'ui-monospace,monospace'}}>{entry.action}</div>
      </div>
    </div>
  );
};

const LiveFeed = ({ title, interval = 2400 }) => {
  const [entries, setEntries] = React.useState(() =>
    [0, 1].map((i) => ({ ...FEED_TEMPLATES[i % FEED_TEMPLATES.length], id: Math.random(), createdAt: Date.now() - i * 2000 }))
  );
  React.useEffect(() => {
    let i = 2;
    const t = setInterval(() => {
      setEntries(prev => {
        const next = [{...FEED_TEMPLATES[i % FEED_TEMPLATES.length], id: Math.random(), createdAt: Date.now()}, ...prev];
        return next.slice(0, 4);
      });
      i++;
    }, interval);
    return () => clearInterval(t);
  }, [interval]);
  return (
    <div style={{background:'#16151a',border:'1px solid #1f1e22',borderRadius:6,padding:'10px 12px',flex:1,display:'flex',flexDirection:'column',minHeight:0}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:6}}>
        <span style={{fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>{title}</span>
        <div style={{display:'flex',alignItems:'center',gap:4}}>
          <PulseDot color="#34d399" size={4} />
          <span style={{fontSize:7,color:'#34d399',fontFamily:'ui-monospace,monospace',fontWeight:700,letterSpacing:'0.06em'}}>LIVE</span>
        </div>
      </div>
      <div style={{flex:1,overflow:'hidden'}}>
        {entries.map((e, idx) => (
          <div key={e.id} style={{animation: idx === 0 ? 'sp-feed-in 0.5s ease-out' : 'none'}}>
            <FeedEntry entry={e} age={idx} />
          </div>
        ))}
      </div>
    </div>
  );
};

const UserActivity = () => (
  <div style={{background:'#16151a',border:'1px solid #1f1e22',borderRadius:6,padding:'10px 12px'}}>
    <div style={{fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700,marginBottom:8}}>USER ACTIVITY</div>
    <div style={{textAlign:'center',padding:'14px 0',fontSize:9,color:'#6b5d5a',fontFamily:'ui-monospace,monospace'}}>Henüz aktivite yok</div>
  </div>
);

// ========== Bottom status strip ==========
const StatusStrip = () => (
  <div style={{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'6px 20px', borderTop:'1px solid #1f1e22', background:'#0e0d11',
    fontSize:8,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'
  }}>
    <span>© 2026 ORANGE SHOPPANEL</span>
    <div style={{display:'flex',alignItems:'center',gap:14}}>
      <div style={{display:'flex',alignItems:'center',gap:5}}>
        <PulseDot color="#34d399" size={4} />
        <TweenNumber values={[2032, 2041, 2055, 2048]} format={n => 'LAST SYNC · ' + Math.floor(n/60) + ':' + String(Math.round(n%60)).padStart(2,'0')} style={{color:'#34d399',fontWeight:700}} />
      </div>
      <div style={{display:'flex',alignItems:'center',gap:5}}>
        <PulseDot color="#34d399" size={4} />
        <span style={{color:'#34d399',fontWeight:700}}>REALTIME · CANLI</span>
      </div>
    </div>
  </div>
);

// ========== AGENTS section ==========
const AgentCard = ({ icon, name, isConnected, stats, connections, accent = '#FF6B00' }) => {
  const [enabled, setEnabled] = React.useState(true);
  return (
    <div style={{
      flex:1, background:'#16151a', border:'1px solid #1f1e22', borderRadius:6,
      padding:'12px 14px', display:'flex', flexDirection:'column', gap:10, minWidth:0
    }}>
      {/* Header */}
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <div style={{
          width:26,height:26,borderRadius:5,background:'#201f23',
          display:'flex',alignItems:'center',justifyContent:'center',
          border:`1px solid ${accent}33`
        }}>
          <Icon name={icon} size={14} color={accent} fill={1} />
        </div>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:12,fontWeight:800,color:'#e5e1e4',letterSpacing:'-0.02em'}}>{name}</div>
          <div style={{display:'flex',alignItems:'center',gap:5,marginTop:2}}>
            <PulseDot color="#34d399" size={4} />
            <span style={{fontSize:8,color:'#34d399',fontWeight:700,fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em'}}>ACTIVE</span>
          </div>
        </div>
        <div style={{
          padding:'3px 6px',borderRadius:4,background:'#201f23',
          display:'flex',alignItems:'center',gap:3,fontSize:8,color:'#8a7a76',fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em',fontWeight:700,cursor:'pointer'
        }}>
          <span>DETAY</span>
          <Icon name="expand_more" size={10} color="#8a7a76" />
        </div>
        {/* Toggle */}
        <div onClick={()=>setEnabled(e=>!e)} style={{
          width:28,height:14,borderRadius:9999,
          background: enabled ? '#FF6B00' : '#3a3940',
          position:'relative',cursor:'pointer',
          boxShadow: enabled ? '0 0 10px rgba(255,107,0,0.45)' : 'none',
          transition:'background .2s, box-shadow .2s'
        }}>
          <div style={{
            position:'absolute', top:1, left: enabled ? 15 : 1,
            width:12,height:12,borderRadius:9999,background:'#fff',
            transition:'left .2s', boxShadow:'0 1px 3px rgba(0,0,0,0.4)'
          }} />
        </div>
      </div>

      {/* Model row */}
      <div style={{
        display:'flex',alignItems:'center',gap:7,padding:'7px 10px',
        background:'#0f0e12', borderRadius:5, border:'1px solid #1f1e22'
      }}>
        <span style={{width:5,height:5,borderRadius:9999,background:'#FF6B00',boxShadow:'0 0 6px rgba(255,107,0,0.6)'}} />
        <span style={{fontSize:10,color:'#e5e1e4',fontWeight:700,flex:1}}>Claude Sonnet</span>
        <span style={{fontSize:8,color:'#FF6B00',fontFamily:'ui-monospace,monospace',letterSpacing:'0.04em',fontStyle:'italic'}}>anthropic</span>
      </div>

      {/* Stats */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:7}}>
        {stats.map((s,i) => (
          <div key={i} style={{
            background:'#0f0e12',border:'1px solid #1f1e22',borderRadius:5,
            padding:'7px 9px',textAlign:'center'
          }}>
            {s.animate ? (
              <TweenNumber values={s.values} format={s.format || (n=>Math.round(n))}
                style={{fontFamily:'Inter',fontSize:15,fontWeight:900,color:'#e5e1e4',letterSpacing:'-0.03em',lineHeight:1}} startDelay={i*200} />
            ) : (
              <div style={{fontFamily:'Inter',fontSize:15,fontWeight:900,color:'#e5e1e4',letterSpacing:'-0.03em',lineHeight:1}}>{s.display}</div>
            )}
            <div style={{fontSize:6,color:'#6b5d5a',marginTop:3,fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>{s.label}</div>
          </div>
        ))}
      </div>

      {/* Connected / footer */}
      <div style={{display:'flex',flexDirection:'column',gap:5,marginTop:2}}>
        <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>CONNECTED</div>
        <div style={{display:'flex',gap:5,flexWrap:'wrap'}}>
          {connections.map((c,i) => (
            <span key={i} style={{
              padding:'3px 8px',borderRadius:3,fontSize:9,fontWeight:700,
              background:c.bg, color:c.fg, letterSpacing:'-0.01em'
            }}>{c.label}</span>
          ))}
        </div>
      </div>
      <div style={{
        display:'flex',alignItems:'center',gap:6,marginTop:'auto',paddingTop:8,
        borderTop:'1px solid #1f1e22',fontSize:8,color:'#6b5d5a',
        fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700
      }}>
        <Icon name="notes" size={10} color="#6b5d5a" />
        <span style={{flex:1}}>SYSTEM PROMPT</span>
        <Icon name="expand_more" size={10} color="#6b5d5a" />
      </div>
    </div>
  );
};

const AgentsSection = () => (
  <div>
    <div style={{display:'flex',gap:10}}>
      <AgentCard
        icon="forum"
        name="Message Agent"
        accent="#FF6B00"
        stats={[
          { animate:true, values:[5, 7, 12, 9, 14], label:'REPLIES' },
          { animate:true, values:[2400, 2812, 3104, 2648, 3012], format:n => (n/1000).toFixed(1)+'k', label:'TOKENS' },
          { animate:true, values:[0.02, 0.04, 0.03, 0.05, 0.02], format:n => '$'+n.toFixed(2), label:'COST' },
        ]}
        connections={[
          { label:'Trendyol', bg:'#FF6B00', fg:'#3a1800' },
          { label:'Shopify', bg:'#22c55e', fg:'#0e3b1a' },
        ]}
      />
      <AgentCard
        icon="notifications"
        name="Notification Agent"
        accent="#FF6B00"
        stats={[
          { animate:true, values:[1, 2, 1, 3, 1], label:'CHANNELS' },
          { animate:false, display:'Telegram', label:'PLATFORM' },
          { animate:false, display:'Aktif', label:'STATUS' },
        ]}
        connections={[
          { label:'Telegram', bg:'#38bdf8', fg:'#082f49' },
        ]}
      />
    </div>
  </div>
);

// ========== MEVCUT KURALLAR section ==========
const RulesSection = () => {
  const tabs = ['PAZARYERI','TÜMÜ 3','TRENDYOL 2','SHOPIFY 2','HEPSIBURADA 1','N11 1'];
  return (
    <div>
      {/* Tabs */}
      <div style={{display:'flex',alignItems:'center',gap:4,marginBottom:8}}>
        {tabs.map((t,i) => (
          <div key={i} style={{
            padding:'4px 9px',borderRadius:4,
            fontSize:8,fontWeight:700,fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',
            color: i===1 ? '#FF6B00' : '#6b5d5a',
            background: i===1 ? 'rgba(255,107,0,0.1)' : 'transparent',
            border: i===1 ? '1px solid rgba(255,107,0,0.35)' : '1px solid transparent',
            display:'flex',alignItems:'center',gap:4
          }}>
            {i===0 && <Icon name="category" size={10} color="#6b5d5a" />}
            {t}
          </div>
        ))}
      </div>

      {/* Rule row */}
      <div style={{
        background:'#16151a',border:'1px solid #1f1e22',borderRadius:6,padding:'12px 14px'
      }}>
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <div style={{width:12,height:12,borderRadius:3,border:'1.5px solid #3a3940',flexShrink:0}} />
          <div style={{
            width:32,height:32,borderRadius:6,background:'rgba(255,107,0,0.14)',
            border:'1px solid rgba(255,107,0,0.35)',
            display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,
            boxShadow:'0 0 12px rgba(255,107,0,0.2)'
          }}>
            <Icon name="attach_money" size={16} color="#FF6B00" fill={1} />
          </div>
          <div style={{minWidth:0}}>
            <div style={{fontFamily:'"Space Grotesk", sans-serif',fontSize:13,fontWeight:900,color:'#e5e1e4',letterSpacing:'-0.02em'}}>USD KUR KORUMASI</div>
            <div style={{fontSize:8,color:'#6b5d5a',marginTop:2,fontFamily:'ui-monospace,monospace',letterSpacing:'0.06em'}}>ID: RULE-7000-B</div>
          </div>

          {/* DURUM */}
          <div style={{display:'flex',flexDirection:'column',gap:3,marginLeft:14}}>
            <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>DURUM</div>
            <div style={{display:'flex',alignItems:'center',gap:6}}>
              <div style={{width:24,height:12,borderRadius:9999,background:'#22c55e',position:'relative',boxShadow:'0 0 8px rgba(34,197,94,0.5)'}}>
                <div style={{position:'absolute',top:1,left:13,width:10,height:10,borderRadius:9999,background:'#fff'}} />
              </div>
              <div style={{display:'flex',alignItems:'center',gap:4}}>
                <PulseDot color="#22c55e" size={5} />
                <span style={{fontSize:9,fontWeight:900,color:'#22c55e',letterSpacing:'-0.01em'}}>AKTIF</span>
              </div>
            </div>
          </div>

          {/* REFERANS */}
          <div style={{display:'flex',flexDirection:'column',gap:3,marginLeft:14}}>
            <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>REFERANS</div>
            <span style={{fontSize:11,fontWeight:900,color:'#e5e1e4',letterSpacing:'-0.01em',fontFamily:'ui-monospace,monospace'}}>USD/TRY</span>
          </div>

          {/* PARAMETRELER */}
          <div style={{display:'flex',flexDirection:'column',gap:3,marginLeft:14}}>
            <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>PARAMETRELER</div>
            <div style={{display:'flex',alignItems:'baseline',gap:5,fontFamily:'ui-monospace,monospace',fontWeight:900}}>
              <TweenNumber values={[1, 2, 1, 3, 2]} format={n=>'%'+Math.round(n)} style={{fontSize:11,color:'#FF6B00'}} startDelay={0} />
              <span style={{color:'#3a3940'}}>/</span>
              <TweenNumber values={[40, 50, 55, 45, 52]} format={n=>Math.round(n)+' TL'} style={{fontSize:11,color:'#FF6B00'}} startDelay={300} />
              <span style={{color:'#3a3940'}}>/</span>
              <TweenNumber values={[8, 10, 12, 9, 11]} format={n=>Math.round(n).toString()} style={{fontSize:11,color:'#FF6B00'}} startDelay={600} />
            </div>
            <div style={{display:'flex',gap:18,fontSize:6,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',fontWeight:700,marginTop:1}}>
              <span>KUR EŞİĞİ</span><span>FIYAT EŞİĞİ</span><span>TK'G YUVARLA</span>
            </div>
          </div>

          <div style={{flex:1}} />

          <div style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.1em',fontWeight:700}}>SON 4 SAAT ÖNCE</div>

          <div style={{display:'flex',gap:6,marginLeft:12}}>
            <div style={{padding:'6px 10px',borderRadius:4,background:'#FF6B00',color:'#3a1800',fontSize:8,fontWeight:900,letterSpacing:'0.08em',fontFamily:'ui-monospace,monospace',cursor:'pointer',boxShadow:'0 0 10px rgba(255,107,0,0.4)'}}>DÜZENLE</div>
            <div style={{padding:'6px 10px',borderRadius:4,background:'transparent',border:'1px solid #1f1e22',color:'#8a7a76',fontSize:8,fontWeight:900,letterSpacing:'0.08em',fontFamily:'ui-monospace,monospace',cursor:'pointer'}}>SIL</div>
          </div>
        </div>

        {/* Assigned marketplaces */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:12}}>
          {[
            { name:'TRENDYOL - BIFAMO', color:'#FF6B00', values:[96, 108, 115, 102, 110], unit:'ÜRÜN' },
            { name:'SHOPIFY - BIFAMO',  color:'#22c55e', values:[148, 165, 172, 158, 168], unit:'ÜRÜN' },
          ].map((r,i) => (
            <div key={i} style={{
              background:'#0f0e12',border:'1px solid #1f1e22',borderRadius:5,
              padding:'8px 12px',display:'flex',alignItems:'center'
            }}>
              <div style={{flex:1}}>
                <div style={{fontSize:10,fontWeight:900,color:r.color,letterSpacing:'0.04em',fontFamily:'ui-monospace,monospace'}}>{r.name}</div>
                <div style={{fontSize:7,color:'#6b5d5a',marginTop:2,fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',fontWeight:700}}>VARSAYILAN</div>
              </div>
              <div style={{display:'flex',alignItems:'baseline',gap:4}}>
                <TweenNumber values={r.values} style={{fontFamily:'Inter',fontSize:14,fontWeight:900,color:'#e5e1e4',letterSpacing:'-0.03em'}} startDelay={i*400} />
                <span style={{fontSize:7,color:'#6b5d5a',fontFamily:'ui-monospace,monospace',letterSpacing:'0.08em',fontWeight:700}}>{r.unit}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ========== Main dashboard wrapper ==========
const LiveDashboard = () => (
  <div style={{
    width: 1500, height: 900,  // native dashboard size (scaled by parent)
    background:'#0a0a0c', color:'#e5e1e4',
    display:'flex', flexDirection:'column',
    fontFamily:'Inter, ui-sans-serif, system-ui, sans-serif',
    overflow:'hidden'
  }}>
    <div style={{display:'flex',flex:1,minHeight:0}}>
      <Sidebar />
      <div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0,position:'relative'}}>
        <div style={{flex:1,padding:'20px 20px 20px 20px',display:'flex',gap:14,minHeight:0}}>
          {/* Main area */}
          <div style={{flex:1,display:'flex',flexDirection:'column',gap:12,minWidth:0}}>
            {/* Top KPI row */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:12}}>
              <PendingOrdersCard />
              <WeekRevenueCard />
              <StockAlertsCard />
              <ShipmentsCard />
            </div>

            {/* System Overview — 4 mini cards (no heading) */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:12}}>
              <SystemMiniCard icon="inventory_2" values={[468, 475, 481, 473, 480]} label="PRODUCTS" color="#38bdf8" delay={0} />
              <SystemMiniCard icon="shopping_cart" values={[5, 7, 9, 6, 8]} label="ORDERS (TD)" color="#FF6B00" delay={300} />
              <SystemMiniCard icon="task_alt" values={[4, 7, 5, 9, 6]} label="SOLVED" color="#34d399" delay={600} />
              <SystemMiniCard icon="error" values={[138, 146, 151, 142, 149]} label="OUT OF STOCK" color="#ef4444" delay={900} />
            </div>

            {/* Platform connections */}
            <PlatformRow />

            {/* AGENTS section */}
            <AgentsSection />

            {/* MEVCUT KURALLAR section */}
            <RulesSection />

            <div style={{flex:1}} />
          </div>

          {/* Right column */}
          <div style={{width:260,display:'flex',flexDirection:'column',gap:12,minHeight:0}}>
            <LiveFeed title="ACTIVITY FEED" interval={2400} />
            <UserActivity />
            <LiveFeed title="SYNC ACTIVITY" interval={3200} />
          </div>
        </div>
        <StatusStrip />
      </div>
    </div>
  </div>
);

// ========== Shared KPI card styles ==========
const kpiCardStyle = {
  background:'#16151a',
  border:'1px solid #1f1e22',
  borderRadius:6,
  padding:'10px 12px',
  display:'flex',
  flexDirection:'column',
  minHeight: 138,
  position:'relative',
  overflow:'hidden'
};
const kpiHeaderStyle = {
  display:'flex',
  alignItems:'center',
  justifyContent:'space-between',
  fontSize:8,
  color:'#6b5d5a',
  fontFamily:'ui-monospace,monospace',
  letterSpacing:'0.1em',
  fontWeight:700
};

window.LiveDashboard = LiveDashboard;