// Detalhe do Produto — bento navy (spec 2026-07-01 + melhorias). Rota #/produto/{family}.
// Donut com tooltip por fatia · bloco de refund = taxa-no-tempo + maturação · refund por etapa
// com vendas · gráficos preenchendo a box · mini-card AOV. Sem CVR/tráfego/categoria (omitidos).
// React.* direto p/ não colidir com globais.

const PD_STAGE_PALETTE = ['#FD7119','#303880','#8A5BD6','#1F9D6B','#2C9CC4','#E0922B','#C7CDD9','#D8453B'];

// Path SVG (linha + área) — normaliza pelo próprio máximo, em coordenadas do viewBox.
function pdPath(vals, w, h, pad) {
  const n = vals.length; if (n < 2) return { line:'', area:'', pts:[] };
  const max = Math.max(...vals, 1e-9);
  const x = i => pad + (w-2*pad)*i/(n-1);
  const y = v => (h-pad) - (h-2*pad)*(v/max);
  const pts = vals.map((v,i)=>[x(i), y(v)]);
  const line = pts.map(([px,py],i)=>`${i?'L':'M'}${px.toFixed(1)} ${py.toFixed(1)}`).join(' ');
  return { line, area:`${line} L${x(n-1).toFixed(1)} ${(h-pad).toFixed(1)} L${x(0).toFixed(1)} ${(h-pad).toFixed(1)} Z`, pts };
}

const PDCard = ({ children, style }) => (
  <div style={{background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', display:'flex', flexDirection:'column', ...style}}>{children}</div>
);
const PDHead = ({ title, sub, right }) => (
  <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:12, padding:'16px 20px 0'}}>
    <div><div style={{font:'700 15px/1 var(--font-sans)', color:'var(--fg-1)'}}>{title}</div>
      {sub && <div style={{font:'500 11.5px/1.3 var(--font-sans)', color:'var(--fg-3)', marginTop:5}}>{sub}</div>}</div>
    {right}
  </div>
);

// Legenda de tendência ("subiu/caiu/estável") comparando 1ª metade vs 2ª metade de uma série.
function pdTrend(vals) {
  if (!vals || vals.length < 4) return { label:'estável', color:'var(--fg-3)' };
  const h = Math.floor(vals.length/2);
  const a = vals.slice(0,h).reduce((s,v)=>s+v,0)/h;
  const b = vals.slice(h).reduce((s,v)=>s+v,0)/(vals.length-h);
  if (b - a > 0.5) return { label:'subindo', color:'var(--negative)' };
  if (a - b > 0.5) return { label:'caindo', color:'var(--positive)' };
  return { label:'estável', color:'var(--fg-3)' };
}

// Gráfico de linha com hover (fatia vertical + legenda embaixo). Preenche a caixa (flex:1).
const PDLineChart = ({ series, n, caption, xLabels, height=170 }) => {
  const [hi, setHi] = React.useState(null);
  const W = 640, H = 200, PAD = 14;
  const paths = series.map(s => ({ ...s, ...pdPath(s.values, W, H, PAD) }));
  const xAt = i => PAD + (W-2*PAD)*i/(Math.max(n-1,1));
  const onMove = e => {
    const r = e.currentTarget.getBoundingClientRect();
    const idx = Math.round((e.clientX - r.left) / r.width * (n-1));
    setHi(Math.max(0, Math.min(n-1, idx)));
  };
  // Bolinhas em cada ponto + tooltip escuro no hover (estilo série temporal da Visão Geral, spec 2026-07-13)
  const tip = hi != null && caption ? caption(hi) : '';
  return (
    <div style={{flex:1, minHeight:0, display:'flex', flexDirection:'column', padding:'12px 20px 16px'}}>
      <div style={{flex:1, minHeight:height, position:'relative'}}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="none"
             style={{display:'block'}} onMouseMove={onMove} onMouseLeave={()=>setHi(null)}>
          <line x1="0" y1={H*0.34} x2={W} y2={H*0.34} stroke="var(--gray-100)"/>
          <line x1="0" y1={H*0.67} x2={W} y2={H*0.67} stroke="var(--gray-100)"/>
          {paths.map((p,i)=> p.fill && <path key={'a'+i} d={p.area} fill={p.fill}/>)}
          {paths.map((p,i)=> <path key={'l'+i} d={p.line} fill="none" stroke={p.color} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>)}
          {hi!=null && <line x1={xAt(hi)} y1="0" x2={xAt(hi)} y2={H} stroke="var(--gray-300)" strokeDasharray="3 3" vectorEffect="non-scaling-stroke"/>}
          {paths.map((p,si)=> p.pts.map((pt,pi)=>
            <circle key={si+'-'+pi} cx={pt[0]} cy={pt[1]} r={hi===pi?4:2.4} fill="#fff" stroke={p.color} strokeWidth="2" vectorEffect="non-scaling-stroke"/>))}
        </svg>
        {tip && (
          <div style={{position:'absolute', left:`${Math.min(Math.max(xAt(hi)/W*100,10),90)}%`, top:2,
            transform:'translateX(-50%)', background:'var(--fenix-navy)', color:'#F6E9E0',
            font:'700 11px/1.3 var(--font-mono)', padding:'6px 9px', borderRadius:'var(--r-sm)',
            whiteSpace:'nowrap', pointerEvents:'none', boxShadow:'var(--shadow-md)', zIndex:2}}>{tip}</div>
        )}
      </div>
      {(xLabels||[]).length > 0 && (
        <div style={{display:'flex', gap:10, marginTop:8, font:'500 10.5px/1 var(--font-mono)', color:'var(--fg-4)'}}>
          {xLabels.map((l,i)=><span key={i}>{l}</span>)}
        </div>
      )}
    </div>
  );
};

// Donut de um grupo de etapas (FE ou BE), normalizado dentro do grupo, com hover por fatia.
const PDDonut = ({ stages, title, sub }) => {
  const [hi, setHi] = React.useState(null);
  const total = stages.reduce((s,x)=>s+x.rev,0) || 1;
  const totalUnits = stages.reduce((s,x)=>s+x.units,0);
  const R = 54, C = 2*Math.PI*R;
  let acc = 0;
  const arcs = stages.map((s,i)=>{
    const frac = s.rev/total, len = frac*C, off = -acc*C; acc += frac;
    return { ...s, i, pctIn: frac*100, color:PD_STAGE_PALETTE[i%PD_STAGE_PALETTE.length], dash:`${len.toFixed(2)} ${(C-len).toFixed(2)}`, offset:off.toFixed(2) };
  });
  const hs = hi!=null ? arcs[hi] : null;
  return (
    <PDCard style={{flex:1, minHeight:300}}>
      <PDHead title={title} sub={sub}/>
      {stages.length === 0 ? (
        <div style={{flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'24px', color:'var(--fg-4)', font:'500 13px/1.4 var(--font-sans)', textAlign:'center'}}>
          Sem {title.toLowerCase().includes('back') ? 'back-end' : 'front-end'} no período
        </div>
      ) : (
        <>
          <div style={{flex:1, display:'flex', alignItems:'center', gap:16, padding:'12px 20px 8px', minWidth:0}}>
            <svg width="140" height="140" viewBox="0 0 150 150" style={{flex:'none'}} onMouseLeave={()=>setHi(null)}>
              <circle cx="75" cy="75" r={R} fill="none" stroke="var(--gray-100)" strokeWidth="20"/>
              {arcs.map(a=>(
                <circle key={a.i} cx="75" cy="75" r={R} fill="none" stroke={a.color}
                  strokeWidth={hi===a.i?24:20} strokeDasharray={a.dash} strokeDashoffset={a.offset}
                  transform="rotate(-90 75 75)" style={{cursor:'pointer', opacity: hi==null||hi===a.i?1:0.35, transition:'opacity .12s, stroke-width .12s'}}
                  onMouseEnter={()=>setHi(a.i)}/>
              ))}
              <text x="75" y="70" textAnchor="middle" style={{font:'800 15px var(--font-num)', fontVariantNumeric:'tabular-nums', fill:'var(--fg-1)'}}>{hs?NUM(hs.units):NUM(totalUnits)}</text>
              <text x="75" y="86" textAnchor="middle" style={{font:'600 8px var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', fill:'var(--fg-3)'}}>vendas</text>
            </svg>
            <div style={{flex:1, display:'flex', flexDirection:'column', gap:6, minWidth:0}}>
              {arcs.map(a=>(
                <div key={a.i} onMouseEnter={()=>setHi(a.i)} onMouseLeave={()=>setHi(null)}
                  style={{display:'flex', alignItems:'center', gap:8, cursor:'pointer', opacity:hi==null||hi===a.i?1:0.5}}>
                  <span style={{width:8, height:8, borderRadius:2, background:a.color, flex:'none'}}/>
                  <span style={{font:'600 11.5px/1 var(--font-sans)', color:'var(--fg-1)', flex:1, minWidth:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{a.label}</span>
                  <span style={{font:'600 11px/1 var(--font-mono)', color:'var(--fg-3)', fontVariantNumeric:'tabular-nums'}}>{PCT(a.pctIn)}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{padding:'0 20px 16px', minHeight:34}}>
            <div style={{font:'600 11.5px/1.3 var(--font-sans)', color:hs?'var(--fg-1)':'var(--fg-4)'}}>
              {hs ? `${hs.label} — ${NUM(hs.units)} vendas · ${USDk(hs.rev)} (${PCT(hs.pctIn)})` : 'Passe o mouse nas fatias'}
            </div>
          </div>
        </>
      )}
    </PDCard>
  );
};

const ProductDetailView = ({ family, currency, setCurrency, onBack, onKpiSelect }) => {
  const [period, setPeriod] = React.useState('30d');
  const [customRange, setCustomRange] = React.useState(null);
  const [refundBy, setRefundBy] = React.useState('pedido');
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const fullLoading = useFullLoading();
  const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };

  React.useEffect(()=>{
    const began = fullLoading.begin();
    let cancelled = false; setLoading(true);
    fetchProductDetailAPI({ family, period, refundBy, start: customRange?.start, end: customRange?.end })
      .then(d=>{ if(!cancelled) setData(d); })
      .catch(()=>{ if(!cancelled) setData(buildProductDetailMock(family, period)); })
      .finally(()=>{ if(!cancelled) setLoading(false); fullLoading.end(began); });
    return ()=>{ cancelled = true; };
  },[family, period, refundBy, customRange]);

  if (loading && !data) return <div style={{padding:40, color:'var(--fg-3)'}}>Carregando detalhe…</div>;
  if (!data) return null;

  const m = data.metrics;
  const delta = m.grossTotalPrev ? (m.grossTotal - m.grossTotalPrev)/m.grossTotalPrev*100 : null;
  const rh = refundHealth(m.refundRate);
  const periodLabel = PERIOD_TITLES[period] || period;
  const openKpi = (o) => onKpiSelect && onKpiSelect({ ...o, data: { detail: data, ...(o.data||{}) } });

  // Funil separado em FE e BE (dois donuts, cada um normalizado no próprio grupo).
  const feStages = data.funnelByStage.filter(s=>s.role==='fe');
  const beStages = data.funnelByStage.filter(s=>s.role==='be');

  const ts = data.timeseries;   // usado no bloco de volume (vendas×refund) abaixo
  const maxRefStage = Math.max(...data.refundByStage.map(s=>s.rate), 1);

  return (
    <div style={{display:'flex', flexDirection:'column', gap:16, position:'relative'}}>
      {/* Header */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap'}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          {onBack && <button onClick={onBack} style={PD.back}><Icon name="chevron" size={15} style={{transform:'scaleX(-1)'}}/> Produtos</button>}
          <div style={{width:44, height:44, borderRadius:12, background:PD_STAGE_PALETTE[0], color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', font:'800 16px/1 var(--font-sans)', flex:'none', boxShadow:'0 4px 12px rgba(1,27,54,.18)'}}>{initials(family)}</div>
          <div><div style={{font:'800 22px/1 var(--font-display)', letterSpacing:'-.01em', color:'var(--fg-1)'}}>{family}</div>
            <div style={{font:'500 11px/1 var(--font-mono)', color:'var(--fg-3)', marginTop:6}}>buygoods</div></div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:10, flexWrap:'wrap'}}>
          <PeriodSelector period={period} setPeriod={withLoad(setPeriod)}
            customRange={customRange} setCustomRange={withLoad(setCustomRange)}/>
          <Dropdown icon="layers" label="Reembolso" value={refundBy} onChange={withLoad(setRefundBy)}
            options={REFUND_BY_OPTIONS}/>
        </div>
      </div>
      <RefundByNote refundBy={refundBy}/>

      {/* ══════════════ § SETOR 1 · VISÃO GERAL ══════════════ */}
      <SectionTitle n={1} first label="Visão geral" sub="Receita e indicadores do funil completo"/>
      <div style={PD.kpiRow}>
        {/* Receita — card de destaque (navy), clicável */}
        <div style={{...PD.hero, cursor:'pointer', transition:'transform .15s'}}
          onClick={()=>openKpi({ eye:'Receita total bruta', val:USDk(m.grossTotal), mono:true,
            sub: delta==null?'sem período anterior':`${delta>=0?'↑':'↓'} ${PCT(Math.abs(delta))} vs. anterior`,
            icon:'dollar', tint:'rgba(255,168,102,.18)', fg:'#FFA866', kind:'prod-revenue' })}
          onMouseEnter={e=>e.currentTarget.style.transform='translateY(-1px)'}
          onMouseLeave={e=>e.currentTarget.style.transform='none'}>
          <div style={PD.heroEye}>Receita total bruta · {periodLabel}</div>
          <div style={PD.heroVal} className="fenix-num">{USDk(m.grossTotal)}</div>
          <div style={{...PD.heroDelta, background: delta==null?'rgba(255,255,255,.12)':delta>=0?'rgba(31,157,107,.22)':'rgba(216,69,59,.22)', color: delta==null?'#9FB0C9':delta>=0?'#5FD6A0':'#F3A6A0'}}>
            {delta==null ? 'sem período anterior' : `${delta>=0?'↑':'↓'} ${PCT(Math.abs(delta))} vs. anterior`}
          </div>
        </div>
        {/* 5 cards brancos clicáveis */}
        {[
          { eye:'Pedidos', val:NUM(m.orders), sub:`${NUM(m.refunds||0)} refunds · ${NUM(m.chargebacks||0)} chargebacks`, icon:'cart', tint:'var(--fenix-blue-100)', fg:'var(--fenix-blue)', kind:'prod-orders' },
          { eye:'AOV', val:USD(m.aov), sub:'por checkout', icon:'chart', tint:'var(--fenix-blue-100)', fg:'var(--fenix-blue)', kind:'prod-aov' },
          { eye:'Lucro op.', val:USDk(m.operating), sub:'líq. de custos', icon:'dollar', tint:'var(--fenix-orange-100)', fg:'var(--fenix-orange-600)', kind:'prod-operating' },
          { eye:'Margem', val:PCT(m.margin), sub:'lucro / receita', icon:'target', tint:'var(--fenix-orange-100)', fg:'var(--fenix-orange-600)', kind:'prod-margin' },
          { eye:'Taxa refund', val:PCT(m.refundRate), valColor:rh.color, health:rh, icon:'refresh', tint:rh.bg, fg:rh.color, kind:'prod-refund' },
          { eye:'Gordura Logicall', val:USDk(m.logicallGordura||0), sub:'líquido · separado do direto', icon:'cart', tint:'var(--negative-bg)', fg:'#D8453B', kind:'logicall-gordura', data:{ products: data.logicallProducts } },
        ].map((c,i)=>(
          <div key={i} style={{...PD.wkpi, cursor:'pointer', transition:'box-shadow .15s, transform .15s'}}
            onClick={()=>openKpi(c)}
            onMouseEnter={e=>{e.currentTarget.style.boxShadow='var(--shadow-md)';e.currentTarget.style.transform='translateY(-1px)';}}
            onMouseLeave={e=>{e.currentTarget.style.boxShadow='var(--shadow-sm)';e.currentTarget.style.transform='none';}}>
            <div style={PD.wkpiTop}><span style={PD.wkpiEye}>{c.eye}</span><span style={{...PD.wkpiIc, background:c.tint, color:c.fg}}><Icon name={c.icon} size={16} color={c.fg}/></span></div>
            <div style={{...PD.wkpiVal, ...(c.valColor?{color:c.valColor}:{})}}>{c.val}</div>
            {c.health
              ? <div style={PD.wkpiHealthWrap}><div style={{...PD.wkpiHealthChip, color:c.health.color, background:c.health.bg}}><span style={{...PD.wkpiHealthDot, background:c.health.color}}/>{c.health.label}</div></div>
              : <div style={PD.wkpiSub}>{c.sub}</div>}
          </div>
        ))}
      </div>

      {/* ══════════════ § SETOR 2 · FUNIL ══════════════ */}
      <SectionTitle n={2} label="Funil" sub="Receita por etapa · Front-end e Back-end"/>
      <div style={{display:'flex', gap:16, alignItems:'stretch'}} className="cpa-aov">
        <PDDonut stages={feStages} title="Funil Front-end" sub={`Receita por etapa · FE · ${periodLabel}`}/>
        <PDDonut stages={beStages} title="Funil Back-end" sub={`Upsells & downsells · ${periodLabel}`}/>
      </div>
      <div style={{font:'500 11.5px/1.4 var(--font-sans)', color:'var(--fg-3)', margin:'-4px 2px 0'}}>
        Os totais no topo são do <b>funil completo</b> (incluem upsells de outros produtos vendidos no funil).
        Os donuts por etapa mostram só as ofertas do próprio produto, então podem não somar o total.
      </div>

      {/* ══════════════ § SETOR 3 · REFUND / ESTORNO ══════════════ */}
      <SectionTitle n={3} label="Refund / estorno" sub="Série temporal, coorte, maturação e estorno por etapa"/>
      <PDCard style={{minHeight:240}}>
        <PDHead title="Vendas × Refund no tempo" sub="Volume (contagem) no período"
          right={<div style={{display:'flex', gap:14}}>
            <span style={{display:'inline-flex', alignItems:'center', gap:6, font:'600 11px/1 var(--font-sans)', color:'var(--fg-2)'}}><span style={{width:9, height:9, borderRadius:3, background:'var(--fenix-navy)'}}/>Vendas</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6, font:'600 11px/1 var(--font-sans)', color:'var(--fg-2)'}}><span style={{width:9, height:9, borderRadius:3, background:'var(--fenix-orange)'}}/>Refund</span></div>}/>
        <PDLineChart n={ts.length}
          series={[{color:'var(--fenix-navy)', fill:'rgba(1,27,54,.07)', values:ts.map(t=>t.sales)},
                   {color:'var(--fenix-orange)', values:ts.map(t=>t.refunds)}]}
          xLabels={['início','','fim']}
          caption={i=>`${NUM(ts[i].sales)} vendas · ${NUM(ts[i].refunds)} refund`}/>
      </PDCard>

      {/* Coorte por janela — sem clique-para-filtrar; a taxa de refund abre o drawer da janela */}
      <CohortWindows windows={data.cohortWindows}
        onRefundClick={(w)=>openKpi({ eye:`Refund · ${w.label}`, val:PCT(w.refundRate),
          sub:`${NUM(w.vendas)} vendas · ${USDk(w.receita)}`, icon:'refresh',
          tint:refundHealth(w.refundRate).bg, fg:refundHealth(w.refundRate).color,
          kind:'prod-cohort-refund', data:{ window: w } })}/>

      {/* Taxa no tempo + maturação (lado a lado) */}
      <div style={{display:'flex', gap:16, alignItems:'stretch'}} className="cpa-aov">
        <RefundRateOverTime timeseries={data.timeseries}/>
        <RefundMaturation maturation={data.refundMaturation}/>
      </div>

      {/* ══════════════ § SETOR 4 · AFILIADOS & ETAPAS ══════════════ */}
      <SectionTitle n={4} label="Afiliados & etapas" sub="Onde nasce o estorno e quem mais vende o produto"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, alignItems:'start'}} className="cpa-aov">

        {/* Refund por etapa — donut ponderado por unidades reembolsadas; hover/legenda mostram a taxa %.
            Clique numa fatia abre o drawer da etapa (produtos + afiliados). */}
        <PDCard style={{padding:'18px 22px 20px'}}>
          <div style={{marginBottom:14}}>
            <div style={{font:'700 15px/1 var(--font-sans)', color:'var(--fg-1)'}}>Refund por etapa</div>
            <div style={{font:'500 11.5px/1.3 var(--font-sans)', color:'var(--fg-3)', marginTop:5}}>Onde nasce o estorno · clique numa fatia para ver produtos e afiliados</div>
          </div>
          <HoverDonut
            segments={data.refundByStage.map(s=>({ label:s.label, value:(s.units||0)*(s.rate||0)/100, color:refundHealth(s.rate).color, meta:s }))}
            centerValue={NUM(Math.round(data.refundByStage.reduce((a,s)=>a+(s.units||0)*(s.rate||0)/100,0)))}
            centerLabel="reembolsos"
            legendValue={a => a.meta ? PCT(a.meta.rate) : PCT(a.pctIn)}
            caption={a => a.meta ? `${a.label} — ${PCT(a.meta.rate)} de refund · ${NUM(a.meta.units)} vendas` : `${a.label} · ${PCT(a.pctIn)}`}
            hint="Passe o mouse numa fatia · clique para detalhar"
            onSlice={a => a.meta && openKpi({ eye:`Refund · ${a.meta.label}`, val:PCT(a.meta.rate), sub:`${NUM(a.meta.units)} vendas`,
              icon:'refresh', tint:refundHealth(a.meta.rate).bg, fg:refundHealth(a.meta.rate).color,
              kind:'prod-stage-refund', data:{ stage: a.meta } })}
          />
        </PDCard>

        {/* Afiliados que mais vendem — barras horizontais (top 6 por receita). Linha clicável → afiliado. */}
        <PDCard style={{padding:'18px 22px 16px'}}>
          <div style={{marginBottom:14}}>
            <div style={{font:'700 15px/1 var(--font-sans)', color:'var(--fg-1)'}}>Afiliados que mais vendem</div>
            <div style={{font:'500 11.5px/1.3 var(--font-sans)', color:'var(--fg-3)', marginTop:5}}>Top por receita · clique para abrir o afiliado</div>
          </div>
          {(() => { const affs = data.byAffiliate.slice(0,6); const maxRev = Math.max(...affs.map(a=>a.revenue||0), 1); return (
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              {affs.map((a,i)=>(
                <div key={a.name} onClick={()=>gotoAffiliate({platform:'buygoods', name:a.name})} style={{cursor:'pointer'}}
                  onMouseEnter={e=>e.currentTarget.style.opacity='0.85'} onMouseLeave={e=>e.currentTarget.style.opacity='1'}>
                  <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:6}}>
                    <div style={{width:24, height:24, borderRadius:'50%', background:PD_STAGE_PALETTE[i%PD_STAGE_PALETTE.length], color:'#F6E9E0', display:'flex', alignItems:'center', justifyContent:'center', font:'700 9.5px/1 var(--font-sans)', flex:'none'}}>{initials(a.name)}</div>
                    <span style={{flex:1, minWidth:0, font:'600 12.5px/1.1 var(--font-sans)', color:'var(--fg-1)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{a.name}</span>
                    <span style={{font:'700 12.5px/1 var(--font-mono)', color:'var(--fg-1)', fontVariantNumeric:'tabular-nums'}}>{USDk(a.revenue)}</span>
                  </div>
                  <div style={{height:8, borderRadius:5, background:'var(--gray-100)', overflow:'hidden'}}>
                    <div style={{width:((a.revenue||0)/maxRev*100).toFixed(1)+'%', height:'100%', borderRadius:5, background:PD_STAGE_PALETTE[i%PD_STAGE_PALETTE.length]}}/>
                  </div>
                  <div style={{font:'500 10.5px/1 var(--font-mono)', color:'var(--fg-3)', marginTop:4}}>{NUM(a.orders)} pedidos</div>
                </div>
              ))}
            </div>
          ); })()}
        </PDCard>

      </div>
      <FullLoadingOverlay show={fullLoading.show && !!data} conn="connecting"/>
    </div>
  );
};

const PD = {
  back:{ display:'inline-flex', alignItems:'center', gap:6, font:'600 12px/1 var(--font-sans)', color:'var(--fg-2)', padding:'9px 13px', borderRadius:'var(--r-sm)', background:'#fff', border:'1px solid var(--border-1)', cursor:'pointer' },

  // KPIs (§ Visão geral) — Receita destaque + 5 brancas clicáveis (spec 2026-07-09)
  kpiRow:{ display:'grid', gridTemplateColumns:'1.5fr repeat(6, minmax(0,1fr))', gap:14 },
  hero:{ background:'var(--fenix-navy)', borderRadius:'var(--r-lg)', padding:'20px 22px', display:'flex', flexDirection:'column', justifyContent:'center' },
  heroEye:{ font:'600 10.5px/1.2 var(--font-sans)', letterSpacing:'.1em', textTransform:'uppercase', color:'#FFA866' },
  heroVal:{ font:'800 34px/1 var(--font-num)', letterSpacing:'-.02em', color:'#fff', margin:'12px 0 10px', fontVariantNumeric:'tabular-nums' },
  heroDelta:{ display:'inline-flex', alignSelf:'flex-start', alignItems:'center', gap:5, font:'700 11px/1 var(--font-mono)', padding:'5px 10px', borderRadius:'var(--r-sm)' },
  wkpi:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', padding:'16px 16px', boxShadow:'var(--shadow-sm)', minWidth:0, display:'flex', flexDirection:'column' },
  wkpiTop:{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8, marginBottom:12 },
  wkpiEye:{ font:'700 11px/1.2 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)' },
  wkpiIc:{ width:28, height:28, borderRadius:'var(--r-sm)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  wkpiVal:{ font:'800 22px/1 var(--font-mono)', color:'var(--fg-1)', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums' },
  wkpiSub:{ font:'600 11px/1.2 var(--font-mono)', color:'var(--fg-3)', marginTop:8 },
  wkpiHealthWrap:{ marginTop:8 },
  wkpiHealthChip:{ display:'inline-flex', alignItems:'center', gap:6, font:'700 10.5px/1 var(--font-sans)', padding:'4px 8px', borderRadius:'var(--r-pill)' },
  wkpiHealthDot:{ width:7, height:7, borderRadius:'50%', flex:'none' },
};

window.ProductDetailView = ProductDetailView;