/* ============================================================
   Área do Cooperado — ícones + componentes compartilhados
   Exporta para window
   ============================================================ */
const { useState, useEffect, useRef } = React;
const REDUCE = window.matchMedia("(prefers-reduced-motion:reduce)").matches;

/* ---------- número que cresce na entrada (count-up) ---------- */
function Counter({to, dec=0, prefix="", suffix="", dur=1150}){
  const [v,setV]=useState(REDUCE?to:0);
  useEffect(()=>{
    if(REDUCE){ setV(to); return; }
    let raf, t0;
    const step=(now)=>{ if(!t0)t0=now; const p=Math.min(1,(now-t0)/dur); const e=1-Math.pow(1-p,3); setV(to*e); if(p<1) raf=requestAnimationFrame(step); };
    raf=requestAnimationFrame(step);
    return ()=>cancelAnimationFrame(raf);
  },[to]);
  return <span>{prefix}{v.toLocaleString("pt-BR",{minimumFractionDigits:dec,maximumFractionDigits:dec})}{suffix}</span>;
}

/* ---------- número ao vivo: cresce na entrada, depois oscila ---------- */
function LiveNumber({base, dec=0, prefix="", suffix="", vol=0.0012, interval=2400}){
  const [v,setV]=useState(REDUCE?base:0);
  useEffect(()=>{
    let raf, t0, id, cur=base;
    if(REDUCE){ setV(base); return; }
    const dur=1000;
    const step=(now)=>{ if(!t0)t0=now; const p=Math.min(1,(now-t0)/dur); const e=1-Math.pow(1-p,3); setV(base*e); if(p<1) raf=requestAnimationFrame(step); else live(); };
    raf=requestAnimationFrame(step);
    function live(){ cur=base; id=setInterval(()=>{ const d=(Math.random()-0.5)*2*base*vol; cur=Math.min(base*1.03,Math.max(base*0.97,cur+d)); setV(cur); }, interval); }
    return ()=>{cancelAnimationFrame(raf);clearInterval(id);};
  },[base]);
  return <span>{prefix}{v.toLocaleString("pt-BR",{minimumFractionDigits:dec,maximumFractionDigits:dec})}{suffix}</span>;
}

/* ---------- ÍCONES (linha fina, stroke 1.6) ---------- */
const ICON_PATHS = {
  overview:  <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
  extrato:   <><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></>,
  romaneios: <><path d="M12 4v16M7 20h10"/><path d="M5 8h14l-2.4 5a2.6 2.6 0 01-4.6 0L5 8z" transform="translate(0 -0.5)"/><path d="M12 4l7 4M12 4L5 8"/></>,
  analise:   <><path d="M9 3h6M10 3v6l-4.5 8.5A2 2 0 007.3 21h9.4a2 2 0 001.8-3L14 9V3"/><path d="M8 15h8"/></>,
  simulador: <><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8"/><path d="M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01"/></>,
  royalties: <><circle cx="9" cy="9" r="5"/><path d="M14.5 6.2A5 5 0 1118 15.8"/><path d="M9 7v4M7.4 8.2h2.2"/></>,
  insumos:   <><path d="M6 3h7a1 1 0 011 1v16H5V4a1 1 0 011-1z"/><path d="M5 9h9"/><path d="M14 8l3 2v7a2 2 0 11-4 0"/><path d="M17 10l1.4 1.2"/></>,
  sair:      <><path d="M14 7V5a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2h6a2 2 0 002-2v-2"/><path d="M18 15l3-3-3-3M10 12h11"/></>,
  sun:       <><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8L6 18M18 6l1.8-1.8"/></>,
  moon:      <><path d="M20 14.5A8 8 0 119.5 4a6.3 6.3 0 0010.5 10.5z"/></>,
  bell:      <><path d="M18 9a6 6 0 10-12 0c0 6-2.5 7-2.5 7h17S18 15 18 9z"/><path d="M10.5 20a2 2 0 003 0"/></>,
  download:  <><path d="M12 3v12M7 11l5 4 5-4"/><path d="M5 19h14"/></>,
  doc:       <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z"/><path d="M14 3v5h5"/></>,
  plus:      <><path d="M12 5v14M5 12h14"/></>,
  pin:       <><path d="M12 21s7-6.3 7-11a7 7 0 10-14 0c0 4.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
  check:     <><path d="M5 12l5 5L20 6"/></>,
  info:      <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>,
  search:    <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
  chevron:   <><path d="M9 6l6 6-6 6"/></>,
  arrowUR:   <><path d="M7 17L17 7M9 7h8v8"/></>,
  scale:     <><path d="M12 4v16M7 20h10M5 8h14"/><path d="M5 8l-2 5a3 3 0 006 0L5 8zM19 8l-2 5a3 3 0 006 0l-4-5z"/></>,
  spark:     <><path d="M12 3l2.2 5.5L20 9l-4.5 3.8L17 19l-5-3-5 3 1.5-6.2L4 9l5.8-.5L12 3z"/></>,
  drop:      <><path d="M12 3c4 5 6 8 6 11a6 6 0 11-12 0c0-3 2-6 6-11z"/></>,
  chat:      <><path d="M21 11.5a7.5 7.5 0 01-10.9 6.7L4 20l1.8-5.1A7.5 7.5 0 1121 11.5z"/><path d="M10 10a2 2 0 113 1.7c-.6.3-1 .8-1 1.5M12 16h.01"/></>,
  mail:      <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7.5l8 5.5 8-5.5"/></>,
  phone:     <><path d="M5 4h3.2l1.6 4.4-2 1.2a11 11 0 004.6 4.6l1.2-2L18 16v3.2a1.8 1.8 0 01-2 1.8A15.5 15.5 0 013 6a1.8 1.8 0 011.8-2z"/></>,
};
function Icon({name, style}){
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">{ICON_PATHS[name]||null}</svg>;
}

/* ---------- LOGO hexagonal ---------- */
function Logo({stroke1="#bea164", stroke2="#ffffff", className="logo"}){
  return (
    <svg className={className} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <polygon points="28,24 22.5,33.5 11.5,33.5 6,24 11.5,14.5 22.5,14.5" stroke={stroke1} strokeWidth="2.1"/>
      <polygon points="42,24 36.5,33.5 25.5,33.5 20,24 25.5,14.5 36.5,14.5" stroke={stroke2} strokeWidth="2.1"/>
      <polygon points="27,24 24.75,27.9 20.25,27.9 18,24 20.25,20.1 24.75,20.1" fill="#bea164"/>
    </svg>
  );
}
function HexWatermark({className="hexwm"}){
  return (
    <svg className={className} viewBox="0 0 100 100" fill="none" aria-hidden="true">
      <polygon points="80,50 68.75,69.5 46.25,69.5 35,50 46.25,30.5 68.75,30.5" stroke="#bea164" strokeWidth="1.4"/>
      <polygon points="60,50 48.75,69.5 26.25,69.5 15,50 26.25,30.5 48.75,30.5" stroke="#bea164" strokeWidth="1.4"/>
    </svg>
  );
}

/* ---------- NAV definição ---------- */
const NAV = [
  {id:"overview", label:"Visão geral"},
  {id:"extrato", label:"Extrato"},
  {id:"romaneios", label:"Romaneios"},
  {id:"analise", label:"Análise"},
  {id:"simulador", label:"Simulador"},
  {id:"royalties", label:"Royalties"},
  {id:"insumos", label:"Insumos"},
];

/* ---------- SIDEBAR ---------- */
function Sidebar({active, onNav}){
  const u = COOP.user;
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <Logo/>
        <div className="nm">Coopersanta · Coopermetal<small>Área do Cooperado</small></div>
      </div>
      <div className="sb-user">
        <div className="av">{u.iniciais}</div>
        <div className="uinfo">
          <div className="un">{u.nome}</div>
          <div className="um">Mat. {u.mat} · Cooperada ativa</div>
        </div>
      </div>
      <nav className="sb-nav">
        <div className="lbl">Painel</div>
        {NAV.map(n=>(
          <button key={n.id} className={"nav-item"+(active===n.id?" on":"")} onClick={()=>onNav(n.id)}>
            <Icon name={n.id}/>{n.label}
          </button>
        ))}
        <div className="sb-foot">
          <button className="nav-item" onClick={()=>onNav("overview")}><Icon name="sair"/>Sair</button>
        </div>
      </nav>
    </aside>
  );
}

/* ---------- THEME TOGGLE ---------- */
function ThemeToggle({theme, setTheme}){
  return (
    <div className="theme-toggle" role="group" aria-label="Tema">
      <button className={theme==="light"?"on":""} onClick={()=>setTheme("light")} title="Tema claro"><Icon name="sun"/></button>
      <button className={theme==="dark"?"on":""} onClick={()=>setTheme("dark")} title="Tema escuro"><Icon name="moon"/></button>
    </div>
  );
}

/* ---------- TOPBAR ---------- */
function Topbar({title, subtitle, theme, setTheme}){
  const u = COOP.user;
  return (
    <header className="topbar">
      <div className="tb-title">
        <h1>{title}</h1>
        {subtitle && <p>{subtitle}</p>}
      </div>
      <div className="tb-right">
        <ThemeToggle theme={theme} setTheme={setTheme}/>
        <button className="tb-icon" title="Notificações"><Icon name="bell"/><span className="dot"></span></button>
        <div className="sb-user" style={{margin:0,background:"var(--surface)",border:"1px solid var(--line)",boxShadow:"var(--shadow)"}}>
          <div className="av" style={{width:38,height:38,fontSize:14}}>{u.iniciais}</div>
          <div className="uinfo"><div className="un" style={{color:"var(--ink)"}}>{u.nome}</div><div className="um" style={{color:"var(--muted)"}}>Mat. {u.mat}</div></div>
        </div>
      </div>
    </header>
  );
}

/* ---------- MOBILE ---------- */
function MobileTop({title, theme, setTheme}){
  return (
    <div className="mobile-top">
      <div className="mt-brand"><Logo/>{title}</div>
      <ThemeToggle theme={theme} setTheme={setTheme}/>
    </div>
  );
}
function BottomNav({active, onNav}){
  const items = NAV.slice(0,5);
  return (
    <nav className="bottom-nav">
      {items.map(n=>(
        <button key={n.id} className={"bn-item"+(active===n.id?" on":"")} onClick={()=>onNav(n.id)}>
          <Icon name={n.id}/>{n.label}
        </button>
      ))}
    </nav>
  );
}

/* ---------- PRIMITIVES ---------- */
function StatCard({icon, label, value, count, dec=0, prefix="", suffix="", unit, delta, deltaDir, feature}){
  return (
    <div className={"stat-card"+(feature?" feature":"")}>
      {feature && <HexWatermark/>}
      {icon && <div className="ico"><Icon name={icon}/></div>}
      <div className="sl">{label}</div>
      <div className="sv num">{count!=null ? <Counter to={count} dec={dec} prefix={prefix} suffix={suffix}/> : value}{unit && <span className="u">{unit}</span>}</div>
      {delta && <div className={"sd "+(deltaDir||"up")}>{deltaDir==="down"?"▼":"▲"} {delta}</div>}
    </div>
  );
}
function Pill({tone, children}){ return <span className={"pill "+tone}><span className="pd"></span>{children}</span>; }

/* ---------- BAR CHART (teor por lote) ---------- */
function Bars({lotes, avg, maxVal=72}){
  const [mounted,setMounted]=useState(false);
  useEffect(()=>{ const t=setTimeout(()=>setMounted(true),60); return ()=>clearTimeout(t); },[]);
  const best = Math.max(...lotes.map(l=>l.teor));
  const avgPct = (avg/maxVal)*100;
  return (
    <div className="bars">
      <div className="avg-line" style={{bottom:`calc(${avgPct}% + 0px)`}}><span className="at">média coop {COOP.fmt.NUM(avg,1)}%</span></div>
      {lotes.map((l,i)=>(
        <div className="bar-col" key={l.lote}>
          <div className={"bar"+(l.teor===best?" hi":"")} style={{height: mounted ? `${(l.teor/maxVal)*100}%` : "0%", transitionDelay:`${i*60}ms`}}>
            <span className="bv">{COOP.fmt.NUM(l.teor,1)}</span>
          </div>
          <div className="blab">{l.lote}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- DONUT (distribuição de teor) ---------- */
function Donut({faixas}){
  const colors = ["var(--gold)","var(--blue)","var(--green)","var(--muted)"];
  const r=64, c=2*Math.PI*r;
  let offset=0;
  const [mounted,setMounted]=useState(false);
  useEffect(()=>{ const t=setTimeout(()=>setMounted(true),80); return ()=>clearTimeout(t); },[]);
  return (
    <div className="donut-wrap">
      <div className="donut">
        <svg viewBox="0 0 160 160" width="172" height="172">
          <circle cx="80" cy="80" r={r} fill="none" stroke="var(--surface-3)" strokeWidth="20"/>
          {faixas.map((f,i)=>{
            const len = (f.val/100)*c;
            const el = (
              <circle key={f.key} cx="80" cy="80" r={r} fill="none" stroke={colors[i]} strokeWidth="20"
                strokeDasharray={`${mounted?len:0} ${c}`} strokeDashoffset={-offset}
                style={{transition:"stroke-dasharray .9s cubic-bezier(.3,.8,.3,1)", transitionDelay:`${i*120}ms`}}
                transform="rotate(-90 80 80)" strokeLinecap="butt"/>
            );
            offset += len;
            return el;
          })}
        </svg>
        <div className="ctr"><div className="dn num">64,2<span style={{fontSize:".5em"}}>%</span></div><div className="dl">seu teor médio</div></div>
      </div>
      <div className="legend">
        {faixas.map((f,i)=>(
          <div className="lg" key={f.key}>
            <span className="sw" style={{background:colors[i]}}></span>
            {f.label}
            <span className="lv">{f.val}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- LOTES TIMELINE (5 etapas, etapa atual pulsando) ---------- */
function LotesTimeline({lotes, steps}){
  const tone = (step)=> step>=steps.length-1 ? "green" : step>=2 ? "blue" : step>=1 ? "blue" : "amber";
  return (
    <div className="lotes-track">
      {lotes.map(l=>(
        <div className="lt-row" key={l.lote}>
          <div className="lt-head">
            <span className="lt-lote">Lote {l.lote}</span>
            <span className="lt-peso">{l.peso}</span>
            <Pill tone={tone(l.step)}>{l.statusLabel}</Pill>
          </div>
          <div className="lt-steps">
            {steps.map((s,i)=>(
              <React.Fragment key={i}>
                <div className={"lt-node "+(i<l.step?"done":i===l.step?"cur":"")}>
                  {i<l.step ? <Icon name="check"/> : i===l.step ? <span className="ic"></span> : null}
                </div>
                {i<steps.length-1 && <div className={"lt-line"+(i<l.step?" done":"")}></div>}
              </React.Fragment>
            ))}
          </div>
          <div className="lt-labels">{steps.map((s,i)=><span key={i} className={i===l.step?"cur":""}>{s}</span>)}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- SOFT BARS (recebimentos, douradas) ---------- */
function SoftBars({data}){
  const [m,setM]=useState(REDUCE);
  useEffect(()=>{ const t=setTimeout(()=>setM(true),80); return ()=>clearTimeout(t); },[]);
  const max=Math.max(...data.map(d=>d.v));
  return (
    <div className="sbars">
      {data.map((d,i)=>(
        <div className="sbar-col" key={i}>
          <div className="sbar" style={{height: m?`${(d.v/max)*100}%`:"0%", transitionDelay:`${i*70}ms`}}>
            <span className="sv">R$ {d.v}k</span>
          </div>
          <div className="sl">{d.m}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- LINE CHART (evolução do teor, desenha ao abrir) ---------- */
function LineChart({data}){
  const [m,setM]=useState(REDUCE);
  useEffect(()=>{ const t=setTimeout(()=>setM(true),120); return ()=>clearTimeout(t); },[]);
  const W=600,H=180,pad=20;
  const vals=data.map(d=>d.v);
  const min=Math.min(...vals)-0.8, max=Math.max(...vals)+0.8;
  const X=i=> pad + (i/(data.length-1))*(W-2*pad);
  const Y=v=> H-pad - ((v-min)/(max-min))*(H-2*pad);
  const pts=data.map((d,i)=>[X(i),Y(d.v)]);
  const path="M"+pts.map(p=>p.map(n=>n.toFixed(1)).join(",")).join(" L");
  const area=path+` L${X(data.length-1).toFixed(1)},${H-pad} L${X(0).toFixed(1)},${H-pad} Z`;
  return (
    <svg className="linechart" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <defs><linearGradient id="lcgrad" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="var(--gold)" stopOpacity="0.30"/>
        <stop offset="1" stopColor="var(--gold)" stopOpacity="0"/>
      </linearGradient></defs>
      <path d={area} fill="url(#lcgrad)" opacity={m?1:0} style={{transition:"opacity .9s ease .3s"}}/>
      <path d={path} fill="none" stroke="var(--gold)" strokeWidth="2.6" vectorEffect="non-scaling-stroke"
        pathLength="1" strokeDasharray="1" strokeDashoffset={m?0:1} strokeLinecap="round" strokeLinejoin="round"
        style={{transition:"stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1)"}}/>
      {pts.map((p,i)=>(
        <circle key={i} cx={p[0]} cy={p[1]} r={i===pts.length-1?5:3.2} fill="var(--gold)"
          stroke="var(--surface)" strokeWidth={i===pts.length-1?2:0} vectorEffect="non-scaling-stroke"
          opacity={m?1:0} style={{transition:`opacity .4s ease ${i*0.13+0.45}s`}}/>
      ))}
    </svg>
  );
}

/* ---------- COTAÇÃO STRIP (ao vivo) ---------- */
/* Cotação REAL — puxa do banco (Supabase lme_cotacoes, chave pública) + dólar AwesomeAPI; fallback nos valores reais já carregados */
const SB_URL="https://ovmafxqneibzpefraprb.supabase.co/rest/v1";
const SB_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im92bWFmeHFuZWlienBlZnJhcHJiIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzc0MDU3NDYsImV4cCI6MjA5Mjk4MTc0Nn0.1vRUu2fGBZgbu_Yn2c0LVf-rvrRgz_N83wEyD2oSo9w";
async function fetchCotacaoReal(fbLme, fbDolar){
  let L=fbLme, D=fbDolar, ok=false, when="";
  try{const r=await fetch(SB_URL+"/lme_cotacoes?select=data,estanho_usd_t,dolar_brl&order=data.desc&limit=10",{headers:{apikey:SB_KEY,Authorization:"Bearer "+SB_KEY}});
    if(r.ok){const rows=await r.json();const lr=rows.find(x=>x.estanho_usd_t);if(lr){L=+lr.estanho_usd_t;const dr=rows.find(x=>x.dolar_brl);if(dr)D=+dr.dolar_brl;ok=true;const p=String(lr.data).split("-");when=p[2]+"/"+p[1]+"/"+p[0];}}}catch(e){}
  try{const r2=await fetch("https://economia.awesomeapi.com.br/json/last/USD-BRL");if(r2.ok){const j=await r2.json();const a=parseFloat(j.USDBRL&&j.USDBRL.ask);if(a){D=a;ok=true;}}}catch(e){}
  return {lme:L, dolar:D, live:ok, when};
}
function CotacaoStrip({lme, dolar}){
  const [lv,setLv]=useState({lme:lme, dolar:dolar, live:false, when:""});
  useEffect(()=>{ let alive=true; fetchCotacaoReal(lme,dolar).then(r=>{ if(alive) setLv(r); }); return ()=>{alive=false;}; },[]);
  return (
    <div className="cotacao-strip cotacao-live">
      <div className="ci"><span className="k">LME · Estanho</span><span className="v num"><LiveNumber base={lv.lme} prefix="US$ " suffix="/t" vol={0.0012} interval={2200}/></span></div>
      <div className="sep"></div>
      <div className="ci"><span className="k">Dólar · PTAX</span><span className="v num"><LiveNumber base={lv.dolar} dec={2} prefix="R$ " vol={0.0018} interval={2600}/></span></div>
      <span className={"live"+(lv.live?"":" is-ref")} title={lv.when?("fechamento "+lv.when):""}><span className="pulse"></span>{lv.live?"ao vivo":"referência"}</span>
    </div>
  );
}

/* ---------- AJUDA / SUPORTE (tirar dúvidas) ---------- */
function HelpButton({onClick}){
  return <button className="help-fab" onClick={onClick} aria-label="Ajuda e suporte"><Icon name="chat"/></button>;
}
function FaqItem({q, a}){
  const [o,setO]=useState(false);
  return (
    <div className={"faq-item"+(o?" open":"")}>
      <button className="faq-q" onClick={()=>setO(!o)}>{q}<Icon name="chevron" style={{marginLeft:"auto",width:15,height:15,transform:o?"rotate(90deg)":"none",transition:".2s"}}/></button>
      {o && <div className="faq-a">{a}</div>}
    </div>
  );
}
function HelpSheet({open, onClose}){
  if(!open) return null;
  return (
    <div className="help-overlay" onClick={onClose}>
      <div className="help-sheet" onClick={e=>e.stopPropagation()}>
        <div className="hs-head">
          <div><div className="eyebrow">Suporte ao cooperado</div><h3 className="serif" style={{fontSize:22,marginTop:6}}>Como podemos ajudar?</h3></div>
          <button className="hs-close" onClick={onClose} aria-label="Fechar"><Icon name="plus" style={{transform:"rotate(45deg)"}}/></button>
        </div>
        <div className="hs-actions">
          <button className="hs-action"><span className="hsi"><Icon name="mail"/></span><div className="hst"><div className="t">Solicitar 2ª via de extrato</div><div className="s">Recebe NF-e e demonstrativo por e-mail</div></div><Icon name="chevron" style={{width:16,height:16,color:"var(--muted)"}}/></button>
          <button className="hs-action"><span className="hsi"><Icon name="phone"/></span><div className="hst"><div className="t">Falar com a cooperativa</div><div className="s">Atendimento ao cooperado · seg–sex, 8h–17h</div></div><Icon name="chevron" style={{width:16,height:16,color:"var(--muted)"}}/></button>
        </div>
        <div className="hs-faq-h">Perguntas frequentes</div>
        <FaqItem q="Como é calculado o R$/kg?" a="O preço por quilo parte da cotação do estanho no LME, convertida em reais, e é ajustada pelo teor de Sn e pelo fator de recuperação do seu lote."/>
        <FaqItem q="Quando recebo pelo lote entregue?" a="Após a análise de teor (XRF) e a emissão do demonstrativo, o valor entra no acerto da cooperativa."/>
        <FaqItem q="O que é o demonstrativo?" a="É o documento que transforma o romaneio (peso úmido) em valores: peso seco, teor, R$/kg e total a receber."/>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, Logo, HexWatermark, NAV, Sidebar, ThemeToggle, Topbar, MobileTop, BottomNav,
  StatCard, Pill, Bars, Donut, Counter, LiveNumber, LotesTimeline, SoftBars, LineChart, CotacaoStrip,
  HelpButton, HelpSheet
});