// Página de Produtos — view de funil (spec 2026-06-30, reforma 2026-07-28-funnel-tracker):
// matriz FE/BE espelhando o real + estimador de premissas em linha única + faixa "Na régua
// da DRE" + comparação de funis + tabela por afiliado (ranking completo). Filtros padrão:
// PeriodSelector canônico, Afiliado, Reembolso. Sem colidir com os globais
// useState/useMemo: usa React.* direto.
// A tabela "Leads & economics por oferta" (e a série de leads do bridge que só existia para
// acompanhá-la) SAIU daqui em 29/jul: virou página própria em Canais → Leads & economics
// por oferta (spec 2026-07-29, LeadsEconomics.jsx).

// Mesma matemática do backend (product_costs.offer_economics): OPP por pedido a partir das premissas.
function offerEcon(salePrice, bottles, isFe, c) {
  const cogs = (Number(c.cogs_per_bottle)||0) * bottles;
  const ship = isFe ? (Number(c.ship_fe)||0) : 0;
  return salePrice - cogs - ship
    - salePrice*(Number(c.refund_pct)||0)/100;
}

// Recalcula a matriz com as premissas editadas + cliques (CVR de FE).
function recomputeMatrix(matrix, est, clicks) {
  const feOrders = matrix.feOrders || 0;
  const fe = matrix.feRows.map(r=>{
    const opp = offerEcon(r.salePrice, r.bottles, true, est);
    return {...r, opp, opProfit: opp*r.orders, contribution: opp,
      cvr: clicks>0 ? r.orders/clicks*100 : null};
  });
  const be = matrix.beRows.map(r=>{
    const opp = offerEcon(r.salePrice, r.bottles, false, est);
    return {...r, opp, opProfit: opp*r.orders,
      contribution: feOrders ? opp*(r.orders/feOrders) : opp,
      cvr: r.takeRate};
  });
  const feOp = fe.reduce((s,r)=>s+r.opProfit,0);
  const beOp = be.reduce((s,r)=>s+r.opProfit,0);
  return { fe, be, feOp, beOp, feOrders };
}

// Card de premissa editável — padrão DotKpi com input inline (dot colorido + eyebrow
// uppercase + número editável + hint).
const FtPremissaKpi = ({ eye, color, hint, prefix, suffix, value, onChange, step }) => (
  <div style={S.pkCard}>
    <div style={S.pkTop}><span style={{...S.pkDot, background:color}}/><span style={S.pkEye}>{eye}</span></div>
    <div style={S.pkInputRow}>
      {prefix && <span style={S.pkAffix}>{prefix}</span>}
      <input type="number" value={value} onChange={onChange} step={step||'any'} style={S.pkInput} className="fenix-num"/>
      {suffix && <span style={S.pkAffix}>{suffix}</span>}
    </div>
    <div style={S.pkHint}>{hint}</div>
  </div>
);

// Colunas da tabela por afiliado (molde Leads/ldx).
const FT_AFF_COLS = [
  { key:'name',     label:'Afiliado', align:'left'  },
  { key:'orders',   label:'Vendas',   align:'right' },
  { key:'feOrders', label:'FE',       align:'right' },
  { key:'beOrders', label:'BE',       align:'right' },
  { key:'revenue',  label:'Receita',  align:'right' },
  { key:'refunds',  label:'Refunds',  align:'right' },
];
const ProductFunnelView = ({ family, currency, setCurrency, onBack }) => {
  const [period, setPeriod] = React.useState('30d');
  const [customRange, setCustomRange] = React.useState(null);
  const [funnelSel, setFunnelSel] = React.useState('todos');
  const [refundBy, setRefundBy] = React.useState('pedido');
  const [affiliate, setAffiliate] = React.useState('todos');
  const [data, setData] = React.useState(null);
  const [detail, setDetail] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [notFound, setNotFound] = React.useState(false);
  const [est, setEst] = React.useState(null);          // premissas editáveis
  const [clicks, setClicks] = React.useState({});      // cliques por funil (CVR de FE)
  const [affSort, setAffSort] = React.useState('revenue');
  const [affDir, setAffDir] = React.useState(-1);
  const fullLoading = useFullLoading();
  const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };

  // Funil (cadeia principal — controla o overlay); cai no mock se a API estiver offline.
  React.useEffect(()=>{
    const began = fullLoading.begin();
    let cancelled = false;
    setLoading(true); setNotFound(false);
    fetchProductFunnelAPI({ family, period, funnel: funnelSel, refundBy,
        start: customRange?.start, end: customRange?.end, affiliate })
      .then(d=>{ if(cancelled) return; setData(d); setEst(e=> e || {...d.estimatorDefaults}); })
      .catch(err=>{ if(cancelled) return;
        if(err.notFound){ setNotFound(true); setData(null); }
        else { const m = buildFunnelMock(family, period); setData(m); setEst(e=> e || {...m.estimatorDefaults}); } })
      .finally(()=>{ if(!cancelled) setLoading(false); fullLoading.end(began); });
    return ()=>{ cancelled = true; };
  },[family, period, customRange, funnelSel, refundBy, affiliate]);

  // Detalhe (byAffiliate: ranking completo + opções do filtro). NÃO depende de affiliate
  // (a tabela é o ranking cheio da família) nem de refundBy: só usa campos de vendas
  // Completed + refunds de coorte — se algum dia alternar régua aqui, threadear refundBy.
  React.useEffect(()=>{
    let cancelled = false;
    fetchProductDetailAPI({ family, period, start: customRange?.start, end: customRange?.end })
      .then(d=>{ if(!cancelled) setDetail(d); }).catch(()=>{});
    return ()=>{ cancelled = true; };
  },[family, period, customRange]);

  // Ordenação das tabelas (hooks antes dos early-returns).
  const affList = React.useMemo(()=>{
    const l = ((detail && detail.byAffiliate) || []).slice();
    l.sort((a,b)=>{
      const av=a[affSort], bv=b[affSort];
      if (typeof av === 'string') return av.localeCompare(bv)*affDir;
      return ((av||0)-(bv||0))*affDir;
    });
    return l;
  },[detail, affSort, affDir]);
  const affSortBy = k => k===affSort ? setAffDir(-affDir) : (setAffSort(k), setAffDir(-1));
  const affInd = k => affSort===k ? (affDir<0?' ▾':' ▴') : '';

  if (loading && !data) return <LoadingScreen conn="connecting"/>;
  if (notFound) return (
    <div style={{padding:40}}>
      {onBack && <button onClick={onBack} style={S.back}><Icon name="chevron" size={16} style={{transform:'scaleX(-1)'}}/> Produtos</button>}
      <div style={{marginTop:20, color:'var(--fg-2)'}}>
        Sem dados de funil para <b>{family}</b> neste período.
        {affiliate !== 'todos' && <> Este afiliado não tem vendas nas ofertas literais deste produto na janela — limpe o filtro de afiliado.</>}
      </div>
      {affiliate !== 'todos' && (
        <button onClick={()=>withLoad(setAffiliate)('todos')} style={{...S.back, marginTop:14}}>Limpar filtro de afiliado</button>
      )}
    </div>
  );

  const m = data.matrix;
  const c = est || data.estimatorDefaults;
  const curClicks = Number(clicks[data.selected]) || 0;
  const comp = recomputeMatrix(m, c, curClicks);
  const setField = (k)=>(e)=> setEst(s=>({...s, [k]: e.target.value}));

  const matrixRow = (r, isFe) => (
    <tr key={(isFe?'fe':'be')+r.label}>
      <td style={{...S.mtd, textAlign:'left', font:`${isFe?700:500} 12px/1.3 var(--font-sans)`, color:isFe?'var(--fg-1)':'var(--fg-2)'}}>{r.label}</td>
      <td style={S.mtd}>{r.cvr!=null ? <span style={{color:isFe?'var(--fenix-orange)':'var(--fenix-blue)', fontWeight:600}}>{PCT(r.cvr)}</span> : <span style={{color:'var(--fg-4)'}}>—</span>}</td>
      <td style={S.mtd}>{USD(r.salePrice)}</td>
      <td style={S.mtd}>{NUM(r.orders)}</td>
      <td style={{...S.mtd, color:'var(--fg-1)', fontWeight:600}}>{USDk(r.rev)}</td>
      <td style={S.mtd}>{r.refunds ? <span style={{color:refundHealth(r.refundRate).color}}>{NUM(r.refunds)} · {PCT(r.refundRate)}</span> : '—'}</td>
      <td style={S.mtd}>{USD(r.opp)}</td>
      <td style={{...S.mtd, color:r.opProfit>=0?'var(--positive)':'var(--negative)'}}>{USDk(r.opProfit)}</td>
      <td style={S.mtd}>{USD(r.contribution)}</td>
    </tr>
  );
  const totalRow = (label, orders, rev, op, bg) => (
    <tr>
      <td style={{...S.mtd, ...S.mtot, background:bg, textAlign:'left'}}>{label}</td>
      <td style={{...S.mtd, background:bg}}/><td style={{...S.mtd, background:bg}}/>
      <td style={{...S.mtd, ...S.mtot, background:bg}}>{NUM(orders)}</td>
      <td style={{...S.mtd, ...S.mtot, background:bg}}>{USDk(rev)}</td>
      <td style={{...S.mtd, background:bg}}/>
      <td style={{...S.mtd, background:bg}}/>
      <td style={{...S.mtd, ...S.mtot, background:bg, color:'var(--positive)'}}>{USDk(op)}</td>
      <td style={{...S.mtd, background:bg}}/>
    </tr>
  );

  return (
    <div style={{display:'flex', flexDirection:'column', gap:18, 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={S.back}><Icon name="chevron" size={16} style={{transform:'scaleX(-1)'}}/> Produtos</button>}
          <div>
            <div style={{font:'600 10px/1 var(--font-sans)', letterSpacing:'.08em', textTransform:'uppercase', color:'var(--fenix-orange)'}}>Matriz de funil · {data.selected} · buygoods</div>
            <h1 style={{font:'800 22px/1.1 var(--font-display)', color:'var(--fg-1)', margin:'5px 0 0'}}>{family}</h1>
          </div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:10, flexWrap:'wrap'}}>
          {data.funnels.length>1 && data.funnels.map(f=>(
            <button key={f} onClick={()=>withLoad(setFunnelSel)(f)}
              style={{border:'1px solid '+(f===data.selected?'var(--fenix-navy)':'var(--border-2)'), background:f===data.selected?'var(--fenix-navy)':'#fff', color:f===data.selected?'#F6E9E0':'var(--fg-2)', font:'600 12px/1 var(--font-sans)', padding:'8px 12px', borderRadius:'var(--r-md)', cursor:'pointer'}}>Funil {f}</button>
          ))}
          <PeriodSelector period={period} setPeriod={withLoad(setPeriod)}
            customRange={customRange} setCustomRange={withLoad(setCustomRange)}/>
          <Dropdown icon="users" label="Afiliado" value={affiliate} onChange={withLoad(setAffiliate)}
            options={[{key:'todos', label:'Todos'},
                      ...((detail && detail.byAffiliate) || []).filter(a=>a.name!=='Não atribuído').map(a=>({key:a.name, label:a.name}))]}/>
          <Dropdown icon="layers" label="Reembolso" value={refundBy} onChange={withLoad(setRefundBy)}
            options={REFUND_BY_OPTIONS}/>
        </div>
      </div>
      <RefundByNote refundBy={refundBy}/>

      {/* Matriz FE/BE */}
      <div style={S.card}>
        <div style={S.cardHead}>
          <div style={S.eyebrow}>Funil {data.selected}</div>
          <div style={{font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4}}>Receita &amp; lucro por oferta</div>
        </div>
        {data.funnelComplete && (
          <div style={{margin:'0 20px 6px', padding:'10px 13px', background:'var(--bg-sunken)',
            borderRadius:'var(--r-md)', font:'500 12px/1.5 var(--font-sans)', color:'var(--fg-2)'}}>
            <b style={{color:'var(--fg-1)'}}>Funil completo:</b> {NUM(data.funnelComplete.orders)} vendas
            {' · '}{USDk(data.funnelComplete.gross)}{' · refund '}{PCT(data.funnelComplete.refundRate)}
            <span style={{color:'var(--fg-3)'}}> — inclui upsells de outros produtos vendidos no funil;
            as linhas abaixo mostram só as ofertas do próprio produto (podem não somar o total).</span>
          </div>
        )}
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%', borderCollapse:'collapse', minWidth:780}}>
            <thead><tr>
              {['Oferta','CVR','Preço','Pedidos','Receita','Refund','OPP','Margem pré-comissão','Contrib. pré-comissão'].map((h,i)=>(
                <th key={h} style={{...S.mth, textAlign:i?'right':'left'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              <tr><td colSpan={9} style={S.section}>Front-end</td></tr>
              {comp.fe.map(r=>matrixRow(r,true))}
              {totalRow('Total FE', comp.feOrders, m.feRev, comp.feOp, 'var(--fenix-orange-100, #FFF2E8)')}
              {comp.be.length>0 && <>
                <tr><td colSpan={9} style={S.section}>Back-end</td></tr>
                {comp.be.map(r=>matrixRow(r,false))}
                {totalRow('Total BE', m.beOrders, m.beRev, comp.beOp, 'var(--fenix-blue-100, #EAF0FB)')}
              </>}
            </tbody>
          </table>
        </div>
        {data.dreResumo && (
          <div style={S.dreStrip}>
            <span style={S.dreLabel}>Na régua da DRE:</span>
            <span>RB <b>{USDk(data.dreResumo.rb)}</b></span>
            <span>custo produto {PCT(data.dreResumo.custoPct)} <b>−{USDk(data.dreResumo.custoProduto)}</b></span>
            <span>contingência {PCT(data.dreResumo.contingenciaPct)} <b>−{USDk(data.dreResumo.contingencia)}</b></span>
            <span>comissão <b>−{USDk(data.dreResumo.comissao)}</b></span>
            <span style={{color: data.dreResumo.margem>=0 ? 'var(--positive)' : 'var(--negative)'}}>
              margem estimada <b>{USDk(data.dreResumo.margem)}</b></span>
            <span style={S.dreNote}>fees/taxes/refund realizados não entram aqui — ver DRE Afiliados</span>
          </div>
        )}
      </div>

      {/* Premissas editáveis — linha única */}
      <div style={S.pkRow}>
        <FtPremissaKpi eye="Cliques (EF)" color="var(--fenix-blue)" hint="define o CVR do front-end"
          value={clicks[data.selected]||''} onChange={e=>setClicks(s=>({...s,[data.selected]:e.target.value}))}/>
        <FtPremissaKpi eye="Reserva de refund" color="var(--warning)" hint={`real: ${PCT(m.summary.refundRate)}`}
          suffix="%" value={c.refund_pct} onChange={setField('refund_pct')}/>
        <FtPremissaKpi eye="COGS por frasco" color="var(--fenix-orange)" hint="custo do produto (placeholder — COGS real pendente)"
          prefix="$" value={c.cogs_per_bottle} onChange={setField('cogs_per_bottle')} step="0.1"/>
        <FtPremissaKpi eye="Frete (front-end)" color="var(--fg-3)" hint="por pedido FE"
          prefix="$" value={c.ship_fe} onChange={setField('ship_fe')} step="0.5"/>
      </div>

      {/* Comparar funis */}
      {data.compare.length>1 && (
        <div style={S.card}>
          <div style={S.cardHead}><div style={S.eyebrow}>Comparar funis</div><div style={{font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4}}>Performance por funil</div></div>
          <table style={{width:'100%', borderCollapse:'collapse'}}>
            <thead><tr>{['Funil','AOV','Taxa refund','Pedidos FE'].map((h,i)=>(<th key={h} style={{...S.mth, textAlign:i?'right':'left'}}>{h}</th>))}</tr></thead>
            <tbody>
              {data.compare.map(f=>(
                <tr key={f.funnel} style={{background: f.funnel===data.selected?'var(--gray-50)':'#fff'}}>
                  <td style={{...S.mtd, textAlign:'left', fontWeight:600, color:'var(--fg-1)'}}>Funil {f.funnel}</td>
                  <td style={S.mtd}>{USD(f.aov)}</td>
                  <td style={{...S.mtd, color:refundHealth(f.refundRate).color}}>{PCT(f.refundRate)}</td>
                  <td style={S.mtd}>{NUM(f.feOrders)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Por afiliado — ranking completo da família (deliberadamente NÃO filtrado por afiliado) */}
      {detail && (
        <div style={S.card}>
          <div style={S.cardHead}><div style={S.eyebrow}>Por afiliado</div><div style={{font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4}}>Quem vende o produto</div></div>
          <div style={S.tScroll}>
            <table style={{width:'100%', borderCollapse:'collapse', minWidth:640}}>
              <thead><tr>
                {FT_AFF_COLS.map(col=>(
                  <th key={col.key} onClick={()=>affSortBy(col.key)}
                    style={{...S.thSort, textAlign:col.align}}>{col.label}{affInd(col.key)}</th>
                ))}
              </tr></thead>
              <tbody>
                {affList.map(a=>(
                  <tr key={a.name} onClick={()=>gotoAffiliate({platform:'buygoods', name:a.name})}
                    style={{cursor:'pointer'}}
                    onMouseEnter={e=>{ e.currentTarget.style.background='var(--gray-50)'; }}
                    onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; }}>
                    <td style={{...S.tdCell, textAlign:'left', fontFamily:'var(--font-sans)', fontWeight:600}}>{a.name}</td>
                    <td style={S.tdNum} className="fenix-num">{NUM(a.orders)}</td>
                    <td style={S.tdNum} className="fenix-num">{NUM(a.feOrders)}</td>
                    <td style={S.tdNum} className="fenix-num">{NUM(a.beOrders)}</td>
                    <td style={{...S.tdNum, fontWeight:700}} className="fenix-num">{USDk(a.revenue)}</td>
                    <td style={S.tdNum} className="fenix-num">{a.refunds
                      ? <>{NUM(a.refunds)} · <span style={{color:refundHealth(a.refundRate).color}}>{PCT(a.refundRate)}</span></>
                      : '—'}</td>
                  </tr>
                ))}
                {affList.length===0 && (
                  <tr><td colSpan={FT_AFF_COLS.length} style={S.tEmpty}>Sem afiliados no período.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

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

const S = {
  back:{ display:'inline-flex', alignItems:'center', gap:7, font:'600 13px/1 var(--font-sans)', color:'var(--fg-2)', background:'var(--bg-sunken)', border:0, borderRadius:'var(--r-md)', padding:'10px 13px', cursor:'pointer' },
  card:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden' },
  cardHead:{ padding:'16px 20px', borderBottom:'1px solid var(--border-1)' },
  eyebrow:{ font:'600 10px/1 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)' },
  mth:{ font:'600 10px/1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)', padding:'11px 12px', borderBottom:'1px solid var(--border-2)', whiteSpace:'nowrap' },
  mtd:{ padding:'10px 12px', borderBottom:'1px solid var(--border-1)', textAlign:'right', whiteSpace:'nowrap', font:'500 12px/1.3 var(--font-mono)', color:'var(--fg-2)', fontVariantNumeric:'tabular-nums' },
  mtot:{ fontWeight:700, color:'var(--fg-1)' },
  section:{ padding:'9px 12px', background:'var(--bg-sunken)', font:'700 10px/1 var(--font-sans)', letterSpacing:'.06em', textTransform:'uppercase', color:'var(--fg-2)', textAlign:'left' },
  // Faixa "Na régua da DRE" (spec 2026-07-28 §4)
  dreStrip:{ display:'flex', gap:18, flexWrap:'wrap', alignItems:'center', padding:'12px 20px', borderTop:'1px solid var(--border-1)', background:'var(--bg-sunken)', font:'500 12px/1.4 var(--font-sans)', color:'var(--fg-2)' },
  dreLabel:{ font:'700 10px/1 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)' },
  dreNote:{ font:'500 11px/1.4 var(--font-sans)', color:'var(--fg-4)', marginLeft:'auto' },
  // Premissas em linha única (cards no padrão DotKpi com input)
  pkRow:{ display:'flex', gap:14, flexWrap:'nowrap', overflowX:'auto' },
  pkCard:{ flex:'1 0 220px', minWidth:0, background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', padding:'16px 18px', boxShadow:'var(--shadow-sm)' },
  pkTop:{ display:'flex', alignItems:'center', gap:8, marginBottom:12 },
  pkDot:{ width:9, height:9, borderRadius:2, flex:'none' },
  pkEye:{ font:'700 10px/1 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)', whiteSpace:'nowrap' },
  pkInputRow:{ display:'flex', alignItems:'center', gap:6 },
  pkInput:{ width:'100%', minWidth:0, border:'1px solid var(--border-2)', borderRadius:'var(--r-sm)', padding:'8px 10px', font:'700 18px/1.1 var(--font-num)', color:'var(--fg-1)', textAlign:'right', fontVariantNumeric:'tabular-nums' },
  pkAffix:{ font:'var(--text-mono-sm)', color:'var(--fg-3)', flex:'none' },
  pkHint:{ font:'500 11px/1.3 var(--font-sans)', color:'var(--fg-4)', marginTop:8 },
  // Tabelas padrão (molde ldx): th sticky sortable + células numéricas tabulares
  tScroll:{ maxHeight:420, overflowY:'auto', overflowX:'auto' },
  thSort:{ font:'700 10.5px/1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)', padding:'12px 14px', background:'var(--bg-sunken)', borderBottom:'1px solid var(--border-2)', whiteSpace:'nowrap', userSelect:'none', cursor:'pointer', position:'sticky', top:0, zIndex:2 },
  tdCell:{ padding:'11px 14px', borderBottom:'1px solid var(--border-1)', font:'var(--text-body-sm)', color:'var(--fg-1)', whiteSpace:'nowrap', fontFamily:'var(--font-num)', fontVariantNumeric:'tabular-nums' },
  tdNum:{ padding:'11px 14px', borderBottom:'1px solid var(--border-1)', font:'var(--text-body-sm)', color:'var(--fg-1)', whiteSpace:'nowrap', textAlign:'right', fontFamily:'var(--font-num)', fontVariantNumeric:'tabular-nums' },
  tEmpty:{ padding:'34px 22px', textAlign:'center', font:'var(--text-body-sm)', color:'var(--fg-4)' },
};

window.ProductFunnelView = ProductFunnelView;


// Funnel Track Sales (spec 2026-07-01, reformada 2026-07-28): seção de sidebar =
// seletor de produto + a página de funil do produto.
const FunnelTrackView = () => {
  const [family, setFamily] = React.useState('');
  const [fams, setFams] = React.useState([]);
  React.useEffect(()=>{
    let cancelled = false;
    fetchProductsOverviewAPI({ period:'ytd' })
      .then(d=>{ if(!cancelled) setFams(d.rows.filter(r=>r.mapped).map(r=>r.key)); })
      .catch(()=>{ if(!cancelled) setFams(buildProductsOverviewMock('ytd').rows.map(r=>r.key)); });
    return ()=>{ cancelled = true; };
  },[]);
  const options = [{key:'', label:'Selecione um produto…'}, ...fams.map(f=>({key:f, label:f}))];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:18}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap'}}>
        <div>
          <div style={{font:'600 10px/1 var(--font-sans)', letterSpacing:'.08em', textTransform:'uppercase', color:'var(--fenix-orange)'}}>Funnel Track Sales · buygoods</div>
          <h1 style={{font:'800 22px/1.1 var(--font-display)', color:'var(--fg-1)', margin:'5px 0 0'}}>Funil por produto</h1>
        </div>
        <Dropdown icon="cart" label="Produto" value={family} options={options} onChange={setFamily}/>
      </div>
      {family
        ? <ProductFunnelView key={family} family={family}/>
        : (
          <div style={{background:'#fff', border:'1px dashed var(--border-2)', borderRadius:'var(--r-lg)', padding:'56px 24px', textAlign:'center'}}>
            <Icon name="layers" size={30} color="var(--fg-4)"/>
            <div style={{font:'var(--text-h3)', color:'var(--fg-2)', marginTop:14}}>Escolha um produto para analisar o funil</div>
            <div style={{font:'500 13px/1.4 var(--font-sans)', color:'var(--fg-4)', marginTop:6}}>Use o seletor acima para carregar a matriz FE/BE, o estimador de premissas e o ranking por afiliado.</div>
          </div>
        )}
    </div>
  );
};

window.FunnelTrackView = FunnelTrackView;