/* ============================================================
   LF CONCEITO — primitivos de UI compartilhados
   ============================================================ */
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
const fmt = (n) => "R\u00a0" + Number(n).toLocaleString("pt-BR", {minimumFractionDigits:2, maximumFractionDigits:2});
window.fmt = fmt;

// store_config guarda valores como texto -- "true"/"false" (string) ou true/false (bool).
// cfgBool normaliza essa leitura. def = valor quando a chave nao existe ainda.
const cfgBool = (v, def=true) => {
  if (v===undefined || v===null || v==="") return def;
  if (typeof v==="string") return v.toLowerCase()==="true" || v==="1";
  return !!v;
};
window.cfgBool = cfgBool;

/* ---------- Ícones (stroke, currentColor) ---------- */
const I = {
  search:"M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm10 2-4.35-4.35",
  cart:"M3 4h2l2.4 12.3a1 1 0 0 0 1 .7h9.7a1 1 0 0 0 1-.78L22 8H6M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
  user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
  menu:"M3 6h18M3 12h18M3 18h18",
  heart:"M20.8 6.6a5.5 5.5 0 0 0-7.8 0L12 7.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1 7.8 7.8 7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8Z",
  star:"M12 2 15.1 8.6 22 9.3l-5 4.9 1.2 7L12 17.8 5.8 21.2 7 14.2l-5-4.9 6.9-.7L12 2Z",
  plus:"M12 5v14M5 12h14",
  minus:"M5 12h14",
  chevR:"M9 6l6 6-6 6",
  chevL:"M15 6l-6 6 6 6",
  chevD:"M6 9l6 6 6-6",
  check:"M20 6 9 17l-5-5",
  trash:"M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V6",
  edit:"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z",
  x:"M18 6 6 18M6 6l12 12",
  arrowR:"M5 12h14M13 5l7 7-7 7",
  truck:"M1 3h15v13H1zM16 8h4l3 3v5h-7M5.5 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm13 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
  shield:"M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5l-8-3Z",
  dash:"M3 3h8v8H3zM13 3h8v5h-8zM13 10h8v11h-8zM3 13h8v8H3z",
  box:"M21 8 12 3 3 8v8l9 5 9-5V8ZM3 8l9 5 9-5M12 13v8",
  bag:"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4H6ZM3 6h18M16 10a4 4 0 0 1-8 0",
  users:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm14 10v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8",
  tag:"M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2a2 2 0 0 1-.6-1.4V4a2 2 0 0 1 2-2h7.99a2 2 0 0 1 1.41.59l7.2 7.2a2 2 0 0 1 0 2.81ZM7 7h.01",
  chart:"M3 3v18h18M7 16l4-5 3 3 5-7",
  settings:"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8.4-3a8 8 0 0 0-.1-1.3l2-1.6-2-3.4-2.4 1a8 8 0 0 0-2.2-1.3L15 2H9.6l-.4 2.7A8 8 0 0 0 7 6L4.6 5l-2 3.4 2 1.6a8 8 0 0 0 0 2.6l-2 1.6 2 3.4 2.4-1a8 8 0 0 0 2.2 1.3l.4 2.6h5.4l.4-2.6a8 8 0 0 0 2.2-1.3l2.4 1 2-3.4-2-1.6c.06-.43.1-.86.1-1.3Z",
  store:"M3 9 4.5 4h15L21 9M3 9v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M9 21v-6h6v6",
  bell:"M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
  logout:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
  filter:"M22 3H2l8 9.5V19l4 2v-8.5L22 3Z",
  pix:"M12 2 22 12 12 22 2 12 12 2Z",
  eye:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
  eyeOff:"M3 3l18 18 M10.6 10.6a3 3 0 0 0 4.2 4.2 M9.9 5.1A11 11 0 0 1 12 5c7 0 11 7 11 7a13.16 13.16 0 0 1-1.67 2.68 M6.6 6.6A13.2 13.2 0 0 0 1 12s4 7 11 7a9.7 9.7 0 0 0 5.4-1.6",
  download:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
  grid:"M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  whats:"M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 21l2.1-5.6A8.4 8.4 0 1 1 21 11.5Z",
};

function Icon({ name, size=18, stroke=1.6, fill="none", style }){
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {(I[name]||"").split("M").filter(Boolean).map((d,i)=><path key={i} d={"M"+d} />)}
    </svg>
  );
}

/* ---------- Placeholder de produto (estilo editorial) ---------- */
const GLYPH = {
  sneaker:"M2 16c0-1 .3-2 1-2l4-.5 3-2.5c1.2-1 2-1 3 0l1.2 1.2c.4.4 1 .7 1.6.8l3.4.5c1.5.2 2.3 1 2.3 2.2V18a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2Z",
  tee:"M8 3 5 5 3 8l2.5 1.5L6 21h12l.5-11.5L21 8l-2-3-3-2c-.5 1.5-2 2.5-4 2.5S8.5 4.5 8 3Z",
  pants:"M7 3h10l1 18h-5l-1-10-1 10H5L6 3Z",
  hoodie:"M7 4 4 8l2 1.5V20h12V9.5L20 8l-3-4M9 4c0 2 1.5 3 3 3s3-1 3-3M9.5 9.5h5v3h-5Z",
  jacket:"M8 3 4 6v14h6V3M16 3l4 3v14h-6V3M10 3h4M11 7h2",
  cap:"M3 16a9 9 0 0 1 18 0M3 16h19M12 7v9",
  glasses:"M2 11h20M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm12 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM9 12h6",
  socks:"M9 3v9l-4 4a3 3 0 0 0 4 4l8-8V3H9Z",
  set:"M7 3 5 6v6h4l-.5 9h7L16 12h4V6l-2-3M9 3c0 1.5 1.3 2.5 3 2.5S15 4.5 15 3",
  shorts:"M6 3h12l1 9h-5l-1-5-1 5H5L6 3Z",
};
function ProductImage({ p, ratio="125%", showMeta=true, className="" }){
  const tone = (p&&p.tone) || "#222";
  const light = parseInt(tone.slice(1),16) > 0x888888;
  const fg = light ? "rgba(20,20,20,.55)" : "rgba(245,240,225,.5)";
  const img = p && p.image_url;

  if(img){
    return (
      <div className={"pimg "+className} style={{ paddingTop:ratio, position:"relative", overflow:"hidden", background:"#f2f0ec" }}>
        <img src={img} alt={(p&&p.name)||""} loading="lazy"
          style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"contain"}}
          onError={e=>{ e.currentTarget.style.display="none"; e.currentTarget.parentElement.classList.add("pimg-fallback"); }}/>
        {showMeta && p && p.brandline &&
          <div className="pimg-brand" style={{color:"rgba(255,255,255,.85)",mixBlendMode:"normal",textShadow:"0 1px 4px rgba(0,0,0,.5)"}}>{p.brandline}</div>}
      </div>
    );
  }

  return (
    <div className={"pimg "+className} style={{ paddingTop:ratio, position:"relative", overflow:"hidden", background:
      `radial-gradient(120% 90% at 50% 8%, ${tone}ee, ${tone}99 45%, ${tone}55 100%)` }}>
      <div className="pimg-grain"></div>
      <svg className="pimg-glyph" viewBox="0 0 24 24" fill="none" stroke={fg} strokeWidth="0.7"
        strokeLinejoin="round" strokeLinecap="round" style={{position:"absolute",inset:"50% 0 0 50%",width:"54%",height:"54%",transform:"translate(-50%,-50%)"}}>
        <path d={GLYPH[p&&p.kind] || GLYPH.tee} />
      </svg>
      {showMeta && p && p.brandline &&
        <div className="pimg-brand" style={{color:fg}}>{p.brandline}</div>}
      <div className="pimg-wm" style={{color:fg}}>LF</div>
    </div>
  );
}

/* ---------- Botão ---------- */
function Btn({ children, variant="gold", size="md", full, icon, iconR, onClick, type, disabled, className="" }){
  return (
    <button type={type||"button"} disabled={disabled} onClick={onClick}
      className={`btn btn-${variant} btn-${size} ${full?"btn-full":""} ${className}`}>
      {icon && <Icon name={icon} size={size==="sm"?15:17} />}
      {children && <span>{children}</span>}
      {iconR && <Icon name={iconR} size={size==="sm"?15:17} />}
    </button>
  );
}

function Money({ v, old, className="" }){
  return (
    <span className={"money "+className}>
      {old>0 && <span className="money-old mono">{fmt(old)}</span>}
      <span className="money-now mono">{fmt(v)}</span>
    </span>
  );
}

function Tag({ children, kind="gold" }){
  return <span className={"ptag ptag-"+kind}>{children}</span>;
}

function Stars({ n=5, size=12 }){
  return <span className="stars" style={{display:"inline-flex",gap:1,color:"var(--gold-2)"}}>
    {Array.from({length:5}).map((_,i)=><Icon key={i} name="star" size={size} fill={i<n?"var(--gold-2)":"none"} stroke={1.4} />)}
  </span>;
}

/* shared CSS injected once */
const UI_CSS = `
.pimg{position:relative;width:100%;overflow:hidden;background:#1a1a1d;}
.pimg-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:3px 3px;}
.pimg-glyph{opacity:.9;}
.pimg-brand{position:absolute;top:12px;left:13px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;opacity:.65;}
.pimg-wm{position:absolute;bottom:9px;right:13px;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.05em;opacity:.5;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;letter-spacing:.02em;border-radius:var(--r);
  transition:transform .12s ease,background .18s ease,border-color .18s,opacity .18s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.4;pointer-events:none;}
.btn-full{width:100%;}
.btn-sm{padding:8px 14px;font-size:12px;}
.btn-md{padding:12px 22px;font-size:13px;}
.btn-lg{padding:16px 30px;font-size:14px;}
.btn-gold{background:var(--gold-grad);color:#1a1408;box-shadow:0 6px 22px -10px rgba(230,193,88,.7);}
.btn-gold:hover{filter:brightness(1.07);}
.btn-dark{background:var(--ink-4);color:var(--text);border:1px solid var(--line-2);}
.btn-dark:hover{background:#26262b;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-1);}
.btn-outline-gold{background:transparent;border:1px solid var(--gold-3);color:var(--gold-1);}
.btn-outline-gold:hover{background:var(--gold-soft);}
.btn-danger{background:transparent;border:1px solid rgba(224,105,95,.4);color:var(--red);}
.btn-danger:hover{background:rgba(224,105,95,.1);}
.btn-link{padding:0;background:none;color:var(--gold-1);text-decoration:none;}

.money{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.money-now{font-weight:800;font-size:1.15em;color:#1A1A1A;letter-spacing:-.01em;}
.money-old{font-size:.78em;color:#AAA;text-decoration:line-through;font-weight:500;}

.ptag{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:800;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:3px;white-space:nowrap;}
.ptag-gold{background:var(--gold-grad);color:#1a1408;box-shadow:0 2px 8px rgba(200,160,48,.4);}
.ptag-dark{background:rgba(10,10,10,.85);color:#FFE68A;border:1px solid rgba(200,160,48,.4);backdrop-filter:blur(4px);}
.ptag-new{background:#0A5E30;color:#fff;}
.ptag-red{background:var(--red);color:#fff;}
`;
(function injectUI(){
  const s=document.createElement("style"); s.textContent=UI_CSS; document.head.appendChild(s);
})();

Object.assign(window, { Icon, I, ProductImage, Btn, Money, Tag, Stars, fmt,
  useState, useEffect, useRef, useMemo, createContext, useContext });