/* Cart header exploration — 4 professional directions.
   Each artboard = a 320px cart-screen region: header + 2 sample items.
   Pure presentation; does not touch Listari Cart.html. */

const T = {
  navy:'#1A1A2E', teal:'#4ECDC4', bg:'#F7F7FB', white:'#FFFFFF',
  border:'#E8E8F0', muted:'#9999AA', dim:'#7788A0', red:'#FF6B6B', amber:'#FFB800',
};

/* ── shared atoms ─────────────────────────────────────────── */

function StatusBar({ light }) {
  const c = light ? '#1A1A2E' : '#fff';
  const dim = light ? 'rgba(26,26,46,0.5)' : 'rgba(255,255,255,0.5)';
  return (
    <div className="cm-status">
      <span className="cm-time" style={{ color:c }}>9:41</span>
      <div className="cm-sigs">
        <span style={{ height:5, background:dim }}></span>
        <span style={{ height:8, background:dim }}></span>
        <span style={{ height:11, background:dim }}></span>
        <span className="cm-batt" style={{ borderColor:dim }}>
          <span style={{ background: T.teal }}></span>
        </span>
      </div>
    </div>
  );
}

const Kebab = ({ color='#fff' }) => (
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
    <circle cx="9" cy="3.5" r="1.4" fill={color}/>
    <circle cx="9" cy="9" r="1.4" fill={color}/>
    <circle cx="9" cy="14.5" r="1.4" fill={color}/>
  </svg>
);
const Close = ({ color='#fff' }) => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M3 3l8 8M11 3l-8 8" stroke={color} strokeWidth="1.7" strokeLinecap="round"/>
  </svg>
);
const Chevron = ({ color='#fff' }) => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M3 4.5L6 7.5l3-3" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const Check = ({ color='#1A1A2E' }) => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
    <path d="M2.4 6.3l2.3 2.4L9.6 3.4" stroke={color} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Avatar = ({ tone='dark' }) => (
  <div className="cm-avatar" style={ tone==='light'
    ? { background:'#E8F8F7', color:'#1A7068', border:'none' }
    : {} }>LM</div>
);

function Finalize({ full, light }) {
  return (
    <button className={'cm-finalize' + (full ? ' cm-finalize-full' : '')}>
      finalizar <Check color={T.navy}/>
    </button>
  );
}

function BudgetBar({ pct=53, label='R$ 65,60 restando' }) {
  return (
    <div className="cm-budget">
      <div className="cm-budget-meta">
        <span style={{ color:'#7788A0' }}>{pct}% do orçamento</span>
        <span style={{ color:'rgba(78,205,196,0.8)', fontFamily:"'Sora',sans-serif", fontWeight:600 }}>{label}</span>
      </div>
      <div className="cm-budget-track"><div className="cm-budget-fill" style={{ width:pct+'%' }}></div></div>
    </div>
  );
}

function Item({ mono, fg, bg, name, sub, price, qty }) {
  return (
    <div className="cm-card">
      <div className="cm-badge" style={{ background:bg, color:fg }}>{mono}</div>
      <div style={{ flex:1, minWidth:0 }}>
        <div className="cm-iname">{name}</div>
        <div className="cm-isub">{sub}</div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:5 }}>
        <div className="cm-iprice">{price}</div>
        <div className="cm-stepper">
          <span className="cm-step">−</span><span className="cm-qty">{qty}</span><span className="cm-step">+</span>
        </div>
      </div>
    </div>
  );
}

function SampleBody() {
  return (
    <div className="cm-body">
      <Item mono="Gr" fg="#C9A227" bg="#E8F8F7" name="Arroz Tio João 5kg" sub="Grãos · Tio João" price="R$ 24,90" qty="1"/>
      <Item mono="La" fg="#E59A3C" bg="#FFF3E0" name="Leite Italac 1L" sub="Laticínios · Italac" price="R$ 9,80" qty="2"/>
      <div className="cm-addbar">
        <span className="cm-add-plus">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke={T.teal} strokeWidth="1.7" strokeLinecap="round"/></svg>
        </span>
        <span style={{ flex:1, fontSize:12.5, color:'#BBBBC8' }}>adicionar item...</span>
        <span className="cm-mic">
          <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="4.5" y="1.5" width="5" height="7" rx="2.5" fill="#1A1A2E"/><path d="M2 8C2 10.5 4.24 12.5 7 12.5s5-2 5-4.5" stroke="#1A1A2E" strokeWidth="1.4" strokeLinecap="round"/><path d="M7 12.5V14" stroke="#1A1A2E" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </span>
      </div>
    </div>
  );
}

/* small floating menu used in A */
function OverflowMenu({ onClose, onRename }) {
  return (
    <div className="cm-menu" onClick={(e) => e.stopPropagation()}>
      <div className="cm-menu-item" onClick={onRename || onClose}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 11.2V13h1.8l6-6L9 5.2l-6 6z" stroke="#55556A" strokeWidth="1.3" strokeLinejoin="round"/><path d="M10.2 4l1.8 1.8" stroke="#55556A" strokeWidth="1.3"/></svg>
        Renomear lista
      </div>
      <div className="cm-menu-item" onClick={onClose}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2.6a3.4 3.4 0 00-2 6.1c.3.2.5.6.5 1v.3h3v-.3c0-.4.2-.8.5-1A3.4 3.4 0 008 2.6z" stroke="#55556A" strokeWidth="1.3" strokeLinejoin="round"/><path d="M6.6 12.6h2.8" stroke="#55556A" strokeWidth="1.3" strokeLinecap="round"/></svg>
        Salvar como modelo
      </div>
      <div className="cm-menu-sep"></div>
      <div className="cm-menu-item cm-danger" onClick={onClose}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 4.5h9M6 4.5V3.3c0-.4.3-.8.8-.8h2.4c.5 0 .8.4.8.8v1.2M5 4.5l.5 8c0 .5.4.9.9.9h3.2c.5 0 .9-.4.9-.9l.5-8" stroke="#FF6B6B" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
        Descartar compra
      </div>
    </div>
  );
}

/* dropdown used in B */
function CartSwitcher({ name='Atacadão', align }) {
  return (
    <div className={'cm-drop' + (align === 'left' ? ' cm-drop-left' : align === 'right' ? ' cm-drop-right' : '')} onClick={(e) => e.stopPropagation()}>
      <div className="cm-drop-label">trocar de carrinho</div>
      <div className="cm-drop-item cm-drop-active">
        <span className="cm-dot" style={{ background:T.teal }}></span>
        <div style={{ flex:1 }}>
          <div className="cm-drop-name">{name}</div>
          <div className="cm-drop-sub">9 itens · R$ 74,40</div>
        </div>
        <Check color={T.teal}/>
      </div>
      <div className="cm-drop-item">
        <span className="cm-dot" style={{ background:'#CCCCDD' }}></span>
        <div style={{ flex:1 }}>
          <div className="cm-drop-name">Churrasco de sábado</div>
          <div className="cm-drop-sub">rascunho · 3 itens</div>
        </div>
      </div>
      <div className="cm-drop-new">
        <svg width="13" height="13" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke={T.teal} strokeWidth="1.7" strokeLinecap="round"/></svg>
        Novo carrinho
      </div>
    </div>
  );
}

/* budget ring for D */
function Ring({ pct=53 }) {
  const r = 17, c = 2*Math.PI*r, off = c*(1-pct/100);
  return (
    <div className="cm-ring">
      <svg width="46" height="46" viewBox="0 0 46 46">
        <circle cx="23" cy="23" r={r} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="4"/>
        <circle cx="23" cy="23" r={r} fill="none" stroke={T.teal} strokeWidth="4" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 23 23)"/>
      </svg>
      <span className="cm-ring-num">{pct}%</span>
    </div>
  );
}

/* ── the four headers ─────────────────────────────────────── */

// A — App bar with list title + overflow menu
function HeaderA() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!menuOpen) return;
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [menuOpen]);
  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-dark">
        <StatusBar/>
        <div className="cm-appbar">
          <div style={{ minWidth:0 }}>
            <div className="cm-eyebrow">carrinho ativo</div>
            <div className="cm-listtitle">Atacadão</div>
          </div>
          <div className="cm-appbar-actions" ref={ref}>
            <Avatar/>
            <button className="cm-iconbtn" onClick={() => setMenuOpen(o => !o)}>
              {menuOpen ? <Close/> : <Kebab/>}
            </button>
            {menuOpen && <OverflowMenu onClose={() => setMenuOpen(false)}/>}
          </div>
        </div>
        <div className="cm-totalrow">
          <div>
            <div className="cm-tlabel">total da compra</div>
            <div className="cm-tvalue">R$ 74,40</div>
          </div>
          <Finalize/>
        </div>
        <BudgetBar/>
      </div>
      <SampleBody/>
    </div>
  );
}

// B — Named session + cart switcher
function HeaderB() {
  const [open, setOpen] = React.useState(false);      // cart switcher
  const [menuOpen, setMenuOpen] = React.useState(false); // overflow ⋯
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState('Carrinho avulso');
  const swRef = React.useRef(null);
  const menuRef = React.useRef(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const close = (e) => { if (swRef.current && !swRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);
  React.useEffect(() => {
    if (!menuOpen) return;
    const close = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [menuOpen]);
  React.useEffect(() => { if (editing && inputRef.current) inputRef.current.select(); }, [editing]);

  const startRename = () => { setMenuOpen(false); setOpen(false); setEditing(true); };
  const commitRename = () => { setEditing(false); if (!name.trim()) setName('Atacadão'); };

  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-dark">
        <StatusBar/>
        <div className="cm-toolbar">
          <div style={{ width:'32px', height:'32px', flexShrink:0 }} />
          <div className="cm-switcher-wrap" ref={swRef}>
            {editing ? (
              <input
                ref={inputRef}
                className="cm-name-input"
                value={name}
                onChange={(e) => setName(e.target.value)}
                onBlur={commitRename}
                onKeyDown={(e) => { if (e.key === 'Enter') commitRename(); if (e.key === 'Escape') { setName('Atacadão'); setEditing(false); } }}
              />
            ) : (
              <button className="cm-switcher" onClick={() => { setOpen(o => !o); setMenuOpen(false); }}>
                <span className="cm-dot" style={{ background:T.teal }}></span>
                {name}
              </button>
            )}
            {open && !editing && <CartSwitcher name={name}/>}
          </div>
          <div className="cm-menu-wrap" ref={menuRef}>
            <button className="cm-iconbtn cm-iconbtn-bare" onClick={() => { setMenuOpen(o => !o); setOpen(false); }}>
              {menuOpen ? <Close/> : <Kebab/>}
            </button>
            {menuOpen && <OverflowMenu onClose={() => setMenuOpen(false)} onRename={startRename}/>}
          </div>
        </div>
        <div className="cm-totalrow">
          <div>
            <div className="cm-tlabel">total da compra · 9 itens</div>
            <div className="cm-tvalue">R$ 74,40</div>
          </div>
          <Finalize/>
        </div>
        <BudgetBar/>
      </div>
      <SampleBody/>
    </div>
  );
}

// C — Light header, explicit discard + finalize
function HeaderC() {
  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-light">
        <StatusBar light/>
        <div className="cm-appbar">
          <div>
            <div className="cm-eyebrow" style={{ color:'#AAAABC' }}>sua compra</div>
            <div className="cm-listtitle" style={{ color:T.navy }}>Atacadão · ter, 3 jun</div>
          </div>
          <button className="cm-iconbtn cm-iconbtn-light"><Kebab color="#9999AA"/></button>
        </div>
        <div className="cm-total-light">
          <div>
            <div className="cm-tvalue" style={{ color:T.navy, fontSize:30 }}>R$ 74,40</div>
          </div>
          <div className="cm-budget-chip">
            <span className="cm-chip-dot"></span>53% · R$ 65,60 restam
          </div>
        </div>
        <div className="cm-light-track"><div className="cm-light-fill" style={{ width:'53%' }}></div></div>
        <div className="cm-light-actions">
          <button className="cm-ghost">Descartar</button>
          <button className="cm-primary">Finalizar compra <Check color={T.teal}/></button>
        </div>
      </div>
      <SampleBody/>
    </div>
  );
}

// D — Compact toolbar + budget ring
function HeaderD() {
  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-dark">
        <StatusBar/>
        <div className="cm-toolbar">
          <button className="cm-iconbtn cm-iconbtn-bare"><Close/></button>
          <span className="cm-toolbar-name">Atacadão</span>
          <button className="cm-iconbtn cm-iconbtn-bare"><Kebab/></button>
        </div>
        <div className="cm-total-ring">
          <div>
            <div className="cm-tlabel">total da compra</div>
            <div className="cm-tvalue">R$ 74,40</div>
            <div className="cm-ring-rem">R$ 65,60 restando</div>
          </div>
          <Ring/>
        </div>
        <button className="cm-finalize cm-finalize-full" style={{ marginTop:12 }}>
          finalizar compra <Check color={T.navy}/>
        </button>
      </div>
      <SampleBody/>
    </div>
  );
}

/* ── canvas ───────────────────────────────────────────────── */

// ★ Recommended — standard dark header: plain title (tap to rename) + ⋯ menu holds the rare actions
const SAVED_LISTS = [
  { id:'feira',   name:'Feira do mês',        items:18 },
  { id:'churras', name:'Churrasco de sábado', items:9 },
  { id:'basico',  name:'Básico da semana',    items:12 },
];

function StdMenu({ onAssociate, onSaveList, onDiscard }) {
  const ic = "#55556A";
  return (
    <div className="cm-menu" onClick={(e) => e.stopPropagation()}>
      <div className="cm-menu-item" onClick={onAssociate}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M6 4.5h7M6 8h7M6 11.5h7" stroke={ic} strokeWidth="1.3" strokeLinecap="round"/><circle cx="3" cy="4.5" r="0.9" fill={ic}/><circle cx="3" cy="8" r="0.9" fill={ic}/><circle cx="3" cy="11.5" r="0.9" fill={ic}/></svg>
        Associar lista
      </div>
      <div className="cm-menu-item" onClick={onSaveList}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 2.6a3.4 3.4 0 00-2 6.1c.3.2.5.6.5 1v.3h3v-.3c0-.4.2-.8.5-1A3.4 3.4 0 008 2.6z" stroke={ic} strokeWidth="1.3" strokeLinejoin="round"/><path d="M6.6 12.6h2.8" stroke={ic} strokeWidth="1.3" strokeLinecap="round"/></svg>
        Salvar como lista
      </div>
      <div className="cm-menu-sep"></div>
      <div className="cm-menu-item cm-danger" onClick={onDiscard}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 4.5h9M6 4.5V3.3c0-.4.3-.8.8-.8h2.4c.5 0 .8.4.8.8v1.2M5 4.5l.5 8c0 .5.4.9.9.9h3.2c.5 0 .9-.4.9-.9l.5-8" stroke="#FF6B6B" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
        Descartar compra
      </div>
    </div>
  );
}

const ListGlyph = () => (
  <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M5 3.5h6M5 7h6M5 10.5h6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/><circle cx="2.4" cy="3.5" r="0.8" fill="currentColor"/><circle cx="2.4" cy="7" r="0.8" fill="currentColor"/><circle cx="2.4" cy="10.5" r="0.8" fill="currentColor"/></svg>
);

function FinalizeSheet({ onClose, onDiscard }) {
  return (
    <div className="cm-sheet-backdrop" onClick={onClose}>
      <div className="cm-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="cm-sheet-handle"></div>
        <div className="cm-sheet-title">Finalizar compra</div>
        <div className="cm-fin-summary">
          <div className="cm-fin-row"><span>Itens</span><strong>9</strong></div>
          <div className="cm-fin-row"><span>Total</span><strong className="cm-fin-total">R$ 74,40</strong></div>
          <div className="cm-fin-row"><span>Saldo do orçamento</span><strong style={{ color:'#1F8A5B' }}>R$ 65,60</strong></div>
        </div>
        <button className="cm-sheet-save cm-fin-confirm" onClick={onClose}>Confirmar finalização</button>
        <button className="cm-fin-discard" onClick={onDiscard}>Descartar compra</button>
      </div>
    </div>
  );
}

function AssociateListSheet({ currentId, onClose, onConfirm }) {
  const [sel, setSel] = React.useState(currentId);
  return (
    <div className="cm-sheet-backdrop" onClick={onClose}>
      <div className="cm-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="cm-sheet-handle"></div>
        <div className="cm-sheet-title">Associar lista</div>
        <div className="cm-sheet-hint">Traga os itens de uma lista pronta para este carrinho.</div>
        <div className="cm-list-rows">
          {SAVED_LISTS.map((l) => (
            <button key={l.id} className={'cm-list-row' + (l.id === sel ? ' cm-list-row-on' : '')} onClick={() => setSel(l.id)}>
              <span className="cm-list-info">
                <span className="cm-list-name">{l.name}</span>
                <span className="cm-list-sub">{l.items} itens</span>
              </span>
              <span className="cm-radio"></span>
            </button>
          ))}
          <button className={'cm-list-row' + (sel === null ? ' cm-list-row-on' : '')} onClick={() => setSel(null)}>
            <span className="cm-list-info">
              <span className="cm-list-name">Nenhuma lista</span>
              <span className="cm-list-sub">carrinho avulso</span>
            </span>
            <span className="cm-radio"></span>
          </button>
        </div>
        <div className="cm-sheet-actions">
          <button className="cm-sheet-ghost" onClick={onClose}>Cancelar</button>
          <button className="cm-sheet-save" onClick={() => onConfirm(sel)}>Associar</button>
        </div>
      </div>
    </div>
  );
}

function HeaderStd() {
  const [menuOpen, setMenuOpen] = React.useState(false);   // overflow ⋯
  const [finalize, setFinalize] = React.useState(false);   // finalize sheet
  const [associate, setAssociate] = React.useState(false); // associate-list sheet
  const [listId, setListId] = React.useState('feira');
  const menuRef = React.useRef(null);
  const list = SAVED_LISTS.find((l) => l.id === listId);

  React.useEffect(() => {
    if (!menuOpen) return;
    const close = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [menuOpen]);

  const openFinalize = () => { setMenuOpen(false); setFinalize(true); };
  const openAssociate = () => { setMenuOpen(false); setAssociate(true); };

  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-dark">
        <StatusBar/>
        <div className="cm-appbar">
          <div style={{ minWidth:0, display:'flex', flexDirection:'column', alignItems:'flex-start' }}>
            <div className="cm-eyebrow">carrinho ativo</div>
            <button className="cm-titletap cm-titlerow" onClick={openAssociate} title="Associar lista">
              <span className="cm-listtitle">{list ? list.name : 'Carrinho avulso'}</span>
              <Chevron color="rgba(255,255,255,0.5)"/>
            </button>
          </div>
          <div className="cm-appbar-actions">
            <div className="cm-menu-wrap" ref={menuRef}>
              <button className="cm-iconbtn" onClick={() => setMenuOpen(o => !o)}>
                {menuOpen ? <Close/> : <Kebab/>}
              </button>
              {menuOpen && <StdMenu onAssociate={openAssociate} onSaveList={() => setMenuOpen(false)} onDiscard={() => setMenuOpen(false)}/>}
            </div>
            <Avatar/>
          </div>
        </div>
        <div className="cm-totalrow">
          <div>
            <div className="cm-tlabel">total da compra · 9 itens</div>
            <div className="cm-tvalue">R$ 74,40</div>
          </div>
          <button className="cm-finalize" onClick={openFinalize}>finalizar <Check color={T.navy}/></button>
        </div>
        <BudgetBar/>
      </div>
      <SampleBody/>
      {finalize && (
        <FinalizeSheet onClose={() => setFinalize(false)} onDiscard={() => setFinalize(false)}/>
      )}
      {associate && (
        <AssociateListSheet currentId={listId} onClose={() => setAssociate(false)} onConfirm={(id) => { setListId(id); setAssociate(false); }}/>
      )}
    </div>
  );
}

/* ── Histórico · single (carrinho desativado, página interna) ── */
const Back = ({ color='#fff' }) => (
  <svg width="17" height="17" viewBox="0 0 18 18" fill="none"><path d="M11 4l-5 5 5 5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
function ItemRO({ mono, fg, bg, name, sub, price, qty }) {
  return (
    <div className="cm-card">
      <div className="cm-badge" style={{ background:bg, color:fg }}>{mono}</div>
      <div style={{ flex:1, minWidth:0 }}>
        <div className="cm-iname">{name}</div>
        <div className="cm-isub">{sub}</div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4 }}>
        <div className="cm-iprice">{price}</div>
        <div style={{ fontFamily:"'Sora',sans-serif", fontSize:10.5, fontWeight:700, color:'#9999AA' }}>×{qty}</div>
      </div>
    </div>
  );
}
function HistMenu({ onDelete }) {
  return (
    <div className="cm-menu" onClick={(e) => e.stopPropagation()}>
      <div className="cm-menu-item cm-danger" onClick={onDelete}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 4.5h9M6 4.5V3.3c0-.4.3-.8.8-.8h2.4c.5 0 .8.4.8.8v1.2M5 4.5l.5 8c0 .5.4.9.9.9h3.2c.5 0 .9-.4.9-.9l.5-8" stroke="#FF6B6B" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
        Excluir compra
      </div>
    </div>
  );
}
function HistoricoSingle() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const menuRef = React.useRef(null);
  React.useEffect(() => {
    if (!menuOpen) return;
    const close = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [menuOpen]);
  return (
    <div className="cm-screen">
      <div className="cm-hdr cm-dark">
        <StatusBar/>
        <div className="cm-toolbar">
          <button className="cm-iconbtn cm-iconbtn-bare"><Back/></button>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', minWidth:0 }}>
            <div className="cm-toolbar-name">Carrefour</div>
            <div style={{ fontSize:10, color:'rgba(150,160,185,0.7)' }}>14 de abril</div>
          </div>
          <div className="cm-menu-wrap" ref={menuRef}>
            <button className="cm-iconbtn cm-iconbtn-bare" onClick={() => setMenuOpen(o => !o)}>
              {menuOpen ? <Close/> : <Kebab/>}
            </button>
            {menuOpen && <HistMenu onDelete={() => setMenuOpen(false)}/>}
          </div>
        </div>
        <div className="cm-totalrow">
          <div>
            <div className="cm-tlabel">total da compra · 9 itens</div>
            <div className="cm-tvalue">R$ 74,40</div>
          </div>
          <span style={{ display:'inline-flex', alignItems:'center', gap:5, background:'rgba(78,205,196,0.14)', color:'rgba(78,205,196,0.95)', borderRadius:20, padding:'6px 11px', fontSize:10.5, fontWeight:700, fontFamily:"'Sora',sans-serif" }}>dentro do orçamento</span>
        </div>
        <BudgetBar pct={53} label="R$ 65,60 abaixo"/>
      </div>
      <div className="cm-body">
        <ItemRO mono="Gr" fg="#C9A227" bg="#E8F8F7" name="Arroz Tio João 5kg" sub="Grãos · Tio João" price="R$ 24,90" qty="1"/>
        <ItemRO mono="La" fg="#E59A3C" bg="#FFF3E0" name="Leite Italac 1L" sub="Laticínios · Italac" price="R$ 9,80" qty="2"/>
        <ItemRO mono="Li" fg="#D6457F" bg="#FCE4EC" name="Sabão Omo 1kg" sub="Limpeza · Unilever" price="R$ 18,50" qty="1"/>
        <ItemRO mono="Be" fg="#4A90D9" bg="#E3F2FD" name="Suco Del Valle 1L" sub="Bebidas · Del Valle" price="R$ 8,90" qty="2"/>
      </div>
    </div>
  );
}

function App() {
  return (
    <DesignCanvas>
      <DCSection id="historico-single" title="Histórico · single (carrinho desativado)" subtitle="Mesma cara do carrinho, só que página interna (TEM voltar) e modo leitura: sem stepper, sem adicionar, sem finalizar. 3-pontos = Excluir compra (deletável, não editável).">
        <DCArtboard id="hs" label="★ Single do histórico" width={320} height={470}><HistoricoSingle/></DCArtboard>
      </DCSection>
      <DCSection id="recommended" title="Header do Carrinho · recomendado" subtitle="Carrinho não tem nome — a identidade é a lista associada (título). Sem lista = 'Carrinho avulso'. Header escuro, total em teal, barra de orçamento. Finalizar é pílula compacta que abre o sheet de revisão (confirmar / descartar). Só um carrinho ativo por vez. Associar lista pelo título ou ⋯; salvar como lista / descartar no ⋯.">
        <DCArtboard id="std" label="★ Header oficial (funcional)" width={320} height={430}><HeaderB/></DCArtboard>
      </DCSection>
      <DCSection id="lifecycle" title="Alternativas exploradas" subtitle="Direções anteriores, mantidas só como referência.">
        <DCArtboard id="a" label="A · App bar + menu ⋯" width={320} height={430}><HeaderA/></DCArtboard>
        <DCArtboard id="b" label="Std · header padrão anterior" width={320} height={430}><HeaderStd/></DCArtboard>
        <DCArtboard id="c" label="C · Header claro + ações explícitas" width={320} height={430}><HeaderC/></DCArtboard>
        <DCArtboard id="d" label="D · Compacto + anel de orçamento" width={320} height={430}><HeaderD/></DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);