@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/footer.tsx

@@ -0,0 +1,603 @@
+"use client"
+
+import { useState } from "react"
+import { z } from "zod"
+import type { ChromeVariantDef } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { PAYMENT_ICONS, SOCIAL_ICONS, type PaymentKey, type SocialKey } from "../icons"
+
+/**
+ * Footers de la plantilla de moda — estética "Kinetic Street" (grotesca pesada,
+ * cobalto/coral, sombras y radios suaves). Todo se pinta con tokens `--cms-*`
+ * CON fallback, así el footer se ve bien aunque el tema no publique el token.
+ *
+ * 100% editable/combinable desde el CMS: cada variante es un `ChromeVariantDef`
+ * con su schema Zod, y el ChromeEditor autogenera los controles. Los campos de
+ * iconos usan la convención `.describe()` del form-builder:
+ *   - `z.array(z.enum(PAYMENT_KEYS)).describe("icons:payment")` → icon-picker
+ *   - `z.array({ red, href }).describe("icons:social")`          → selector red
+ *   - `z.enum(...).describe("segmented")`                         → pills
+ *
+ * A diferencia del editor, el footer SÍ importa la librería de iconos
+ * (`../icons`) porque vive dentro de `theme-kinetic`.
+ */
+
+const PAYMENT_KEYS = Object.keys(PAYMENT_ICONS) as [PaymentKey, ...PaymentKey[]]
+const SOCIAL_KEYS = Object.keys(SOCIAL_ICONS) as [SocialKey, ...SocialKey[]]
+
+// ── Schemas compartidos ──────────────────────────────────────────────────────
+
+const logoSchema = z.object({
+  tipo: z.enum(["texto", "imagen"]).describe("segmented"),
+  texto: z.string(),
+  url: z.string(),
+})
+type LogoConfig = z.infer<typeof logoSchema>
+
+const enlaceSchema = z.object({ texto: z.string().min(1), href: z.string().min(1) })
+const columnaSchema = z.object({ titulo: z.string().min(1), enlaces: z.array(enlaceSchema) })
+
+const pagosSchema = z.object({
+  metodos: z.array(z.enum(PAYMENT_KEYS)).describe("icons:payment"),
+  modo: z.enum(["icono", "texto"]).describe("segmented"),
+  color: z.enum(["marca", "tinta", "acento"]).describe("segmented"),
+})
+type PagosConfig = z.infer<typeof pagosSchema>
+
+const redesSchema = z.object({
+  items: z
+    .array(z.object({ red: z.enum(SOCIAL_KEYS), href: z.string().min(1) }))
+    .describe("icons:social"),
+  modo: z.enum(["icono", "texto"]).describe("segmented"),
+  color: z.enum(["marca", "tinta", "acento"]).describe("segmented"),
+})
+type RedesConfig = z.infer<typeof redesSchema>
+
+type ColorIcono = PagosConfig["color"]
+
+// ── Utilidades de tintado (convención de `svg-base.tsx`) ─────────────────────
+
+function claseColor(color: ColorIcono): string {
+  return color === "tinta" ? "icons--tinta" : color === "acento" ? "icons--acento" : ""
+}
+
+function colorTexto(color: ColorIcono): string {
+  return color === "acento" ? "var(--cms-acento,#3b2bff)" : "var(--cms-texto,#151515)"
+}
+
+/**
+ * Reglas CSS del tintado monocromo (documentadas en `svg-base.tsx`). No hay
+ * hoja global que las defina, así que el footer las emite una vez.
+ */
+function EstiloIconos() {
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html:
+          ".icons--tinta [data-brand]{fill:currentColor;stroke:currentColor}" +
+          ".icons--acento [data-brand]{fill:var(--cms-acento,#3b2bff);stroke:var(--cms-acento,#3b2bff)}",
+      }}
+    />
+  )
+}
+
+// ── Piezas de render compartidas ─────────────────────────────────────────────
+
+/** Logo real del chrome: imagen (via ctx.componentes.Imagen) o wordmark de texto. */
+function LogoChrome({ logo, ctx }: { logo: LogoConfig; ctx: RenderContext }) {
+  const { Imagen, Enlace } = ctx.componentes
+  return (
+    <Enlace href="/" className="inline-flex items-center">
+      {logo.tipo === "imagen" && logo.url ? (
+        <Imagen src={logo.url} alt={logo.texto || "Logo"} className="h-8 w-auto object-contain" />
+      ) : (
+        <span
+          className="text-[24px] leading-none"
+          style={{
+            fontFamily: "var(--cms-fuente-titulo)",
+            fontWeight: "var(--cms-titulo-peso,900)",
+            textTransform: "var(--cms-titulo-transform,uppercase)",
+            letterSpacing: "var(--cms-titulo-espaciado,-0.04em)",
+            color: "var(--cms-texto,#0c0c10)",
+          }}
+        >
+          {logo.texto || "Tienda"}
+        </span>
+      )}
+    </Enlace>
+  )
+}
+
+/** Métodos de pago: icono o texto, con tintado marca/tinta/acento. */
+function Pagos({ pagos }: { pagos: PagosConfig }) {
+  if (!pagos.metodos.length) return null
+  return (
+    <div
+      className={`flex flex-wrap items-center gap-2 ${claseColor(pagos.color)}`}
+      style={{ color: colorTexto(pagos.color) }}
+      aria-label="Métodos de pago"
+    >
+      {pagos.metodos.map((clave) => {
+        const entry = PAYMENT_ICONS[clave]
+        if (!entry) return null
+        const Icono = entry.Icon
+        return (
+          <span
+            key={clave}
+            className="inline-flex items-center justify-center"
+            style={{
+              padding: pagos.modo === "icono" ? "6px 9px" : "5px 9px",
+              borderRadius: "var(--cms-radio-md,12px)",
+              border: "1px solid var(--cms-borde,#e6e4df)",
+              background: "var(--cms-superficie,#fff)",
+              boxShadow: "var(--cms-sombra-sm,0 1px 2px rgba(0,0,0,.06))",
+              fontSize: "10px",
+              lineHeight: 1,
+              ...(pagos.modo === "texto"
+                ? {
+                    fontWeight: 600,
+                    textTransform: "uppercase" as const,
+                    letterSpacing: "0.04em",
+                    fontFamily: "var(--cms-fuente-mono)",
+                  }
+                : {}),
+            }}
+          >
+            {pagos.modo === "icono" ? <Icono size={22} title={entry.label} /> : entry.label}
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Redes sociales: cada una enlaza (ctx.componentes.Enlace); icono o texto. */
+function Redes({ redes, ctx }: { redes: RedesConfig; ctx: RenderContext }) {
+  if (!redes.items.length) return null
+  const { Enlace } = ctx.componentes
+  return (
+    <div
+      className={`flex flex-wrap items-center gap-2.5 ${claseColor(redes.color)}`}
+      style={{ color: colorTexto(redes.color) }}
+    >
+      {redes.items.map((item, i) => {
+        const entry = SOCIAL_ICONS[item.red]
+        if (!entry) return null
+        const Icono = entry.Icon
+        return (
+          <Enlace key={`${item.red}-${i}`} href={item.href} className="inline-flex items-center">
+            {redes.modo === "icono" ? (
+              <span
+                className="inline-flex h-9 w-9 items-center justify-center"
+                style={{
+                  borderRadius: "var(--cms-radio-full,999px)",
+                  border: "1px solid var(--cms-borde,#e6e4df)",
+                  background: "var(--cms-superficie,#fff)",
+                  boxShadow: "var(--cms-sombra-sm,0 1px 2px rgba(0,0,0,.06))",
+                }}
+              >
+                <Icono size={18} title={entry.label} />
+              </span>
+            ) : (
+              <span className="text-xs font-semibold uppercase tracking-[0.06em]">{entry.label}</span>
+            )}
+          </Enlace>
+        )
+      })}
+    </div>
+  )
+}
+
+const claseTituloColumna = "text-[11px] font-semibold uppercase tracking-[0.1em]"
+
+function ColumnaDesktop({
+  columna,
+  ctx,
+}: {
+  columna: z.infer<typeof columnaSchema>
+  ctx: RenderContext
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-col gap-2.5 text-[12.5px]">
+      <h3 className={claseTituloColumna} style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+        {columna.titulo}
+      </h3>
+      <nav aria-label={columna.titulo}>
+        {columna.enlaces.map((enlace) => (
+          <Enlace key={enlace.href} href={enlace.href} className="block">
+            {enlace.texto}
+          </Enlace>
+        ))}
+      </nav>
+    </div>
+  )
+}
+
+function ColumnaAcordeon({
+  columna,
+  abierta,
+  onToggle,
+  ctx,
+}: {
+  columna: z.infer<typeof columnaSchema>
+  abierta: boolean
+  onToggle: () => void
+  ctx: RenderContext
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div style={{ borderBottom: "1px solid var(--cms-borde,#dbd6c9)" }}>
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={abierta}
+        className={`flex w-full items-center justify-between bg-transparent py-3.5 ${claseTituloColumna}`}
+        style={{ color: "var(--cms-texto,#0c0c10)" }}
+      >
+        <h3 className="m-0">{columna.titulo}</h3>
+        <span className={`transition-transform ${abierta ? "rotate-90" : ""}`}>›</span>
+      </button>
+      {abierta ? (
+        <nav
+          aria-label={columna.titulo}
+          className="flex flex-col gap-2.5 pb-3.5 text-sm"
+          style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+        >
+          {columna.enlaces.map((enlace) => (
+            <Enlace key={enlace.href} href={enlace.href} className="block">
+              {enlace.texto}
+            </Enlace>
+          ))}
+        </nav>
+      ) : null}
+    </div>
+  )
+}
+
+function ColumnasMobile({
+  columnas,
+  ctx,
+}: {
+  columnas: z.infer<typeof columnaSchema>[]
+  ctx: RenderContext
+}) {
+  const [abierta, setAbierta] = useState<string | null>(null)
+  return (
+    <div className="flex flex-col">
+      {columnas.map((columna) => (
+        <ColumnaAcordeon
+          key={columna.titulo}
+          columna={columna}
+          abierta={abierta === columna.titulo}
+          onToggle={() => setAbierta((a) => (a === columna.titulo ? null : columna.titulo))}
+          ctx={ctx}
+        />
+      ))}
+    </div>
+  )
+}
+
+/** Barra fina de degradado kinético en el borde superior del footer. */
+function BarraKinetic() {
+  return (
+    <div
+      aria-hidden
+      style={{
+        height: "4px",
+        background: "var(--cms-degradado,linear-gradient(120deg,#3b2bff,#ff3b2e))",
+      }}
+    />
+  )
+}
+
+function ShellFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <footer
+      className="w-full"
+      style={{
+        background: "var(--cms-superficie,#fff)",
+        color: "var(--cms-texto,#0c0c10)",
+        borderTop: "1px solid var(--cms-borde,#dbd6c9)",
+      }}
+    >
+      <EstiloIconos />
+      <BarraKinetic />
+      {children}
+    </footer>
+  )
+}
+
+// ── Variante: MODA (mejorada) ────────────────────────────────────────────────
+
+const modaSchema = z.object({
+  logo: logoSchema,
+  tagline: z.string(),
+  columnas: z.array(columnaSchema),
+  pagos: pagosSchema,
+  redes: redesSchema,
+  legal: z.string().min(1),
+})
+export type ModaProps = z.infer<typeof modaSchema>
+export type FooterProps = ModaProps
+
+const columnasDefault: ModaProps["columnas"] = [
+  {
+    titulo: "Tienda",
+    enlaces: [
+      { texto: "Novedades", href: "/novedades" },
+      { texto: "Ropa", href: "/ropa" },
+      { texto: "Zapatos", href: "/zapatos" },
+      { texto: "Accesorios", href: "/accesorios" },
+    ],
+  },
+  {
+    titulo: "Ayuda",
+    enlaces: [
+      { texto: "Envíos y devoluciones", href: "/ayuda/envios-y-devoluciones" },
+      { texto: "Guía de tallas", href: "/ayuda/guia-de-tallas" },
+      { texto: "Rastrear pedido", href: "/ayuda/rastrear-pedido" },
+      { texto: "Contacto", href: "/ayuda/contacto" },
+    ],
+  },
+  {
+    titulo: "Nosotros",
+    enlaces: [
+      { texto: "Términos y condiciones", href: "/legal/terminos" },
+      { texto: "Política de datos", href: "/legal/politica-de-datos" },
+      { texto: "PQRS", href: "/legal/pqrs" },
+    ],
+  },
+]
+
+const pagosDefault: PagosConfig = {
+  metodos: ["visa", "mastercard", "amex", "pse", "nequi", "addi"],
+  modo: "icono",
+  color: "marca",
+}
+
+const redesDefault: RedesConfig = {
+  items: [
+    { red: "instagram", href: "https://instagram.com/moda" },
+    { red: "tiktok", href: "https://tiktok.com/@moda" },
+    { red: "whatsapp", href: "https://wa.me/573000000000" },
+  ],
+  modo: "icono",
+  color: "marca",
+}
+
+const modaDefaults: ModaProps = {
+  logo: { tipo: "texto", texto: "MODA", url: "" },
+  tagline: "Moda urbana del día a día. Envíos a toda Colombia.",
+  columnas: columnasDefault,
+  pagos: pagosDefault,
+  redes: redesDefault,
+  legal: "© 2026 Moda. Todos los derechos reservados.",
+}
+
+function FooterModa({ props, ctx }: { props: ModaProps; ctx: RenderContext }) {
+  const columnas = props.columnas.length || 1
+  return (
+    <ShellFooter>
+      <div className="mx-auto max-w-6xl px-5 py-10 md:px-10 md:py-14">
+        <div className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
+          <div className="max-w-sm">
+            <LogoChrome logo={props.logo} ctx={ctx} />
+            <p
+              className="mt-3 text-[13px] leading-relaxed"
+              style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+            >
+              {props.tagline}
+            </p>
+            <div className="mt-5">
+              <Redes redes={props.redes} ctx={ctx} />
+            </div>
+          </div>
+          <div
+            className="hidden gap-10 md:grid"
+            style={{ gridTemplateColumns: `repeat(${columnas}, minmax(0,1fr))` }}
+          >
+            {props.columnas.map((columna) => (
+              <ColumnaDesktop key={columna.titulo} columna={columna} ctx={ctx} />
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-6 md:hidden">
+          <ColumnasMobile columnas={props.columnas} ctx={ctx} />
+        </div>
+
+        <div
+          className="mt-10 flex flex-col gap-5 pt-6 md:flex-row md:items-center md:justify-between"
+          style={{ borderTop: "1px solid var(--cms-borde,#dbd6c9)" }}
+        >
+          <span className="text-[11.5px]" style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+            {props.legal}
+          </span>
+          <Pagos pagos={props.pagos} />
+        </div>
+      </div>
+    </ShellFooter>
+  )
+}
+
+export const footerModa: ChromeVariantDef<ModaProps, RenderContext> = {
+  label: "Moda",
+  schema: modaSchema,
+  defaults: modaDefaults,
+  Component: ({ props, ctx }) => <FooterModa props={props} ctx={ctx} />,
+}
+
+// ── Variante: MINIMAL ────────────────────────────────────────────────────────
+
+const minimalSchema = z.object({
+  logo: logoSchema,
+  enlaces: z.array(enlaceSchema),
+  redes: redesSchema,
+  legal: z.string().min(1),
+})
+export type MinimalProps = z.infer<typeof minimalSchema>
+
+const minimalDefaults: MinimalProps = {
+  logo: { tipo: "texto", texto: "MODA", url: "" },
+  enlaces: [
+    { texto: "Tienda", href: "/novedades" },
+    { texto: "Ayuda", href: "/ayuda/contacto" },
+    { texto: "Términos", href: "/legal/terminos" },
+    { texto: "Privacidad", href: "/legal/politica-de-datos" },
+  ],
+  redes: { ...redesDefault, modo: "texto" },
+  legal: "© 2026 Moda. Todos los derechos reservados.",
+}
+
+function FooterMinimal({ props, ctx }: { props: MinimalProps; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <ShellFooter>
+      <div className="mx-auto max-w-6xl px-5 py-8 md:px-10">
+        <div className="flex flex-col items-center gap-5 text-center md:flex-row md:justify-between md:text-left">
+          <LogoChrome logo={props.logo} ctx={ctx} />
+          <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
+            {props.enlaces.map((enlace) => (
+              <Enlace
+                key={enlace.href}
+                href={enlace.href}
+                className="text-xs font-semibold uppercase tracking-[0.08em]"
+              >
+                {enlace.texto}
+              </Enlace>
+            ))}
+          </nav>
+          <Redes redes={props.redes} ctx={ctx} />
+        </div>
+        <p
+          className="mt-6 text-center text-[11.5px] md:text-left"
+          style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+        >
+          {props.legal}
+        </p>
+      </div>
+    </ShellFooter>
+  )
+}
+
+export const footerMinimal: ChromeVariantDef<MinimalProps, RenderContext> = {
+  label: "Minimal",
+  schema: minimalSchema,
+  defaults: minimalDefaults,
+  Component: ({ props, ctx }) => <FooterMinimal props={props} ctx={ctx} />,
+}
+
+// ── Variante: NEWSLETTER ─────────────────────────────────────────────────────
+
+const newsletterSchema = z.object({
+  logo: logoSchema,
+  boletin: z.object({
+    titulo: z.string().min(1),
+    texto: z.string(),
+    placeholder: z.string(),
+    boton: z.string().min(1),
+    nota: z.string(),
+  }),
+  redes: redesSchema,
+  pagos: pagosSchema,
+  legal: z.string().min(1),
+})
+export type NewsletterProps = z.infer<typeof newsletterSchema>
+
+const newsletterDefaults: NewsletterProps = {
+  logo: { tipo: "texto", texto: "MODA", url: "" },
+  boletin: {
+    titulo: "Sumate al drop",
+    texto: "Novedades, lanzamientos y ofertas antes que nadie. Sin spam.",
+    placeholder: "tu@correo.com",
+    boton: "Suscribirme",
+    nota: "Al suscribirte aceptás nuestra política de datos.",
+  },
+  redes: redesDefault,
+  pagos: pagosDefault,
+  legal: "© 2026 Moda. Todos los derechos reservados.",
+}
+
+function FooterNewsletter({ props, ctx }: { props: NewsletterProps; ctx: RenderContext }) {
+  // Envío = placeholder (sin backend en esta fase): solo evita el submit real.
+  return (
+    <ShellFooter>
+      <div className="mx-auto grid max-w-6xl gap-8 px-5 py-10 md:grid-cols-2 md:px-10 md:py-14">
+        <div>
+          <LogoChrome logo={props.logo} ctx={ctx} />
+          <h2
+            className="mt-4 text-[26px] leading-[1.05]"
+            style={{
+              fontFamily: "var(--cms-fuente-titulo)",
+              fontWeight: "var(--cms-titulo-peso,900)",
+              textTransform: "var(--cms-titulo-transform,uppercase)",
+              letterSpacing: "var(--cms-titulo-espaciado,-0.04em)",
+            }}
+          >
+            {props.boletin.titulo}
+          </h2>
+          <p
+            className="mt-2 max-w-md text-[13px] leading-relaxed"
+            style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+          >
+            {props.boletin.texto}
+          </p>
+          <form
+            className="mt-5 flex max-w-md flex-col gap-2 sm:flex-row"
+            onSubmit={(evento) => evento.preventDefault()}
+          >
+            <input
+              type="email"
+              placeholder={props.boletin.placeholder}
+              aria-label="Correo electrónico"
+              className="min-w-0 flex-1 px-3.5 py-2.5 text-sm outline-none"
+              style={{
+                borderRadius: "var(--cms-radio-md,12px)",
+                border: "1px solid var(--cms-borde,#dbd6c9)",
+                background: "var(--cms-fondo,#f1eee6)",
+                color: "var(--cms-texto,#0c0c10)",
+              }}
+            />
+            <button
+              type="submit"
+              className="px-5 py-2.5 text-sm font-semibold"
+              style={{
+                borderRadius: "var(--cms-radio-md,12px)",
+                background: "var(--cms-acento,#3b2bff)",
+                color: "var(--cms-primario-texto,#fff)",
+                boxShadow: "var(--cms-sombra-md,0 10px 30px -12px rgba(0,0,0,.18))",
+              }}
+            >
+              {props.boletin.boton}
+            </button>
+          </form>
+          <p className="mt-2 text-[11px]" style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+            {props.boletin.nota}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-6 md:items-end">
+          <Redes redes={props.redes} ctx={ctx} />
+          <Pagos pagos={props.pagos} />
+        </div>
+      </div>
+
+      <div
+        className="mx-auto max-w-6xl px-5 py-4 md:px-10"
+        style={{ borderTop: "1px solid var(--cms-borde,#dbd6c9)" }}
+      >
+        <span className="text-[11.5px]" style={{ color: "var(--cms-texto-suave,#6b675e)" }}>
+          {props.legal}
+        </span>
+      </div>
+    </ShellFooter>
+  )
+}
+
+export const footerNewsletter: ChromeVariantDef<NewsletterProps, RenderContext> = {
+  label: "Newsletter",
+  schema: newsletterSchema,
+  defaults: newsletterDefaults,
+  Component: ({ props, ctx }) => <FooterNewsletter props={props} ctx={ctx} />,
+}