@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/features.tsx

@@ -0,0 +1,159 @@
+import { z } from "zod"
+import type { ReactNode } from "react"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { CLASE_REVEAL, Seccion, resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+/**
+ * Franja de confianza: 3–4 items `{ icono, titulo, texto }`. Los iconos son un
+ * set pequeño inline (stroke `currentColor`), elegibles por enum desde el CMS.
+ */
+
+export const ICONOS_FEATURE = ["envio", "devoluciones", "pago-seguro", "soporte", "calidad", "cuotas"] as const
+export type IconoFeature = (typeof ICONOS_FEATURE)[number]
+
+export type FeatureItem = {
+  icono: IconoFeature
+  titulo: string
+  texto: string
+}
+
+export type FeaturesProps = {
+  fondo: Fondo
+  items: FeatureItem[]
+}
+
+const featureItemSchema: z.ZodType<FeatureItem> = z.object({
+  icono: z.enum(ICONOS_FEATURE),
+  titulo: z.string().min(1),
+  texto: z.string(),
+})
+
+const featuresSchema: z.ZodType<FeaturesProps> = z.object({
+  fondo: z.enum(FONDOS),
+  items: z.array(featureItemSchema),
+})
+
+const featuresDefaults: FeaturesProps = {
+  fondo: "superficie",
+  items: [
+    { icono: "envio", titulo: "Envío a todo el país", texto: "Despachamos en 24–48h a toda Colombia." },
+    { icono: "devoluciones", titulo: "Cambios y devoluciones", texto: "30 días para cambiar lo que no te quede." },
+    { icono: "pago-seguro", titulo: "Pago 100% seguro", texto: "PSE, tarjeta o efectivo con cifrado." },
+    { icono: "soporte", titulo: "Soporte cercano", texto: "Te acompañamos por chat y WhatsApp." },
+  ],
+}
+
+/** Envoltura SVG común: 24×24, stroke `currentColor`, decorativa (aria-hidden). */
+function IconoBase({ children }: { children: ReactNode }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {children}
+    </svg>
+  )
+}
+
+const ICONO_SVG: Record<IconoFeature, ReactNode> = {
+  envio: (
+    <IconoBase>
+      <path d="M3 6.5h10v9H3z" />
+      <path d="M13 9h4l3 3v3.5h-7z" />
+      <circle cx="7" cy="17.5" r="1.6" />
+      <circle cx="17" cy="17.5" r="1.6" />
+    </IconoBase>
+  ),
+  devoluciones: (
+    <IconoBase>
+      <path d="M4 9a8 8 0 1 1-1.2 5" />
+      <path d="M3 4v5h5" />
+    </IconoBase>
+  ),
+  "pago-seguro": (
+    <IconoBase>
+      <path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" />
+      <path d="M9.5 12l1.8 1.8L15 10.2" />
+    </IconoBase>
+  ),
+  soporte: (
+    <IconoBase>
+      <path d="M4 12a8 8 0 0 1 16 0" />
+      <rect x="3" y="12" width="3.5" height="5.5" rx="1.2" />
+      <rect x="17.5" y="12" width="3.5" height="5.5" rx="1.2" />
+      <path d="M20 17.5c0 2-1.8 3-4 3" />
+    </IconoBase>
+  ),
+  calidad: (
+    <IconoBase>
+      <path d="M12 3.5l2.5 5 5.5.8-4 3.9 1 5.5L12 16l-5 2.6 1-5.5-4-3.9 5.5-.8z" />
+    </IconoBase>
+  ),
+  cuotas: (
+    <IconoBase>
+      <rect x="3" y="6" width="18" height="12" rx="2" />
+      <path d="M3 10h18" />
+      <path d="M7 14.5h4" />
+    </IconoBase>
+  ),
+}
+
+function Feature({ item, borde, colorSuave, acento }: {
+  item: FeatureItem
+  borde: string
+  colorSuave: string
+  acento: string
+}) {
+  return (
+    <div
+      className={`${CLASE_REVEAL} flex flex-col items-start gap-2.5 p-5 [transition:transform_.3s_ease,box-shadow_.3s_ease] hover:-translate-y-1 hover:[box-shadow:var(--cms-sombra-md,0_10px_30px_-12px_rgba(0,0,0,.18))]`}
+      style={{ border: `var(--cms-grosor-borde) solid ${borde}`, borderRadius: "var(--cms-radio-md,12px)" }}
+    >
+      <span style={{ color: acento }}>{ICONO_SVG[item.icono]}</span>
+      <h3
+        className="m-0 text-[15px] font-semibold"
+        style={{ fontFamily: "var(--cms-fuente-texto)" }}
+      >
+        {item.titulo}
+      </h3>
+      <p className="m-0 text-[13px] leading-relaxed" style={{ color: colorSuave }}>
+        {item.texto}
+      </p>
+    </div>
+  )
+}
+
+export const featuresBlock: BlockDefinition<FeaturesProps, RenderContext> = {
+  label: "Franja de confianza",
+  schema: featuresSchema,
+  defaults: featuresDefaults,
+  Component: ({ props }) => {
+    const f = resolverFondo(props.fondo)
+    const cols = props.items.length >= 4 ? "lg:grid-cols-4" : "lg:grid-cols-3"
+    return (
+      <Seccion fondo={props.fondo} ariaLabel="Ventajas de comprar con nosotros">
+        <div className={`mx-auto grid w-full max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 ${cols}`}>
+          {props.items.map((item, i) => (
+            <Feature
+              key={`${item.icono}-${i}`}
+              item={item}
+              borde={f.borde}
+              colorSuave={f.colorSuave}
+              acento={f.acento}
+            />
+          ))}
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/hero.test.tsx

@@ -0,0 +1,75 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { heroBlock } from "./hero"
+import { FONDOS, resolverFondo } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+const layouts = ["full-bleed", "split", "centered", "grid"] as const
+
+function contarH1(html: string): number {
+  return (html.match(/<h1[ >]/g) ?? []).length
+}
+
+describe("heroBlock", () => {
+  it.each(layouts)("renderiza sin crash el layout %s con titulo, CTA primario y un solo h1", (layout) => {
+    const props = { ...heroBlock.defaults, layout }
+    expect(heroBlock.schema.safeParse(props).success).toBe(true)
+
+    const html = renderToStaticMarkup(<heroBlock.Component props={props} ctx={mockCtx()} />)
+
+    expect(html).toContain(heroBlock.defaults.titulo)
+    expect(html).toContain(heroBlock.defaults.enlacePrimario.texto)
+    expect(contarH1(html)).toBe(1)
+  })
+
+  it("con imagenUrl vacío usa el fallback del mock Imagen en vez de <img src=\"\">", () => {
+    const props = { ...heroBlock.defaults, layout: "full-bleed" as const, imagenUrl: "" }
+    const html = renderToStaticMarkup(<heroBlock.Component props={props} ctx={mockCtx()} />)
+
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('role="img"')
+  })
+
+  it("defaults pasan el schema", () => {
+    expect(heroBlock.schema.safeParse(heroBlock.defaults).success).toBe(true)
+  })
+
+  it("el fondo por defecto es 'claro' (preserva el look actual)", () => {
+    expect(heroBlock.defaults.fondo).toBe("claro")
+  })
+
+  it.each(FONDOS)("cualquier fondo (%s) pasa el schema", (fondo) => {
+    expect(heroBlock.schema.safeParse({ ...heroBlock.defaults, fondo }).success).toBe(true)
+  })
+
+  it.each(["split", "centered", "grid"] as const)(
+    "el layout %s aplica el fondo elegido al contenedor",
+    (layout) => {
+      const oscuro = resolverFondo("oscuro")
+      const html = renderToStaticMarkup(
+        <heroBlock.Component props={{ ...heroBlock.defaults, layout, fondo: "oscuro" }} ctx={mockCtx()} />
+      )
+      expect(html).toContain(oscuro.background)
+    }
+  )
+
+  it("full-bleed lo manda la imagen: el fondo no altera su markup", () => {
+    const claro = renderToStaticMarkup(
+      <heroBlock.Component props={{ ...heroBlock.defaults, layout: "full-bleed", fondo: "claro" }} ctx={mockCtx()} />
+    )
+    const oscuro = renderToStaticMarkup(
+      <heroBlock.Component props={{ ...heroBlock.defaults, layout: "full-bleed", fondo: "oscuro" }} ctx={mockCtx()} />
+    )
+    expect(oscuro).toBe(claro)
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./hero.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+
+    expect(fuente).not.toMatch(/<img[\s>]/)
+    expect(fuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/blocks/hero.tsx

@@ -0,0 +1,290 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import { linkSchema } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+export type HeroProps = {
+  layout: "full-bleed" | "split" | "centered" | "grid"
+  alineacion: "izquierda" | "centro"
+  /**
+   * Fondo del contenedor en los layouts SIN imagen de fondo (`split`,
+   * `centered`, `grid`). El `full-bleed` es dominado por la imagen y NO se ve
+   * afectado. Default `claro`: resuelve a los mismos tokens de tema que ya se
+   * usaban, así el render actual no cambia.
+   */
+  fondo: Fondo
+  titulo: string
+  subtitulo: string
+  etiqueta: string
+  imagenUrl: string
+  enlacePrimario: { texto: string; href: string }
+  enlaceSecundario?: { texto: string; href: string }
+}
+
+const heroSchema: z.ZodType<HeroProps> = z.object({
+  layout: z.enum(["full-bleed", "split", "centered", "grid"]),
+  alineacion: z.enum(["izquierda", "centro"]),
+  fondo: z.enum(FONDOS),
+  titulo: z.string().min(1),
+  subtitulo: z.string(),
+  etiqueta: z.string(),
+  imagenUrl: z.string(),
+  enlacePrimario: linkSchema,
+  enlaceSecundario: linkSchema.optional(),
+})
+
+const heroDefaults: HeroProps = {
+  layout: "full-bleed",
+  alineacion: "izquierda",
+  fondo: "claro",
+  titulo: "Nueva temporada",
+  subtitulo: "Piezas que viven contigo, todos los días.",
+  etiqueta: "Otoño 2026",
+  imagenUrl: "",
+  enlacePrimario: { texto: "Ver colección", href: "/catalogo" },
+  enlaceSecundario: { texto: "Ver lookbook", href: "/catalogo" },
+}
+
+function Etiqueta({ children, className }: { children: string; className?: string }) {
+  if (!children) return null
+  return (
+    <div
+      className={`font-mono text-[11px] font-semibold tracking-[0.16em] ${className ?? ""}`}
+      style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-acento)" }}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** Único `<h1>` del bloque hero: el título de la pieza. */
+function Titulo({ children, className }: { children: string; className?: string }) {
+  return (
+    <h1
+      className={`m-0 leading-[1.05] ${className ?? ""}`}
+      style={{
+        fontFamily: "var(--cms-fuente-titulo)",
+        fontWeight: "var(--cms-titulo-peso)",
+        textTransform: "var(--cms-titulo-transform)",
+        letterSpacing: "var(--cms-titulo-espaciado)",
+      }}
+    >
+      {children}
+    </h1>
+  )
+}
+
+/** Enlace no acepta `style`: la variable de tema va en clases arbitrarias de Tailwind. */
+function BotonPrimario({
+  texto,
+  href,
+  ctx,
+  className,
+}: {
+  texto: string
+  href: string
+  ctx: RenderContext
+  className?: string
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={href}
+      className={`inline-block px-5 py-2.5 text-center text-xs font-semibold uppercase tracking-[0.08em] [background:var(--cms-primario)] [color:var(--cms-primario-texto)] [border-radius:var(--cms-radio)] [font-family:var(--cms-fuente-texto)] md:px-6 md:py-3 ${className ?? ""}`}
+    >
+      {texto}
+    </Enlace>
+  )
+}
+
+function BotonSecundario({
+  texto,
+  href,
+  ctx,
+  className,
+}: {
+  texto: string
+  href: string
+  ctx: RenderContext
+  className?: string
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={href}
+      className={`inline-block px-5 py-2.5 text-center text-xs font-semibold uppercase tracking-[0.08em] [border:1.5px_solid_currentColor] [border-radius:var(--cms-radio)] [font-family:var(--cms-fuente-texto)] md:px-6 md:py-3 ${className ?? ""}`}
+    >
+      {texto}
+    </Enlace>
+  )
+}
+
+function FullBleed({ props, ctx }: { props: HeroProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const alineado = props.alineacion === "centro" ? "text-center items-center" : "text-left items-start"
+  return (
+    <div
+      className="relative aspect-[4/5] w-full overflow-hidden md:aspect-[16/9] lg:h-[440px] lg:aspect-auto"
+      style={{ borderRadius: "var(--cms-radio)" }}
+    >
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo || props.etiqueta}
+        prioridad
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div
+        className={`absolute inset-x-0 bottom-0 flex flex-col gap-3 px-5 pb-6 pt-16 text-white md:gap-5 md:px-8 md:pb-10 md:pt-24 ${alineado}`}
+        style={{ background: "linear-gradient(transparent, rgba(0,0,0,.72))" }}
+      >
+        <Etiqueta className="text-white/80">{props.etiqueta}</Etiqueta>
+        <Titulo className="max-w-2xl text-3xl md:text-4xl lg:text-5xl">{props.titulo}</Titulo>
+        <div className="flex flex-wrap gap-3">
+          <BotonPrimario texto={props.enlacePrimario.texto} href={props.enlacePrimario.href} ctx={ctx} />
+          {props.enlaceSecundario ? (
+            <BotonSecundario texto={props.enlaceSecundario.texto} href={props.enlaceSecundario.href} ctx={ctx} />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Split({ props, ctx }: { props: HeroProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const f = resolverFondo(props.fondo)
+  return (
+    <div
+      className="grid w-full grid-cols-1 overflow-hidden md:grid-cols-[1fr_1.2fr]"
+      style={{
+        border: `var(--cms-grosor-borde) solid ${f.borde}`,
+        borderRadius: "var(--cms-radio)",
+        background: f.background,
+        color: f.color,
+      }}
+    >
+      <div className="order-2 flex flex-col justify-center gap-3 px-6 py-8 md:order-1 md:gap-4 md:px-12 md:py-14">
+        <Etiqueta>{props.etiqueta}</Etiqueta>
+        <Titulo className="text-3xl md:text-4xl">{props.titulo}</Titulo>
+        <p className="m-0 max-w-sm text-sm leading-relaxed" style={{ color: f.colorSuave }}>
+          {props.subtitulo}
+        </p>
+        <div className="flex flex-wrap gap-3">
+          <BotonPrimario texto={props.enlacePrimario.texto} href={props.enlacePrimario.href} ctx={ctx} />
+          {props.enlaceSecundario ? (
+            <BotonSecundario texto={props.enlaceSecundario.texto} href={props.enlaceSecundario.href} ctx={ctx} />
+          ) : null}
+        </div>
+      </div>
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo || props.etiqueta}
+        prioridad
+        className="order-1 aspect-[4/5] w-full object-cover md:order-2 md:aspect-auto md:min-h-[400px]"
+      />
+    </div>
+  )
+}
+
+function Centered({ props, ctx }: { props: HeroProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const f = resolverFondo(props.fondo)
+  return (
+    <div
+      className="overflow-hidden px-5 pt-10 text-center md:px-12 md:pt-16"
+      style={{
+        background: f.background,
+        color: f.color,
+        border: `var(--cms-grosor-borde) solid ${f.borde}`,
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      <Etiqueta className="justify-center">{props.etiqueta}</Etiqueta>
+      <Titulo className="mx-auto mt-4 max-w-3xl text-4xl md:text-5xl lg:text-6xl">{props.titulo}</Titulo>
+      <p className="mx-auto mt-4 max-w-xl text-sm leading-relaxed" style={{ color: f.colorSuave }}>
+        {props.subtitulo}
+      </p>
+      <div className="mt-6 flex flex-wrap justify-center gap-3">
+        <BotonPrimario texto={props.enlacePrimario.texto} href={props.enlacePrimario.href} ctx={ctx} />
+        {props.enlaceSecundario ? (
+          <BotonSecundario texto={props.enlaceSecundario.texto} href={props.enlaceSecundario.href} ctx={ctx} />
+        ) : null}
+      </div>
+      <Imagen
+        src={props.imagenUrl}
+        alt={props.titulo || props.etiqueta}
+        prioridad
+        className="mx-auto mt-8 aspect-[4/5] w-full max-w-4xl object-cover md:mt-10 md:aspect-[21/9]"
+      />
+    </div>
+  )
+}
+
+function Grid({ props, ctx }: { props: HeroProps; ctx: RenderContext }) {
+  const { Imagen } = ctx.componentes
+  const f = resolverFondo(props.fondo)
+  return (
+    <div
+      className="grid w-full grid-cols-1 overflow-hidden md:grid-cols-[1.5fr_1fr] md:grid-rows-[220px_220px]"
+      style={{
+        background: f.background,
+        color: f.color,
+        border: `var(--cms-grosor-borde) solid ${f.borde}`,
+        borderRadius: "var(--cms-radio)",
+      }}
+    >
+      <div
+        className="relative aspect-[4/5] md:aspect-auto"
+        style={{ gridRow: "1 / 3", borderRight: `var(--cms-grosor-borde) solid ${f.borde}` }}
+      >
+        <Imagen
+          src={props.imagenUrl}
+          alt={props.titulo || props.etiqueta}
+          prioridad
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+        <div className="absolute inset-x-4 bottom-4 flex flex-col gap-3 md:inset-x-6 md:bottom-6">
+          <Titulo className="text-3xl md:text-4xl">{props.titulo}</Titulo>
+          <div>
+            <BotonPrimario texto={props.enlacePrimario.texto} href={props.enlacePrimario.href} ctx={ctx} />
+          </div>
+        </div>
+      </div>
+      <div
+        className="flex flex-col justify-between gap-3 p-4 md:p-5"
+        style={{
+          borderBottom: `var(--cms-grosor-borde) solid ${f.borde}`,
+          background: "var(--cms-superficie)",
+        }}
+      >
+        <Etiqueta>{props.etiqueta}</Etiqueta>
+        <div className="text-base font-semibold md:text-lg">{props.subtitulo}</div>
+      </div>
+      <div className="flex flex-col justify-between p-4 md:p-5" style={{ background: "var(--cms-superficie)" }}>
+        {props.enlaceSecundario ? (
+          <BotonSecundario texto={props.enlaceSecundario.texto} href={props.enlaceSecundario.href} ctx={ctx} />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export const heroBlock: BlockDefinition<HeroProps, RenderContext> = {
+  label: "Hero",
+  schema: heroSchema,
+  defaults: heroDefaults,
+  Component: ({ props, ctx }) => {
+    switch (props.layout) {
+      case "split":
+        return <Split props={props} ctx={ctx} />
+      case "centered":
+        return <Centered props={props} ctx={ctx} />
+      case "grid":
+        return <Grid props={props} ctx={ctx} />
+      case "full-bleed":
+      default:
+        return <FullBleed props={props} ctx={ctx} />
+    }
+  },
+}

package/src/blocks/index.tsx

@@ -0,0 +1,35 @@
+import { defineBlocks } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { heroBlock } from "./hero"
+import { categoryTilesBlock } from "./category-tiles"
+import { productGridBlock } from "./product-grid"
+import { editorialBannerBlock } from "./editorial-banner"
+import { newsletterBlock } from "./newsletter"
+import { featuresBlock } from "./features"
+import { marqueeBlock } from "./marquee"
+import { featuredCollectionBlock } from "./featured-collection"
+import { testimonialsBlock } from "./testimonials"
+import { lookbookBlock } from "./lookbook"
+import { faqBlock } from "./faq"
+import { richTextBlock } from "./rich-text"
+import { spacerBlock } from "./spacer"
+import { promoBlock } from "./promo"
+import { videoBlock } from "./video"
+
+export const homeBlocks = defineBlocks<RenderContext>()({
+  hero: heroBlock,
+  categoryTiles: categoryTilesBlock,
+  productGrid: productGridBlock,
+  editorialBanner: editorialBannerBlock,
+  newsletter: newsletterBlock,
+  features: featuresBlock,
+  marquee: marqueeBlock,
+  featuredCollection: featuredCollectionBlock,
+  testimonials: testimonialsBlock,
+  lookbook: lookbookBlock,
+  faq: faqBlock,
+  richText: richTextBlock,
+  spacer: spacerBlock,
+  promo: promoBlock,
+  video: videoBlock,
+})

package/src/blocks/lookbook.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { lookbookBlock } from "./lookbook"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("lookbookBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(lookbookBlock.schema.safeParse(lookbookBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...lookbookBlock.defaults, fondo }
+    expect(lookbookBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<lookbookBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain(lookbookBlock.defaults.items[0].titulo!)
+  })
+
+  it("renderiza un mosaico por item (editable)", () => {
+    const props = {
+      fondo: "claro" as const,
+      titulo: "Galería",
+      items: [
+        { imagenUrl: "", titulo: "A" },
+        { imagenUrl: "", titulo: "B" },
+      ],
+    }
+    const html = renderToStaticMarkup(<lookbookBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<figure/g) ?? []).length).toBe(2)
+  })
+
+  it("usa la Imagen del ctx: placeholder accesible cuando la URL viene vacía", () => {
+    const props = { fondo: "claro" as const, items: [{ imagenUrl: "", titulo: "Sin foto" }] }
+    const html = renderToStaticMarkup(<lookbookBlock.Component props={props} ctx={mockCtx()} />)
+    // El mock de Imagen pinta un <div role="img"> cuando no hay src.
+    expect(html).toContain('role="img"')
+    expect(html).not.toContain("<img")
+  })
+
+  it("con imagenUrl renderiza <img> con esa fuente", () => {
+    const props = { fondo: "claro" as const, items: [{ imagenUrl: "https://x/y.jpg", titulo: "Foto" }] }
+    const html = renderToStaticMarkup(<lookbookBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain('src="https://x/y.jpg"')
+  })
+
+  it("envuelve en enlace sólo los items con href", () => {
+    const props = {
+      fondo: "claro" as const,
+      items: [
+        { imagenUrl: "", titulo: "Con link", href: "/coleccion" },
+        { imagenUrl: "", titulo: "Sin link" },
+      ],
+    }
+    const html = renderToStaticMarkup(<lookbookBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/<a /g) ?? []).length).toBe(1)
+    expect(html).toContain('href="/coleccion"')
+  })
+
+  it("titulo opcional: sin titulo no pinta <h2>, con titulo sí", () => {
+    const sin = renderToStaticMarkup(
+      <lookbookBlock.Component props={{ fondo: "claro", items: [{ imagenUrl: "", titulo: "A" }] }} ctx={mockCtx()} />
+    )
+    expect(sin).not.toContain("<h2")
+
+    const con = renderToStaticMarkup(
+      <lookbookBlock.Component props={{ fondo: "claro", titulo: "Editorial", items: [] }} ctx={mockCtx()} />
+    )
+    expect(con).toContain("<h2")
+    expect(con).toContain("Editorial")
+  })
+
+  it("no usa <h1> y emite motion respetando prefers-reduced-motion", () => {
+    const html = renderToStaticMarkup(
+      <lookbookBlock.Component props={lookbookBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).not.toMatch(/<h1[ >]/)
+    expect(html).toContain("prefers-reduced-motion")
+    expect(html).toContain("cms-reveal")
+  })
+})