"use client";

import { useMemo, useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import {
  ArrowUpRight,
  ChevronDown,
  ChevronUp,
  Crown,
  Flame,
  Layers,
  MapPin,
  Rocket,
  Search,
  ShoppingBag,
  Store,
  TrendingUp,
  Trophy,
  Users,
  Wallet,
} from "lucide-react";
import type { LojaDaGalera, Totais } from "./tipos";
import { useGaleraAoVivo } from "./useGaleraAoVivo";
import { useNumeroAnimado } from "@/lib/numero-animado";

export type { LojaDaGalera } from "./tipos";

const nf = new Intl.NumberFormat("pt-BR");
const moeda = new Intl.NumberFormat("pt-BR", {
  style: "currency",
  currency: "BRL",
  maximumFractionDigits: 0,
});

/** 13958 vira "14 mil": numero redondo comunica escala melhor que precisao. */
function curto(valor: number) {
  const v = Math.round(valor);
  if (v >= 1000) {
    const mil = v / 1000;
    return `${mil >= 10 ? Math.round(mil) : mil.toFixed(1).replace(".0", "").replace(".", ",")} mil`;
  }
  return nf.format(v);
}

const ABAS = [
  { id: "score", rotulo: "Ranking geral", icone: Trophy },
  { id: "acessos", rotulo: "Mais acessadas", icone: Users },
  { id: "alta", rotulo: "Em alta", icone: Flame },
  { id: "vendas", rotulo: "Mais vendem", icone: ShoppingBag },
  { id: "acervo", rotulo: "Maiores catálogos", icone: Layers },
] as const;

type AbaId = (typeof ABAS)[number]["id"];

function ordenar(lojas: LojaDaGalera[], aba: AbaId) {
  const lista = [...lojas];
  if (aba === "acessos") return lista.sort((a, b) => b.visitantes - a.visitantes);
  if (aba === "alta") return lista.sort((a, b) => b.visitas30d - a.visitas30d);
  if (aba === "vendas") return lista.sort((a, b) => b.pedidos - a.pedidos);
  if (aba === "acervo") return lista.sort((a, b) => b.produtos - a.produtos);
  return lista.sort((a, b) => b.score - a.score);
}

function selos(loja: LojaDaGalera, aba: AbaId) {
  const lista: { texto: string; icone: typeof Flame; cor: string }[] = [];
  if (loja.posicao === 1 && aba === "score") {
    lista.push({ texto: "Nº 1 do ranking", icone: Crown, cor: "#B45309" });
  }
  if (loja.visitas > 0 && loja.visitas30d / loja.visitas > 0.35) {
    lista.push({ texto: "Bombando agora", icone: Flame, cor: "#E11D48" });
  }
  if (loja.produtos >= 150) {
    lista.push({ texto: "Catálogo gigante", icone: Layers, cor: "#0284C7" });
  }
  if (loja.pedidos >= 10) {
    lista.push({ texto: "Vende sem parar", icone: Rocket, cor: "#059669" });
  }
  return lista.slice(0, 2);
}

function iniciais(nome: string) {
  return nome
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((p) => p[0])
    .join("")
    .toUpperCase();
}

function NumeroVivo({ valor, moedaBrl = false }: { valor: number; moedaBrl?: boolean }) {
  const animado = useNumeroAnimado(valor);
  return <>{moedaBrl ? moeda.format(Math.round(animado)) : curto(animado)}</>;
}

export default function GaleraDaKtalogu({
  lojas: lojasIniciais,
  totais: totaisIniciais,
}: {
  lojas: LojaDaGalera[];
  totais: Totais;
}) {
  const [aba, setAba] = useState<AbaId>("score");
  const [busca, setBusca] = useState("");
  const [uf, setUf] = useState("todos");

  const { lojas, totais, atualizadoEm, posicoesAnteriores } = useGaleraAoVivo({
    lojas: lojasIniciais,
    totais: totaisIniciais,
  });

  const estados = useMemo(
    () => Array.from(new Set(lojas.map((l) => l.uf).filter(Boolean) as string[])).sort(),
    [lojas]
  );

  const visiveis = useMemo(() => {
    const termo = busca.trim().toLowerCase();
    return ordenar(lojas, aba).filter((loja) => {
      if (uf !== "todos" && loja.uf !== uf) return false;
      if (!termo) return true;
      return `${loja.nome} ${loja.cidade || ""} ${loja.uf || ""}`.toLowerCase().includes(termo);
    });
  }, [lojas, aba, busca, uf]);

  const podio = useMemo(() => ordenar(lojas, aba).slice(0, 3), [lojas, aba]);

  const numerosHero = [
    { valor: totais.lojas, rotulo: "lojas na área", icone: Store, cor: "#7C3AED" },
    { valor: totais.produtos, rotulo: "produtos no ar", icone: ShoppingBag, cor: "#EA580C" },
    { valor: totais.visitas, rotulo: "visitas já rolaram", icone: TrendingUp, cor: "#0284C7" },
    { valor: totais.estados, rotulo: "estados no mapa", icone: MapPin, cor: "#DB2777" },
  ];

  const medalhas = ["#F59E0B", "#94A3B8", "#D97706"];

  return (
    <div className="min-h-screen bg-[#FAF5FF] text-[#4C1D95] [font-family:var(--font-plus-jakarta),system-ui,sans-serif]">
      {/* ---------------------------- TOPO ---------------------------- */}
      <header className="sticky top-0 z-40 border-b border-[#DDD6FE] bg-[#FAF5FF]/85 backdrop-blur-xl">
        <div className="mx-auto flex max-w-[1240px] items-center justify-between gap-3 px-4 py-3.5 sm:px-6">
          <a href="https://ktalogu.com.br" className="flex items-center gap-2">
            <Image src="/brand-logo.svg" alt="Ktalogu" width={116} height={30} className="h-7 w-auto" />
          </a>
          <a
            href="https://ktalogu.com.br"
            className="inline-flex cursor-pointer items-center gap-1.5 rounded-full bg-[#15803D] px-4 py-2 text-[13px] font-bold text-white shadow-[0_6px_18px_rgba(21,128,61,0.30)] outline-none transition hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-[#15803D] focus-visible:ring-offset-2 active:scale-95"
          >
            Quero a minha
            <ArrowUpRight size={15} />
          </a>
        </div>
      </header>

      {/* ---------------------------- HERO ---------------------------- */}
      <section className="relative overflow-hidden px-4 pb-10 pt-12 sm:px-6 sm:pb-14 sm:pt-16">
        <div
          aria-hidden
          className="pointer-events-none absolute -left-32 -top-32 h-[26rem] w-[26rem] rounded-full opacity-55 blur-[100px]"
          style={{ background: "radial-gradient(circle, #DDD6FE 0%, transparent 70%)" }}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute -right-24 top-0 h-[22rem] w-[22rem] rounded-full opacity-50 blur-[100px]"
          style={{ background: "radial-gradient(circle, #C4B5FD 0%, transparent 70%)" }}
        />

        <div className="relative mx-auto max-w-[1240px]">
          <motion.div
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
            className="max-w-3xl"
          >
            <SeloAoVivo atualizadoEm={atualizadoEm} />

            <h1 className="mt-5 text-[2.6rem] font-black leading-[0.92] tracking-[-0.04em] sm:text-[4rem] lg:text-[5rem]">
              A galera da{" "}
              <span className="bg-gradient-to-r from-[#7C3AED] via-[#DB2777] to-[#EA580C] bg-clip-text text-transparent">
                Ktalogu
              </span>
            </h1>

            <p className="mt-5 max-w-xl text-[15px] leading-relaxed text-[#475569] sm:text-[17px]">
              Aqui moram os catálogos que não param. Dá uma fuçada, acompanha quem
              tá bombando, se inspira — e depois monta o seu.
            </p>
          </motion.div>

          {/* Destaque do dinheiro */}
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
            className="relative mt-9 overflow-hidden rounded-[26px] bg-gradient-to-br from-[#6D28D9] via-[#7C3AED] to-[#C026D3] p-6 text-white shadow-[0_18px_44px_rgba(109,40,217,0.22)] sm:p-8"
          >
            <div className="flex flex-wrap items-end justify-between gap-6">
              <div>
                <span className="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.16em]">
                  <Wallet size={12} />
                  Já negociado pela galera
                </span>
                <div className="mt-3 text-[2.5rem] font-black leading-none tracking-[-0.03em] tabular-nums sm:text-[4rem]">
                  <NumeroVivo valor={totais.negociado} moedaBrl />
                </div>
                <p className="mt-2 text-[13px] text-white/70">
                  Somando os pagamentos registrados nos pedidos dessas lojas.
                </p>
              </div>

              <div className="rounded-[18px] bg-[#4C1D95] px-5 py-3.5">
                <div className="text-[1.35rem] font-black leading-none tabular-nums sm:text-[1.7rem]">
                  <NumeroVivo valor={totais.negociado30d} moedaBrl />
                </div>
                <div className="mt-1 text-[11px] font-semibold uppercase tracking-wider text-white/85">
                  nos últimos 30 dias
                </div>
              </div>
            </div>

            <span
              aria-hidden
              className="pointer-events-none absolute -right-10 -top-16 h-48 w-48 rounded-full bg-white/10 blur-2xl"
            />
          </motion.div>

          <div className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
            {numerosHero.map((item, i) => (
              <motion.div
                key={item.rotulo}
                initial={{ opacity: 0, y: 14 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.45, delay: 0.06 * i, ease: [0.22, 1, 0.36, 1] }}
                className="group relative overflow-hidden rounded-[22px] border border-[#DDD6FE] bg-white p-4 shadow-[0_4px_16px_rgba(76,29,149,0.05)] transition hover:-translate-y-0.5 hover:shadow-[0_12px_28px_rgba(76,29,149,0.10)] sm:p-5"
              >
                <span
                  aria-hidden
                  className="pointer-events-none absolute inset-x-0 top-0 h-1 opacity-0 transition-opacity group-hover:opacity-100"
                  style={{ backgroundColor: item.cor }}
                />
                <span
                  className="mb-3 flex h-9 w-9 items-center justify-center rounded-[13px]"
                  style={{ backgroundColor: `${item.cor}1A`, color: item.cor }}
                >
                  <item.icone size={17} />
                </span>
                <div className="text-[1.7rem] font-black leading-none tracking-tight tabular-nums sm:text-[2.1rem]">
                  <NumeroVivo valor={item.valor} />
                </div>
                <div className="mt-1.5 text-[12px] font-medium text-[#475569]">{item.rotulo}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------------------- PÓDIO ---------------------------- */}
      {podio.length === 3 ? (
        <section className="px-4 pb-4 sm:px-6">
          <div className="mx-auto max-w-[1240px]">
            <h2 className="mb-4 flex items-center gap-2 text-[13px] font-bold uppercase tracking-[0.16em] text-[#475569]">
              <Trophy size={14} className="text-[#F59E0B]" />
              O pódio de agora
            </h2>
            <motion.div layout className="grid grid-cols-1 gap-3 md:grid-cols-3">
              {podio.map((loja, i) => (
                <motion.a
                  key={loja.slug}
                  layout
                  href={loja.url}
                  target="_blank"
                  rel="noopener"
                  transition={{ layout: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } }}
                  className="group relative overflow-hidden rounded-[26px] border-2 bg-white p-5 shadow-[0_6px_20px_rgba(76,29,149,0.06)] transition hover:-translate-y-1 hover:shadow-[0_18px_36px_rgba(76,29,149,0.14)]"
                  style={{ borderColor: `${medalhas[i]}55` }}
                >
                  <span
                    aria-hidden
                    className="pointer-events-none absolute -right-8 -top-10 h-32 w-32 rounded-full opacity-0 blur-2xl transition-opacity duration-300 group-hover:opacity-60"
                    style={{ backgroundColor: `${medalhas[i]}66` }}
                  />
                  <span
                    className="absolute right-4 top-3 text-[3rem] font-black leading-none"
                    style={{ color: `${medalhas[i]}2E` }}
                  >
                    {i + 1}
                  </span>
                  <div className="relative flex items-center gap-3">
                    <LogoLoja loja={loja} tamanho={52} />
                    <div className="min-w-0">
                      <div className="truncate text-[15px] font-extrabold tracking-tight">{loja.nome}</div>
                      <div className="mt-0.5 truncate text-[12px] text-[#475569]">
                        {[loja.cidade, loja.uf].filter(Boolean).join(" · ") || "Brasil"}
                      </div>
                    </div>
                  </div>
                  <div className="relative mt-4 flex items-end justify-between">
                    <div>
                      <div
                        className="text-[2rem] font-black leading-none tabular-nums"
                        style={{ color: loja.cor }}
                      >
                        <NumeroVivo valor={loja.score} />
                      </div>
                      <div className="text-[11px] font-semibold uppercase tracking-wider text-[#475569]">
                        pontos
                      </div>
                    </div>
                    <span className="inline-flex items-center gap-1 rounded-full bg-[#F3EEFF] px-3 py-1.5 text-[12px] font-bold transition group-hover:bg-[#6D28D9] group-hover:text-white">
                      Visitar
                      <ArrowUpRight size={13} />
                    </span>
                  </div>
                </motion.a>
              ))}
            </motion.div>
          </div>
        </section>
      ) : null}

      {/* ---------------------------- CONTROLES ---------------------------- */}
      <section className="sticky top-[57px] z-30 border-y border-[#DDD6FE] bg-[#FAF5FF]/92 px-4 py-3 backdrop-blur-xl sm:px-6">
        <div className="mx-auto max-w-[1240px] space-y-3">
          <div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {ABAS.map((item) => {
              const ativa = aba === item.id;
              return (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => setAba(item.id)}
                  className={`inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-3.5 py-2 text-[12.5px] font-bold outline-none transition focus-visible:ring-2 focus-visible:ring-[#7C3AED] focus-visible:ring-offset-2 active:scale-95 ${
                    ativa
                      ? "bg-[#6D28D9] text-white shadow-[0_6px_16px_rgba(109,40,217,0.25)]"
                      : "border border-[#DDD6FE] bg-white text-[#475569] hover:text-[#4C1D95]"
                  }`}
                >
                  <item.icone size={14} />
                  {item.rotulo}
                </button>
              );
            })}
          </div>

          <div className="flex gap-2">
            <div className="relative flex-1">
              <Search
                size={15}
                className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-[#8B7BA8]"
              />
              <input
                value={busca}
                onChange={(e) => setBusca(e.target.value)}
                placeholder="Procurar loja ou cidade…"
                aria-label="Procurar loja ou cidade"
                className="h-10 w-full rounded-full border border-[#DDD6FE] bg-white pl-10 pr-4 text-[13.5px] outline-none transition placeholder:text-[#8B7BA8] focus:border-[#7C3AED] focus:ring-2 focus:ring-[#7C3AED]/25"
              />
            </div>
            <select
              value={uf}
              onChange={(e) => setUf(e.target.value)}
              aria-label="Filtrar por estado"
              className="h-10 shrink-0 cursor-pointer rounded-full border border-[#DDD6FE] bg-white px-3.5 text-[13px] font-semibold outline-none transition focus:border-[#7C3AED] focus:ring-2 focus:ring-[#7C3AED]/25"
            >
              <option value="todos">Brasil</option>
              {estados.map((sigla) => (
                <option key={sigla} value={sigla}>
                  {sigla}
                </option>
              ))}
            </select>
          </div>
        </div>
      </section>

      {/* ---------------------------- LISTA ---------------------------- */}
      <section className="px-4 py-6 sm:px-6 sm:py-8">
        <div className="mx-auto max-w-[1240px]">
          <p className="mb-4 text-[12.5px] font-medium text-[#475569]">
            {visiveis.length === lojas.length
              ? `${nf.format(lojas.length)} lojas na área`
              : `${nf.format(visiveis.length)} de ${nf.format(lojas.length)} lojas`}
          </p>

          {visiveis.length === 0 ? (
            <div className="rounded-[26px] border border-[#DDD6FE] bg-white px-6 py-16 text-center">
              <p className="text-[15px] font-bold">Nada por aqui com esse filtro</p>
              <p className="mt-1.5 text-[13px] text-[#475569]">Tenta outro nome ou muda o estado.</p>
            </div>
          ) : (
            <motion.div layout className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {visiveis.map((loja, i) => (
                <CartaoLoja
                  key={loja.slug}
                  loja={loja}
                  aba={aba}
                  posicaoNaLista={i + 1}
                  posicaoAnterior={posicoesAnteriores[loja.slug]}
                />
              ))}
            </motion.div>
          )}
        </div>
      </section>

      {/* ---------------------------- CHAMADA FINAL ---------------------------- */}
      <section className="px-4 pb-16 sm:px-6">
        <div className="relative mx-auto max-w-[1240px] overflow-hidden rounded-[30px] bg-gradient-to-br from-[#6D28D9] via-[#7C3AED] to-[#DB2777] px-6 py-12 text-center text-white shadow-[0_18px_44px_rgba(109,40,217,0.24)] sm:px-10 sm:py-16">
          <span
            aria-hidden
            className="pointer-events-none absolute -left-16 -top-20 h-64 w-64 rounded-full bg-white/10 blur-2xl"
          />
          <div className="relative">
            <h2 className="text-[1.9rem] font-black leading-[1.02] tracking-[-0.03em] sm:text-[3rem]">
              Tá esperando o quê pra
              <br />
              entrar nessa lista?
            </h2>
            <p className="mx-auto mt-4 max-w-md text-[14.5px] leading-relaxed text-white/75">
              Monta seu catálogo, compartilha o link e comece a vender. Suas
              métricas aparecem aqui do mesmo jeito.
            </p>
            <a
              href="https://ktalogu.com.br"
              className="mt-7 inline-flex cursor-pointer items-center gap-2 rounded-full bg-white px-7 py-3.5 text-[14.5px] font-black text-[#6D28D9] outline-none transition hover:scale-[1.04] focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#6D28D9] active:scale-95"
            >
              Criar minha loja
              <ArrowUpRight size={17} />
            </a>
          </div>
        </div>
      </section>

      <footer className="border-t border-[#DDD6FE] px-4 py-8 text-center sm:px-6">
        <p className="text-[12px] text-[#475569]">Ktalogu · os números se atualizam sozinhos</p>
      </footer>
    </div>
  );
}

/** Ponto pulsando + hora da ultima leitura: deixa visivel que a pagina esta viva. */
function SeloAoVivo({ atualizadoEm }: { atualizadoEm: number | null }) {
  return (
    <span className="inline-flex items-center gap-2 rounded-full border border-[#DDD6FE] bg-white px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.18em] text-[#6D28D9] shadow-sm">
      <span className="relative flex h-2 w-2">
        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#15803D] opacity-70" />
        <span className="relative inline-flex h-2 w-2 rounded-full bg-[#15803D]" />
      </span>
      Ao vivo
      {atualizadoEm ? (
        <span className="font-medium normal-case tracking-normal text-[#475569]">
          {new Date(atualizadoEm).toLocaleTimeString("pt-BR", {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
          })}
        </span>
      ) : null}
    </span>
  );
}

function LogoLoja({ loja, tamanho }: { loja: LojaDaGalera; tamanho: number }) {
  if (loja.logo) {
    return (
      <span
        className="flex shrink-0 items-center justify-center overflow-hidden rounded-[16px] border border-[#DDD6FE] bg-white p-1.5"
        style={{ width: tamanho, height: tamanho }}
      >
        <Image
          src={loja.logo}
          alt={loja.nome}
          width={tamanho * 2}
          height={tamanho * 2}
          className="h-full w-full object-contain"
          unoptimized
        />
      </span>
    );
  }
  return (
    <span
      className="flex shrink-0 items-center justify-center rounded-[16px] text-[15px] font-black"
      style={{
        width: tamanho,
        height: tamanho,
        backgroundColor: `${loja.cor}1F`,
        color: loja.cor,
      }}
    >
      {iniciais(loja.nome)}
    </span>
  );
}

function CartaoLoja({
  loja,
  aba,
  posicaoNaLista,
  posicaoAnterior,
}: {
  loja: LojaDaGalera;
  aba: AbaId;
  posicaoNaLista: number;
  posicaoAnterior?: number;
}) {
  const marcas = selos(loja, aba);

  /* Quanto a loja subiu ou caiu desde a ultima leitura. So aparece quando muda:
     uma seta parada em toda linha viraria ruido. */
  const delta =
    posicaoAnterior && posicaoAnterior !== loja.posicao ? posicaoAnterior - loja.posicao : 0;

  const destaque =
    aba === "acessos"
      ? { valor: loja.visitantes, rotulo: "visitantes", moedaBrl: false }
      : aba === "alta"
        ? { valor: loja.visitas30d, rotulo: "visitas em 30d", moedaBrl: false }
        : aba === "vendas"
          ? { valor: loja.pedidos, rotulo: "pedidos", moedaBrl: false }
          : aba === "acervo"
            ? { valor: loja.produtos, rotulo: "produtos", moedaBrl: false }
            : { valor: loja.score, rotulo: "pontos", moedaBrl: false };

  /* Barra do score: da leitura instantanea de quem esta na frente sem precisar
     comparar numero a numero. */
  const proporcao = Math.max(4, Math.min(100, loja.score));

  return (
    <motion.a
      layout
      href={loja.url}
      target="_blank"
      rel="noopener"
      initial={{ opacity: 0, y: 14 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, layout: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } }}
      className="group relative flex flex-col gap-3.5 overflow-hidden rounded-[24px] border border-[#DDD6FE] bg-white p-4 shadow-[0_4px_14px_rgba(76,29,149,0.04)] transition-shadow hover:shadow-[0_16px_32px_rgba(76,29,149,0.13)]"
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 transition-transform duration-300 group-hover:scale-x-100"
        style={{ backgroundColor: loja.cor }}
      />

      <div className="relative flex items-start gap-3">
        <div className="relative">
          <LogoLoja loja={loja} tamanho={46} />
          <span
            className="absolute -left-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-black text-white shadow-sm"
            style={{ backgroundColor: loja.cor }}
          >
            {posicaoNaLista}
          </span>
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-1.5">
            <span className="truncate text-[14.5px] font-extrabold leading-tight tracking-tight">
              {loja.nome}
            </span>
            {delta !== 0 ? (
              <motion.span
                initial={{ opacity: 0, scale: 0.7 }}
                animate={{ opacity: 1, scale: 1 }}
                className={`inline-flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${
                  delta > 0 ? "bg-[#DCFCE7] text-[#15803D]" : "bg-[#FFE4E6] text-[#BE123C]"
                }`}
              >
                {delta > 0 ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
                {Math.abs(delta)}
              </motion.span>
            ) : null}
          </div>
          <div className="mt-1 flex items-center gap-1 text-[11.5px] text-[#475569]">
            <MapPin size={11} className="shrink-0" />
            <span className="truncate">
              {[loja.cidade, loja.uf].filter(Boolean).join(" · ") || "Brasil"}
            </span>
          </div>
        </div>

        <div className="shrink-0 text-right">
          <div className="text-[1.25rem] font-black leading-none tabular-nums" style={{ color: loja.cor }}>
            <NumeroVivo valor={destaque.valor} moedaBrl={destaque.moedaBrl} />
          </div>
          <div className="mt-0.5 text-[10px] font-semibold uppercase tracking-wider text-[#475569]">
            {destaque.rotulo}
          </div>
        </div>
      </div>

      <div className="relative h-1.5 overflow-hidden rounded-full bg-[#F3EEFF]">
        <motion.span
          className="absolute inset-y-0 left-0 rounded-full"
          style={{ backgroundColor: loja.cor }}
          initial={{ width: 0 }}
          animate={{ width: `${proporcao}%` }}
          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
        />
      </div>

      {marcas.length > 0 ? (
        <div className="relative flex flex-wrap gap-1.5">
          {marcas.map((selo) => (
            <span
              key={selo.texto}
              className="inline-flex items-center gap-1 rounded-full px-2 py-1 text-[10.5px] font-bold"
              style={{ backgroundColor: `${selo.cor}16`, color: selo.cor }}
            >
              <selo.icone size={11} />
              {selo.texto}
            </span>
          ))}
        </div>
      ) : null}

      <div className="relative mt-auto flex items-center justify-between gap-2 border-t border-[#EDE9FE] pt-3">
        <div className="flex items-center gap-3 text-[11.5px] text-[#475569]">
          <span className="inline-flex items-center gap-1 tabular-nums">
            <ShoppingBag size={12} />
            {nf.format(loja.produtos)}
          </span>
          <span className="inline-flex items-center gap-1 tabular-nums">
            <Users size={12} />
            {curto(loja.visitantes)}
          </span>
        </div>
        <span className="inline-flex items-center gap-1 text-[12px] font-bold text-[#475569] transition group-hover:text-[#6D28D9]">
          Ver loja
          <ArrowUpRight size={13} className="transition-transform group-hover:translate-x-0.5" />
        </span>
      </div>
    </motion.a>
  );
}