// js/components/widgets/marcas/ficha-tabs/TabsHeaderBar.jsx
// [Wave 30 v224.11 NUCLEAR EXTRACT 2026-05-24] Header gradient + 8 tabs nav (FichaMarca L200-227)
// Props: brand, brandProducts, abcMine, score, scoreColor, scoreLabel, tab, setTab, tabs, onClose
(function(){
  'use strict';
  function TabsHeaderBar(props){
    var brand = props.brand;
    var brandProducts = props.brandProducts;
    var abcMine = props.abcMine;
    var score = props.score;
    var scoreColor = props.scoreColor;
    var scoreLabel = props.scoreLabel;
    var tab = props.tab;
    var setTab = props.setTab;
    var tabs = props.tabs;
    var onClose = props.onClose;
    return (
      <React.Fragment>
        {/* Header */}
        <div style={{background:'linear-gradient(135deg,#0F1B36,#1B2A4A)',borderRadius:'14px 14px 0 0',padding:'18px 24px',display:'flex',alignItems:'center',gap:16,position:'relative'}}>
          <div style={{position:'absolute',top:0,left:0,bottom:0,width:5,background:'#B89840',borderRadius:'14px 0 0 0'}}/>
          <div style={{flex:1}}>
            <div style={{fontSize:11,color:'#B89840',fontWeight:700,letterSpacing:2,textTransform:'uppercase',marginBottom:4}}>FICHA 360° · MARCA</div>
            <div style={{fontSize:28,color:'#fff',fontWeight:800,letterSpacing:1}}>{brand.name}</div>
            <div style={{fontSize:13,color:'#FEF9E7',marginTop:4,opacity:0.85}}>
              {brand.country?brand.country+' · ':''}{brand.type||'Sem tipo'} · {brandProducts.length} SKU(s)
              {abcMine&&<span style={{marginLeft:12,padding:'2px 8px',background:abcMine.abcClass==='A'?'#B89840':abcMine.abcClass==='B'?'#6B7280':'#374151',color:'#fff',borderRadius:6,fontSize:11,fontWeight:700}}>Curva {abcMine.abcClass} · {abcMine.abcPct.toFixed(1)}% receita</span>}
            </div>
          </div>
          <div style={{textAlign:'center',padding:'8px 16px',background:scoreColor,borderRadius:10,minWidth:100}}>
            <div style={{fontSize:10,color:'#fff',fontWeight:600,opacity:0.9,letterSpacing:1,textTransform:'uppercase'}}>Saúde</div>
            <div style={{fontSize:24,color:'#fff',fontWeight:800}}>{score}</div>
            <div style={{fontSize:11,color:'#fff',fontWeight:600}}>{scoreLabel}</div>
          </div>
          <button onClick={onClose} style={{background:'rgba(255,255,255,0.1)',color:'#fff',border:'1.5px solid rgba(255,255,255,0.3)',borderRadius:10,width:40,height:40,fontSize:20,cursor:'pointer',fontWeight:700}}>✕</button>
        </div>

        {/* Tabs */}
        <div style={{background:'#fff',padding:'10px 24px',borderBottom:'2px solid #F3F4F6',display:'flex',gap:6,overflowX:'auto'}}>
          {tabs.map(function(t){
            return (
              <button key={t.id} onClick={function(){setTab(t.id);}}
                style={{padding:'8px 14px',borderRadius:8,border:'none',background:tab===t.id?'#1B2A4A':'transparent',color:tab===t.id?'#B89840':'#6B7280',fontWeight:tab===t.id?700:500,fontSize:13,cursor:'pointer',whiteSpace:'nowrap',display:'flex',alignItems:'center',gap:6}}>
                <span>{t.ico}</span>{t.l}
                {t.badge>0&&<span style={{background:'#DC2626',color:'#fff',borderRadius:10,padding:'1px 7px',fontSize:10,fontWeight:700}}>{t.badge}</span>}
              </button>
            );
          })}
        </div>
      </React.Fragment>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.fichaMarca = window.ZNX.widgets.fichaMarca || {};
  window.ZNX.widgets.fichaMarca.TabsHeaderBar = TabsHeaderBar;
})();