@unbox-plus/cli 0.20.4

package/template/components/home/sections/hero.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+// HERO da home — 5 variantes (escolhidas na receita):
+//   "imagem-full"    banner de imagem full-width clicável (default)
+//   "carousel"       carrossel de banners com setas + dots (portado de loja real em produção)
+//   "split-editorial" texto + CTA à esquerda, imagem à direita
+//   "minimal-texto"  hero tipográfico sobre o chrome, sem imagem (nunca dá 404)
+//   "imagem-imersiva" foto sangrando até a borda, PASSANDO POR BAIXO do header — é a única
+//                     variante que emite `.hero-imersivo`, a classe que deixa o header
+//                     "imersivo" ficar transparente (regra em app/globals.css). Exige foto
+//                     real e boa: sem ela, prefira imagem-full ou minimal-texto.
+// props da receita: imageDesktop/imageMobile (paths), banners (carousel),
+// title/subtitle/ctaLabel/ctaHref (texto).
+//
+// EDITOR: a copy é editável no PONTO DE USO (a receita segue sendo só o literal de partida), com os
+// MESMOS caminhos em toda variante (titulo · subtitulo · cta · cta-icone · arte-desktop · arte-mobile):
+// trocar a variante na receita não descola o que o lojista já editou. No carrossel cada banner tem o
+// próprio escopo (`banner-N.arte-desktop`, `banner-N.arte-mobile`); só o banner na vez está no DOM.
+// A arte do celular mora no srcSet do <source>: é valor de imagem que NÃO vira <img>, então vai de
+// Slot (Editable.Img ali trocaria o <source> por uma segunda foto na tela). O <img> é puro, e não
+// next/image, de propósito: o next/image traria wrapper + srcset e a paridade com o HTML de antes cairia.
+// Para o lojista, isto se chama BANNER (id/rótulo da receita), nunca "hero": vocabulário de código.
+import * as React from "react";
+import Link from "next/link";
+import { ArrowRight, CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+function scrollToDestaques() {
+  document.getElementById("destaques")?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+type Banner = { imageDesktop: string; imageMobile?: string; href?: string; alt?: string };
+
+export function HeroSection({ variant = "imagem-full", sectionProps = {} }: SectionComponentProps) {
+  const {
+    // TODO: o agente de branding troca pelas imagens reais da marca (.webp) via receita
+    imageDesktop = "/brand/hero-desktop.svg",
+    imageMobile = "/brand/hero-mobile.svg",
+    title = "Bem-vindo à nossa loja",
+    subtitle = "Produtos escolhidos com cuidado, do nosso catálogo pra sua casa.",
+    ctaLabel = "Ver destaques",
+    ctaHref = "",
+  } = sectionProps as Record<string, string>;
+  const banners = (sectionProps.banners as Banner[] | undefined) ?? [
+    { imageDesktop, imageMobile },
+    { imageDesktop, imageMobile },
+    { imageDesktop, imageMobile },
+  ];
+  const [idx, setIdx] = React.useState(0);
+
+  if (variant === "carousel") {
+    const step = (d: number) => setIdx((i) => (i + d + banners.length) % banners.length);
+    const b = banners[idx];
+    const Frame = ({ children }: { children: React.ReactNode }) =>
+      b.href ? <Link href={b.href} className="block">{children}</Link> : <button type="button" onClick={scrollToDestaques} aria-label="Ver destaques" className="block w-full cursor-pointer">{children}</button>;
+    return (
+      // full-bleed: banner em card arredondado é o tell nº 1 de "site de template".
+      <div className="w-full">
+        <div className="relative overflow-hidden bg-[var(--store-chrome-bg,#18181B)]">
+          <Frame>
+            {/* cada banner tem o próprio escopo: trocar a foto do 2º não mexe no 1º */}
+            <EditableScope path={`banner-${idx + 1}`}>
+              <picture>
+                {b.imageMobile && (
+                  <Editable.Slot path="arte-mobile" type="image" fallback={{ src: b.imageMobile }} label={`Imagem do banner ${idx + 1} (celular)`}>
+                    {(v, attrs, ref) => <source ref={ref} media="(max-width: 767px)" srcSet={v.src} width="1122" height="1402" sizes="100vw" {...attrs} />}
+                  </Editable.Slot>
+                )}
+                <Editable.Img path="arte-desktop" fallback={{ src: b.imageDesktop, alt: b.alt ?? "" }} label={`Imagem do banner ${idx + 1} (computador)`} width="1915" height="821" fetchPriority="high" className="block h-auto w-full" />
+              </picture>
+            </EditableScope>
+          </Frame>
+          {banners.length > 1 && (
+            <>
+              <button type="button" onClick={() => step(-1)} aria-label="Banner anterior" className="absolute left-3 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/85 text-[var(--store-ink)] transition-colors hover:bg-white"><CaretLeft weight="bold" /></button>
+              <button type="button" onClick={() => step(1)} aria-label="Próximo banner" className="absolute right-3 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/85 text-[var(--store-ink)] transition-colors hover:bg-white"><CaretRight weight="bold" /></button>
+              <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
+                {banners.map((_, i) => (
+                  <button key={i} type="button" onClick={() => setIdx(i)} aria-label={`Banner ${i + 1}`} className={`h-2 w-2 rounded-full ${i === idx ? "bg-white" : "bg-white/45"}`} />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "imagem-imersiva") {
+    return (
+      // .hero-imersivo: marcador que o CSS usa pra deixar o header transparente. Sem
+      // max-w/px/pt/rounded — a foto tem que encostar nas 4 bordas e subir por baixo do header.
+      <div className="hero-imersivo relative w-full overflow-hidden">
+        <picture>
+          <Editable.Slot path="arte-mobile" type="image" fallback={{ src: imageMobile }} label="Imagem do banner (celular)">
+            {(v, attrs, ref) => <source ref={ref} media="(max-width: 767px)" srcSet={v.src} width="1122" height="1402" sizes="100vw" {...attrs} />}
+          </Editable.Slot>
+          {/* parallax: a foto desliza DENTRO do frame. Não é reveal — nada da primeira dobra
+              entra animado (isso atrasaria a percepção de carregamento e mexeria no LCP).
+              alt="" continua vazio de propósito: a foto é decorativa, quem fala é a headline. */}
+          <Editable.Img path="arte-desktop" fallback={{ src: imageDesktop, alt: "" }} label="Imagem do banner (computador)" fetchPriority="high" className="parallax-slow block h-[78svh] max-h-[760px] min-h-[420px] w-full object-cover" />
+        </picture>
+        {/* véu inferior: garante contraste do texto sobre qualquer foto */}
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/55 to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 mx-auto max-w-[var(--container-max,1240px)] px-6 pb-12 sm:pb-16">
+          {/* `as="h1"` mantém o MESMO elemento de antes; `multiline` deixa o lojista escolher onde a
+              headline quebra sem mexer no CSS */}
+          <Editable.Text as="h1" path="titulo" fallback={title} label="Título" multiline className="font-display max-w-[680px] text-[34px] font-extrabold leading-[1.08] text-white sm:text-[52px]" />
+          <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Frase de apoio" className="mt-3 max-w-[520px] text-[15px] leading-[1.5] text-white/85 sm:text-[16px]" />
+          <HeroCta label={ctaLabel} href={ctaHref} className="mt-7" />
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "minimal-texto") {
+    return (
+      <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[22px] sm:px-6">
+        <div className="rounded-2xl bg-[var(--store-chrome-bg,#18181B)] px-7 py-14 text-center sm:py-20">
+          <Editable.Text as="h1" path="titulo" fallback={title} label="Título" multiline className="font-display mx-auto max-w-[720px] text-[32px] font-extrabold leading-[1.12] text-[var(--store-chrome-text,#ffffff)] sm:text-[44px]" />
+          <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Frase de apoio" className="mx-auto mt-4 max-w-[520px] text-[15px] leading-[1.5] text-[var(--store-chrome-muted)]" />
+          <HeroCta label={ctaLabel} href={ctaHref} className="mt-8" />
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "split-editorial") {
+    return (
+      <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[22px] sm:px-6">
+        <div className="grid overflow-hidden store-card rounded-2xl md:grid-cols-[0.9fr_1.1fr]">
+          <div className="flex flex-col items-start justify-center gap-4 px-7 py-10 sm:px-10">
+            <Editable.Text as="h1" path="titulo" fallback={title} label="Título" multiline className="font-display text-[28px] font-extrabold leading-[1.15] sm:text-[36px]" />
+            <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Frase de apoio" className="max-w-[420px] text-[15px] leading-[1.55] text-[var(--store-muted)]" />
+            <HeroCta label={ctaLabel} href={ctaHref} className="mt-2" />
+          </div>
+          <Editable.Img path="arte-desktop" fallback={{ src: imageDesktop, alt: "" }} label="Imagem do banner" fetchPriority="high" className="block h-full min-h-[260px] w-full object-cover" />
+        </div>
+      </div>
+    );
+  }
+
+  // imagem-full (default)
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[22px] sm:px-6">
+      <button
+        type="button"
+        onClick={scrollToDestaques}
+        aria-label="Ver destaques da loja"
+        className="block w-full cursor-pointer overflow-hidden rounded-2xl bg-[var(--store-chrome-bg,#18181B)] shadow-sm outline-none transition-transform hover:scale-[1.003] focus-visible:ring-4 focus-visible:ring-[var(--store-cta,#D97706)] focus-visible:ring-offset-2"
+      >
+        <picture>
+          <Editable.Slot path="arte-mobile" type="image" fallback={{ src: imageMobile }} label="Imagem do banner (celular)">
+            {(v, attrs, ref) => <source ref={ref} media="(max-width: 767px)" srcSet={v.src} width="1122" height="1402" sizes="100vw" {...attrs} />}
+          </Editable.Slot>
+          <Editable.Img path="arte-desktop" fallback={{ src: imageDesktop, alt: "" }} label="Imagem do banner (computador)" width="1915" height="821" fetchPriority="high" className="block h-auto w-full" />
+        </picture>
+      </button>
+    </div>
+  );
+}
+
+// O rótulo vem da receita por prop, mas o ponto EDITÁVEL é aqui, no uso. Vai de Slot (e não de
+// Editable.Text) porque o botão é `inline-flex gap-2` com dois filhos, rótulo e seta: um <span> a
+// mais viraria um terceiro item de flex. Assim o ponto editável é o próprio <a>/<button>, e o HTML
+// de produção continua idêntico. O 4º argumento do render-prop é a cor que o lojista deu SÓ a este
+// botão; sem ele, cor por elemento não funcionaria aqui.
+function HeroCta({ label, href, className = "" }: { label: string; href: string; className?: string }) {
+  const cls = "font-display inline-flex items-center gap-2 rounded-full bg-[var(--store-cta,#D97706)] px-7 py-3 text-[15px] font-extrabold text-[var(--store-cta-fg,#1C1207)] no-underline transition-colors hover:bg-[var(--store-cta-dark,#B45309)]";
+  const seta = (
+    <Editable.Icon path="cta-icone" label="Ícone do botão" size={16}>
+      <ArrowRight weight="bold" />
+    </Editable.Icon>
+  );
+  return (
+    <Editable.Slot path="cta" type="text" fallback={label} label="Botão principal">
+      {(v, attrs, ref, estilo) =>
+        href ? (
+          <Link ref={ref} href={href} className={`${cls} ${className}`} style={estilo} {...attrs}>{v}{seta}</Link>
+        ) : (
+          <button ref={ref} type="button" onClick={scrollToDestaques} className={`${cls} ${className}`} style={estilo} {...attrs}>{v}{seta}</button>
+        )
+      }
+    </Editable.Slot>
+  );
+}

package/template/components/home/sections/kits.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+// KITS temáticos — combos curados de lib/enrichment/combos.ts (some se COMBOS vazio).
+// EDITOR: o cabeçalho da seção (chapéu, título, subtítulo) é copy e vira caminho da seção, dentro
+// de CombosSection; os kits em si (nome, itens, preço) são DADO da loja e ficam fora (README §8).
+import { CombosSection } from "@/components/home/combos-section";
+import type { SectionComponentProps } from "./registry";
+
+export function KitsSection({ data }: SectionComponentProps) {
+  return <CombosSection combos={data.bundles} />;
+}

package/template/components/home/sections/media-cards.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+// Carrossel horizontal de cards de imagem com legenda sobreposta (na loja de referência: categorias
+// de ingredientes). Serve pra ingredientes, materiais, coleções, bastidores...
+// Conteúdo via receita; defaults neutros com placeholders recoloridos pela marca.
+//
+// EDITOR: título e subtítulo são caminhos da seção; os cards são uma LISTA editável
+// (`cards.card-N`, com foto, título e texto). O invólucro do item é display:contents, então quem
+// continua sendo o filho do carrossel (`flex-none`) é o próprio card. As setas são interface.
+// A foto continua passando pelo `Foto` (otimizador do Next): o `Editable.Slot` só lhe entrega o
+// src/alt do lojista e os atributos de seleção.
+import * as React from "react";
+import { CaretLeft, CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+type MediaCard = { image: string; title: string; text?: string };
+
+const DEFAULT_CARDS: MediaCard[] = [
+  { image: "/brand/ph/photo-a.svg", title: "Feito pra durar", text: "Escolha de materiais e fornecedores com critério." },
+  { image: "/brand/ph/photo-b.svg", title: "Detalhe importa", text: "Acabamento e apresentação que fazem diferença." },
+  { image: "/brand/ph/photo-c.svg", title: "Do nosso jeito", text: "Processo próprio, testado no dia a dia." },
+  { image: "/brand/ph/photo-a.svg", title: "Pra sua rotina", text: "Pensado pra caber na vida real." },
+];
+
+export function MediaCardsSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Por dentro do que você leva",
+    subtitle = "O que entra em cada produto, sem segredo.",
+  } = sectionProps as Record<string, string>;
+  const cards = (sectionProps.cards as MediaCard[] | undefined) ?? DEFAULT_CARDS;
+  const rowRef = React.useRef<HTMLDivElement | null>(null);
+  const scrollRow = (dir: number) => rowRef.current?.scrollBy({ left: dir * 300, behavior: "smooth" });
+
+  return (
+    <div className="reveal mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="mb-[18px] flex items-end justify-between gap-3">
+        <div>
+          <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[28px] font-extrabold leading-[1.15]" />
+          <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Subtítulo" className="mt-1 text-sm text-[var(--store-muted)]" />
+        </div>
+        <div className="hidden gap-2.5 sm:flex">
+          <button type="button" onClick={() => scrollRow(-1)} aria-label="Anterior" className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)]"><CaretLeft weight="bold" className="text-[var(--store-ink-2)]" /></button>
+          <button type="button" onClick={() => scrollRow(1)} aria-label="Próximo" className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)]"><CaretRight weight="bold" className="text-[var(--store-ink-2)]" /></button>
+        </div>
+      </div>
+      <div ref={rowRef} className="flex gap-[18px] overflow-x-auto pb-3.5 [scrollbar-width:thin]">
+        <EditableScope path="cards">
+          <Editable.Sections nested>
+            {cards.map((c, i) => (
+              <Editable.Section key={i} item id={`card-${i + 1}`} label={`Card ${i + 1}`}>
+                <div className="relative w-[264px] flex-none overflow-hidden rounded-2xl">
+                  {/* TODO: trocar por fotos reais (aspect 4:5) */}
+                  <Editable.Slot path="imagem" type="image" fallback={{ src: c.image, alt: "" }} label="Foto do card">
+                    {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={528} height={660} sizes="264px" className="aspect-[4/5] w-full object-cover" />}
+                  </Editable.Slot>
+                  <div className="absolute inset-x-3 bottom-3 rounded-xl bg-[var(--store-chrome-bg,#18181B)]/92 px-4 py-3.5">
+                    <Editable.Text as="div" path="titulo" fallback={c.title} label="Título do card" className="font-display text-[15px] font-bold text-[var(--store-chrome-text,#ffffff)]" />
+                    {c.text && <Editable.Text as="p" path="texto" fallback={c.text} label="Texto do card" multiline className="mt-1 text-[12.5px] leading-[1.45] text-[var(--store-chrome-muted)]" />}
+                  </div>
+                </div>
+              </Editable.Section>
+            ))}
+          </Editable.Sections>
+        </EditableScope>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/newsletter.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+// NEWSLETTER — variantes: "bloco" (bloco CTA chamativo, default) e "inline" (linha fina
+// discreta). Renderiza SÓ com `title` e `action` na receita: o título é a promessa do lojista
+// ("receba ofertas exclusivas" é dele, não da foundation) e `action` é a URL que recebe o
+// e-mail (endpoint do CRM/ESP). Sem `action`, um formulário que descarta o e-mail é mentira.
+// O form é POST de verdade (campo `email`), sem preventDefault.
+//
+// EDITOR: o título e o texto do botão são copy (caminhos `titulo` e `botao`); campo e placeholder do
+// formulário são INTERFACE, e a `action` é configuração: ficam fora do editor (README §8). O botão é
+// um `Editable.Slot`: ele é filho direto de um flex e precisa manter type="submit"; o Slot devolve o
+// MESMO elemento, sem invólucro.
+import { Editable } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { NEWSLETTER_ACTION } from "@/lib/newsletter";
+
+export function NewsletterSection({ variant = "bloco", sectionProps = {} }: SectionComponentProps) {
+  const { title = "", action = "", buttonLabel = "Quero receber", placeholder = "Seu melhor e-mail" } = sectionProps as Record<string, string>;
+  // `action` da receita vence (uma seção pode ter destino próprio); sem ela vale o destino da
+  // loja, o mesmo que o rodapé e o catálogo usam. Sem nenhum dos dois, a seção não renderiza.
+  const destino = action || NEWSLETTER_ACTION;
+  if (!title || !destino) return null;
+
+  if (variant === "inline") {
+    return (
+      <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pb-12 pt-8 sm:px-6">
+        <div className="flex flex-wrap items-center gap-5 store-card rounded-xl px-6 py-5">
+          <Editable.Text as="div" path="titulo" fallback={title} label="Título" className="font-display flex-1 text-[16px] font-bold leading-[1.3] text-[var(--store-ink)]" />
+          <form method="post" action={destino} className="flex w-full max-w-[420px] items-center gap-1.5 rounded-full border border-[var(--store-line-2)] bg-[var(--store-surface)] p-1">
+            <input type="email" name="email" required placeholder={placeholder} className="h-10 min-w-0 flex-1 rounded-full bg-transparent px-4 text-sm outline-none" />
+            <Editable.Slot path="botao" type="text" fallback={buttonLabel} label="Texto do botão">
+              {(v, attrs, ref, estilo) => (
+                <button ref={ref} {...attrs} type="submit" className="font-display h-10 shrink-0 rounded-full bg-[var(--store-primary,#18181B)] px-5 text-[13px] font-extrabold text-white transition-colors hover:bg-[var(--store-primary-hover,#3F3F46)]" style={estilo}>
+                  {v}
+                </button>
+              )}
+            </Editable.Slot>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  // bloco (default)
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pb-12 pt-8 sm:px-6">
+      <div className="flex flex-wrap items-center gap-7 rounded-xl bg-[var(--store-cta,#D97706)] px-8 py-7">
+        <Editable.Text as="div" path="titulo" fallback={title} label="Título" multiline className="font-display flex-1 text-[20px] font-extrabold leading-[1.25] text-[var(--store-cta-fg,#1C1207)] sm:text-[23px]" />
+        <form method="post" action={destino} className="flex w-full max-w-[480px] items-center gap-1.5 rounded-full bg-white p-1.5">
+          <input type="email" name="email" required placeholder={placeholder} className="h-11 min-w-0 flex-1 rounded-full bg-transparent px-4 text-sm outline-none" />
+          <Editable.Slot path="botao" type="text" fallback={buttonLabel} label="Texto do botão">
+            {(v, attrs, ref, estilo) => (
+              <button ref={ref} {...attrs} type="submit" className="font-display h-11 shrink-0 rounded-full bg-[var(--store-chrome-bg,#18181B)] px-6 text-[14px] font-extrabold tracking-[0.5px] text-[var(--store-chrome-text,#ffffff)] transition-opacity hover:opacity-90" style={estilo}>
+                {v}
+              </button>
+            )}
+          </Editable.Slot>
+        </form>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/product-showcase.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+// Vitrine de produtos com fundo colorido por card (portado da vitrine de uma loja real em produção).
+// Diferença importante: aqui os produtos e PREÇOS vêm do CATÁLOGO REAL (data.combos),
+// não de constante hardcoded. A receita pode customizar título, cores de fundo e CTA.
+//
+// ── EDITOR: esta é a vitrine que o lojista ADICIONA pelo "+" ────────────────
+// `Editable.Vitrine` deixa o LOJISTA escolher o que aparece aqui (uma categoria da Unbox, uma
+// lista de produtos, ou uma busca). O documento guarda só a ESCOLHA; quem a transforma em produto
+// com preço e estoque é a LOJA, no servidor (lib/vitrine.ts), e os produtos chegam prontos em
+// `data.vitrines`.
+//
+// O CAMINHO NÃO É CONSTANTE. `path={CAMPO_VITRINE}` é RELATIVO à seção: o primitivo o resolve para
+// `<container>.<id da seção>.vitrine` pelo escopo, e aqui embaixo `joinPath(ctx.scope, CAMPO_VITRINE)`
+// deriva EXATAMENTE a mesma string para achar os produtos já resolvidos. Escrever o caminho
+// completo à mão descolaria os dois lados no primeiro id renomeado, e aqui nem teria como
+// funcionar: esta seção é um TIPO ADICIONÁVEL (sections/catalogo.ts), então o id só existe em
+// tempo de execução (`novo-vitrine-de-produtos-2`, sorteado quando o lojista clica no "+").
+//
+// Duas vitrines na mesma página = dois ids = dois caminhos = DUAS ESCOLHAS INDEPENDENTES.
+//
+// FALLBACK = o que o código mostra hoje (`data.combos`). Enquanto o lojista não escolher, e
+// também quando a escolha não resolve em nada (Unbox fora, categoria esvaziada, produto apagado),
+// esta seção renderiza o mesmo HTML de antes. Vitrine vazia lê como loja quebrada.
+//
+// ── NA PRÉVIA, os produtos vêm pelo 4º argumento ──────────────────────────────────────────────
+// O rascunho do editor não passa pelo servidor da loja: ele chega ao iframe por postMessage. Então,
+// em modo edição, é o PRIMITIVO que pergunta à loja (`POST /api/unbox/vitrine`) o que a escolha do
+// rascunho vira, e entrega em `previa`. `previa.produtos` GANHA de `data.vitrines` quando existe.
+// Em produção `previa` é `undefined` e nada aqui muda.
+import Link from "next/link";
+import type * as React from "react";
+import { CAMPO_VITRINE, Editable, useEditableContext, joinPath, type VitrineProdutoResolvido, type VitrineValue } from "@/lib/editable";
+import { formatBRL } from "@/lib/format";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+const DEFAULT_BGS = [
+  "var(--store-primary-soft, #F1F1F3)",
+  "var(--store-cta-soft, #FDF0DC)",
+  "var(--store-surface-2)",
+  "var(--store-sale-soft, #FBE7E7)",
+];
+
+/**
+ * A TARJA DO "ESTA SEÇÃO NÃO VAI PARA O SITE": só na prévia.
+ *
+ * `style` inline, como as tarjas do primitivo: em produção ela não existe, e uma classe do CSS da
+ * loja faria o aviso depender de estilo que outra loja pode não ter.
+ */
+const AVISO_SEM_PRODUTO: React.CSSProperties = {
+  margin: "0 0 12px",
+  padding: "8px 12px",
+  borderRadius: 8,
+  background: "#FEF3C7",
+  color: "#7C2D12",
+  font: "500 13px/1.4 system-ui, sans-serif",
+};
+
+/** O mínimo que um card precisa, venha ele do catálogo do código ou da escolha do lojista. */
+interface CardDeVitrine {
+  chave: string;
+  slug: string;
+  titulo: string;
+  imagem: string | null;
+  preco: string;
+  esgotado: boolean;
+}
+
+export function ProductShowcaseSection({ data, sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Escolha o seu",
+    subtitle = "Os favoritos da loja, direto do catálogo.",
+    ctaHref = "",
+  } = sectionProps as Record<string, string>;
+  const bgs = (sectionProps.backgrounds as string[] | undefined) ?? DEFAULT_BGS;
+  const max = (sectionProps.max as number | undefined) ?? 4;
+
+  // O MESMO caminho que o primitivo registra logo abaixo: derivado do escopo da seção,
+  // nunca escrito à mão (ver o cabeçalho).
+  const ctx = useEditableContext();
+  const caminho = joinPath(ctx.scope, CAMPO_VITRINE);
+  const doServidor = data.vitrines?.[caminho] ?? null;
+
+  const doCodigo = data.combos.slice(0, max);
+  // A escolha que o CÓDIGO representa: os produtos que esta seção lista hoje, na ordem em que
+  // aparecem. É o que o painel mostra como estado atual antes do primeiro clique do lojista.
+  // Vínculo pelo productId, não pelo slug: slug é editável no painel da Unbox (renomear produto,
+  // ajuste de SEO) e, quando muda, o vínculo por slug para de resolver e o produto SOME da seção
+  // sem erro nenhum. O id é estável. `resolverVitrine` aceita os dois, então o slug fica de reserva
+  // para catálogo que não devolva id.
+  const fallbackVitrine: VitrineValue = { modo: "produtos", produtos: doCodigo.map((p) => p.productId || p.slug) };
+
+  // Produtos resolvidos (pelo servidor em produção, pela prévia no editor) → cards.
+  const cardsDe = (lista: VitrineProdutoResolvido[], teto: number): CardDeVitrine[] =>
+    lista.slice(0, teto).map((p) => ({
+      chave: p.id,
+      slug: p.slug,
+      titulo: p.titulo,
+      imagem: p.imagem,
+      // `preco: null` = produto sem variante com preço no painel; `formatBRL` devolve "—".
+      // Ausência honesta, nunca "R$ 0,00".
+      preco: formatBRL(p.preco),
+      esgotado: p.esgotado,
+    }));
+
+  const cardsDoCodigo: CardDeVitrine[] = doCodigo.map((p) => ({
+    chave: p.slug,
+    slug: p.slug,
+    titulo: p.title,
+    imagem: p.imageUrl,
+    preco: p.displayPrice,
+    esgotado: p.soldOut,
+  }));
+
+  // Sem catálogo nenhum a seção não tem o que mostrar. No modo edição ela CONTINUA na tela (com a
+  // moldura vazia): sumindo dali, o lojista não conseguiria selecionar a vitrine para trocar a
+  // escolha, que é justamente o que ele precisa fazer quando ela está vazia.
+  if ((doServidor?.length ? cardsDe(doServidor, max) : cardsDoCodigo).length === 0 && !ctx.editing) return null;
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="mx-auto mb-7 max-w-[560px] text-center">
+        <Editable.Text as="h2" path="titulo" fallback={title} label="Título da vitrine" className="font-display text-[28px] font-extrabold leading-[1.15]" />
+        <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Subtítulo da vitrine" className="mt-1.5 text-[15px] text-[var(--store-muted)]" />
+      </div>
+      {/* O primitivo só REGISTRA o caminho e devolve os atributos de seleção; em produção ele não
+          põe nada no DOM: sem escolha do lojista, o HTML aqui é o mesmo de antes. */}
+      <Editable.Vitrine path={CAMPO_VITRINE} label="Produtos desta vitrine" fallback={fallbackVitrine}>
+        {(escolha, attrs, ref, previa) => {
+          // No modo PRODUTOS a lista É a resposta: mostra tantos quantos o lojista escolheu, e o
+          // `limite` gravado é ignorado. Nos outros modos o limite decide o tamanho, com o `max`
+          // da receita como padrão.
+          const teto = escolha.modo === "produtos" ? escolha.produtos.length : (escolha.limite ?? max);
+          // a prévia (rascunho de agora) ganha do que o servidor resolveu (documento publicado)
+          const resolvidos = previa?.produtos ?? doServidor;
+          // LISTA VAZIA cai nos produtos do CÓDIGO, não numa grade em branco. É o que a página
+          // publicada faz (`resolverVitrinesDoDocumento` deixa de fora o caminho que não resolveu em
+          // nada), e a prévia tem de mostrar o que publicar vai dar. Quem avisa o lojista de que a
+          // escolha dele não trouxe produto é a tarja âmbar do primitivo, que só existe na prévia.
+          const cards = resolvidos && resolvidos.length ? cardsDe(resolvidos, teto) : cardsDoCodigo;
+          // A PRÉVIA DESENHA A SEÇÃO; A PÁGINA PUBLICADA NÃO. Sem nenhum produto (nem da escolha do
+          // lojista, nem do código), a seção devolve `null` no site (a linha lá em cima). No editor
+          // ela CONTINUA na tela, para ele conseguir clicar e trocar a escolha, e a frase avisa que o
+          // site não vai mostrá-la assim. Só sai quando dá para AFIRMAR: com a prévia carregando ou
+          // em erro, não se sabe.
+          const foraDoSite = ctx.editing && cards.length === 0 && !previa?.carregando && !previa?.erro;
+          return (
+            <>
+              {foraDoSite ? <p style={AVISO_SEM_PRODUTO}>Sem nenhum produto para mostrar, esta seção não aparece no site. Escolha os produtos dela para ela ir ao ar.</p> : null}
+              <div ref={ref as React.Ref<HTMLDivElement>} {...attrs} className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+                {cards.map((p, i) => (
+                  <Link key={p.chave} href={ctaHref || `/produto/${encodeURIComponent(p.slug)}`} className="group flex flex-col overflow-hidden rounded-2xl no-underline transition-transform hover:scale-[1.015]" style={{ background: bgs[i % bgs.length] }}>
+                    <div className="flex aspect-square items-center justify-center p-6">
+                      {p.imagem
+                        ? <Foto src={p.imagem} alt={p.titulo} width={560} height={560} sizes="(min-width: 1024px) 280px, 45vw" className="max-h-full max-w-full object-contain transition-transform group-hover:scale-105" />
+                        : <span className="font-display text-[42px] font-extrabold text-[var(--store-primary,#18181B)]/30">{p.titulo.charAt(0)}</span>}
+                    </div>
+                    <div className="px-5 pb-5 text-center">
+                      <div className="font-display text-[16px] font-extrabold leading-[1.25] text-[var(--store-ink)]">{p.titulo}</div>
+                      <div className="mt-1.5 text-[14.5px] font-bold text-[var(--store-primary,#18181B)]">{p.preco}</div>
+                      <span className="font-display mt-3 inline-block rounded-full bg-[var(--store-primary,#18181B)] px-5 py-2 text-[13px] font-extrabold text-white transition-colors group-hover:bg-[var(--store-primary-dark,#09090B)]">
+                        {p.esgotado ? "esgotado" : "comprar"}
+                      </span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </>
+          );
+        }}
+      </Editable.Vitrine>
+    </div>
+  );
+}