/* global React, STORE, brl, flavorMeta, productGradient */
const { useState } = React;

/* ---------- ICONS ---------- */
const I = {
  search: <path d="M11 4a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"/>,
  cart: <path d="M3 4h2.2l1.2 2m0 0 2 9.5h9.5l1.8-7H6.4Zm2.4 0L6 6m13 13.5a1.3 1.3 0 1 1-2.6 0 1.3 1.3 0 0 1 2.6 0Zm-9 0a1.3 1.3 0 1 1-2.6 0 1.3 1.3 0 0 1 2.6 0Z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round"/>,
  heart: <path d="M12 20s-7-4.6-9.3-9C1.2 8.2 2.4 5 5.6 5c2 0 3.2 1.3 4.4 2.8C11.2 6.3 12.4 5 14.4 5c3.2 0 4.4 3.2 2.9 6-2.3 4.4-9.3 9-9.3 9Z"/>,
  plus: <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>,
  bolt: <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/>,
  clock: <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm1 4h-2v6l5 3 1-1.7-4-2.3V7Z"/>,
  truck: <path d="M3 5h11v9H3V5Zm11 3h3.5L21 11v3h-7V8ZM7 18a1.6 1.6 0 1 0 0-3.2A1.6 1.6 0 0 0 7 18Zm10 0a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z"/>,
  tag: <path d="M11 3H4v7l10 10 7-7L11 3Zm-3 5.5A1.5 1.5 0 1 1 8 5.5a1.5 1.5 0 0 1 0 3Z"/>,
  arrow: <path d="M5 12h14m-6-6 6 6-6 6" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>,
  wa: <path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1.1-1.4-1.1-2.7 0-1.3.7-1.9 1-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.5c-.2.2-.3.4-.1.7.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.8-1c.2-.2.4-.2.6-.1l1.9.9c.2.1.4.2.4.3.1.2.1.7-.1 1.3Z"/>,
  insta: <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm5.3-2.8a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2Z"/>,
  close: <path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>,
  check: <path d="M5 12.5 10 17l9-10" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>,
  back: <path d="M19 12H5m6-6-6 6 6 6" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>,
  star: <path d="m12 3 2.6 5.6 6 .7-4.5 4 1.3 6L12 16.8 6.6 19.3l1.3-6-4.5-4 6-.7L12 3Z"/>,
  grid: <path d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"/>,
  box: <path d="M12 2 3 6.5v11L12 22l9-4.5v-11L12 2Zm0 2.3 6 3-6 3-6-3 6-3ZM5 8.6l6 3v7.1l-6-3V8.6Zm14 0v7.1l-6 3v-7.1l6-3Z"/>,
  receipt: <path d="M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2V2Zm3 5h8v2H8V7Zm0 4h8v2H8v-2Zm0 4h5v2H8v-2Z"/>,
  gear: <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm8.4 2c0-.5 0-1-.1-1.4l2-1.6-2-3.4-2.4 1a7.7 7.7 0 0 0-2.4-1.4L13 1h-2l-.5 2.8c-.9.3-1.7.8-2.4 1.4l-2.4-1-2 3.4 2 1.6c-.1.4-.1.9-.1 1.4s0 1 .1 1.4l-2 1.6 2 3.4 2.4-1c.7.6 1.5 1.1 2.4 1.4L11 23h2l.5-2.8c.9-.3 1.7-.8 2.4-1.4l2.4 1 2-3.4-2-1.6c.1-.4.1-.9.1-1.4Z"/>,
  logout: <path d="M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5V3Zm6.2 4.2-1.4 1.4L17.2 11H9v2h8.2l-2.4 2.4 1.4 1.4L21 12l-4.8-4.8Z"/>,
  store: <path d="M4 4h16l1 6a3 3 0 0 1-3 3 3 3 0 0 1-2.5-1.3A3 3 0 0 1 13 13a3 3 0 0 1-2.5-1.3A3 3 0 0 1 8 13a3 3 0 0 1-3-3l-1-6Zm1 10.7A4.9 4.9 0 0 0 8 15a5 5 0 0 0 4-2 5 5 0 0 0 7 1.7V20H5v-5.3Z"/>,
  trend: <path d="M3 17l6-6 4 4 7-7v5h2V4h-7v2h3.6L13 12l-4-4-7 7 1 2Z"/>,
  search2: <path d="M11 4a7 7 0 1 0 4.2 12.6l4.1 4.1 1.4-1.4-4.1-4.1A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"/>,
  trash: <path d="M9 3h6l1 2h4v2H4V5h4l1-2ZM6 8h12l-1 13H7L6 8Zm3 2v9h2v-9H9Zm4 0v9h2v-9h-2Z"/>,
  bell: <path d="M12 2a6 6 0 0 0-6 6v3.6L4 15v1h16v-1l-2-3.4V8a6 6 0 0 0-6-6Zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3Z"/>,
  pin: <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z"/>,
  percent: <path d="M19 5 5 19l-1.4-1.4L17.6 3.6 19 5ZM6.5 4a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm11 11a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"/>,
  image: <path d="M3 4h18v16H3V4Zm2 2v8.6l4-3.6 4 3.5 3-2.6 4 3.1V6H5Zm3 2.5A1.5 1.5 0 1 1 8 11.5 1.5 1.5 0 0 1 8 8.5Z"/>,
  cash: <path d="M2 6h20v12H2V6Zm2 2v8h16V8H4Zm8 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM6 9.5A1.5 1.5 0 0 1 7.5 11 1.5 1.5 0 0 1 6 12.5V9.5Zm12 0v3A1.5 1.5 0 0 1 16.5 11 1.5 1.5 0 0 1 18 9.5Z"/>,
  feed: <path d="M4 4h16v4H4V4Zm0 6h7v10H4V10Zm9 0h7v4h-7v-4Zm0 6h7v4h-7v-4Z"/>,
  menu: <path d="M3 6h18v2H3V6Zm0 5h18v2H3v-2Zm0 5h18v2H3v-2Z"/>,
  edit: <path d="M4 16.5 14.6 5.9l3.5 3.5L7.5 20H4v-3.5Zm12-12.1 1.4-1.4a1.5 1.5 0 0 1 2.1 0l1.5 1.5a1.5 1.5 0 0 1 0 2.1l-1.4 1.4-3.6-3.6Z" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinejoin="round" strokeLinecap="round"/>,
  user: <path d="M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z"/>,
};
function Icon({ k, size = 20, ...p }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" {...p}>{I[k]}</svg>;
}

/* ---------- brand mark ---------- */
function BrandMark({ size = 40 }) {
  return (
    <img className="brand-mark-img" src="assets/nikbar-logo.png" alt="NIK BAR"
      style={{ width: size, height: size }} />
  );
}

/* ---------- flavor chip ---------- */
function FlavorChip({ name }) {
  const m = flavorMeta(name);
  return (
    <span className="fchip"><span className="dot" style={{ background: m.c }} />{name}</span>
  );
}

/* ---------- trust row ---------- */
const TRUST_ICONS = ["star", "clock", "bolt", "tag"];
function TrustRow() {
  return (
    <div className="trust-row">
      {STORE.badges.map((b, i) => (
        <span className="trust" key={b}><span className="ic"><Icon k={TRUST_ICONS[i]} size={16} /></span>{b}</span>
      ))}
    </div>
  );
}

/* ---------- product card ---------- */
function ProductCard({ p, onOpen, onAdd, fav, onFav }) {
  const badgeClass = p.badge === "Premium" ? "prem" : p.badge === "Promoção" ? "promo" : "";
  const out = p.stock === 0;
  return (
    <div className="pcard" onClick={() => onOpen(p)}>
      <div className="pthumb" style={{ background: p.img ? "#1b1b20" : productGradient(p) }}>
        {p.img
          ? <img src={p.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          : <div className="device" />}
        {p.badge && <span className={"pthumb-badge " + badgeClass}>{p.badge}</span>}
        <button className={"pthumb-fav" + (fav ? " on" : "")}
          onClick={(e) => { e.stopPropagation(); onFav(p.id); }}>
          <Icon k="heart" size={17} />
        </button>
        {out && <span style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", background: "rgba(11,11,12,.78)", color: "#fff", fontWeight: 900, fontSize: 13, letterSpacing: ".04em", padding: "7px 14px", borderRadius: 999, textTransform: "uppercase" }}>Esgotado</span>}
      </div>
      <div className="pbody">
        <div className="pbrand">{p.brand}{p.model ? " · " + p.model : ""}</div>
        <div className="pname">{p.brand === "ELFKING" ? "ELFKING" : (p.model || p.brand)}</div>
        {p.puffs > 0 && <span className="ppuffs"><Icon k="bolt" size={13} />{p.puffs.toLocaleString("pt-BR")} puffs</span>}
        <div className="pflavor-row">
          {p.flavors.slice(0, 2).map((f) => <FlavorChip key={f} name={f} />)}
          {p.flavors.length > 2 && <span className="pflavor-more">+{p.flavors.length - 2} sabores</span>}
        </div>
        <div className="pmeta">
          <div className="pprice"><small>a partir de</small>{brl(p.price)}</div>
          <button className="padd" disabled={out} style={out ? { opacity: .4, cursor: "not-allowed" } : null}
            onClick={(e) => { e.stopPropagation(); if (!out) onAdd(p); }}>
            <Icon k="plus" size={20} />
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- menu gaveta (hambúrguer) ---------- */
function NavMenu({ onClose, onHome, onNavCat }) {
  const cats = [["todos", "Ver todo o catálogo"], ["vendidos", "Mais vendidos"], ["premium", "Premium 45K+"], ["ignite", "IGNITE"], ["elfbar", "ELFBAR"], ["nikbar", "NIKBAR"]];
  const act = (fn) => { fn(); onClose(); };
  const scrollTo = (id) => { onClose(); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); };
  return (
    <>
      <div className="scrim open" onClick={onClose} />
      <aside className="navmenu open" role="dialog" aria-label="Menu">
        <div className="navmenu-head">
          <div className="brand"><BrandMark size={34} /><span className="brand-name" style={{ fontSize: 20 }}>NIK<b>BAR</b></span></div>
          <button className="icon-btn" onClick={onClose} aria-label="Fechar"><Icon k="close" size={20} /></button>
        </div>
        <div className="navmenu-body">
          <div className="navmenu-label">Navegar</div>
          <a className="navmenu-link" onClick={() => act(onHome)}><Icon k="store" size={18} /> Início</a>
          {cats.map(([id, label]) => (
            <a className="navmenu-link" key={id} onClick={() => act(() => onNavCat(id))}><Icon k="grid" size={18} /> {label}</a>
          ))}
          <a className="navmenu-link" onClick={() => scrollTo("faq")}><Icon k="receipt" size={18} /> Perguntas frequentes</a>
          <a className="navmenu-link" onClick={() => scrollTo("avaliacoes")}><Icon k="star" size={18} /> Avaliações</a>

          <div className="navmenu-label">Contato</div>
          <a className="navmenu-link" href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer"><Icon k="wa" size={18} /> WhatsApp · pedidos 24h</a>
          <a className="navmenu-link" href={STORE.instagram} target="_blank" rel="noreferrer"><Icon k="insta" size={18} /> {STORE.handle}</a>
          <div className="navmenu-foot"><Icon k="pin" size={14} /> {STORE.city} · Aberto 24h</div>
        </div>
      </aside>
    </>
  );
}

/* ---------- header ---------- */
function Header({ cartCount, onCart, onSearch, search, onHome, onNavCat, onBack, canBack }) {
  const [menu, setMenu] = useState(false);
  return (
    <>
    <header className="hdr">
      <div className="shell hdr-in">
        {canBack && <button className="hdr-back icon-btn" onClick={onBack} aria-label="Voltar" title="Voltar"><Icon k="back" size={20} /></button>}
        <div className="brand" onClick={onHome}>
          <BrandMark size={46} />
          <span className="brand-name">NIK<b>BAR</b></span>
        </div>
        <label className="hdr-search">
          <Icon k="search" size={18} />
          <input value={search} onChange={(e) => onSearch(e.target.value)} placeholder="Buscar IGNITE, ELFBAR, sabor…" />
        </label>
        <div className="hdr-actions">
          <a className="icon-btn hdr-wa" href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer" aria-label="WhatsApp">
            <Icon k="wa" size={19} />
          </a>
          <button className="icon-btn" onClick={onCart} aria-label="Carrinho">
            <Icon k="cart" size={20} />
            {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
          </button>
          <button className="icon-btn hdr-menu" onClick={() => setMenu(true)} aria-label="Menu">
            <Icon k="menu" size={22} />
          </button>
        </div>
      </div>
    </header>
    {menu && <NavMenu onClose={() => setMenu(false)} onHome={onHome} onNavCat={onNavCat} />}
    </>
  );
}

/* ---------- footer ---------- */
function Footer({ onNavCat, onHome }) {
  return (
    <footer className="ftr">
      <div className="shell">
        <div className="ftr-grid">
          <div>
            <div className="brand" style={{ marginBottom: 16 }} onClick={onHome} title="Voltar ao início">
              <BrandMark size={36} />
              <span className="brand-name" style={{ fontSize: 22 }}>NIK<b>BAR</b></span>
            </div>
            <p style={{ color: "var(--dim)", fontSize: 14, maxWidth: 280, lineHeight: 1.6 }}>
              Melhor preço do Maranhão. Atacado e varejo, entrega rápida em {STORE.city.split("—")[0].trim()} e retirada em qualquer unidade.
            </p>
            <div className="ftr-social">
              <a className="social-btn ig" href={STORE.instagram} target="_blank" rel="noreferrer" aria-label="Instagram">
                <Icon k="insta" size={20} /> <span>Instagram</span>
              </a>
              <a className="social-btn wa" href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer" aria-label="WhatsApp">
                <Icon k="wa" size={20} /> <span>WhatsApp</span>
              </a>
            </div>
          </div>
          <div>
            <h4>Catálogo</h4>
            <a onClick={() => onNavCat("vendidos")}>Mais vendidos</a>
            <a onClick={() => onNavCat("premium")}>Premium 45K+</a>
            <a onClick={() => onNavCat("ignite")}>IGNITE</a>
            <a onClick={() => onNavCat("elfbar")}>ELFBAR</a>
            <a onClick={() => onNavCat("todos")}>Ver tudo</a>
          </div>
          <div>
            <h4>Contato</h4>
            <a href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer">WhatsApp · pedidos 24h</a>
            <a href={STORE.instagram} target="_blank" rel="noreferrer">{STORE.handle}</a>
            <a>Entrega até 30min (Uber/99)</a>
            <a>Pix · Dinheiro · Cartão</a>
            <a href="admin.html" style={{ color: "var(--dim)", fontSize: 12.5, marginTop: 8 }}>Painel do dono →</a>
          </div>
        </div>
        <div className="ftr-bottom">
          <span>© {new Date().getFullYear()} NIK BAR · {STORE.city}</span>
          <span>Venda proibida para menores de 18 anos · Aproveite com responsabilidade</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, BrandMark, FlavorChip, TrustRow, ProductCard, Header, Footer });