/* ================= Live ERP Demo ================= */
/* useState / useEffect / useRef, corporate-ui.jsx içinde tanımlanır ve
   script-scope üzerinden paylaşılır. Bu dosya ondan SONRA yüklenmelidir
   (bkz. includes/footer.php yükleme sırası). */

const ERP_CSS = `
.erp{--e-bg:#0b1322;--e-panel:#121d33;--e-panel-2:#16223c;--e-line:#243353;--e-line-2:#2c3d61;
  --e-ink:#eaf0fb;--e-mut:#92a2c2;--e-mut-2:#6b7c9e;--e-acc:var(--brand);
  display:grid;grid-template-columns:248px 1fr;background:var(--e-bg);border-radius:var(--r-xl);
  overflow:hidden;border:1px solid #1d2c49;box-shadow:var(--shadow-lg);font-family:var(--font-body);
  color:var(--e-ink);height:620px;}
.erp *{box-sizing:border-box;}
.erp-side{background:linear-gradient(180deg,#0c1526,#0a1120);border-right:1px solid var(--e-line);
  display:flex;flex-direction:column;min-height:0;}
.erp-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;border-bottom:1px solid var(--e-line);}
.erp-brand .m{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;padding:6px;}
.erp-brand .t{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.1;}
.erp-brand .s{font-size:11px;color:var(--e-mut);}
.erp-menu{flex:1;overflow-y:auto;padding:14px 12px;min-height:0;}
.erp-menu::-webkit-scrollbar{width:6px;} .erp-menu::-webkit-scrollbar-thumb{background:#22324f;border-radius:6px;}
.erp-grp{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--e-mut-2);margin:16px 10px 7px;}
.erp-grp:first-child{margin-top:2px;}
.erp-mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:10px;
  color:var(--e-mut);font-size:13.5px;font-weight:600;font-family:var(--font-display);transition:.15s;margin-bottom:2px;}
.erp-mi:hover{background:#16223c;color:var(--e-ink);}
.erp-mi.on{background:color-mix(in oklab,var(--brand) 22%, #0c1526);color:#fff;}
.erp-mi.on .dotind{background:var(--e-acc);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 25%, transparent);}
.erp-mi .dotind{width:6px;height:6px;border-radius:50%;background:#3a4d75;margin-left:auto;}
.erp-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--e-line);}
.erp-user .av{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),color-mix(in oklab,var(--brand) 50%, #7c3aed));
  display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;font-family:var(--font-display);}
.erp-user .nm{font-weight:700;font-size:13px;font-family:var(--font-display);} .erp-user .st{font-size:11px;color:var(--e-mut);}

.erp-main{display:flex;flex-direction:column;min-width:0;min-height:0;}
.erp-top{display:flex;align-items:center;gap:6px;padding:0 16px;height:54px;border-bottom:1px solid var(--e-line);
  background:#0c1526;overflow-x:auto;flex-shrink:0;}
.erp-top::-webkit-scrollbar{height:0;}
.erp-tab{padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;font-family:var(--font-display);
  color:var(--e-mut);white-space:nowrap;transition:.15s;}
.erp-tab:hover{color:var(--e-ink);background:#16223c;}
.erp-tab.on{color:#fff;background:color-mix(in oklab,var(--brand) 26%, #0c1526);}
.erp-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;color:#43d693;white-space:nowrap;padding-left:10px;}
.erp-live .b{width:8px;height:8px;border-radius:50%;background:#43d693;box-shadow:0 0 0 0 rgba(67,214,147,.6);animation:erpPulse 1.8s infinite;}
@keyframes erpPulse{0%{box-shadow:0 0 0 0 rgba(67,214,147,.55);}70%{box-shadow:0 0 0 7px rgba(67,214,147,0);}100%{box-shadow:0 0 0 0 rgba(67,214,147,0);}}
.erp-body{flex:1;overflow-y:auto;padding:20px;min-height:0;}
.erp-body::-webkit-scrollbar{width:8px;} .erp-body::-webkit-scrollbar-thumb{background:#22324f;border-radius:8px;}

.erp-hd{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(120deg,#101c33,#0e2444);
  border:1px solid var(--e-line-2);border-radius:16px;padding:18px 20px;margin-bottom:18px;}
.erp-hd h3{font-size:20px;color:#fff;} .erp-hd p{color:var(--e-mut);font-size:13px;margin-top:3px;}
.erp-hd .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.erp-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12.5px;
  padding:9px 14px;border-radius:9px;transition:.15s;white-space:nowrap;}
.erp-btn.pri{background:var(--e-acc);color:#fff;} .erp-btn.pri:hover{filter:brightness(1.08);}
.erp-btn.gh{background:#16223c;color:var(--e-ink);border:1px solid var(--e-line-2);} .erp-btn.gh:hover{background:#1d2c49;}

.erp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
.erp-kpi{background:var(--e-panel);border:1px solid var(--e-line);border-radius:13px;padding:14px 15px;position:relative;overflow:hidden;}
.erp-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--e-acc));}
.erp-kpi .l{font-size:11.5px;color:var(--e-mut);font-weight:600;}
.erp-kpi .v{font-family:var(--font-display);font-weight:800;font-size:23px;margin-top:5px;color:#fff;}

.erp-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;}
.erp-card{background:var(--e-panel);border:1px solid var(--e-line);border-radius:14px;padding:16px;}
.erp-card .ch{font-family:var(--font-display);font-weight:700;font-size:13.5px;margin-bottom:12px;color:#fff;display:flex;align-items:center;gap:8px;}
.erp-qg{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.erp-q{background:var(--e-panel-2);border:1px solid var(--e-line);border-radius:11px;padding:13px 14px;transition:.15s;text-align:left;}
.erp-q:hover{border-color:var(--e-acc);transform:translateY(-2px);background:#1a2740;}
.erp-q .qt{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;display:flex;align-items:center;gap:8px;}
.erp-q .qs{font-size:11.5px;color:var(--e-mut);margin-top:3px;}
.erp-q .ic{color:var(--e-acc);}
.erp-alert{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--e-line);}
.erp-alert:last-child{border-bottom:none;}
.erp-alert .nm{font-size:13px;font-weight:600;} .erp-alert .ct{margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:13px;
  min-width:30px;height:24px;padding:0 8px;border-radius:7px;display:grid;place-items:center;background:var(--bad-soft);color:#c0392b;}
.erp-alert.warn .ct{background:var(--warn-soft);color:#a96a13;}

/* POS */
.erp-pos{display:grid;grid-template-columns:1fr 320px;gap:16px;height:100%;}
.erp-pos-l{display:flex;flex-direction:column;min-height:0;}
.erp-pos-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.erp-hint{font-size:12px;color:var(--e-mut);background:#16223c;border:1px dashed var(--e-line-2);padding:7px 12px;border-radius:9px;}
.erp-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow-y:auto;padding-right:4px;align-content:start;}
.erp-pgrid::-webkit-scrollbar{width:7px;} .erp-pgrid::-webkit-scrollbar-thumb{background:#22324f;border-radius:7px;}
.erp-pcard{background:var(--e-panel);border:1px solid var(--e-line);border-radius:12px;padding:11px;text-align:left;transition:.13s;position:relative;}
.erp-pcard:hover{border-color:var(--e-acc);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.erp-pcard:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.erp-pcard .thumb{height:54px;border-radius:8px;margin-bottom:9px;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#16223c,#16223c 7px,#15233f 7px,#15233f 14px);}
.erp-pcard .thumb svg{color:#46598a;opacity:.6;}
.erp-pcard .pn{font-family:var(--font-display);font-weight:700;font-size:12.5px;line-height:1.25;color:#fff;min-height:31px;}
.erp-pcard .pr{display:flex;justify-content:space-between;align-items:center;margin-top:7px;}
.erp-pcard .ps{font-size:11px;color:var(--e-mut);} .erp-pcard .pp{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--e-acc);}
.erp-catdot{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;}

.erp-pay{background:var(--e-panel);border:1px solid var(--e-line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;}
.erp-pay-h{padding:13px 15px;border-bottom:1px solid var(--e-line);font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;
  display:flex;align-items:center;gap:8px;}
.erp-pay-h .cnt{margin-left:auto;font-size:11.5px;color:var(--e-mut);font-weight:600;}
.erp-cart{flex:1;overflow-y:auto;padding:6px 10px;min-height:90px;}
.erp-cart::-webkit-scrollbar{width:6px;} .erp-cart::-webkit-scrollbar-thumb{background:#22324f;border-radius:6px;}
.erp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;color:var(--e-mut-2);font-size:12.5px;text-align:center;padding:20px;}
.erp-empty svg{opacity:.4;}
.erp-li{display:flex;align-items:center;gap:9px;padding:9px 6px;border-bottom:1px solid var(--e-line);}
.erp-li:last-child{border-bottom:none;}
.erp-li .ln{font-size:12.5px;font-weight:600;color:#fff;line-height:1.2;} .erp-li .lp{font-size:11px;color:var(--e-mut);margin-top:2px;}
.erp-qty{display:flex;align-items:center;gap:7px;margin-left:auto;}
.erp-qbtn{width:23px;height:23px;border-radius:7px;background:#1d2c49;color:#cdd8ee;display:grid;place-items:center;transition:.12s;}
.erp-qbtn:hover{background:var(--e-acc);color:#fff;}
.erp-qn{font-family:var(--font-display);font-weight:800;font-size:13px;min-width:18px;text-align:center;}
.erp-lt{font-family:var(--font-display);font-weight:800;font-size:13px;color:#fff;min-width:62px;text-align:right;}
.erp-totals{border-top:1px solid var(--e-line);padding:13px 15px;background:#0e1830;}
.erp-tr{display:flex;justify-content:space-between;font-size:12.5px;color:var(--e-mut);margin-bottom:6px;}
.erp-tr.big{font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff;margin:8px 0 12px;}
.erp-tr.big span:last-child{color:var(--e-acc);}
.erp-pm{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px;}
.erp-pm button{padding:8px 0;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:11.5px;
  background:#16223c;color:var(--e-mut);border:1px solid var(--e-line);transition:.13s;}
.erp-pm button.on{background:var(--e-acc);color:#fff;border-color:var(--e-acc);}
.erp-complete{width:100%;padding:13px;border-radius:11px;font-family:var(--font-display);font-weight:800;font-size:14px;
  background:#16a36a;color:#fff;transition:.15s;}
.erp-complete:hover{filter:brightness(1.08);transform:translateY(-1px);} .erp-complete:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* tables */
.erp-table{width:100%;border-collapse:collapse;font-size:13px;}
.erp-table th{text-align:left;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--e-mut);padding:10px 12px;border-bottom:1px solid var(--e-line-2);}
.erp-table td{padding:12px;border-bottom:1px solid var(--e-line);color:var(--e-ink);}
.erp-table tr:last-child td{border-bottom:none;}
.erp-table tbody tr{transition:.12s;} .erp-table tbody tr:hover{background:#16223c;}
.erp-table .strong{font-family:var(--font-display);font-weight:700;color:#fff;}
.erp-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;}
.erp-pill.ok{background:rgba(67,214,147,.15);color:#43d693;} .erp-pill.warn{background:rgba(224,150,43,.16);color:#f0b35a;}
.erp-pill.bad{background:rgba(224,83,59,.16);color:#f08066;} .erp-pill.info{background:color-mix(in oklab,var(--brand) 26%, #0c1526);color:#9cc0ff;}
.erp-pill.neu{background:#1d2c49;color:#b7c5e0;}

/* mini chart */
.erp-chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:10px 4px 0;}
.erp-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.erp-bar .bb{width:100%;max-width:42px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--e-acc),color-mix(in oklab,var(--brand) 45%, #0c1526));
  transition:height 1s cubic-bezier(.22,.61,.36,1);}
.erp-bar .bl{font-size:11px;color:var(--e-mut);font-weight:600;}

/* toast */
.erp-toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#16a36a;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;padding:11px 20px;border-radius:11px;
  box-shadow:0 14px 30px -10px rgba(22,163,106,.55);display:flex;align-items:center;gap:9px;transition:.35s cubic-bezier(.22,.61,.36,1);pointer-events:none;z-index:5;}
.erp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:860px){
  .erp{grid-template-columns:1fr;height:auto;}
  .erp-side{display:none;}
  .erp-kpis{grid-template-columns:1fr 1fr;}
  .erp-cols{grid-template-columns:1fr;}
  .erp-pos{grid-template-columns:1fr;}
  .erp-pgrid{grid-template-columns:repeat(2,1fr);max-height:330px;}
  .erp-body{padding:14px;}
  .erp-pay{max-height:none;}
}
`;

const MENU = [
  {grp:"", items:[{k:"home", icon:"grid", t:"Ana Panel"}]},
  {grp:"SATIŞ", items:[{k:"pos", icon:"receipt", t:"Hızlı Satış (POS)"},{k:"sales", icon:"cart", t:"Satış Listesi"},{k:"quotes", icon:"doc", t:"Satış Teklifleri"}]},
  {grp:"STOK", items:[{k:"products", icon:"box", t:"Ürünler"},{k:"moves", icon:"layers", t:"Stok Hareketleri"},{k:"wh", icon:"database", t:"Depo Yönetimi"}]},
  {grp:"CARİ & ALIŞ", items:[{k:"customers", icon:"users", t:"Müşteriler"},{k:"suppliers", icon:"truck", t:"Tedarikçiler"},{k:"purch", icon:"wallet", t:"Alış Faturaları"}]},
  {grp:"YÖNETİM", items:[{k:"reports", icon:"chart", t:"Raporlar"},{k:"settings", icon:"settings", t:"Ayarlar"}]},
];
const TABS = [
  {k:"home", t:"Ana Panel"},{k:"pos", t:"Hızlı Satış"},{k:"sales", t:"Satış Listesi"},
  {k:"products", t:"Ürünler"},{k:"customers", t:"Müşteriler"},{k:"reports", t:"Raporlar"},
];

function ErpDemo(){
  const {fmt, fmt0, PRODUCTS, catColor, stockState, SALES, QUOTES, CUSTOMERS, REVENUE} = window.DATA;
  const I = window.Icons;
  const [tab, setTab] = useState("home");
  const [cart, setCart] = useState([]);
  const [pm, setPm] = useState("NAKİT");
  const [toast, setToast] = useState("");
  const [chartIn, setChartIn] = useState(false);
  const ref = useRef(null);

  useEffect(()=>{
    const o = new IntersectionObserver((es)=>{ if(es[0].isIntersecting){ setChartIn(true);} },{threshold:.2});
    if(ref.current) o.observe(ref.current);
    return ()=>o.disconnect();
  },[]);

  const add = (p) => {
    if(p.stock===0) return;
    setCart(c=>{ const e=c.find(x=>x.id===p.id); if(e) return c.map(x=>x.id===p.id?{...x,q:Math.min(x.q+1,p.stock)}:x);
      return [...c,{...p,q:1}]; });
  };
  const chg = (id,d) => setCart(c=>c.map(x=>x.id===id?{...x,q:x.q+d}:x).filter(x=>x.q>0));
  const sub = cart.reduce((s,x)=>s+x.price*x.q,0);
  const kdv = sub*0.20;
  const tot = sub+kdv;
  const complete = () => { if(!cart.length) return; setCart([]); setToast(`Satış tamamlandı · ${fmt(tot)} · ${pm}`);
    setTimeout(()=>setToast(""),2600); };

  const showToast = (m)=>{ setToast(m); setTimeout(()=>setToast(""),2200); };

  return (
    <div className="erp" ref={ref}>
      <style dangerouslySetInnerHTML={{__html:ERP_CSS}}/>
      {/* sidebar */}
      <aside className="erp-side">
        <div className="erp-brand">
          <div className="m"><img src="assets/images/alker-logo.png" alt="" /></div>
          <div><div className="t">ALKERSOFT</div><div className="s">Merkez Şube</div></div>
        </div>
        <div className="erp-menu">
          {MENU.map((g,gi)=>(
            <div key={gi}>
              {g.grp && <div className="erp-grp">{g.grp}</div>}
              {g.items.map(it=>{ const Ico=I[it.icon];
                const target = TABS.find(t=>t.k===it.k) ? it.k : null;
                return (
                  <button key={it.k} className={"erp-mi"+(tab===it.k?" on":"")}
                    onClick={()=> target ? setTab(it.k) : showToast(it.t+" — demo dışı") }>
                    <Ico size={17}/><span>{it.t}</span><span className="dotind"></span>
                  </button>
                );})}
            </div>
          ))}
        </div>
        <div className="erp-user">
          <div className="av">AÖ</div>
          <div><div className="nm">Ali ÖZKAN</div><div className="st">Aktif oturum</div></div>
        </div>
      </aside>

      {/* main */}
      <div className="erp-main">
        <div className="erp-top">
          {TABS.map(t=>(
            <button key={t.k} className={"erp-tab"+(tab===t.k?" on":"")} onClick={()=>setTab(t.k)}>{t.t}</button>
          ))}
          <span className="erp-live"><span className="b"></span>CANLI DEMO</span>
        </div>

        <div className="erp-body">
          {tab==="home" && <ErpHome setTab={setTab} showToast={showToast}/>}
          {tab==="pos" && (
            <div className="erp-pos">
              <div className="erp-pos-l">
                <div className="erp-pos-head">
                  <strong style={{fontFamily:"var(--font-display)",fontSize:15,color:"#fff"}}>Hızlı Satış (POS)</strong>
                  <span className="erp-hint">Ürüne tıkla → sepete eklensin, toplam güncellensin</span>
                </div>
                <div className="erp-pgrid">
                  {PRODUCTS.map(p=>(
                    <button key={p.id} className="erp-pcard" disabled={p.stock===0} onClick={()=>add(p)}>
                      <span className="erp-catdot" style={{background:catColor[p.cat]||"#888"}}></span>
                      <div className="thumb"><I.box size={22}/></div>
                      <div className="pn">{p.name}</div>
                      <div className="pr"><span className="ps">Stok: {p.stock}</span><span className="pp">{fmt0(p.price)}</span></div>
                    </button>
                  ))}
                </div>
              </div>
              <div className="erp-pay">
                <div className="erp-pay-h"><I.cart size={16}/>Ödeme Paneli<span className="cnt">{cart.reduce((s,x)=>s+x.q,0)} ürün</span></div>
                <div className="erp-cart">
                  {!cart.length && <div className="erp-empty"><I.cart size={30}/>Sepet boş.<br/>Soldan ürün ekleyin.</div>}
                  {cart.map(x=>(
                    <div className="erp-li" key={x.id}>
                      <div><div className="ln">{x.name}</div><div className="lp">{fmt0(x.price)} × {x.q}</div></div>
                      <div className="erp-qty">
                        <button className="erp-qbtn" onClick={()=>chg(x.id,-1)}><I.minus size={13}/></button>
                        <span className="erp-qn">{x.q}</span>
                        <button className="erp-qbtn" onClick={()=>chg(x.id,1)}><I.plus size={13}/></button>
                      </div>
                      <div className="erp-lt">{fmt0(x.price*x.q)}</div>
                    </div>
                  ))}
                </div>
                <div className="erp-totals">
                  <div className="erp-tr"><span>Ara Toplam</span><span>{fmt(sub)}</span></div>
                  <div className="erp-tr"><span>KDV %20</span><span>{fmt(kdv)}</span></div>
                  <div className="erp-tr big"><span>ÖDENECEK</span><span>{fmt(tot)}</span></div>
                  <div className="erp-pm">
                    {["NAKİT","KART","VERESİYE"].map(m=>(
                      <button key={m} className={pm===m?"on":""} onClick={()=>setPm(m)}>{m}</button>
                    ))}
                  </div>
                  <button className="erp-complete" disabled={!cart.length} onClick={complete}>SATIŞI TAMAMLA</button>
                </div>
              </div>
            </div>
          )}
          {tab==="sales" && <ErpTable title="Satış Listesi" action="Yeni Satış" onAction={()=>showToast("Yeni satış — demo dışı")}
            cols={["Belge No","Müşteri","Tarih","Tutar","Durum"]} rows={SALES.map(s=>[
              <span className="strong">{s.no}</span>, s.cust, s.date, fmt(s.total),
              <span className={"erp-pill "+(s.status==="İade"?"bad":"ok")}>{s.status}</span>])}/>}
          {tab==="products" && <ErpTable title="Ürünler" action="Yeni Ürün" onAction={()=>showToast("Yeni ürün — demo dışı")}
            cols={["Ürün","Kategori","Stok","Fiyat","Durum"]} rows={PRODUCTS.map(p=>{const st=stockState(p.stock);return [
              <span className="strong">{p.name}</span>, p.cat, p.stock, fmt(p.price),
              <span className={"erp-pill "+st.c}>{st.t}</span>];})}/>}
          {tab==="customers" && <ErpTable title="Müşteriler (Cari)" action="Yeni Cari" onAction={()=>showToast("Yeni cari — demo dışı")}
            cols={["Cari","Telefon","Bakiye","Durum"]} rows={CUSTOMERS.map(c=>[
              <span className="strong">{c.name}</span>, c.phone, fmt(c.balance),
              <span className={"erp-pill "+(c.state==="Borçlu"?"warn":c.state==="Alacaklı"?"info":"ok")}>{c.state}</span>])}/>}
          {tab==="reports" && <ErpReports chartIn={chartIn} showToast={showToast}/>}
        </div>
      </div>
      <div className={"erp-toast"+(toast?" show":"")}><I.check size={16}/>{toast}</div>
    </div>
  );
}

function ErpHome({setTab, showToast}){
  const {fmt0} = window.DATA; const I = window.Icons;
  const kpis = [
    {l:"Bugünkü Satış", v:"₺12.480", c:"#43d693"},
    {l:"İşlem Sayısı", v:"24", c:"var(--brand)"},
    {l:"Ürün / Müşteri", v:"1.037 / 18", c:"#9b6ef3"},
    {l:"Düşük Stok", v:"9", c:"#f0b35a"},
  ];
  const quick = [
    {k:"pos", t:"POS", s:"Hızlı satış ekranı →", icon:"receipt"},
    {k:"products", t:"Ürünler", s:"Stok ve fiyat →", icon:"box"},
    {k:"customers", t:"Müşteriler", s:"Cari hesap →", icon:"users"},
    {k:null, t:"Alış Faturaları", s:"Tedarikçi →", icon:"truck"},
    {k:null, t:"Teklifler", s:"Satış teklifi →", icon:"doc"},
    {k:"reports", t:"Raporlar", s:"Satış analizi →", icon:"chart"},
  ];
  const alerts = [
    {n:"Işıklı Geniş Anahtar", c:0, bad:true},{n:"1.8A Kutulu Motor", c:1, bad:true},
    {n:"100W Projektör", c:1, bad:true},{n:"100-5 Akım Trafosu", c:3, bad:false},{n:"1000W UFO Teli", c:5, bad:false},
  ];
  return (
    <div className="app-fade">
      <div className="erp-hd">
        <div><h3>Ana Panel</h3><p>Hoş geldiniz, Ali ÖZKAN. Günlük özetiniz aşağıda.</p></div>
        <div className="sp">
          <button className="erp-btn gh" onClick={()=>showToast("Veriler yenilendi")}><I.refresh size={14}/>Verileri Yenile</button>
          <button className="erp-btn pri" onClick={()=>setTab("pos")}><I.bolt size={14}/>Hızlı Satış</button>
        </div>
      </div>
      <div className="erp-kpis">
        {kpis.map((k,i)=>(<div className="erp-kpi" key={i} style={{"--kc":k.c}}><div className="l">{k.l}</div><div className="v">{k.v}</div></div>))}
      </div>
      <div className="erp-cols">
        <div className="erp-card">
          <div className="ch"><I.grid size={15}/>Hızlı Erişim</div>
          <div className="erp-qg">
            {quick.map((q,i)=>{const Ico=I[q.icon];return(
              <button className="erp-q" key={i} onClick={()=> q.k? setTab(q.k): showToast(q.t+" — demo dışı")}>
                <div className="qt"><span className="ic"><Ico size={15}/></span>{q.t}</div><div className="qs">{q.s}</div>
              </button>);})}
          </div>
        </div>
        <div className="erp-card">
          <div className="ch"><I.warn size={15} style={{color:"#f0b35a"}}/>Uyarı Merkezi — Kritik Stok</div>
          {alerts.map((a,i)=>(
            <div className={"erp-alert"+(a.bad?"":" warn")} key={i}>
              <span className="nm">{a.n}</span><span className="ct">{a.c}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ErpTable({title, action, onAction, cols, rows}){
  return (
    <div className="app-fade">
      <div className="erp-hd">
        <div><h3>{title}</h3><p>Kayıtları görüntüleyin, arayın ve yönetin.</p></div>
        <div className="sp"><button className="erp-btn pri" onClick={onAction}><window.Icons.plus size={14}/>{action}</button></div>
      </div>
      <div className="erp-card" style={{padding:"4px 6px"}}>
        <table className="erp-table">
          <thead><tr>{cols.map((c,i)=><th key={i}>{c}</th>)}</tr></thead>
          <tbody>{rows.map((r,i)=><tr key={i}>{r.map((c,j)=><td key={j}>{c}</td>)}</tr>)}</tbody>
        </table>
      </div>
    </div>
  );
}

function ErpReports({chartIn, showToast}){
  const {REVENUE} = window.DATA; const I = window.Icons;
  const max = Math.max(...REVENUE.map(r=>r.v));
  return (
    <div className="app-fade">
      <div className="erp-hd">
        <div><h3>Raporlar</h3><p>Aylık satış performansı ve analiz.</p></div>
        <div className="sp"><button className="erp-btn gh" onClick={()=>showToast("Rapor dışa aktarıldı")}><I.doc size={14}/>Dışa Aktar</button></div>
      </div>
      <div className="erp-kpis" style={{gridTemplateColumns:"repeat(3,1fr)"}}>
        <div className="erp-kpi" style={{"--kc":"#43d693"}}><div className="l">Aylık Ciro</div><div className="v">₺486.200</div></div>
        <div className="erp-kpi" style={{"--kc":"var(--brand)"}}><div className="l">Net Kâr</div><div className="v">₺128.400</div></div>
        <div className="erp-kpi" style={{"--kc":"#9b6ef3"}}><div className="l">En Çok Satan</div><div className="v" style={{fontSize:17}}>1.5V Pil</div></div>
      </div>
      <div className="erp-card">
        <div className="ch"><I.trend size={15}/>Aylık Ciro — Son 6 Ay (₺ bin)</div>
        <div className="erp-chart">
          {REVENUE.map((r,i)=>(
            <div className="erp-bar" key={i}>
              <div className="bb" style={{height: chartIn ? (r.v/max*120)+"px" : "0px", transitionDelay:(i*.08)+"s"}}></div>
              <div className="bl">{r.m}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ErpDemo = ErpDemo;