/* global React, PRODUCTS, CATEGORIES, STORE, brl, flavorMeta, productGradient,
   Icon, ProductCard, TrustRow */
const { useState: useStateV } = React;

/* ============================================================
   HOME
   ============================================================ */
function Home({ onOpen, onAdd, onNavCat, fav, onFav }) {
  const featured = PRODUCTS.filter((p) => p.featured);
  const catShortcuts = [
    { id: "vendidos", name: "Mais vendidos", glow: "#FFD60A" },
    { id: "premium",  name: "Premium 45K+",  glow: "#8B5CF6" },
    { id: "ignite",   name: "IGNITE",         glow: "#F76A77" },
    { id: "elfbar",   name: "ELFBAR",         glow: "#38D6C4" },
    { id: "nikbar",   name: "NIKBAR",         glow: "#5B8DEF" },
    { id: "todos",    name: "Ver tudo",       glow: "#9BD64A" },
  ];
  const countFor = (id) => PRODUCTS.filter(CATEGORIES.find((c) => c.id === id).test).length;

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="shell hero-grid">
          <div>
            <img className="hero-logo-m" src="assets/nikbar-logo.png" alt="NIK BAR" />
            <div className="eyebrow" style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)" }} />
              {STORE.city} · Aberto 24h
            </div>
            <h1 style={{ marginTop: 16 }}>Melhor<br />preço do<br /><em>Maranhão</em></h1>
            <p className="hero-sub">
              Pods e vapes das melhores marcas — IGNITE, ELFBAR, OXBAR e mais.
              Entrega em até 20 min em São Luís. Atacado e varejo, pedido direto no WhatsApp.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-yellow btn-lg" onClick={() => onNavCat("todos")}>Ver catálogo <Icon k="arrow" size={18} /></button>
              <a className="btn btn-ghost btn-lg" href={"https://wa.me/" + STORE.whatsapp} target="_blank" rel="noreferrer"><Icon k="wa" size={18} /> Falar agora</a>
            </div>
            <TrustRow />
          </div>

          <div className="hero-stage">
            <div className="hero-blob" />
            <div className="hero-spark">✦</div>
            <div className="hero-frame">
              <image-slot id="hero-photo" shape="rect" fit="cover"
                placeholder="Solte uma foto da loja / produtos"></image-slot>
            </div>
            <div className="hero-float tl"><div className="big">+40K</div><div className="sm">vendas</div></div>
            <div className="hero-float br"><div className="big">20min</div><div className="sm">entrega slz</div></div>
          </div>
        </div>
      </section>

      {/* CATEGORIAS */}
      <section className="sec-sm shell">
        <div className="sec-head">
          <h2 className="sec-title">Categorias</h2>
          <a className="see-all" onClick={() => onNavCat("todos")}>Ver tudo <Icon k="arrow" size={15} /></a>
        </div>
        <div className="cat-strip">
          {catShortcuts.map((c) => (
            <div className="cat-card" key={c.id} onClick={() => onNavCat(c.id)}>
              <div className="cc-glow" style={{ background: c.glow }} />
              <div className="cc-name">{c.name}</div>
              <div className="cc-count">{countFor(c.id)} produtos</div>
            </div>
          ))}
        </div>
      </section>

      {/* DESTAQUES */}
      <section className="sec shell" style={{ paddingTop: 24 }}>
        <div className="sec-head">
          <div>
            <div className="eyebrow">Os queridinhos da galera</div>
            <h2 className="sec-title" style={{ marginTop: 8 }}>Mais <em>vendidos</em></h2>
          </div>
          <a className="see-all" onClick={() => onNavCat("vendidos")}>Ver todos <Icon k="arrow" size={15} /></a>
        </div>
        <div className="grid-products">
          {featured.map((p) => (
            <ProductCard key={p.id} p={p} onOpen={onOpen} onAdd={onAdd} fav={fav.includes(p.id)} onFav={onFav} />
          ))}
        </div>
      </section>

      {/* ATACADO BAND */}
      <section className="shell" style={{ paddingBottom: 20 }}>
        <div className="promo-band">
          <div className="promo-deco">ATACADO</div>
          <div className="promo-content">
            <div className="eyebrow" style={{ color: "rgba(11,11,12,.62)" }}>Para lojistas e revendedores</div>
            <h3>Compre no atacado com<br />preços exclusivos</h3>
            <p>Faça seu pedido em poucos segundos e receba condições especiais para revenda.</p>
            <ul className="promo-benefits">
              <li><Icon k="check" size={16} /> Descontos progressivos</li>
              <li><Icon k="check" size={16} /> Atendimento rápido</li>
              <li><Icon k="check" size={16} /> Compra simplificada</li>
              <li><Icon k="check" size={16} /> Condições para lojistas</li>
            </ul>
          </div>
          <div className="promo-ctas">
            <a className="btn btn-dark btn-lg btn-block"
               href={"https://wa.me/" + STORE.whatsapp + "?text=" + encodeURIComponent("Olá! Quero fazer um pedido no atacado 🙌")}
               target="_blank" rel="noreferrer">
              <Icon k="wa" size={18} /> Solicitar pedido atacado
            </a>
            <a className="btn btn-atacado-ghost btn-lg btn-block"
               href={"https://wa.me/" + STORE.whatsapp + "?text=" + encodeURIComponent("Olá! Quero falar com um consultor sobre o atacado.")}
               target="_blank" rel="noreferrer">
              Falar com um consultor
            </a>
          </div>
        </div>
      </section>

      {/* CATÁLOGO COMPLETO (preview) */}
      <section className="sec shell" style={{ paddingTop: 36 }}>
        <div className="sec-head">
          <h2 className="sec-title">No <em>estoque</em> agora</h2>
          <a className="see-all" onClick={() => onNavCat("todos")}>Ver os {PRODUCTS.length} <Icon k="arrow" size={15} /></a>
        </div>
        <div className="grid-products">
          {PRODUCTS.slice(0, 8).map((p) => (
            <ProductCard key={p.id} p={p} onOpen={onOpen} onAdd={onAdd} fav={fav.includes(p.id)} onFav={onFav} />
          ))}
        </div>
      </section>

      {/* AVALIAÇÕES (deslizantes) */}
      <ReviewsSection />

      {/* FAQ */}
      <FaqSection />
    </main>
  );
}

/* ============================================================
   AVALIAÇÕES — carrossel que desliza sozinho (pausa ao tocar)
   ============================================================ */
function ReviewsSection() {
  const list = (typeof REVIEWS !== "undefined" && REVIEWS.length) ? REVIEWS : [];
  if (!list.length) return null;
  const loop = list.length >= 3 ? list.concat(list) : list; // duplica p/ loop suave
  const Stars = ({ n }) => (
    <span className="review-stars">{"★★★★★".slice(0, n)}<span className="off">{"★★★★★".slice(n)}</span></span>
  );
  return (
    <section className="sec shell" id="avaliacoes" style={{ paddingTop: 20 }}>
      <div className="sec-head">
        <div>
          <div className="eyebrow">Quem comprou, aprovou</div>
          <h2 className="sec-title" style={{ marginTop: 8 }}>O que dizem os <em>clientes</em></h2>
        </div>
      </div>
      <div className="reviews-marquee">
        <div className={"reviews-track" + (loop.length === list.length ? " no-anim" : "")}>
          {loop.map((r, i) => (
            <div className="review-card" key={r.id + "-" + i}>
              <Stars n={r.nota || 5} />
              <p className="review-text">“{r.texto}”</p>
              <div className="review-name"><span className="review-ava">{(r.nome || "?").charAt(0)}</span>{r.nome}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ — quebra de objeções (acordeão)
   ============================================================ */
function FaqItem({ q, a }) {
  const [open, setOpen] = useStateV(false);
  return (
    <div className={"faq-item" + (open ? " open" : "")} onClick={() => setOpen((o) => !o)}>
      <div className="faq-q">{q}<Icon k="arrow" size={17} /></div>
      {open && <div className="faq-a">{a}</div>}
    </div>
  );
}
function FaqSection() {
  const wa = "https://wa.me/" + STORE.whatsapp;
  const faqs = [
    ["Entregam em quais bairros?", <>Entregamos em toda <b>São Luís</b>. A taxa varia por bairro — chama no <a href={wa} target="_blank" rel="noreferrer" style={{ color: "var(--accent)" }}>WhatsApp</a> que a gente confirma o frete do seu endereço na hora.</>],
    ["Tem retirada?", <>Tem sim! A <b>retirada é grátis</b> em qualquer uma das nossas unidades. É só combinar pelo WhatsApp.</>],
    ["O produto tem garantia?", <>Sim — <b>garantia de 24h</b> contra defeito de fábrica (não cobre mau uso).</>],
    ["Posso pagar na entrega?", <>Pode! Aceitamos <b>dinheiro ou cartão na entrega</b>, ou <b>Pix</b> antecipado — como preferir.</>],
    ["Quais formas de pagamento?", <><b>Pix, dinheiro e cartão.</b> No Pix costuma ter condição especial.</>],
    ["Como funciona o atacado?", <>Pra quem compra em volume ou revende, temos <b>preço de atacado</b>. Chama no WhatsApp que a gente fecha a condição.</>],
    ["Quanto tempo demora a entrega?", <>Em média <b>até 20 minutos</b> em São Luís (pode variar conforme o bairro e o horário).</>],
    ["Os produtos são originais?", <><b>100% originais e lacrados</b>, direto das marcas oficiais (IGNITE, ELFBAR, OXBAR e mais).</>],
  ];
  return (
    <section className="sec shell" id="faq">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Ficou com dúvida?</div>
          <h2 className="sec-title" style={{ marginTop: 8 }}>Perguntas <em>frequentes</em></h2>
        </div>
      </div>
      <div className="faq-list">
        {faqs.map(([q, a], i) => <FaqItem key={i} q={q} a={a} />)}
      </div>
    </section>
  );
}

/* ============================================================
   CATEGORY
   ============================================================ */
function CategoryView({ catId, onOpen, onAdd, onNavCat, fav, onFav, search }) {
  const [sort, setSort] = useStateV("relevance");
  const active = CATEGORIES.find((c) => c.id === catId) || CATEGORIES[0];

  let list = PRODUCTS.filter(active.test);
  if (search && search.trim()) {
    const q = search.toLowerCase();
    list = PRODUCTS.filter((p) =>
      (p.brand + " " + p.model + " " + p.flavors.join(" ")).toLowerCase().includes(q));
  }
  list = [...list];
  if (sort === "price-asc") list.sort((a, b) => a.price - b.price);
  if (sort === "price-desc") list.sort((a, b) => b.price - a.price);
  if (sort === "puffs") list.sort((a, b) => b.puffs - a.puffs);

  return (
    <main className="cat-page shell">
      <div className="cat-head">
        <div>
          <div className="eyebrow">{search ? "Busca" : "Catálogo"}</div>
          <h1 className="sec-title" style={{ marginTop: 8 }}>
            {search ? <>Resultados p/ "<em>{search}</em>"</> : <>{active.label === "Todos" ? <>Todo o <em>estoque</em></> : <em>{active.label}</em>}</>}
          </h1>
          <p style={{ color: "var(--dim)", fontWeight: 700, marginTop: 8 }}>{list.length} produtos</p>
        </div>
        <div className="sortbar">
          Ordenar:
          <select value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="relevance">Relevância</option>
            <option value="price-asc">Menor preço</option>
            <option value="price-desc">Maior preço</option>
            <option value="puffs">Mais puffs</option>
          </select>
        </div>
      </div>

      {!search && (
        <div className="tabs" style={{ marginBottom: 28 }}>
          {CATEGORIES.map((c) => (
            <button key={c.id} className={"tab" + (c.id === catId ? " on" : "")} onClick={() => onNavCat(c.id)}>{c.label}</button>
          ))}
        </div>
      )}

      {list.length === 0 ? (
        <div className="cart-empty" style={{ padding: "80px 20px" }}>
          <p style={{ fontWeight: 800, fontSize: 18, color: "var(--text)" }}>Nada encontrado</p>
          <p style={{ marginTop: 6 }}>Tenta outra marca ou sabor — ou chama no WhatsApp que a gente acha pra você.</p>
        </div>
      ) : (
        <div className="grid-products">
          {list.map((p) => (
            <ProductCard key={p.id} p={p} onOpen={onOpen} onAdd={onAdd} fav={fav.includes(p.id)} onFav={onFav} />
          ))}
        </div>
      )}
    </main>
  );
}

Object.assign(window, { Home, CategoryView });