// mb-novolar.jsx — "Novo Lar" guided immersion (stage → curated results)

function NovoLarScreen({ onBack, onOpenStore }) {
  const [stageId, setStageId] = React.useState(null);

  // Dados reais da API
  const [apiStages, setApiStages] = React.useState(null);
  React.useEffect(() => {
    API.journeyStages().then(d => {
      const stages = (d.stages || []).map(s => ({
        id: s.slug,
        icon: s.icon || "home",
        title: s.title,
        sub: s.subtitle || "",
        sections: (s.sections || []).map(sec => ({
          title: sec.title,
          ids: (sec.companies || []).map(c => c.id),
          companies: sec.companies || [],
        })),
        _raw: s,
      }));
      if (stages.length) setApiStages(stages);
    }).catch(() => {});
  }, []);

  const stages = apiStages || NOVO_LAR_STAGES;
  const stage = stages.find(s => s.id === stageId);

  // ── stage selection ──
  if (!stage) {
    return (
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
        {/* hero image com overlay escuro */}
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
          <img
            src="https://storage.googleapis.com/plena-gpe/design_asset/00000000-0000-0000-0000-000000000099/e1a9070b-5fde-4817-9df7-f7f1d29755ec.jpg"
            alt=""
            style={{ width: "100%", height: "60%", objectFit: "cover", objectPosition: "center top", display: "block" }}
          />
          {/* overlay degradê: escurece topo (para legibilidade do texto) e faz transição suave para o card branco */}
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "60%",
            background: "linear-gradient(to bottom, rgba(16,18,45,.55) 0%, rgba(16,18,45,.2) 60%, transparent 100%)" }} />
          <div style={{ position: "absolute", top: "50%", left: 0, right: 0, bottom: 0, background: "var(--bg)" }} />
          <div style={{ position: "absolute", top: "calc(60% - 60px)", left: 0, right: 0, height: 80,
            background: "linear-gradient(to bottom, transparent, var(--bg))" }} />
        </div>

        <TopBar onBack={onBack} transparent right={null} />
        <div style={{ flex: 1, overflow: "auto", position: "relative" }}>
          <div style={{ padding: "92px 22px 6px" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,.18)", backdropFilter: "blur(4px)", color: "#fff", font: "700 11px var(--ui)", padding: "5px 11px", borderRadius: 999, letterSpacing: ".04em" }}>
              <Icon name="home" size={14} color="#fff" sw={2.2} />NOVO LAR
            </div>
            <h1 style={{ margin: "16px 0 0", font: "800 30px var(--ui)", color: "#fff", lineHeight: 1.12, letterSpacing: "-.01em", textShadow: "0 2px 12px rgba(0,0,0,.35)" }}>
              Seu novo lar,<br />do começo ao fim
            </h1>
            <p style={{ font: "500 14.5px var(--ui)", color: "rgba(255,255,255,.88)", lineHeight: 1.5, margin: "12px 0 0", textShadow: "0 1px 6px rgba(0,0,0,.2)" }}>
              Tudo o que você precisa em um só lugar — de terrenos e imóveis a móveis e decoração. Conta pra gente em que fase você está.
            </p>
          </div>

          <div style={{ background: "var(--bg)", borderRadius: "26px 26px 0 0", marginTop: 24, padding: "22px 16px 40px", minHeight: 200, position: "relative" }}>
            <div style={{ font: "800 16px var(--ui)", color: "var(--text)", marginBottom: 14 }}>Em que fase você está?</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {stages.map((s, i) => (
                <button key={s.id} onClick={() => setStageId(s.id)} style={{ display: "flex", alignItems: "center", gap: 14, textAlign: "left", cursor: "pointer", border: "none", background: "var(--surface)", borderRadius: 18, padding: 16, boxShadow: "0 3px 12px rgba(16,18,45,.05)" }}>
                  <div style={{ width: 52, height: 52, borderRadius: 15, background: "var(--accent-50)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={s.icon} size={26} color="var(--accent)" />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ font: "700 15.5px var(--ui)", color: "var(--text)" }}>{s.title}</div>
                    <div style={{ font: "500 12.5px var(--ui)", color: "var(--muted)", marginTop: 2 }}>{s.sub}</div>
                  </div>
                  <Icon name="chevR" size={18} color="var(--line)" sw={2.4} />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ── curated results ──
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      <TopBar title="Guia Novo Lar" onBack={() => setStageId(null)} />
      <div style={{ flex: 1, overflow: "auto", paddingBottom: 30 }}>
        <div style={{ margin: 16, borderRadius: 18, padding: "16px 18px", background: "var(--brand)", color: "#fff", display: "flex", alignItems: "center", gap: 13 }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, background: "rgba(255,255,255,.16)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={stage.icon} size={24} color="#fff" /></div>
          <div style={{ flex: 1 }}>
            <div style={{ font: "600 11.5px var(--ui)", color: "rgba(255,255,255,.7)" }}>SUA FASE</div>
            <div style={{ font: "800 17px var(--ui)" }}>{stage.title}</div>
          </div>
          <button onClick={() => setStageId(null)} style={{ background: "rgba(255,255,255,.16)", border: "none", cursor: "pointer", color: "#fff", font: "700 12px var(--ui)", padding: "7px 11px", borderRadius: 999 }}>Trocar</button>
        </div>

        {stage.sections.map((sec, si) => {
          const sectionPartners = sec.companies && sec.companies.length
            ? sec.companies.map(c => typeof c === "string" ? partnerById(c) : (c._mapped || { ...apiCompanyToPartner(c), _mapped: true })).filter(Boolean)
            : (sec.ids || []).map(id => partnerById(id)).filter(Boolean);
          const sorted = [...sectionPartners].sort((a, b) => planRank(b) - planRank(a) || b.rating - a.rating);
          return (
            <div key={sec.title} style={{ marginTop: si === 0 ? 8 : 20 }}>
              {/* cabeçalho do subgrupo */}
              <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "0 16px 12px" }}>
                <div style={{ flexShrink: 0, width: 4, height: 22, borderRadius: 99, background: "var(--accent)" }} />
                <span style={{ font: "800 15px var(--ui)", color: "var(--text)" }}>{sec.title}</span>
                <span style={{ font: "600 11.5px var(--ui)", color: "var(--muted)", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 999, padding: "2px 9px", flexShrink: 0 }}>
                  {sorted.length} parceiro{sorted.length !== 1 ? "s" : ""}
                </span>
              </div>
              <div className="mb-tablet-2col" style={{ display: "flex", flexDirection: "column", gap: 14, padding: "0 16px 4px" }}>
                {sorted.length > 0
                  ? sorted.map(p => <PartnerCard key={p.id} p={p} onOpen={onOpenStore} />)
                  : <div style={{ padding: "12px 0", font: "500 13px var(--ui)", color: "var(--muted)" }}>Nenhum parceiro nesta categoria ainda.</div>}
              </div>
            </div>
          );
        })}


      </div>
    </div>
  );
}

// ── Serviços do Lar hub ──────────────────────────────────────
const CAT_LIMIT = 7; // mostra 7 categorias + posição 8 = "Ver mais"

function ServicesScreen({ onBack, onOpenStore }) {
  const [cat, setCat] = React.useState(null);
  const [apiCats, setApiCats] = React.useState(null);
  const [moreCatsOpen, setMoreCatsOpen] = React.useState(false);

  React.useEffect(() => {
    API.homeServiceCats().then(d => {
      const cats = (d.categories || []).map(c => ({
        id: c.id || c.slug,
        label: c.label || c.name,
        icon: c.icon || "home",
        ids: (c.companies || []).map(x => x.id || x),
        companies: c.companies || [],
        _raw: c,
      }));
      if (cats.length) setApiCats(cats);
    }).catch(() => {});
  }, []);

  const homeSvc = apiCats || HOME_SVC;
  const catPartners = (c) => {
    if (c.companies && c.companies.length)
      return c.companies.map(x => typeof x === "string" ? partnerById(x) : apiCompanyToPartner(x)).filter(Boolean);
    return (c.ids || []).map(id => partnerById(id)).filter(Boolean);
  };
  // flatMap pode repetir a mesma empresa em múltiplas categorias;
  // sem filtro ativo, deduplica por id
  const allProviders = homeSvc.flatMap(catPartners);
  const providers = cat
    ? allProviders  // com filtro, preserva tudo da categoria selecionada
    : allProviders.filter((p, i, arr) => arr.findIndex(x => x.id === p.id) === i);
  const shown = cat
    ? catPartners(homeSvc.find(c => c.id === cat) || { ids: [], companies: [] })
    : providers;
  const sortedShown = [...shown].sort((a, b) => planRank(b) - planRank(a) || b.rating - a.rating);
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      <div style={{ background: "var(--brand)", padding: "52px 14px 18px", borderRadius: "0 0 22px 22px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <IconBtn name="arrowL" onClick={onBack} size={40} bg="rgba(255,255,255,.16)" color="#fff" />
          <div>
            <h1 style={{ margin: 0, font: "800 21px var(--ui)", color: "#fff" }}>Guia de Serviços</h1>
            <div style={{ font: "500 12.5px var(--ui)", color: "rgba(255,255,255,.75)", marginTop: 1 }}>Tudo para o suporte da sua casa</div>
          </div>
        </div>
        <button style={{ marginTop: 15, width: "100%", height: 44, borderRadius: 13, border: "none", cursor: "pointer", background: "var(--surface)", display: "flex", alignItems: "center", gap: 10, padding: "0 14px" }}>
          <Icon name="search" size={19} color="var(--muted)" /><span style={{ font: "500 14px var(--ui)", color: "var(--muted)" }}>Buscar serviço (limpeza, chaveiro…)</span>
        </button>
      </div>

      <div style={{ flex: 1, overflow: "auto", paddingBottom: 30 }}>
        {/* category grid — 7 visíveis + posição 8 = "Ver mais" */}
        {(() => {
          const visible = homeSvc.slice(0, CAT_LIMIT);
          const hasMore = homeSvc.length > CAT_LIMIT;
          const activeCatInMore = cat && homeSvc.slice(CAT_LIMIT).some(c => c.id === cat);
          const catBtn = (c, onClick) => {
            const on = cat === c.id;
            return (
              <button key={c.id} onClick={onClick} style={{ background: "none", border: "none", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 7, padding: "4px 0" }}>
                <div style={{ width: 56, height: 56, borderRadius: 17, background: on ? "var(--accent)" : "var(--accent-50)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .15s" }}>
                  <Icon name={c.icon} size={25} color={on ? "var(--accent-ink)" : "var(--accent)"} fill={c.icon === "bolt" ? (on ? "var(--accent-ink)" : "var(--accent)") : "none"} sw={1.9} />
                </div>
                <span style={{ font: "600 10.5px var(--ui)", color: on ? "var(--accent)" : "var(--text)", textAlign: "center", lineHeight: 1.1 }}>{c.label}</span>
              </button>
            );
          };
          return (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, padding: "18px 16px 6px" }}>
              {visible.map(c => catBtn(c, () => setCat(cat === c.id ? null : c.id)))}
              {hasMore && (() => {
                const activeCat = activeCatInMore ? homeSvc.find(c => c.id === cat) : null;
                const iconName = activeCat ? (activeCat.icon || "home") : "grid";
                const label = activeCat ? activeCat.label : "Ver mais";
                return (
                  <button onClick={() => setMoreCatsOpen(true)} style={{ background: "none", border: "none", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 7, padding: "4px 0" }}>
                    <div style={{ width: 56, height: 56, borderRadius: 17, background: activeCatInMore ? "var(--accent)" : "var(--bg)", border: activeCatInMore ? "none" : "2px dashed var(--line)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
                      <Icon name={iconName} size={22} color={activeCatInMore ? "var(--accent-ink)" : "var(--muted)"} sw={1.9} />
                    </div>
                    <span style={{ font: `${activeCatInMore ? 700 : 600} 10.5px var(--ui)`, color: activeCatInMore ? "var(--accent)" : "var(--muted)", textAlign: "center", lineHeight: 1.1, maxWidth: 62, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {label}
                    </span>
                  </button>
                );
              })()}
            </div>
          );
        })()}

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 16px 12px" }}>
          <h3 style={{ margin: 0, font: "800 16px var(--ui)", color: "var(--text)" }}>{cat ? homeSvc.find(c => c.id === cat)?.label : "Prestadores perto de você"}</h3>
          {cat && <button onClick={() => setCat(null)} style={{ background: "none", border: "none", cursor: "pointer", font: "700 12.5px var(--ui)", color: "var(--accent)" }}>Ver todos</button>}
        </div>
        <div className="mb-tablet-2col" style={{ display: "flex", flexDirection: "column", gap: 14, padding: "0 16px" }}>
          {sortedShown.map(p => <PartnerCard key={p.id} p={p} onOpen={onOpenStore} />)}
        </div>
      </div>

      {/* Bottom sheet — mais categorias */}
      {moreCatsOpen && (
        <div style={{ position: "fixed", inset: 0, zIndex: 900, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
          <div onClick={() => setMoreCatsOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,.45)", backdropFilter: "blur(3px)" }} />
          <div style={{ position: "relative", background: "var(--bg)", borderRadius: "22px 22px 0 0", padding: "20px 18px 40px", maxHeight: "72vh", display: "flex", flexDirection: "column" }}>
            <div style={{ width: 36, height: 4, borderRadius: 2, background: "var(--line)", margin: "0 auto 18px" }} />
            <div style={{ font: "800 17px var(--ui)", color: "var(--text)", marginBottom: 16 }}>Mais categorias</div>
            <div style={{ flex: 1, overflowY: "auto" }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
                {homeSvc.slice(CAT_LIMIT).map(c => {
                  const on = cat === c.id;
                  return (
                    <button key={c.id} onClick={() => { setCat(on ? null : c.id); setMoreCatsOpen(false); }}
                      style={{ background: "none", border: "none", cursor: "pointer", display: "flex", flexDirection: "column", alignItems: "center", gap: 7, padding: "4px 0" }}>
                      <div style={{ width: 56, height: 56, borderRadius: 17, background: on ? "var(--accent)" : "var(--accent-50)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                        <Icon name={c.icon} size={25} color={on ? "var(--accent-ink)" : "var(--accent)"} fill={c.icon === "bolt" ? (on ? "var(--accent-ink)" : "var(--accent)") : "none"} sw={1.9} />
                      </div>
                      <span style={{ font: "600 10.5px var(--ui)", color: on ? "var(--accent)" : "var(--text)", textAlign: "center", lineHeight: 1.1 }}>{c.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>
            {cat && homeSvc.slice(CAT_LIMIT).some(c => c.id === cat) && (
              <button onClick={() => { setCat(null); setMoreCatsOpen(false); }}
                style={{ marginTop: 16, background: "none", border: "none", cursor: "pointer", font: "700 13.5px var(--ui)", color: "var(--muted)", textDecoration: "underline" }}>
                Limpar filtro de categoria
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Roteiro Gastronômico ─────────────────────────────────────
function RoteiroGastrScreen({ onBack, onOpenStore }) {
  const [region, setRegion] = React.useState(null);
  const [curIdx, setCurIdx] = React.useState(0);   // índice do carrossel
  const [cuisineId, setCuisineId] = React.useState(null);
  const [apiCuisines, setApiCuisines] = React.useState(null);
  const [apiPartners, setApiPartners] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    API.gastroCuisines().then(d => {
      const cuisines = (d.categories || []).map(c => ({
        id: c.id, label: c.name || c.label,
        icon: c.icon || "food", color: c.color || "#E8552D",
        image_url: c.image_url || null, sort_order: c.sort_order || 0, _raw: c,
      }));
      if (cuisines.length) setApiCuisines(cuisines);
    }).catch(() => {});
  }, []);

  const cuisines = apiCuisines || GASTRO_CUISINES;

  // Sinc curIdx → cuisineId (fonte única de verdade)
  React.useEffect(() => {
    if (region !== null && cuisines.length > 0) {
      const idx = Math.max(0, Math.min(curIdx, cuisines.length - 1));
      setCuisineId(cuisines[idx].id);
    }
  }, [curIdx, region, cuisines.length]);

  React.useEffect(() => {
    if (!cuisineId || !region) { setApiPartners(null); return; }
    setLoading(true);
    const regionName = region === "Todas" ? null : region;
    API.gastroPartners(cuisineId, regionName ? { regionId: regionName } : {})
      .then(d => {
        const mapped = (d.companies || []).map(apiCompanyToPartner)
          .sort((a, b) => planRank(b) - planRank(a) || b.rating - a.rating);
        setApiPartners(mapped);
      })
      .catch(() => setApiPartners(null))
      .finally(() => setLoading(false));
  }, [cuisineId, region]);

  const mockPartners = cuisineId && region != null
    ? gastroPartnersFor(cuisineId, region === "Todas" ? null : region)
        .sort((a, b) => planRank(b) - planRank(a) || b.rating - a.rating)
    : [];
  const partners = apiPartners !== null ? apiPartners : mockPartners;

  // Navegação do carrossel
  const goPrev = () => setCurIdx(i => Math.max(0, i - 1));
  const goNext = () => setCurIdx(i => Math.min(cuisines.length - 1, i + 1));

  const curC  = cuisines[curIdx]      || null;
  const prevC = cuisines[curIdx - 1]  || null;
  const nextC = cuisines[curIdx + 1]  || null;

  // Imagens para o mosaico do fundo (landing)
  const bgCuisines = cuisines.filter(c => c.image_url);

  // Step 1: escolher região — fundo mosaico de fotos de culinárias
  if (region === null) {
    const regionCards = [
      { id: "Todas", label: "Ver todas as regiões", sub: "Mostra o guia completo" },
      { id: "Aracaju", label: "Aracaju", sub: "Capital sergipana" },
      { id: "Barra dos Coqueiros", label: "Barra dos Coqueiros", sub: "Travessia da ponte" },
      { id: "Zona de Expansão", label: "Zona de Expansão", sub: "Mosqueiro e arredores" },
    ];
    // Tiles do mosaico: 9 posições, tila se necessário
    const tiles = bgCuisines.length >= 3
      ? Array.from({ length: 9 }, (_, i) => bgCuisines[i % bgCuisines.length])
      : null;

    return (
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
        {/* ── Mosaico de fundo ── */}
        {tiles ? (
          <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridTemplateRows: "repeat(3, 1fr)", width: "100%", height: "60%", gap: 2 }}>
              {tiles.map((c, i) => (
                <div key={i} style={{ overflow: "hidden", background: c.color }}>
                  <img src={c.image_url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                </div>
              ))}
            </div>
            {/* fade da imagem para o branco do card */}
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "60%", background: "rgba(0,0,0,0.52)" }} />
            <div style={{ position: "absolute", top: "50%", left: 0, right: 0, bottom: 0, background: "var(--bg)" }} />
            {/* gradiente suave de transição */}
            <div style={{ position: "absolute", top: "calc(60% - 60px)", left: 0, right: 0, height: 100,
              background: "linear-gradient(to bottom, transparent, var(--bg))" }} />
          </div>
        ) : (
          /* fallback se não tiver imagens ainda */
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg,#E8552D,#C98A1B)" }} />
        )}

        <TopBar onBack={onBack} transparent right={null} />
        <div style={{ flex: 1, overflow: "auto", position: "relative" }}>
          <div style={{ padding: "92px 22px 6px" }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,.18)", backdropFilter: "blur(4px)", color: "#fff", font: "700 11px var(--ui)", padding: "5px 11px", borderRadius: 999, letterSpacing: ".04em" }}>
              <Icon name="food" size={14} color="#fff" sw={2} />ROTEIRO GASTRONÔMICO
            </div>
            <h1 style={{ margin: "16px 0 0", font: "800 30px var(--ui)", color: "#fff", lineHeight: 1.12, letterSpacing: "-.01em", textShadow: "0 2px 12px rgba(0,0,0,.3)" }}>
              A gastronomia<br />da nossa região
            </h1>
            <p style={{ font: "500 14px var(--ui)", color: "rgba(255,255,255,.88)", lineHeight: 1.5, margin: "12px 0 0", textShadow: "0 1px 6px rgba(0,0,0,.2)" }}>
              Escolha a região e explore frutos do mar, pizzas artesanais, culinária japonesa e muito mais.
            </p>
          </div>

          {/* card branco com as regiões */}
          <div style={{ background: "var(--bg)", borderRadius: "26px 26px 0 0", marginTop: 24, padding: "22px 16px 40px", minHeight: 200, position: "relative" }}>
            <div style={{ font: "800 16px var(--ui)", color: "var(--text)", marginBottom: 14 }}>Qual região você quer explorar?</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {regionCards.map(r => (
                <button key={r.id} onClick={() => setRegion(r.id)} style={{ display: "flex", alignItems: "center", gap: 14, textAlign: "left", cursor: "pointer", border: "none", background: "var(--surface)", borderRadius: 18, padding: 16, boxShadow: "0 3px 12px rgba(16,18,45,.06)" }}>
                  <div style={{ width: 48, height: 48, borderRadius: 14, background: "#FFF3EF", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name="pin" size={22} color="#E8552D" sw={2} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ font: "700 15px var(--ui)", color: "var(--text)" }}>{r.label}</div>
                    <div style={{ font: "500 12.5px var(--ui)", color: "var(--muted)", marginTop: 2 }}>{r.sub}</div>
                  </div>
                  <Icon name="chevR" size={18} color="var(--line)" sw={2.4} />
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Step 2: carrossel por estado (sem scroll) + lista de parceiros
  // Card helper
  // Layout: center 74% centrado; miniaturas laterais 58% x scale(0.83) mostrando ~11% do container em cada borda
  const GastroCard = ({ c, role }) => {
    const isCenter = role === "center";
    const cfgMap = {
      center: { left: "50%",   width: "74%", transform: "translateX(-50%) scale(1)",    opacity: 1,    zIndex: 2 },
      left:   { left: "0%",    width: "58%", transform: "translateX(-72%) scale(0.83)", opacity: 0.72, zIndex: 1 },
      right:  { left: "100%",  width: "58%", transform: "translateX(-28%) scale(0.83)", opacity: 0.72, zIndex: 1 },
    };
    const cfg = cfgMap[role];
    return (
      <div onClick={role !== "center" ? (role === "left" ? goPrev : goNext) : undefined}
        style={{
          position: "absolute", top: 0, bottom: 0,
          left: cfg.left, width: cfg.width,
          transform: cfg.transform,
          transition: "transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease",
          borderRadius: 18, overflow: "hidden",
          opacity: cfg.opacity,
          boxShadow: isCenter ? "0 10px 32px rgba(0,0,0,.5)" : "none",
          cursor: isCenter ? "default" : "pointer",
          zIndex: cfg.zIndex,
        }}>
        {c.image_url
          ? <img src={c.image_url} alt={c.label} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          : <div style={{ width: "100%", height: "100%", background: c.color }} />
        }
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 55%, transparent 100%)", display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: isCenter ? "14px 16px" : "10px 12px" }}>
          <span style={{ font: `${isCenter ? "800 18px" : "700 13px"} var(--ui)`, color: "#fff", lineHeight: 1.2, textShadow: "0 1px 8px rgba(0,0,0,.4)" }}>{c.label}</span>
          {isCenter && !loading && partners.length > 0 && (
            <span style={{ font: "600 11px var(--ui)", color: "rgba(255,255,255,.72)", marginTop: 3 }}>
              {partners.length} parceiro{partners.length !== 1 ? "s" : ""} na região
            </span>
          )}
        </div>
      </div>
    );
  };

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* cabeçalho */}
      <div style={{ background: "linear-gradient(160deg,#C13A1F,#B5751A)", paddingTop: 52, borderRadius: "0 0 28px 28px", flexShrink: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "0 14px 14px" }}>
          <IconBtn name="arrowL" onClick={() => { setRegion(null); setCuisineId(null); setCurIdx(0); }} size={40} bg="rgba(255,255,255,.16)" color="#fff" />
          <div>
            <h1 style={{ margin: 0, font: "800 19px var(--ui)", color: "#fff" }}>Guia Gastronômico</h1>
            <div style={{ font: "500 12px var(--ui)", color: "rgba(255,255,255,.75)", marginTop: 1 }}>{region === "Todas" ? "Todas as regiões" : region}</div>
          </div>
        </div>

        {/* carrossel de 3 cards (prev | center | next) */}
        <div style={{ position: "relative", height: 210, margin: "0 0 20px", overflow: "hidden" }}>
          {prevC && <GastroCard c={prevC} role="left" />}
          {curC  && <GastroCard c={curC}  role="center" />}
          {nextC && <GastroCard c={nextC} role="right" />}

          {/* botão esquerda */}
          <button
            onClick={goPrev} disabled={curIdx === 0}
            style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", zIndex: 10,
              width: 36, height: 36, borderRadius: 999, border: "none", cursor: curIdx > 0 ? "pointer" : "default",
              background: "rgba(255,255,255,.22)", backdropFilter: "blur(6px)",
              display: "flex", alignItems: "center", justifyContent: "center",
              opacity: curIdx > 0 ? 1 : 0, transition: "opacity .2s",
            }}>
            <Icon name="arrowL" size={18} color="#fff" sw={2.5} />
          </button>
          {/* REMOVIDO: contador "X / N" que cobria as descrições */}

          {/* contador + botão direita */}
          <button
            onClick={goNext} disabled={curIdx >= cuisines.length - 1}
            style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", zIndex: 10,
              width: 36, height: 36, borderRadius: 999, border: "none", cursor: curIdx < cuisines.length - 1 ? "pointer" : "default",
              background: "rgba(255,255,255,.22)", backdropFilter: "blur(6px)",
              display: "flex", alignItems: "center", justifyContent: "center",
              opacity: curIdx < cuisines.length - 1 ? 1 : 0, transition: "opacity .2s",
            }}>
            <Icon name="chevR" size={18} color="#fff" sw={2.5} />
          </button>

          {/* dots de navegação (substituem o contador numérico) */}
          {cuisines.length > 1 && (
            <div style={{ position: "absolute", bottom: 10, left: "50%", transform: "translateX(-50%)", zIndex: 10, display: "flex", gap: 5 }}>
              {cuisines.map((_, i) => (
                <div key={i} onClick={() => setCurIdx(i)} style={{ width: i === curIdx ? 18 : 6, height: 6, borderRadius: 999, background: i === curIdx ? "#fff" : "rgba(255,255,255,.45)", transition: "width .25s", cursor: "pointer" }} />
              ))}
            </div>
          )}
        </div>
      </div>

      {/* lista de parceiros */}
      <div style={{ flex: 1, overflow: "auto", paddingBottom: 30 }}>
        {loading && <div style={{ padding: "28px 16px", textAlign: "center", font: "500 13px var(--ui)", color: "var(--muted)" }}>Carregando…</div>}
        {!loading && partners.length === 0 && cuisineId && (
          <div style={{ padding: "28px 16px", textAlign: "center", font: "500 13.5px var(--ui)", color: "var(--muted)" }}>
            Nenhum parceiro desta culinária na região selecionada.
          </div>
        )}
        {!loading && partners.length > 0 && (
          <div style={{ padding: "18px 16px 0" }}>
            <h3 style={{ margin: "0 0 14px", font: "800 16px var(--ui)", color: "var(--text)" }}>{curC?.label}</h3>
          </div>
        )}
        <div className="mb-tablet-2col" style={{ display: "flex", flexDirection: "column", gap: 14, padding: "0 16px" }}>
          {partners.map(p => <PartnerCard key={p.id} p={p} onOpen={onOpenStore} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NovoLarScreen, ServicesScreen, RoteiroGastrScreen });
