/* global React */

/* ============================================================
   Salão Pétala Morena — Vitrine "mais desejados"
   Tiers S → D + busca + calculadora cabelo humano.
   ============================================================ */

const { useState, useEffect, useRef } = React;
const PHONE_V = "5522999522695";
const waV = (msg) => `https://wa.me/${PHONE_V}?text=${encodeURIComponent(msg)}`;
const goWa = (url) => (e) => { e.preventDefault(); window.location.href = url; };

/* ---- ícones ---- */
function VIconWA(props) {
  return (
    <svg viewBox="0 0 32 32" fill="currentColor" {...props}>
      <path d="M16.001 5.333c-5.892 0-10.667 4.776-10.667 10.667 0 1.881.498 3.714 1.443 5.333l-1.51 5.519 5.658-1.484a10.621 10.621 0 0 0 5.075 1.298h.004c5.891 0 10.667-4.776 10.667-10.667S21.892 5.333 16.001 5.333zm0 19.333a8.66 8.66 0 0 1-4.412-1.207l-.317-.188-3.357.88.896-3.27-.207-.336a8.665 8.665 0 0 1-1.336-4.611c0-4.776 3.889-8.664 8.667-8.664 4.776 0 8.667 3.889 8.667 8.667 0 4.778-3.889 8.729-8.601 8.729zm4.757-6.495c-.26-.13-1.541-.76-1.779-.846-.238-.087-.412-.13-.585.13-.173.26-.671.846-.823 1.018-.152.173-.303.195-.563.065-.26-.13-1.097-.404-2.089-1.288-.772-.687-1.293-1.535-1.444-1.795-.151-.26-.016-.4.114-.529.117-.116.26-.303.39-.455.13-.151.173-.26.26-.433.087-.173.043-.325-.022-.455-.065-.13-.585-1.41-.802-1.932-.211-.508-.426-.439-.585-.447l-.498-.009c-.173 0-.455.065-.693.325-.238.26-.91.889-.91 2.169 0 1.28.932 2.516 1.062 2.689.13.173 1.834 2.801 4.444 3.927.621.268 1.106.428 1.484.548.623.198 1.19.17 1.638.103.499-.074 1.541-.63 1.758-1.237.217-.607.217-1.127.152-1.237-.065-.108-.238-.173-.498-.303z" />
    </svg>);
}

function VIconSearch(props) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
      strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>);
}

/* ---- formatação de preço brasileiro ---- */
function formatPrice(v) {
  if (v == null) return "—";
  const fixed = v.toFixed(2);
  const [intPart, dec] = fixed.split(".");
  const intFmt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  return "R$ " + (dec === "00" ? intFmt : intFmt + "," + dec);
}

/* ================================================================
   TABELA — CABELO HUMANO
   CMs disponíveis: 25, 45, 55, 65, 75, 85
   (salão não trabalha com cm terminando em 0)
   ================================================================ */
const HUMANO_PRECOS = {
  cacheado: {
    25: { 100: 245,  500: 210,   1000: 185 },
    45: { 100: 380,  500: 325,   1000: 290 },
    55: { 100: 473,  500: 402,   1000: 355 },
    65: { 100: 565,  500: 480,   1000: 425 },
    75: { 100: 644,  500: 550,   1000: 485 },
    85: { 100: 736,  500: 625,   1000: 550 }
  },
  liso: {
    25: { 100: 170,  500: 127.5, 1000: 145 },
    45: { 100: 303,  500: 235.5, 1000: 264 },
    55: { 100: 396,  500: 300,   1000: 340 },
    65: { 100: 488,  500: 367.5, 1000: 417 },
    75: { 100: 567,  500: 427.5, 1000: 485 },
    85: { 100: 646,  500: 488,   1000: 553 }
  },
  loiro: {
    25: { 100: 295,  500: 255,   1000: 225 },
    45: { 100: 430,  500: 365,   1000: 325 },
    55: { 100: 522,  500: 445,   1000: 390 },
    65: { 100: 615,  500: 525,   1000: 460 },
    75: { 100: 694,  500: 590,   1000: 525 },
    85: { 100: 796,  500: 680,   1000: 600 }
  },
  euro: {
    25: { 100: 250,  500: 215,   1000: 190  },
    45: { 100: 530,  500: 450,   1000: 400  },
    55: { 100: 680,  500: 580,   1000: 510  },
    65: { 100: 820,  500: 700,   1000: 615  },
    75: { 100: 920,  500: 785,   1000: 690  },
    85: { 100: 1100, 500: 935,   1000: 825  }
  }
};

/* ================================================================
   DADOS DOS TIERS
   ================================================================ */

const TIER_S = [
  { id: "jumbo",  cat: "Jumbo 400g", name: <>Jumbo <em>Box Braid</em></>,
    meta: "Super-X, Hiper-X, King Jumbão · várias cores",
    price: "R$ 30", unit: "pacote", badge: "Mais vendido", badgeType: "hot",
    urgency: "Disponível em diversas cores. Informe a cor desejada ao fazer o pedido.",
    msg: "Oi! Vim pelo site. Quero pedir Jumbo 400g (box braid). Quais cores vocês têm? Quero escolher a cor." },
  { id: "nina",   cat: "Nina Softex", name: <><em>Nina</em> Softex 70g</>,
    meta: "Crochet & entrelace · 70g · promo acima de 5",
    price: "R$ 20", unit: "pacote", badge: "Campeã do crochet", badgeType: "hot",
    urgency: "Acima de 5 pacotes sai R$ 18 cada.",
    msg: "Oi! Vim pelo site. Quero pedir a Nina Softex 70g pra crochet, pode confirmar pra mim?" },
  { id: "fashionclassic", cat: "Fashion Classic", name: <>Fashion <em>Classic</em> Lindona 300g</>,
    meta: "Bio · 300g · Lindona, Carnaval, Iza, Jaqueline…",
    price: "R$ 140", unit: "pacote", badge: "Muito pedido", badgeType: "soft",
    urgency: "Vários modelos e cores. Manda falar qual quer.",
    msg: "Oi! Vim pelo site. Quero o Fashion Classic Lindona 300g (R$ 140), pode confirmar pra mim?" },
  { id: "beyou",  cat: "Be You", name: <>Be You <em>Babado</em></>,
    meta: "Bio · 320g · vários modelos e cores",
    price: "R$ 135", unit: "pacote", badge: "Mais pedido por nome", badgeType: "soft",
    urgency: "A cor que você quiser, é só falar.",
    msg: "Oi! Vim pelo site. Quero o Be You Babado (R$ 135), pode confirmar pra mim?" }
];

const TIER_A = [
  { id: "boho",   cat: "French Curl", name: <>Jumbo <em>Boho Curl</em> 400g</>,
    meta: "French Curly · 400g · 5 mechas · cacho praiano",
    price: "R$ 60", unit: "pacote", badge: "Em alta", badgeType: "hot",
    urgency: "O cacho praiano do momento.",
    msg: "Oi! Vim pelo site. Quero o Jumbo Boho Curl 400g (R$ 60), pode confirmar pra mim?" },
  { id: "fauxlocs", cat: "Faux Locs", name: <><em>Faux Locs</em> Dread Removível</>,
    meta: "Crochet removível · Boho Goddess Loc · 275–300g",
    price: "R$ 125", unit: "pacote", badge: "Em alta", badgeType: "hot",
    urgency: "Visual marcante que tá bombando.",
    msg: "Oi! Vim pelo site. Quero o Faux Locs Dread Removível (R$ 125), pode confirmar pra mim?" },
  { id: "miami",  cat: "Caracol Miami", name: <>Caracol <em>Miami</em> 300g 55cm</>,
    meta: "Maxi · crochet · cacho miúdo · 300g · 55cm",
    price: "R$ 125", unit: "pacote", badge: "Em alta", badgeType: "hot",
    urgency: "Cachinho miúdo, estilo em alta.",
    msg: "Oi! Vim pelo site. Quero o Caracol Miami 300g 55cm (R$ 125), pode confirmar pra mim?" },
  { id: "weng",   cat: "Weng Tropical", name: <>Weng <em>Tropical</em> Orgânico 70-80cm</>,
    meta: "Orgânico · 70–80cm · afro & cacheado",
    price: "R$ 120", unit: "pacote", badge: "Em alta", badgeType: "hot",
    urgency: "Orgânico bom. 1 pacote geralmente fecha a cabeça.",
    msg: "Oi! Vim pelo site. Quero o Weng Tropical Orgânico 70-80cm (R$ 120), pode confirmar pra mim?" }
];

const TIER_B = [
  { id: "pomada-p",   cat: "Pomada", name: <>Pomada <em>Alpha Hair</em> 150g</>,
    meta: "Cera modeladora · baby hair & acabamento", price: "R$ 12",
    urgency: "Vai junto com quase todo pedido.",
    msg: "Oi! Vim pelo site. Quero a Pomada Alpha Hair 150g (R$ 12). Tem disponível?" },
  { id: "pomada-g",   cat: "Pomada", name: <>Pomada <em>Alpha Hair</em> 500g</>,
    meta: "Cera modeladora · embalagem maior", price: "R$ 35",
    urgency: "Quem usa bastante leva o 500g.",
    msg: "Oi! Vim pelo site. Quero a Pomada Alpha Hair 500g (R$ 35). Tem disponível?" },
  { id: "pomada-1kg", cat: "Pomada", name: <>Pomada <em>Fio de Fada</em> 1kg</>,
    meta: "Cera modeladora · embalagem profissional", price: "R$ 60",
    urgency: "O maior. Pra quem usa toda semana.",
    msg: "Oi! Vim pelo site. Quero a Pomada Fio de Fada 1kg (R$ 60). Tem disponível?" },
  { id: "touca-df",   cat: "Touca", name: <>Touca cetim <em>dupla face</em> GG</>,
    meta: "Dupla face · GG · várias combinações de cor", price: "R$ 20",
    urgency: "Dupla face. Cabe trança.",
    msg: "Oi! Vim pelo site. Quero a Touca cetim dupla face GG (R$ 20), pode confirmar pra mim?" },
  { id: "desmaia",    cat: "Finalizador", name: <>Finalizador <em>Desmaia</em> Fibra Fio de Fada</>,
    meta: "Brilho e anti-frizz da fibra", price: "R$ 22",
    urgency: "Dá brilho e doma o frizz da fibra.",
    msg: "Oi! Vim pelo site. Quero o Finalizador Desmaia Fibra Fio de Fada (R$ 22). Tem disponível?" },
  { id: "mousse",     cat: "Finalizador", name: <>Mousse para trança <em>Fio de Fada</em></>,
    meta: "Mousse · controle e fixação da fibra", price: "R$ 25",
    urgency: "Controla a fibra sem pesar.",
    msg: "Oi! Vim pelo site. Quero o Mousse para trança Fio de Fada (R$ 25). Tem disponível?" },
  { id: "miojo",      cat: "Miojo", name: <><em>Miojo</em> 320g</>,
    meta: "Fibra sintética · geralmente 1 pacote faz a cabeça", price: "R$ 45",
    urgency: "Econômico, fecha a cabeça inteira.",
    msg: "Oi! Vim pelo site. Quero o Miojo 320g (R$ 45), pode confirmar pra mim?" }
];

const TIER_C = [
  { id: "peruca",  name: "Wig Peruca cabelo orgânico",
    sub: "Wig / peruca orgânica completa", price: "R$ 250",
    msg: "Oi! Vim pelo site. Quero a Wig Peruca cabelo orgânico (R$ 250), como funciona o pedido?" },
  { id: "lace",    name: "Lace Peruca cabelo Bio",
    sub: "Lace front bio · frontal natural", price: "R$ 350",
    msg: "Oi! Vim pelo site. Quero a Lace Peruca cabelo Bio (R$ 350)." },
  { id: "goivo",   name: "Breed Love Goivo 300g tela",
    sub: "Bio sedoso premium · em telas · 300g", price: "R$ 140",
    msg: "Oi! Vim pelo site. Quero o Breed Love Goivo 300g tela (R$ 140), pode confirmar pra mim?" },
  { id: "raissa",  name: "Breed Love Raissa crochet",
    sub: "Crochet · fio solto · afro", price: "R$ 120",
    msg: "Oi! Vim pelo site. Quero o Breed Love Raissa crochet (R$ 120), pode confirmar pra mim?" }
];

const TIER_D_CHIPS = [
  "Anel para trança unidade", "Argolinha para trança", "Tererê para trança",
  "Pingente para trança", "Correntinha para trança", "Fio para trança 2m",
  "Tictac", "Agulha curva grossa entrelace",
  "Agulha reta metal grossa sem ponta",
  "Agulha gancho", "Pente de cabo de metal", "Cola queratina fita transparente",
  "Fita para lace/mega hair rolo 3m", "Linha para entrelace 23", "Linha para entrelace 80",
  "Lastex 10 metros", "Lastex 500 metros",
  "Touca de pressão / Wig", "Durag anti-frizz"
];

/* ---- catálogo completo (todos os itens ativos da planilha estoque_teste, produto-base sem variante de cor) ---- */
const EXTRA_SEARCH = [
  { id:"pomada-alpha-hair-150g", name:"Pomada Alpha Hair 150g", meta:"Pomada · cera modeladora", price:"R$ 12", key:"pomada alpha hair 150g pomada pomada · cera modeladora pomada alpha hair 150g", msg:"Oi! Vim pelo site. Quero Pomada Alpha Hair 150g (R$ 12). Tem disponível?" },
  { id:"pomada-fio-de-fada-1kg", name:"Pomada Fio de Fada 1kg", meta:"Pomada · cera modeladora", price:"R$ 60", key:"pomada fio de fada 1kg pomada pomada · cera modeladora pomada fio de fada 1kg", msg:"Oi! Vim pelo site. Quero Pomada Fio de Fada 1kg (R$ 60). Tem disponível?" },
  { id:"touca-cetim-dupla-face-gg", name:"Touca cetim dupla face GG", meta:"Touca · proteção", price:"R$ 20", key:"touca cetim dupla face gg touca touca · proteção touca cetim dupla face gg", msg:"Oi! Vim pelo site. Quero Touca cetim dupla face GG (R$ 20). Tem disponível?" },
  { id:"french-curl-60cm", name:"French Curl 60cm", meta:"French Curly · cacho boho", price:"R$ 60", key:"french curl 60cm french curl french curly · cacho boho french curl 60cm", msg:"Oi! Vim pelo site. Quero French Curl 60cm (R$ 60). Tem disponível?" },
  { id:"agulha-curva-grossa-entrelace", name:"Agulha curva grossa entrelace", meta:"Ferramenta · insumo", price:"R$ 5", key:"agulha curva grossa entrelace ferramenta ferramenta · insumo agulha curva grossa entrelace", msg:"Oi! Vim pelo site. Quero Agulha curva grossa entrelace (R$ 5). Tem disponível?" },
  { id:"mecha-jumbo-50g", name:"Mecha Jumbo 50g", meta:"Mecha avulsa de jumbo", price:"R$ 10", key:"mecha jumbo 50g jumbo — mecha avulsa mecha avulsa de jumbo mecha jumbo 50g", msg:"Oi! Vim pelo site. Quero Mecha Jumbo 50g (R$ 10). Tem disponível?" },
  { id:"jumbo-boho-curl-400g", name:"Jumbo Boho Curl 400g", meta:"French Curly · cacho boho", price:"R$ 60", key:"jumbo boho curl 400g french curl french curly · cacho boho jumbo boho curl 400g", msg:"Oi! Vim pelo site. Quero Jumbo Boho Curl 400g (R$ 60). Tem disponível?" },
  { id:"jumbo-extra-longo-1-5m", name:"Jumbo extra-longo 1,5m", meta:"Jumbo", price:"R$ 20", key:"jumbo extra-longo 1,5m jumbo — outros jumbo jumbo extra-longo 1,5m", msg:"Oi! Vim pelo site. Quero Jumbo extra-longo 1,5m (R$ 20). Tem disponível?" },
  { id:"nina-softex-70g", name:"Nina Softex 70g", meta:"Nina Softex · crochet & entrelace", price:"R$ 20", key:"nina softex 70g nina softex nina softex · crochet & entrelace nina softex 70g", msg:"Oi! Vim pelo site. Quero Nina Softex 70g (R$ 20). Tem disponível?" },
  { id:"nina-350", name:"Nina 350", meta:"Nina Softex · crochet & entrelace", price:"R$ 20", key:"nina 350 nina softex nina softex · crochet & entrelace nina 350", msg:"Oi! Vim pelo site. Quero Nina 350 (R$ 20). Tem disponível?" },
  { id:"marshmallow-cherey", name:"Marshmallow Cherey", meta:"Bio / orgânico premium", price:"R$ 80", key:"marshmallow cherey bio — outros bio / orgânico premium marshmallow cherey", msg:"Oi! Vim pelo site. Quero Marshmallow Cherey (R$ 80). Tem disponível?" },
  { id:"cabelo-bio-liso-maxi", name:"Cabelo Bio Liso Maxi", meta:"Cabelo bio / orgânico", price:"R$ 100", key:"cabelo bio liso maxi bio — genérico cabelo bio / orgânico cabelo bio liso maxi", msg:"Oi! Vim pelo site. Quero Cabelo Bio Liso Maxi (R$ 100). Tem disponível?" },
  { id:"cabelo-bio-fabi", name:"Cabelo Bio Fabi", meta:"Cabelo bio / orgânico", price:"R$ 100", key:"cabelo bio fabi bio — genérico cabelo bio / orgânico cabelo bio fabi", msg:"Oi! Vim pelo site. Quero Cabelo Bio Fabi (R$ 100). Tem disponível?" },
  { id:"weng-tropical-organico-70-80cm", name:"Weng Tropical Orgânico 70-80cm", meta:"Bio / orgânico premium", price:"R$ 120", key:"weng tropical orgânico 70-80cm bio — outros bio / orgânico premium weng tropical organico 70-80cm", msg:"Oi! Vim pelo site. Quero Weng Tropical Orgânico 70-80cm (R$ 120). Tem disponível?" },
  { id:"cabelo-bio-luxo", name:"Cabelo Bio Luxo", meta:"Cabelo bio / orgânico", price:"R$ 120", key:"cabelo bio luxo bio — genérico cabelo bio / orgânico cabelo bio luxo", msg:"Oi! Vim pelo site. Quero Cabelo Bio Luxo (R$ 120). Tem disponível?" },
  { id:"weng-crochet-braids-f-2282", name:"Weng Crochet Braids F-2282", meta:"Bio / orgânico premium", price:"R$ 120", key:"weng crochet braids f-2282 bio — outros bio / orgânico premium weng crochet braids f-2282", msg:"Oi! Vim pelo site. Quero Weng Crochet Braids F-2282 (R$ 120). Tem disponível?" },
  { id:"iara-bio-fibra-organico-280g-70cm", name:"Iara Bio Fibra Orgânico 280g 70cm", meta:"Bio / orgânico premium", price:"R$ 120", key:"iara bio fibra orgânico 280g 70cm bio — outros bio / orgânico premium iara bio fibra organico 280g 70cm", msg:"Oi! Vim pelo site. Quero Iara Bio Fibra Orgânico 280g 70cm (R$ 120). Tem disponível?" },
  { id:"fashion-classic-lindona-300g", name:"Fashion Classic Lindona 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic lindona 300g bio — fashion classic bio · fashion classic · 300g fashion classic lindona 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Lindona 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-iza-300g", name:"Fashion Classic Iza 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic iza 300g bio — fashion classic bio · fashion classic · 300g fashion classic iza 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Iza 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-carnaval-300g", name:"Fashion Classic Carnaval 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic carnaval 300g bio — fashion classic bio · fashion classic · 300g fashion classic carnaval 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Carnaval 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-fogosa-300g", name:"Fashion Classic Fogosa 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic fogosa 300g bio — fashion classic bio · fashion classic · 300g fashion classic fogosa 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Fogosa 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-lindissima-300g", name:"Fashion Classic Lindíssima 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic lindíssima 300g bio — fashion classic bio · fashion classic · 300g fashion classic lindissima 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Lindíssima 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-jaqueline-300g", name:"Fashion Classic Jaqueline 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic jaqueline 300g bio — fashion classic bio · fashion classic · 300g fashion classic jaqueline 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Jaqueline 300g (R$ 140). Tem disponível?" },
  { id:"fashion-classic-maceio-300g", name:"Fashion Classic Maceió 300g", meta:"Bio · Fashion Classic · 300g", price:"R$ 140", key:"fashion classic maceió 300g bio — fashion classic bio · fashion classic · 300g fashion classic maceio 300g", msg:"Oi! Vim pelo site. Quero Fashion Classic Maceió 300g (R$ 140). Tem disponível?" },
  { id:"breed-love-raissa-crochet", name:"Breed Love Raissa crochet", meta:"Bio · Breed Love", price:"R$ 120", key:"breed love raissa crochet bio — breed love bio · breed love breed love raissa crochet", msg:"Oi! Vim pelo site. Quero Breed Love Raissa crochet (R$ 120). Tem disponível?" },
  { id:"breed-love-esther-tela", name:"Breed Love Esther tela", meta:"Bio · Breed Love", price:"R$ 140", key:"breed love esther tela bio — breed love bio · breed love breed love esther tela", msg:"Oi! Vim pelo site. Quero Breed Love Esther tela (R$ 140). Tem disponível?" },
  { id:"breed-love-emilly-tela", name:"Breed Love Emilly tela", meta:"Bio · Breed Love", price:"R$ 140", key:"breed love emilly tela bio — breed love bio · breed love breed love emilly tela", msg:"Oi! Vim pelo site. Quero Breed Love Emilly tela (R$ 140). Tem disponível?" },
  { id:"breed-love-debora-tela", name:"Breed Love Débora tela", meta:"Bio · Breed Love", price:"R$ 140", key:"breed love débora tela bio — breed love bio · breed love breed love debora tela", msg:"Oi! Vim pelo site. Quero Breed Love Débora tela (R$ 140). Tem disponível?" },
  { id:"breed-love-goivo-300g-tela", name:"Breed Love Goivo 300g tela", meta:"Bio · Breed Love", price:"R$ 140", key:"breed love goivo 300g tela bio — breed love bio · breed love breed love goivo 300g tela", msg:"Oi! Vim pelo site. Quero Breed Love Goivo 300g tela (R$ 140). Tem disponível?" },
  { id:"goivo-maxi-285g-50-60cm", name:"Goivo Maxi 285g 50-60cm", meta:"Bio / orgânico premium", price:"R$ 140", key:"goivo maxi 285g 50-60cm bio — outros bio / orgânico premium goivo maxi 285g 50-60cm", msg:"Oi! Vim pelo site. Quero Goivo Maxi 285g 50-60cm (R$ 140). Tem disponível?" },
  { id:"cabelo-bio-platinum-280g", name:"Cabelo Bio Platinum 280g", meta:"Cabelo bio / orgânico", price:"R$ 140", key:"cabelo bio platinum 280g bio — genérico cabelo bio / orgânico cabelo bio platinum 280g", msg:"Oi! Vim pelo site. Quero Cabelo Bio Platinum 280g (R$ 140). Tem disponível?" },
  { id:"sleek-linha-silmara", name:"Sleek (linha Silmara)", meta:"Bio / orgânico premium", price:"R$ 140", key:"sleek (linha silmara) bio — outros bio / orgânico premium sleek (linha silmara)", msg:"Oi! Vim pelo site. Quero Sleek (linha Silmara) (R$ 140). Tem disponível?" },
  { id:"fio-solto-black-beauty", name:"Fio Solto Black Beauty", meta:"Bio / orgânico premium", price:"R$ 140", key:"fio solto black beauty bio — outros bio / orgânico premium fio solto black beauty", msg:"Oi! Vim pelo site. Quero Fio Solto Black Beauty (R$ 140). Tem disponível?" },
  { id:"ivite-plus-closure", name:"Ivite Plus Closure", meta:"Bio / orgânico premium", price:"R$ 140", key:"ivite plus closure bio — outros bio / orgânico premium ivite plus closure", msg:"Oi! Vim pelo site. Quero Ivite Plus Closure (R$ 140). Tem disponível?" },
  { id:"mecha-bio-fio-solto", name:"Mecha bio fio solto", meta:"Bio / orgânico premium", price:"R$ 20", key:"mecha bio fio solto bio — outros bio / orgânico premium mecha bio fio solto", msg:"Oi! Vim pelo site. Quero Mecha bio fio solto (R$ 20). Tem disponível?" },
  { id:"mecha-bio-em-tela", name:"Mecha bio em tela", meta:"Bio / orgânico premium", price:"R$ 30", key:"mecha bio em tela bio — outros bio / orgânico premium mecha bio em tela", msg:"Oi! Vim pelo site. Quero Mecha bio em tela (R$ 30). Tem disponível?" },
  { id:"miojo-320g", name:"Miojo 320g", meta:"Fibra sintética", price:"R$ 45", key:"miojo 320g miojo fibra sintética miojo 320g", msg:"Oi! Vim pelo site. Quero Miojo 320g (R$ 45). Tem disponível?" },
  { id:"miojinho-350g", name:"Miojinho 350g", meta:"Fibra sintética", price:"R$ 45", key:"miojinho 350g miojo fibra sintética miojinho 350g", msg:"Oi! Vim pelo site. Quero Miojinho 350g (R$ 45). Tem disponível?" },
  { id:"faux-locs-dread-removivel", name:"Faux Locs Dread Removível", meta:"Crochet removível", price:"R$ 125", key:"faux locs dread removível faux locs crochet removível faux locs dread removivel", msg:"Oi! Vim pelo site. Quero Faux Locs Dread Removível (R$ 125). Tem disponível?" },
  { id:"caracol-miami-300g-55cm", name:"Caracol Miami 300g 55cm", meta:"Crochet · cacho miúdo", price:"R$ 125", key:"caracol miami 300g 55cm caracol miami crochet · cacho miúdo caracol miami 300g 55cm", msg:"Oi! Vim pelo site. Quero Caracol Miami 300g 55cm (R$ 125). Tem disponível?" },
  { id:"pomada-alpha-hair-500g", name:"Pomada Alpha Hair 500g", meta:"Pomada · cera modeladora", price:"R$ 35", key:"pomada alpha hair 500g pomada pomada · cera modeladora pomada alpha hair 500g", msg:"Oi! Vim pelo site. Quero Pomada Alpha Hair 500g (R$ 35). Tem disponível?" },
  { id:"finalizador-desmaia-fibra-fio-de-fada", name:"Finalizador Desmaia Fibra Fio de Fada", meta:"Finalizador de fibra", price:"R$ 22", key:"finalizador desmaia fibra fio de fada finalizador finalizador de fibra finalizador desmaia fibra fio de fada", msg:"Oi! Vim pelo site. Quero Finalizador Desmaia Fibra Fio de Fada (R$ 22). Tem disponível?" },
  { id:"mousse-para-tranca-fio-de-fada", name:"Mousse para trança Fio de Fada", meta:"Finalizador de fibra", price:"R$ 25", key:"mousse para trança fio de fada finalizador finalizador de fibra mousse para tranca fio de fada", msg:"Oi! Vim pelo site. Quero Mousse para trança Fio de Fada (R$ 25). Tem disponível?" },
  { id:"durag-anti-frizz", name:"Durag anti-frizz", meta:"Touca · proteção", price:"R$ 25", key:"durag anti-frizz touca touca · proteção durag anti-frizz", msg:"Oi! Vim pelo site. Quero Durag anti-frizz (R$ 25). Tem disponível?" },
  { id:"touca-de-pressao-wig", name:"Touca de pressão / Wig", meta:"Touca · proteção", price:"R$ 10", key:"touca de pressão / wig touca touca · proteção touca de pressao / wig", msg:"Oi! Vim pelo site. Quero Touca de pressão / Wig (R$ 10). Tem disponível?" },
  { id:"anel-para-tranca-unidade", name:"Anel para trança unidade", meta:"Acessório de trança", price:"R$ 1", key:"anel para trança unidade acessório acessório de trança anel para tranca unidade", msg:"Oi! Vim pelo site. Quero Anel para trança unidade (R$ 1). Tem disponível?" },
  { id:"anel-para-tranca-pacote-10un-sortidas", name:"Anel para trança pacote 10un sortidas", meta:"Acessório de trança", price:"R$ 5", key:"anel para trança pacote 10un sortidas acessório acessório de trança anel para tranca pacote 10un sortidas", msg:"Oi! Vim pelo site. Quero Anel para trança pacote 10un sortidas (R$ 5). Tem disponível?" },
  { id:"argolinha-para-tranca", name:"Argolinha para trança", meta:"Acessório de trança", price:"R$ 0,50", key:"argolinha para trança acessório acessório de trança argolinha para tranca", msg:"Oi! Vim pelo site. Quero Argolinha para trança (R$ 0,50). Tem disponível?" },
  { id:"terere-para-tranca", name:"Tererê para trança", meta:"Acessório de trança", price:"R$ 0,50", key:"tererê para trança acessório acessório de trança terere para tranca", msg:"Oi! Vim pelo site. Quero Tererê para trança (R$ 0,50). Tem disponível?" },
  { id:"terere-para-tranca-pacote-10un", name:"Tererê para trança pacote 10un", meta:"Acessório de trança", price:"R$ 5", key:"tererê para trança pacote 10un acessório acessório de trança terere para tranca pacote 10un", msg:"Oi! Vim pelo site. Quero Tererê para trança pacote 10un (R$ 5). Tem disponível?" },
  { id:"pingente-para-tranca", name:"Pingente para trança", meta:"Acessório de trança", price:"R$ 1", key:"pingente para trança acessório acessório de trança pingente para tranca", msg:"Oi! Vim pelo site. Quero Pingente para trança (R$ 1). Tem disponível?" },
  { id:"correntinha-para-tranca", name:"Correntinha para trança", meta:"Acessório de trança", price:"R$ 2,50", key:"correntinha para trança acessório acessório de trança correntinha para tranca", msg:"Oi! Vim pelo site. Quero Correntinha para trança (R$ 2,50). Tem disponível?" },
  { id:"fio-para-tranca-2m", name:"Fio para trança 2m", meta:"Acessório de trança", price:"R$ 2", key:"fio para trança 2m acessório acessório de trança fio para tranca 2m", msg:"Oi! Vim pelo site. Quero Fio para trança 2m (R$ 2). Tem disponível?" },
  { id:"tictac", name:"Tictac", meta:"Acessório de trança", price:"R$ 7", key:"tictac acessório acessório de trança tictac", msg:"Oi! Vim pelo site. Quero Tictac (R$ 7). Tem disponível?" },
  { id:"agulha-reta-metal-grossa-sem-ponta", name:"Agulha reta metal grossa sem ponta", meta:"Ferramenta · insumo", price:"R$ 5", key:"agulha reta metal grossa sem ponta ferramenta ferramenta · insumo agulha reta metal grossa sem ponta", msg:"Oi! Vim pelo site. Quero Agulha reta metal grossa sem ponta (R$ 5). Tem disponível?" },
  { id:"agulha-gancho", name:"Agulha gancho", meta:"Ferramenta · insumo", price:"R$ 7", key:"agulha gancho ferramenta ferramenta · insumo agulha gancho", msg:"Oi! Vim pelo site. Quero Agulha gancho (R$ 7). Tem disponível?" },
  { id:"pente-de-cabo-de-metal", name:"Pente de cabo de metal", meta:"Ferramenta · insumo", price:"R$ 10", key:"pente de cabo de metal ferramenta ferramenta · insumo pente de cabo de metal", msg:"Oi! Vim pelo site. Quero Pente de cabo de metal (R$ 10). Tem disponível?" },
  { id:"cola-queratina-fita-transparente", name:"Cola queratina fita transparente", meta:"Ferramenta · insumo", price:"R$ 20", key:"cola queratina fita transparente ferramenta ferramenta · insumo cola queratina fita transparente", msg:"Oi! Vim pelo site. Quero Cola queratina fita transparente (R$ 20). Tem disponível?" },
  { id:"fita-para-lace-mega-hair-rolo-3m", name:"Fita para lace/mega hair rolo 3m", meta:"Ferramenta · insumo", price:"R$ 70", key:"fita para lace/mega hair rolo 3m ferramenta ferramenta · insumo fita para lace/mega hair rolo 3m", msg:"Oi! Vim pelo site. Quero Fita para lace/mega hair rolo 3m (R$ 70). Tem disponível?" },
  { id:"linha-para-entrelace-23", name:"Linha para entrelace 23", meta:"Ferramenta · insumo", price:"R$ 18", key:"linha para entrelace 23 ferramenta ferramenta · insumo linha para entrelace 23", msg:"Oi! Vim pelo site. Quero Linha para entrelace 23 (R$ 18). Tem disponível?" },
  { id:"linha-para-entrelace-80", name:"Linha para entrelace 80", meta:"Ferramenta · insumo", price:"R$ 35", key:"linha para entrelace 80 ferramenta ferramenta · insumo linha para entrelace 80", msg:"Oi! Vim pelo site. Quero Linha para entrelace 80 (R$ 35). Tem disponível?" },
  { id:"lastex-10-metros", name:"Lastex 10 metros", meta:"Ferramenta · insumo", price:"R$ 2", key:"lastex 10 metros ferramenta ferramenta · insumo lastex 10 metros", msg:"Oi! Vim pelo site. Quero Lastex 10 metros (R$ 2). Tem disponível?" },
  { id:"lastex-500-metros", name:"Lastex 500 metros", meta:"Ferramenta · insumo", price:"R$ 35", key:"lastex 500 metros ferramenta ferramenta · insumo lastex 500 metros", msg:"Oi! Vim pelo site. Quero Lastex 500 metros (R$ 35). Tem disponível?" },
  { id:"wig-peruca-cabelo-organico", name:"Wig Peruca cabelo orgânico", meta:"Peruca / wig completa", price:"R$ 250", key:"wig peruca cabelo orgânico peruca peruca / wig completa wig peruca cabelo organico", msg:"Oi! Vim pelo site. Quero Wig Peruca cabelo orgânico (R$ 250). Tem disponível?" },
  { id:"lace-peruca-cabelo-bio", name:"Lace Peruca cabelo Bio", meta:"Peruca / wig completa", price:"R$ 350", key:"lace peruca cabelo bio peruca peruca / wig completa lace peruca cabelo bio", msg:"Oi! Vim pelo site. Quero Lace Peruca cabelo Bio (R$ 350). Tem disponível?" },
  { id:"super-x-jumbo", name:"Super-X Jumbo", meta:"Jumbo 400g · box braid", price:"R$ 30", key:"super-x jumbo jumbo — super-x jumbo 400g · box braid super-x jumbo", msg:"Oi! Vim pelo site. Quero Super-X Jumbo (R$ 30). Tem disponível?" },
  { id:"hiper-x-jumbo", name:"Hiper-X Jumbo", meta:"Jumbo 400g · box braid", price:"R$ 30", key:"hiper-x jumbo jumbo — hiper-x jumbo 400g · box braid hiper-x jumbo", msg:"Oi! Vim pelo site. Quero Hiper-X Jumbo (R$ 30). Tem disponível?" },
  { id:"king-jumbao-jumbo", name:"King Jumbão Jumbo", meta:"Jumbo 400g · box braid", price:"R$ 30", key:"king jumbão jumbo jumbo — king jumbão jumbo 400g · box braid king jumbao jumbo", msg:"Oi! Vim pelo site. Quero King Jumbão Jumbo (R$ 30). Tem disponível?" },
  { id:"mecha-boho-curl", name:"Mecha Boho Curl", meta:"French Curly · cacho boho", price:"R$ 10", key:"mecha boho curl french curl french curly · cacho boho mecha boho curl", msg:"Oi! Vim pelo site. Quero Mecha Boho Curl (R$ 10). Tem disponível?" },
  { id:"be-you-lacrei", name:"Be You Lacrei", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you lacrei bio — be you bio · be you · 320g be you lacrei", msg:"Oi! Vim pelo site. Quero Be You Lacrei (R$ 135). Tem disponível?" },
  { id:"be-you-babadinho", name:"Be You Babadinho", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you babadinho bio — be you bio · be you · 320g be you babadinho", msg:"Oi! Vim pelo site. Quero Be You Babadinho (R$ 135). Tem disponível?" },
  { id:"be-you-babado", name:"Be You Babado", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you babado bio — be you bio · be you · 320g be you babado", msg:"Oi! Vim pelo site. Quero Be You Babado (R$ 135). Tem disponível?" },
  { id:"be-you-my-best", name:"Be You My Best", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you my best bio — be you bio · be you · 320g be you my best", msg:"Oi! Vim pelo site. Quero Be You My Best (R$ 135). Tem disponível?" },
  { id:"be-you-ubuntu", name:"Be You Ubuntu", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you ubuntu bio — be you bio · be you · 320g be you ubuntu", msg:"Oi! Vim pelo site. Quero Be You Ubuntu (R$ 135). Tem disponível?" },
  { id:"be-you-bayo", name:"Be You Bayô", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you bayô bio — be you bio · be you · 320g be you bayo", msg:"Oi! Vim pelo site. Quero Be You Bayô (R$ 135). Tem disponível?" },
  { id:"be-you-marrenta", name:"Be You Marrenta", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you marrenta bio — be you bio · be you · 320g be you marrenta", msg:"Oi! Vim pelo site. Quero Be You Marrenta (R$ 135). Tem disponível?" },
  { id:"be-you-hello-miga", name:"Be You Hello Miga", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you hello miga bio — be you bio · be you · 320g be you hello miga", msg:"Oi! Vim pelo site. Quero Be You Hello Miga (R$ 135). Tem disponível?" },
  { id:"be-you-miga-sua-loka", name:"Be You Miga sua Loka", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you miga sua loka bio — be you bio · be you · 320g be you miga sua loka", msg:"Oi! Vim pelo site. Quero Be You Miga sua Loka (R$ 135). Tem disponível?" },
  { id:"be-you-meu-bb", name:"Be You Meu BB", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you meu bb bio — be you bio · be you · 320g be you meu bb", msg:"Oi! Vim pelo site. Quero Be You Meu BB (R$ 135). Tem disponível?" },
  { id:"be-you-proibida", name:"Be You Proibida", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you proibida bio — be you bio · be you · 320g be you proibida", msg:"Oi! Vim pelo site. Quero Be You Proibida (R$ 135). Tem disponível?" },
  { id:"be-you-nambya", name:"Be You Nambya", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you nambya bio — be you bio · be you · 320g be you nambya", msg:"Oi! Vim pelo site. Quero Be You Nambya (R$ 135). Tem disponível?" },
  { id:"be-you-to-passada", name:"Be You Tô Passada", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you tô passada bio — be you bio · be you · 320g be you to passada", msg:"Oi! Vim pelo site. Quero Be You Tô Passada (R$ 135). Tem disponível?" },
  { id:"be-you-para-tudo-com-closure", name:"Be You Para Tudo com Closure", meta:"Bio · Be You · com closure", price:"R$ 140", key:"be you para tudo com closure bio — be you closure bio · be you · com closure be you para tudo com closure", msg:"Oi! Vim pelo site. Quero Be You Para Tudo com Closure (R$ 140). Tem disponível?" },
  { id:"be-you-para-tudo-sem-closure", name:"Be You Para Tudo sem Closure", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you para tudo sem closure bio — be you bio · be you · 320g be you para tudo sem closure", msg:"Oi! Vim pelo site. Quero Be You Para Tudo sem Closure (R$ 135). Tem disponível?" },
  { id:"be-you-perfeicao-com-closure", name:"Be You Perfeição com Closure", meta:"Bio · Be You · com closure", price:"R$ 140", key:"be you perfeição com closure bio — be you closure bio · be you · com closure be you perfeicao com closure", msg:"Oi! Vim pelo site. Quero Be You Perfeição com Closure (R$ 140). Tem disponível?" },
  { id:"be-you-perfeicao-sem-closure", name:"Be You Perfeição sem Closure", meta:"Bio · Be You · 320g", price:"R$ 135", key:"be you perfeição sem closure bio — be you bio · be you · 320g be you perfeicao sem closure", msg:"Oi! Vim pelo site. Quero Be You Perfeição sem Closure (R$ 135). Tem disponível?" },
  { id:"miracle-orchid", name:"Miracle Orchid", meta:"Bio · Miracle Orchid", price:"R$ 140", key:"miracle orchid bio — miracle orchid bio · miracle orchid miracle orchid", msg:"Oi! Vim pelo site. Quero Miracle Orchid (R$ 140). Tem disponível?" },
];

/* ---- sinônimos de busca: grupos bidirecionais (peruca <-> wig etc.) ----
   Se a key de um produto contém qualquer termo do grupo, o grupo inteiro
   é anexado à key. Assim "peruca" acha "wig" e vice-versa, com várias tags. */
const SEARCH_SYNONYMS = [
  ["peruca", "perucas", "perucão", "perucao", "wig", "wigs", "lace", "lace front", "front lace", "lace wig", "frontal", "cabelo pronto"],
  ["mega hair", "mega-hair", "megahair", "mega", "aplique", "apliques", "alongamento", "tela", "nó italiano", "no italiano"],
  ["trança", "tranca", "tranças", "trancas", "trancinha", "trancinhas", "box braid", "box braids", "boxbraids", "nagô", "nago", "entrelace", "knotless"],
  ["jumbo", "jumbão", "jumbao", "cabelo de trança", "fibra pra trança", "fibra para trança"],
  ["cacheado", "cacheada", "cacho", "cachos", "cachinho", "crespo", "afro", "curly", "boho", "boho curl", "cacho praiano", "caracol"],
  ["liso", "lisinho", "lisa", "escorrido", "smooth"],
  ["crochet", "crochê", "croche", "crochet braid"],
  ["faux locs", "fauxlocs", "dread", "dreads", "dreadlock", "goddess", "locs"],
  ["pomada", "cera", "gel", "fixador", "gelatina", "baby hair", "edge", "modeladora"],
  ["touca", "gorro", "wig cap", "touca de pressão", "cetim", "durag", "bandana", "proteção"],
  ["finalizador", "finalizadora", "spray", "brilho", "anti-frizz", "antifrizz", "antifriz", "mousse", "desmaia"],
  ["orgânico", "organico", "bio", "natural", "biológico", "biologico"],
  ["humano", "cabelo humano", "human hair"],
  ["agulha", "agulhão", "agulhao", "gancho"],
  ["cola", "adesivo", "fita", "queratina", "keratina"],
  ["linha", "nylon", "entrelace"],
  ["lastex", "elástico", "elastico"],
  ["anel", "argola", "argolinha", "missanga", "miçanga", "tererê", "terere", "pingente", "correntinha", "enfeite", "adorno"],
  ["pente", "escova", "rateador"],
  ["tictac", "tic tac", "presilha", "clipe", "clip", "prendedor"],
  ["miojo", "miojinho", "fibra", "fibra sintética", "sintético", "sintetico"]
];

/* normaliza: minúsculas + remove acentos (resolve "tranca" vs "trança" e NFC/NFD) */
const norm = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");

const expandSearchKey = (key) => {
  const low = norm(key);
  const extra = SEARCH_SYNONYMS
    .filter((group) => group.some((term) => low.includes(norm(term))))
    .map((group) => group.map(norm).join(" "))
    .join(" ");
  return extra ? `${low} ${extra}` : low;
};

/* ---- índice de busca = catálogo + sinônimos ---- */
const SEARCH_CATALOG = EXTRA_SEARCH.map((p) => ({ ...p, key: expandSearchKey(p.key) }));


/* ================================================================
   IMAGENS DOS PRODUTOS
   ================================================================ */

/* Cada produto tem 1 arquivo em brand_assets/product_images/<slug>.jpg.
   Trocar imagem = sobrescrever o arquivo com o mesmo nome. Sem mexer em código.
   Os cards em destaque (TIER_*) usam ids curtos; o mapa abaixo liga esses ids
   ao arquivo do produto-base. Os itens da busca já usam o próprio id como slug.
   Legenda completa: brand_assets/product_images/IMAGENS.md */
const TIER_SLUG = {
  jumbo: "super-x-jumbo", nina: "nina-softex-70g", bio: "cabelo-bio-luxo", beyou: "be-you-babado",
  boho: "jumbo-boho-curl-400g", fauxlocs: "faux-locs-dread-removivel", miami: "caracol-miami-300g-55cm",
  zgtex: "jumbo-zg-tex-pre-esticado", weng: "weng-tropical-organico-70-80cm", fashionclassic: "fashion-classic-lindona-300g",
  "pomada-p": "pomada-alpha-hair-150g", "pomada-g": "pomada-alpha-hair-500g", "pomada-1kg": "pomada-fio-de-fada-1kg",
  "touca-df": "touca-cetim-dupla-face-gg",
  desmaia: "finalizador-desmaia-fibra-fio-de-fada", mousse: "mousse-para-tranca-fio-de-fada", miojo: "miojo-320g",
  peruca: "wig-peruca-cabelo-organico", lace: "lace-peruca-cabelo-bio",
  goivo: "breed-love-goivo-300g-tela", raissa: "breed-love-raissa-crochet"
};
const imgSlug = (id) => TIER_SLUG[id] || id;

/* Foto do produto. Some sozinha (placeholder) se o arquivo não existir. */
function ProdPhoto({ id, className }) {
  const [ext, setExt] = useState("jpg");
  const [bad, setBad] = useState(false);
  const slug = imgSlug(id);
  if (!slug || bad) return null;
  return (
    <img
      className={className}
      src={`brand_assets/product_images/${slug}.${ext}`}
      alt=""
      loading="lazy"
      onError={() => (ext === "jpg" ? setExt("png") : setBad(true))} />);
}

/* ================================================================
   CARD COMPONENTS
   ================================================================ */

function VitProdCard({ p, idPrefix, large }) {
  const url = waV(p.msg);
  return (
    <a className={`prod-card${large ? " prod-card--lg" : ""}`} href={url} onClick={goWa(url)}>
      <div className="prod-thumb">
        <div className="prod-thumb-art">
          <span>{p.cat}</span>
          <strong>{p.price}</strong>
        </div>
        <ProdPhoto id={p.id} className="prod-photo" />
        {p.badge ?
          <span className={`prod-badge prod-badge--${p.badgeType}`}>{p.badge}</span> : null}
      </div>
      <div className="prod-body">
        <div className="prod-meta">{p.meta}</div>
        <h3 className="prod-name">{p.name}</h3>
        <p className="prod-urgency">{p.urgency}</p>
        <div className="prod-price tnum">{p.price}<small>/ {p.unit}</small></div>
        <span className="prod-cta">
          Pedir<span className="cta-full"> pelo WhatsApp</span> <VIconWA />
        </span>
      </div>
    </a>);
}

function FinCard({ p }) {
  const url = waV(p.msg);
  return (
    <a className="fin-card" href={url} onClick={goWa(url)}>
      <ProdPhoto id={p.id} className="fin-photo" />
      <div className="fin-meta">{p.meta}</div>
      <h4 className="fin-name">{p.name}</h4>
      <p className="fin-urgency">{p.urgency}</p>
      <div className="fin-foot">
        <span className="fin-price tnum">{p.price}</span>
        <span className="fin-btn">
          Pedir <VIconWA />
        </span>
      </div>
    </a>);
}

function NicheRow({ p }) {
  return (
    <a className="niche-row" href={waV(p.msg)} onClick={goWa(waV(p.msg))}>
      <ProdPhoto id={p.id} className="niche-photo" />
      <span className="nr-name">{p.name}<small>{p.sub}</small></span>
      <span className="nr-price tnum">{p.price}</span>
    </a>);
}

function TierHead({ tag, title, sub }) {
  return (
    <div className="tier-head">
      <div className="tier-rank">
        <span className="tr-badge">{tag}</span>
        <h3 className="tier-title">{title}</h3>
      </div>
      <p className="tier-sub">{sub}</p>
    </div>);
}

/* ================================================================
   BUSCA
   ================================================================ */

function SearchOverlay({ open, onClose }) {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);
  const query = q.trim();
  const results = query.length > 1
    ? SEARCH_CATALOG.filter((p) => p.key.includes(norm(query)))
    : [];
  const noMatch = query.length > 1 && results.length === 0;

  useEffect(() => {
    if (!open) { setQ(""); return; }
    const t = setTimeout(() => inputRef.current?.focus(), 80);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { clearTimeout(t); window.removeEventListener("keydown", onKey); };
  }, [open]);

  return (
    <div className={`search-overlay ${open ? "is-open" : ""}`} aria-hidden={!open}>
      <div className="search-overlay-head">
        <div className="vit-search-bar">
          <span className="vit-search-icon-wrap"><VIconSearch /></span>
          <input
            ref={inputRef}
            type="text"
            className="vit-search-input"
            placeholder="Buscar produto..."
            value={q}
            onChange={(e) => setQ(e.target.value)}
            aria-label="Buscar produto" />
          {q && <button className="vit-search-clear" onClick={() => setQ("")} aria-label="Limpar">×</button>}
        </div>
        <button
          type="button"
          className="search-overlay-close"
          aria-label="Fechar busca"
          onClick={onClose}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M6 6 18 18M18 6 6 18" /></svg>
        </button>
      </div>

      <div className="search-overlay-body">
      <p className="vit-search-note">
        A busca cobre os produtos listados aqui. Tem mais cores, gramaturas e modelos — e itens que nem aparecem no site.{" "}
        <a
          href={waV("Oi! Vim pelo site. Quero ver mais opções (cores, gramaturas e modelos) além do que aparece aqui.")}
          onClick={goWa(waV("Oi! Vim pelo site. Quero ver mais opções (cores, gramaturas e modelos) além do que aparece aqui."))}>
          chama no WhatsApp
        </a>.
      </p>

      {results.length > 0 &&
        <div className="vit-search-results">
          {results.map((p) =>
            <a key={p.id} className="vit-search-result" href={waV(p.msg)} onClick={goWa(waV(p.msg))}>
              <ProdPhoto id={p.id} className="vsr-photo" />
              <div className="vsr-info">
                <span className="vsr-name">{p.name}</span>
                <span className="vsr-meta">{p.meta}</span>
              </div>
              <div className="vsr-right">
                <span className="vsr-price tnum">{p.price}</span>
                <span className="fin-btn">
                  Pedir <VIconWA />
                </span>
              </div>
            </a>)}
        </div>}

      {noMatch &&
        <div className="vit-search-empty">
          Não encontrado aqui.{" "}
          <a
            href={waV(`Oi! Vim pelo site. Quero saber se tem: ${query}. Pode verificar?`)}
            onClick={goWa(waV(`Oi! Vim pelo site. Quero saber se tem: ${query}. Pode verificar?`))}>
            Pergunta no WhatsApp →
          </a>
        </div>}
      </div>
    </div>);
}

/* ================================================================
   CALCULADORA — CABELO HUMANO
   ================================================================ */

const HC_TIPOS = [
  { id: "cacheado", label: "Cacheado castanho" },
  { id: "liso",     label: "Liso / ondulado" },
  { id: "euro",     label: "Euro / europeu" }
];
const HC_CMS   = [45, 55, 65, 75];

function HumanoCalc() {
  const [tipo, setTipo] = useState(null);
  const [cm,   setCm]   = useState(null);
  const [peso, setPeso] = useState(null);

  const selectTipo = (id) => { setTipo(id); setCm(null); setPeso(null); };
  const selectCm   = (v)  => { setCm(v);    setPeso(null); };
  const reset      = ()   => { setTipo(null); setCm(null); setPeso(null); };

  const preco = (tipo && cm && peso) ? HUMANO_PRECOS[tipo][cm][100] * (peso / 100) : null;
  const tipoLabel = HC_TIPOS.find((t) => t.id === tipo)?.label || "";
  const pesoLabel = peso ? peso + "g" : "";
  const msgWA = preco
    ? `Oi! Vim pelo site. Quero pedir cabelo humano pra mega-hair ${tipoLabel}, ${cm}cm, ${pesoLabel}. Vi que o valor é ${formatPrice(preco)}. Confirma disponibilidade?`
    : "";

  return (
    <div className="humano-calc">
      <div className="hc-eyebrow">Cabelo humano · mega-hair</div>
      <h3 className="hc-title">Cabelo humano pra <em>mega-hair</em></h3>
      <p className="hc-sub">
        Cabelo de verdade, vendido por peso pro seu mega-hair. Monta tipo, comprimento e
        a quantidade de gramas — o valor aparece na hora.
        Comprimentos: 45 a 75cm · Peso à sua escolha, em gramas.
      </p>

      <div className="hc-step">
        <span className="hc-step-label">1. Tipo</span>
        <div className="hc-pills">
          {HC_TIPOS.map((t) =>
            <button key={t.id}
              className={`hc-pill${tipo === t.id ? " is-selected" : ""}`}
              onClick={() => selectTipo(t.id)}>
              {t.label}
            </button>)}
        </div>
      </div>

      {tipo &&
        <div className="hc-step">
          <span className="hc-step-label">2. Comprimento</span>
          <div className="hc-pills">
            {HC_CMS.map((v) =>
              <button key={v}
                className={`hc-pill${cm === v ? " is-selected" : ""}`}
                onClick={() => selectCm(v)}>
                {v}cm
              </button>)}
          </div>
        </div>}

      {tipo && cm &&
        <div className="hc-step">
          <span className="hc-step-label">3. Quantas gramas?</span>
          <div className="hc-weight">
            <input
              type="number"
              inputMode="numeric"
              min="50"
              step="10"
              className="hc-weight-input"
              value={peso ?? ""}
              onChange={(e) => setPeso(e.target.value ? Number(e.target.value) : null)}
              placeholder="ex: 100" />
            <span className="hc-weight-unit">g</span>
          </div>
          <p className="hc-note">Você escolhe a quantidade exata de gramas de cabelo humano.</p>
        </div>}

      {preco &&
        <div className="hc-result">
          <div>
            <div className="hc-result-label">Valor · Pix / débito</div>
            <div className="hc-price-big">{formatPrice(preco)}</div>
            <button className="hc-reset" onClick={reset}>recomeçar →</button>
          </div>
          <a className="btn btn-primary"
            href={waV(msgWA)}
            onClick={goWa(waV(msgWA))}
            style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
            <VIconWA /> Pedir esse cabelo
          </a>
        </div>}
    </div>);
}

/* ================================================================
   VITRINE PRINCIPAL
   ================================================================ */

function Vitrine() {
  return (
    <section className="vitrine section-pad" id="produtos">
      <div className="container">

        <div className="vit-intro-band">
          <div className="vit-head">
            <div className="section-kicker">
              <span className="eyebrow">Catálogo · os mais desejados</span>
            </div>
            <h2 className="section-title">O que todo mundo <em>pede aqui:</em></h2>
            <p>
              Uma amostra do que mais sai do salão, do campeão de venda ao avulso de balcão.
              Achou o que quer? O botão já abre o WhatsApp com o pedido escrito, é só mandar.
            </p>
          </div>
          <div className="vit-down-arrows" aria-hidden="true">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>

        <div className="tier-dark-band">
          <div className="tier">
            <TierHead tag="Mais pedidos" title={<>Os <em>campeões</em> de venda</>}
              sub="O que mais sai do salão. Carro-chefe pra trança, crochet e mega." />
            <div className="tier-grid-s">
              {TIER_S.map((p) => <VitProdCard key={p.id} p={p} idPrefix="vit-s" large />)}
            </div>
          </div>

          <div className="tier">
            <TierHead tag="Acabamento e cuidado" title={<>Pra <em>caprichar</em> e cuidar</>}
              sub="Pomada, touca, finalizador. Vão junto com quase tudo." />
            <div className="tier-grid-b">
              {TIER_B.map((p) => <FinCard key={p.id} p={p} />)}
            </div>
          </div>
        </div>

        <div className="tier">
          <TierHead tag="Em alta" title={<>Em <em>alta</em> agora</>}
            sub="Texturizados, orgânicos e removíveis que estão bombando." />
          <div className="tier-grid-a">
            {TIER_A.map((p) => <VitProdCard key={p.id} p={p} idPrefix="vit-a" />)}
          </div>
        </div>

        <div className="tier" id="mega-hair">
          <TierHead tag="Cabelo humano" title={<>Pra fazer <em>mega-hair</em></>}
            sub="Cabelo humano de verdade, por peso, pro seu mega-hair. Calcula o preço na hora." />
          <HumanoCalc />
        </div>

        <div className="tier">
          <TierHead tag="Sob consulta" title={<>Sob <em>encomenda</em></>}
            sub="Ticket mais alto. Clica no item que o zap já abre com a pergunta." />
          <div className="niche-grid">
            {TIER_C.map((p) => <NicheRow key={p.id} p={p} />)}
          </div>
        </div>

        <div className="tier">
          <TierHead tag="No balcão" title={<>E os <em>avulsos</em></>}
            sub="Miudezas e insumos. Melhor levar junto com o pedido." />
          <div className="avulso-wrap">
            {TIER_D_CHIPS.map((c, i) => <span className="avulso-chip" key={i}>{c}</span>)}
          </div>
          <p className="avulso-line">
            De centavos a R$ 70 (fita lace 3m). Anel, missanga, pingente, agulha, linha, lastex,
            cola, pente, wig cap e mais. <em>Melhor levar junto com o pedido.</em>
          </p>
          <a className="btn btn-copper"
            href={waV("Oi! Vim pelo site. Quero saber dos acessórios e insumos avulsos (anel, missanga, agulha, linha, lastex, cola, pente...).")}
            onClick={goWa(waV("Oi! Vim pelo site. Quero saber dos acessórios e insumos avulsos (anel, missanga, agulha, linha, lastex, cola, pente...)."))}
            style={{ marginTop: 24 }}>
            <VIconWA /> Perguntar no WhatsApp
          </a>
        </div>

      </div>
    </section>);
}

Object.assign(window, { Vitrine, SearchOverlay });