/* global React, Placeholder, Eyebrow, Arr, HeartIcon, useWishlist, useUI, Reveal, waLink, waMessageForWishlist */
const { useState } = React;

/* ───── DATOS · todos generados como punto de partida editorial. ─────
   Los precios y nombres de modelo vienen del brief. Los SKUs concretos
   son ejemplos para mostrar el diseño — los reemplazas desde admin.   */

/* DATOS DINÁMICOS — desde window.CATALOGO real */
const CAT_ORDER = ["sillas","mecedoras","sillas-bar","comedores","mesas","sofas","percheros","combos"];
const CAT_CLASSES = { sillas:"cat-l", mecedoras:"cat-m", "sillas-bar":"cat-s", comedores:"cat-s", mesas:"cat-s", sofas:"cat-s", percheros:"cat-w", "combos":"cat-w" };
const CAT_TONES = { sillas:"dark", mecedoras:"terra", "sillas-bar":"paper", comedores:"bone", mesas:"verde", sofas:"dark", percheros:"mostaza", "combos":"bone" };

// Overrides manuales — productos elegidos a mano por Alex para portada de categoría
const CAT_HERO_OVERRIDES = {
  "sillas": "SI-072",
  "sillas-bar": "SB-033",
  "comedores": "CM-004",
  "mesas": "MS-048",
};

// Selecciona la mejor foto representativa por categoría, con criterio editorial:
// Prioriza patrones precolombinos y diamantes que tienden a tener más color/contraste
// Evita las primeras del catálogo que suelen ser las más básicas (Lineal blanco/beige)
function pickCategoryHero(cid) {
  const items = (window.CATALOGO || []).filter((p) => p.categoria === cid && p.foto);
  if (items.length === 0) return null;

  // 1) Si hay override manual de Alex, úsalo (solo si el producto existe y tiene foto)
  if (CAT_HERO_OVERRIDES[cid]) {
    const forced = items.find((p) => (p.id || "").toUpperCase() === CAT_HERO_OVERRIDES[cid].toUpperCase());
    if (forced) return forced;
  }

  // Patrones más vistosos (en orden de prioridad)
  const strongPatterns = /precolombino especial|precolombino raíz|precolombino|diamante especial|diamante/i;
  const mediumPatterns = /pirámide|piramide|ancestral|nativo|rombo|cruz/i;
  const weakPatterns = /espiga|olas/i;

  // Tier 1: destacados con patrón fuerte
  let pick = items.find((p) => p.destacado && strongPatterns.test(p.variante || ""));
  if (pick) return pick;

  // Tier 2: cualquier producto con patrón fuerte (mejor visual)
  pick = items.find((p) => strongPatterns.test(p.variante || ""));
  if (pick) return pick;

  // Tier 3: destacados con patrón medio
  pick = items.find((p) => p.destacado && mediumPatterns.test(p.variante || ""));
  if (pick) return pick;

  // Tier 4: cualquier producto con patrón medio
  pick = items.find((p) => mediumPatterns.test(p.variante || ""));
  if (pick) return pick;

  // Tier 5: destacado cualquiera
  pick = items.find((p) => p.destacado);
  if (pick) return pick;

  // Tier 6: cualquiera con foto, evitando los "Lineal" simples si hay alternativa
  pick = items.find((p) => !/^lineal$/i.test(p.variante || ""));
  if (pick) return pick;

  // Última opción
  return items[0];
}

const CATEGORIES = CAT_ORDER.map((cid) => {
  const hero = pickCategoryHero(cid);
  return {
    id: cid,
    name: (window.CAT_LABELS && window.CAT_LABELS[cid]) || cid,
    count: (window.CAT_TOTALS && window.CAT_TOTALS[cid]) || 0,
    cls: CAT_CLASSES[cid] || "cat-s",
    tone: CAT_TONES[cid] || "bone",
    photo: hero ? hero.foto : null,
    heroProduct: hero ? hero.id : null,
  };
});

const MODEL_TONES = { "Pavo Real":"dark", "Colibrí":"bone", "Sirena":"verde", "Acapulco":"terra", "Diamante":"dark", "Madrid":"paper", "Pavo Real Plus":"verde", "Diamante Plus":"terra", "España":"paper", "Paris":"bone", "Noruega":"dark" };

const _modelCounts = {};
(window.CATALOGO || []).forEach((p) => { _modelCounts[p.nombre] = (_modelCounts[p.nombre] || 0) + 1; });
const MODELS = Object.entries(_modelCounts)
  .filter(([_, n]) => n >= 3)
  .sort((a, b) => b[1] - a[1])
  .slice(0, 6)
  .map(([name, n]) => {
    const info = (window.ICONOS_INFO && window.ICONOS_INFO[name]) || {};
    const sample = (window.CATALOGO || []).find((p) => p.nombre === name) || {};
    return {
      id: name.toLowerCase().replace(/\s+/g, "-"),
      name: name,
      family: info.family || (window.CAT_LABELS && window.CAT_LABELS[sample.categoria]) || "",
      variants: n,
      since: info.since || "",
      tone: MODEL_TONES[name] || "dark",
      blurb: info.blurb || (n + " versiones de " + name + " — distintos patrones, distintas maderas."),
      photo: sample.foto || null,
    };
  });

// Productos destacados forzados por curación editorial
const FEATURED_OVERRIDES = ["ME-030", "ME-024"];

const _buildFeatured = (p) => ({
  id: p.id,
  name: p.nombre,
  family: (window.CAT_LABELS && window.CAT_LABELS[p.categoria]) || p.categoria,
  pattern: (window.detectarPatron && window.detectarPatron(p.variante)) || "",
  price: (p.precio || 0).toLocaleString("es-CO"),
  tone: "dark",
  tone2: "bone",
  photo: p.foto,
});

const FEATURED = [];
// Primero los overrides en orden
FEATURED_OVERRIDES.forEach((oid) => {
  const found = (window.CATALOGO || []).find((p) => (p.id || "").toUpperCase() === oid && p.foto);
  if (found) FEATURED.push(_buildFeatured(found));
});
// Luego destacados con foto
(window.CATALOGO || [])
  .filter((p) => p.destacado && p.foto && !FEATURED.find((f) => f.id === p.id))
  .slice(0, 8 - FEATURED.length)
  .forEach((p) => FEATURED.push(_buildFeatured(p)));

// Si no hay suficientes destacados, completa con productos que tengan foto
if (FEATURED.length < 4) {
  (window.CATALOGO || [])
    .filter((p) => p.foto && !FEATURED.find((f) => f.id === p.id))
    .slice(0, 8 - FEATURED.length)
    .forEach((p) => FEATURED.push(_buildFeatured(p)));
}

const CLIENTES = [
  { id: "c-1", photo: "assets/casas/casa-1-cocina.jpg",
    caption: "Donde empieza el café de la mañana. Dos sillas bar con estructura cobre y tejido Zenú que convirtieron esta barra de cocina en el punto favorito de la casa.",
    by: "Cocina · Bogotá", product: "Sillas Bar · Zenú", tone: "terra" },
  { id: "c-2", photo: "assets/casas/casa-2-balcon-urbano.jpg",
    caption: "El atardecer se ve mejor desde aquí. Mecedoras con tejido precolombino multicolor sobre piso de madera, ladrillo visto y toda la ciudad al frente.",
    by: "Balcón · Bogotá", product: "Mecedoras · Precolombino", tone: "mostaza" },
  { id: "c-3", photo: "assets/casas/casa-3-balcon-jardin.jpg",
    caption: "Un jardín a ocho pisos del suelo. Set completo en negro y Zenú — loveseat, dos sillas y mesa redonda — rodeado de plantas que le dan vida al balcón.",
    by: "Balcón · Medellín", product: "Set Completo · Zenú", tone: "dark" },
  { id: "c-4", photo: "assets/casas/casa-4-terraza.jpg",
    caption: "Cuando el espacio pide más que una silla. Terraza campestre con sofá tejido, mecedoras, comedor y sillas DAVA'S — todo en un solo ambiente bajo pérgola.",
    by: "Terraza · Sabana de Bogotá", product: "Amoblado Completo", tone: "verde" },
  { id: "c-5", photo: "assets/casas/casa-5-patio.jpg",
    caption: "Llueve, pero nadie se mueve. Set fucsia en patio con ladrillo y vegetación tropical — loveseat, dos sillas y mesa — el color que le hacía falta a esta casa.",
    by: "Patio · Bogotá", product: "Set Completo · Fucsia", tone: "terra" },
];

const CURSOS = [
  { id: "cu-iniciacion", name: "Iniciación al tejido precolombino", duration: "4 sesiones · 12 h", learn: "Patrón base, montaje sobre marco, lectura del dibujo.", take: "Tu primer respaldo tejido (taburete pequeño).", spots: "máx. 6", next: "Consultar fechas", price: "320.000", active: true },
  { id: "cu-diamante",   name: "Patrón Diamante · intermedio",      duration: "6 sesiones · 18 h", learn: "Tensión, escalado del diamante, transiciones de color.", take: "Pieza completa tipo Acapulco.", spots: "máx. 4", next: "Consultar fechas", price: "480.000", active: true },
  { id: "cu-restauracion", name: "Restauración de tejido en mecedora", duration: "Taller intensivo · 8 h", learn: "Diagnóstico, desarme, reposición de hilo en piezas existentes.", take: "Tu propia silla restaurada (la traes).", spots: "máx. 5", next: "Próximamente", price: "240.000", active: false },
];

/* ───── PRODUCT CARD ───── */
function ProductCard({ p, style, showPrices }) {
  const wl = useWishlist();
  const ui = useUI();
  const isOn = wl.has(p.id);
  return (
    <div className={`prod ${style}`} onClick={() => ui.openModal(p)}>
      <div className="prod-img">
        {p.photo ? (
          <img src={p.photo} alt={p.name} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: "6%", background: "#fff" }} />
        ) : (
          <Placeholder ratio="auto" tone={p.tone} label={`/ASSETS/PROD-${p.id.toUpperCase()}-1.JPG`} fill style={{ position: "absolute", inset: 0 }} />
        )}
        <button
          className={`heart ${isOn ? "is-on" : ""}`}
          aria-label={isOn ? "Quitar de mis piezas" : "Guardar"}
          onClick={(e) => { e.stopPropagation(); wl.toggle({ id: p.id, name: p.name, family: p.family, pattern: p.pattern, price: p.price, tone: p.tone }); }}
        >
          <HeartIcon filled={isOn} size={15} stroke={isOn ? "var(--bone)" : "var(--ink)"} />
        </button>
      </div>
      <div className="prod-head">
        <h4>{p.name}</h4>
        {showPrices && p.price ? <div className="price">$ {p.price}</div> : null}
      </div>
    </div>
  );
}

/* ───── SECCIONES ───── */

// ═══════════════════════════════════════════════════════
// SECCIONES NUEVAS — diseño aprobado de Design, junio 2026
// ═══════════════════════════════════════════════════════

// A · El Oficio — statement de apertura
function OficioSection() {
  const isMob = typeof window !== "undefined" && window.innerWidth < 760;
  const PILLARS = [
    { label: "Se siente", desc: "Diseñada para el cuerpo,\nno para la vitrina." },
    { label: "Es arte",   desc: "Tejidos de autor, nudo a nudo." },
    { label: "Te pertenece", desc: "Única, como tu casa." },
  ];
  return (
    <Reveal as="section" style={{ padding: isMob ? "44px 24px 36px" : "clamp(48px,6vw,80px) clamp(24px,5vw,72px) clamp(36px,4vw,56px)", background: "var(--bone,#F7F2EA)" }}>
      <style>{`
        @keyframes oficio-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
        @keyframes oficio-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
        .oficio-pillar { animation: oficio-up .55s cubic-bezier(.2,.7,.2,1) both; }
        .oficio-pillar:nth-child(1) { animation-delay:.08s; }
        .oficio-pillar:nth-child(2) { animation-delay:.18s; }
        .oficio-pillar:nth-child(3) { animation-delay:.28s; }
        .oficio-sep { transform-origin: left; animation: oficio-line .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:.04s; }
      `}</style>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent,#C8901A)", fontWeight: 500, marginBottom: isMob ? 18 : 24 }}>
        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent,#C8901A)", flexShrink: 0 }} />
        El oficio — Hecho a mano en Colombia
      </div>
      <h2 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontWeight: 400, fontSize: isMob ? "clamp(32px,9vw,44px)" : "clamp(38px,4.8vw,68px)", lineHeight: 1.0, letterSpacing: "-1.5px", color: "#1b1813", maxWidth: 820, marginBottom: isMob ? 28 : 36 }}>
        No vendemos muebles.<br />
        Tejemos la pieza donde{" "}
        <span style={{ fontStyle: "italic", color: "#7E1232" }}>va a pasar tu vida.</span>
      </h2>
      <div className="oficio-sep" style={{ height: 1, background: "rgba(27,24,19,.12)", marginBottom: isMob ? 20 : 24 }} />
      <div style={{ display: "flex", gap: 0, justifyContent: isMob ? "space-between" : "flex-start" }}>
        {PILLARS.map((p, i) => (
          <div key={p.label} className="oficio-pillar" style={{ flex: isMob ? "1 1 0" : "unset", paddingRight: isMob ? 0 : "clamp(32px,4vw,64px)", borderRight: (!isMob && i < 2) ? "1px solid rgba(27,24,19,.12)" : "none", marginRight: (!isMob && i < 2) ? "clamp(32px,4vw,64px)" : 0 }}>
            <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic", fontSize: isMob ? 13 : 15, color: "#7E1232" }}>{p.label}</div>
            <div style={{ fontSize: isMob ? 11 : 12.5, lineHeight: 1.45, color: "#9a917f", marginTop: 3, whiteSpace: "pre-line" }}>{p.desc}</div>
          </div>
        ))}
      </div>
    </Reveal>
  );
}


// C · Catálogo — fichas editoriales full-bleed por categoría
function CategoriesSection() {
  const goCat = (id) => window.__davasRoute?.openCategoria(id);
  const goAll  = () => window.__davasRoute?.openCatalog();
  const cats   = window.CAT_TOTALS || {};
  const isMob  = typeof window !== "undefined" && window.innerWidth < 760;

  const MAIN = [
    { id: "mecedoras", label: "Mecedoras", desde: "480.000" },
    { id: "sillas",    label: "Sillas",    desde: "250.000" },
    { id: "comedores", label: "Comedores", desde: "780.000" },
    { id: "combos",    label: "Juegos",    desde: "1.050.000" },
    { id: "mesas",     label: "Mesas",     desde: "200.000" },
    { id: "sofas",     label: "Sofás",     desde: "550.000" },
  ];

  return (
    <Reveal as="section" style={{ padding: isMob ? "44px 0 0" : "clamp(48px,5vw,72px) 0 0", background: "var(--bone,#F7F2EA)" }}>
      <style>{`
        .dc2-card { position:relative; overflow:hidden; cursor:pointer; border-radius:4px; background:#1b1813; }
        .dc2-card img { width:100%; height:100%; object-fit:cover; display:block;
          transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s; opacity:.88; }
        .dc2-card:hover img { transform:scale(1.07); opacity:1; }
        .dc2-card .dc2-ovl { position:absolute; inset:0;
          background: linear-gradient(180deg, rgba(10,6,4,0) 35%, rgba(10,6,4,.82) 100%);
          transition: background .4s; }
        .dc2-card:hover .dc2-ovl { background: linear-gradient(180deg, rgba(10,6,4,.04) 20%, rgba(10,6,4,.88) 100%); }
        .dc2-card .dc2-info { position:absolute; bottom:0; left:0; right:0; padding: 18px 20px 20px; }
        .dc2-card .dc2-arr { display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.2,1); color:#C8901A; }
        .dc2-card:hover .dc2-arr { transform: translateX(5px); }
        .dc2-placeholder { width:100%; height:100%; background: repeating-linear-gradient(45deg,rgba(200,144,26,.12) 0 2px,transparent 2px 14px), #2a2620; }
        @media(max-width:759px){
          .dc2-grid { grid-template-columns: 1fr 1fr !important; padding: 0 14px !important; gap: 10px !important; }
          .dc2-card .dc2-info { padding: 12px 14px 14px; }
        }
      `}</style>

      {/* Header */}
      <div style={{ padding: isMob ? "0 20px 22px" : "0 clamp(24px,5vw,72px) 30px" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "#C8901A", fontWeight: 500, marginBottom: 10 }}>El catálogo</div>
        <h3 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontWeight: 400, fontSize: isMob ? "clamp(26px,7vw,32px)" : "clamp(28px,3vw,42px)", letterSpacing: "-.5px", color: "#1b1813", lineHeight: 1 }}>
          Encuentra la tuya
        </h3>
      </div>

      {/* Grid editorial: 3 col desktop / 2 col mobile */}
      <div className="dc2-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: isMob ? 10 : "clamp(12px,1.4vw,18px)", padding: isMob ? "0 14px" : "0 clamp(24px,5vw,72px)" }}>
        {MAIN.map((c, idx) => {
          const hero  = pickCategoryHero(c.id);
          const count = cats[c.id];
          // Mecedoras y Sillas más altas (primeras 2 en desktop)
          const tall  = !isMob && idx < 2;
          return (
            <div key={c.id} className="dc2-card" onClick={() => goCat(c.id)}
              style={{ height: isMob ? 160 : tall ? 320 : 230,
                       boxShadow: "0 12px 32px rgba(20,8,14,.14)" }}>
              {hero?.foto
                ? <img src={hero.foto} alt={c.label} />
                : <div className="dc2-placeholder" />
              }
              <div className="dc2-ovl" />
              <div className="dc2-info">
                <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
                  <div>
                    <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic", fontSize: isMob ? 18 : tall ? 28 : 22, color: "#F7F2EA", lineHeight: 1 }}>{c.label}</div>
                    <div style={{ fontSize: isMob ? 10 : 11.5, color: "rgba(247,242,234,.55)", marginTop: 4, letterSpacing: "0.05em" }}>
                      {count ? `${count} ref. · ` : ""}desde ${c.desde}
                    </div>
                  </div>
                  <span className="dc2-arr" style={{ fontSize: isMob ? 16 : 20, marginBottom: 2 }}>→</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Banner ver todo — borde interior, sin fondo extra */}
      <div onClick={goAll} style={{ margin: isMob ? "14px 14px 0" : "clamp(14px,1.5vw,20px) clamp(24px,5vw,72px) 0", border: "1.5px solid rgba(27,24,19,.18)", borderRadius: 4, padding: isMob ? "18px 20px" : "22px 36px", display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer", transition: "background .22s, border-color .22s" }}
        onMouseEnter={e => { e.currentTarget.style.background="rgba(27,24,19,.05)"; e.currentTarget.style.borderColor="rgba(27,24,19,.35)"; }}
        onMouseLeave={e => { e.currentTarget.style.background="transparent"; e.currentTarget.style.borderColor="rgba(27,24,19,.18)"; }}>
        <div>
          <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic", fontSize: isMob ? 17 : "clamp(18px,1.8vw,24px)", color: "#1b1813", lineHeight: 1 }}>
            Mira todas nuestras piezas
          </div>
          {!isMob && <div style={{ fontSize: 11.5, color: "#9a917f", marginTop: 5, letterSpacing: "0.08em", textTransform: "uppercase" }}>+300 referencias · sillas · mecedoras · percheros · sillas bar · combos y más</div>}
        </div>
        <span style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: isMob ? 20 : 28, color: "#C8901A", flexShrink: 0, marginLeft: 16 }}>→</span>
      </div>

      <div style={{ height: isMob ? 40 : 56 }} />
    </Reveal>
  );
}

function CatCardImg({ c }) { return null; }
function CatCard({ c, onClick }) { return null; }

// FAB de WhatsApp — manejado por header.jsx

// D · A Medida — taller propio, fotos reales grandes
function AMedidaSection() {
  const isMob = typeof window !== "undefined" && window.innerWidth < 760;
  const TALLER_TILES = [
    { label: "Soldadura · Hierro vivo",    img: "/soldador_sparks.jpg",    video: null },
    { label: "Diseño · En taller",         img: "/artesanos_diseno.jpg",   video: null },
    { label: "Tejido · Nudo a nudo",       img: "/tejedor_multicolor.jpg", video: null },
    { label: "Pintura electrostática",     img: null, video: "/pintura.mp4" },
  ];
  return (
    <Reveal as="section" style={{ background: "#1b1813", overflow: "hidden" }}>
      <style>{`
        .taller-tile { position:relative; overflow:hidden; background:#2a2620; }
        .taller-tile img, .taller-tile video { width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:transform .6s,opacity .4s; }
        .taller-tile:hover img, .taller-tile:hover video { transform:scale(1.04);opacity:1; }
        .taller-label { position:absolute;bottom:0;left:0;right:0; padding:32px 18px 18px;
          background:linear-gradient(transparent,rgba(10,6,4,.75));
          font-size:10px;letter-spacing:.2em;text-transform:uppercase;
          color:rgba(247,242,234,.75); }
        @media(min-width:760px){
          .taller-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,56px); align-items:center; padding:clamp(56px,6vw,88px) clamp(24px,5vw,72px); }
          .taller-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
          .taller-tile { height:210px; border-radius:3px; }
        }
        @media(max-width:759px){
          .taller-layout { display:flex; flex-direction:column; }
          .taller-copy { padding:48px 24px 32px; }
          .taller-photos { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
          .taller-tile { height:48vw; }
          .taller-label { font-size:9px; padding:24px 12px 12px; }
        }
      `}</style>

      <div className="taller-layout">
        {/* Copy */}
        <div className="taller-copy">
          <div style={{ fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase", color: "#E2B25C", fontWeight: 500, marginBottom: 20 }}>Lo que ves aquí es menos de la mitad</div>
          <h3 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontWeight: 400, fontSize: isMob ? "clamp(30px,8.5vw,42px)" : "clamp(30px,3.5vw,50px)", lineHeight: 1.0, letterSpacing: "-.8px", color: "#F7F2EA" }}>
            ¿Lo imaginaste?<br /><span style={{ fontStyle: "italic", color: "#E2B25C" }}>Lo hacemos.</span>
          </h3>
          <p style={{ fontSize: isMob ? 14.5 : "clamp(13px,1.1vw,16px)", lineHeight: 1.72, color: "rgba(247,242,234,.7)", maxWidth: 400, marginTop: 22 }}>
            Taller propio en Bogotá: hierro forjado, pintura electrostática y madera noble. Si lo soñaste, lo diseñamos a tu medida.
          </p>
          <a href={`https://wa.me/573005260637?text=${encodeURIComponent("Hola DAVA'S, quiero hablar sobre un diseño a medida.")}`}
            target="_blank" rel="noopener"
            style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#C8901A", color: "#1b1813", fontSize: isMob ? 14 : 15, fontWeight: 700, padding: isMob ? "14px 24px" : "16px 28px", borderRadius: 2, marginTop: 30, textDecoration: "none", transition: "background .25s" }}>
            Hablar con el taller →
          </a>
        </div>

        {/* Fotos — grid 2×2 full-bleed */}
        <div className="taller-photos">
          {TALLER_TILES.map((t) => (
            <div key={t.label} className="taller-tile">
              {t.video
                ? <video src={t.video} autoPlay loop muted playsInline />
                : t.img
                ? <img src={t.img} alt={t.label} loading="lazy" />
                : <div style={{ width:"100%",height:"100%",backgroundImage:"repeating-linear-gradient(76deg,rgba(226,178,92,.10) 0 2px,transparent 2px 13px)" }} />
              }
              <div className="taller-label">{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

// E · Tejidos — muestrario editorial: featured izquierda + 4 en grid derecha
function TejidosSection() {
  const goPatron = (patron) => window.__davasRoute?.openCatalog({ patron });
  const [hovered, setHovered] = React.useState(null);

  // Fotos reales de cada patrón — subir a /assets/tejidos/
  const TEJIDOS = [
    {
      id:    "precolombino",
      label: "Precolombino Especial",
      sub:   "Rombos ancestrales · multicolor",
      foto:  "/tejido_precolombino_especial.jpg",
      pos:   "52% 28%", scale: "220%",
    },
    {
      id:    "lineal",
      label: "Lineal con refuerzo",
      sub:   "El clásico · estructura natural",
      foto:  "/tejido_lineal_refuerzo.jpg",
      pos:   "50% 22%", scale: "180%",
    },
    {
      id:    "diamante",
      label: "Precolombino Diamante",
      sub:   "Geometría ancestral · dos tonos",
      foto:  "/tejido_precolombino_diamante.jpg",
      pos:   "52% 30%", scale: "200%",
    },
    {
      id:    "olas",
      label: "Olas",
      sub:   "Zigzag en movimiento",
      foto:  "/tejido_olas.jpg",
      pos:   "50% 38%", scale: "190%",
    },
    {
      id:    "espiga",
      label: "Espiga",
      sub:   "Chevron · elegancia estructural",
      foto:  "/tejido_espiga.jpg",
      pos:   "50% 32%", scale: "210%",
    },
  ];

  const [featured, ...rest] = TEJIDOS;

  return (
    <Reveal as="section" style={{ position:"relative", background: "#7E1232", borderTop: "1px solid #6a0f2a", overflow: "hidden", isolation:"isolate" }}>
      <style>{`
        @keyframes tej-weave { from{background-position:0 0,0 0} to{background-position:160px 0,-160px 0} }
        @keyframes tej-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

        /* Fondo de hilos animado */
        .tej-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
          background-image:
            repeating-linear-gradient(76deg, rgba(255,214,228,.10) 0 2px, transparent 2px 14px),
            repeating-linear-gradient(-76deg, rgba(255,214,228,.07) 0 2px, transparent 2px 14px);
          animation: tej-weave 22s linear infinite; }

        .tej-inner { position:relative; z-index:2; }

        .tej-header { padding: clamp(44px,5vw,64px) clamp(24px,5vw,72px) 32px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; }

        /* Grid de tarjetas — foto arriba, texto SIEMPRE debajo */
        .tej-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,18px); padding:0 clamp(24px,5vw,72px) clamp(48px,5vw,68px); }

        .tej-card { background:#fff; border-radius:4px; overflow:hidden; cursor:pointer;
          box-shadow:0 14px 34px rgba(20,4,12,.28); display:flex; flex-direction:column;
          transition:transform .35s, box-shadow .35s; }
        .tej-card:hover { transform:translateY(-5px); box-shadow:0 24px 48px rgba(20,4,12,.4); }
        .tej-card:hover .tej-photo img { transform:scale(1.08); }

        .tej-photo { position:relative; overflow:hidden; height:clamp(170px,18vw,230px); background:#f3ede2; }
        .tej-photo img { width:100%; height:100%; object-fit:cover; display:block;
          transition:transform .6s cubic-bezier(.2,.7,.2,1); }

        .tej-meta { padding:16px 18px 20px; border-top:1px solid #f0e9dd; }
        .tej-meta .name { font-family:var(--f-display,'Fraunces',serif); font-size:17px; color:#1b1813; line-height:1.1; }
        .tej-meta .sub  { font-size:11.5px; color:#9a917f; letter-spacing:.04em; margin-top:5px; line-height:1.4; }

        /* Mobile: scroll horizontal */
        @media(max-width:759px){
          .tej-grid { display:flex; overflow-x:auto; gap:12px;
            padding:0 20px clamp(40px,8vw,52px);
            scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
          .tej-grid::-webkit-scrollbar { display:none; }
          .tej-card { flex:0 0 64vw; scroll-snap-align:start; }
          .tej-photo { height:48vw; min-height:180px; }
        }
      `}</style>

      <div className="tej-bg" />

      <div className="tej-inner">
        {/* Header */}
        <div className="tej-header">
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "#E2B25C", fontWeight: 500, marginBottom: 12 }}>El detalle que cambia todo</div>
            <h3 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontWeight: 400, fontSize: "clamp(26px,3vw,42px)", lineHeight: 1, letterSpacing: "-.5px", color: "#F7F2EA" }}>
              Una pieza, <span style={{ fontStyle: "italic", color: "#f3cfa0" }}>muchos tejidos.</span>
            </h3>
          </div>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "rgba(247,242,234,.7)", maxWidth: 300 }}>
            El mismo modelo cambia por completo según el patrón — cada uno tejido a mano, nudo a nudo.
          </p>
        </div>

        {/* Grid de tarjetas */}
        <div className="tej-grid">
          {TEJIDOS.map((t) => (
            <div key={t.id} className="tej-card" onClick={() => goPatron(t.id)}>
              <div className="tej-photo">
                <img src={t.foto} alt={t.label}
                  style={{ objectPosition: t.pos, transform: `scale(${t.scale})`, transformOrigin: t.pos }} />
              </div>
              <div className="tej-meta">
                <div className="name">{t.label}</div>
                <div className="sub">{t.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}


function ModelsSection() {
  const goModelo = (name) => window.__davasRoute?.openModelo(name);
  const goCatalog = () => window.__davasRoute?.openCatalog();
  return (
    <Reveal as="section" className="bg-paper tight">
      <div className="section-head">
        <div>
          <Eyebrow>02 · Modelos icónicos · agrupados</Eyebrow>
          <h2><em>Seis</em> nombres<br />que se repiten.</h2>
        </div>
        <div className="right">
          <p>Cada modelo se ofrece en varias versiones — patrón, madera y color de hilo. Entra al modelo y ves todas sus variantes en una sola página.</p>
          <button className="btn line" style={{ alignSelf: "flex-start" }} onClick={goCatalog}>Ver los 15 modelos <Arr /></button>
        </div>
      </div>
      <div className="models-rail">
        {MODELS.map((m, i) => (
          <div className="model" key={m.id} onClick={() => goModelo(m.name)}>
            <div className="head-row">
              <span>M / {String(i + 1).padStart(2, "0")}</span>
              <span>{m.since}</span>
            </div>
            <div className="photo">
              <Placeholder ratio="auto" tone={m.tone} label={m.photo || `/ASSETS/MODELO-${m.id.toUpperCase()}.JPG`} corner={m.family} fill />
              <div className="badge">{m.variants} versiones</div>
            </div>
            <h3>{m.name}</h3>
            <p className="blurb">{m.blurb}</p>
            <div className="foot">
              <span>{m.family} · {m.variants} versiones</span>
              <span>Ver todas <Arr /></span>
            </div>
          </div>
        ))}
      </div>
    </Reveal>
  );
}

function FeaturedSection({ showPrices, cardStyle }) {
  const goCatalog = () => window.__davasRoute?.openCatalog();
  const railRef = React.useRef(null);
  const [canLeft, setCanLeft] = useState(false);
  const [canRight, setCanRight] = useState(true);

  const updateArrows = () => {
    const el = railRef.current;
    if (!el) return;
    setCanLeft(el.scrollLeft > 8);
    setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 8);
  };

  React.useEffect(() => {
    updateArrows();
    const el = railRef.current;
    if (!el) return;
    el.addEventListener("scroll", updateArrows, { passive: true });
    window.addEventListener("resize", updateArrows);
    return () => { el.removeEventListener("scroll", updateArrows); window.removeEventListener("resize", updateArrows); };
  }, []);

  const scrollBy = (dir) => {
    const el = railRef.current;
    if (!el) return;
    const card = el.querySelector(".feat-card");
    const step = card ? card.offsetWidth + 24 : 360;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <Reveal as="section" className="featured-carousel">
      <div className="section-head">
        <div>
          <Eyebrow>La colección</Eyebrow>
          <h2>Piezas que<br /><em>se eligen así.</em></h2>
        </div>
        <div className="right">
          <p>Una muestra de lo que se está tejiendo ahora. Cada pieza, un patrón distinto — toca para ver el resto.</p>
          <button className="btn line" style={{ alignSelf: "flex-start" }} onClick={goCatalog}>Ver el catálogo completo <Arr /></button>
        </div>
      </div>

      <div className="feat-rail-wrap">
        <div className="feat-rail" ref={railRef}>
          {FEATURED.map((p, i) => (
            <div className="feat-card" key={p.id} onClick={() => window.__davasRoute?.openFicha(p.id)}>
              <div className="feat-num">N°. {String(i + 1).padStart(2, "0")}</div>
              <div className="feat-img">
                {p.photo ? (
                  <img src={p.photo} alt={p.name} loading="lazy" />
                ) : (
                  <Placeholder ratio="auto" tone={p.tone} label={`/ASSETS/PROD-${p.id.toUpperCase()}.JPG`} fill />
                )}
                <FeatHeart p={p} />
              </div>
              <div className="feat-info">
                <h4>{p.name}</h4>
                <div className="feat-meta">
                  <span>{p.pattern || p.family}</span>
                  {showPrices && p.price ? <span className="feat-price">$ {p.price}</span> : null}
                </div>
              </div>
            </div>
          ))}
          <div className="feat-card feat-cta" onClick={goCatalog}>
            <div className="feat-cta-inner">
              <span className="feat-cta-num">+{Math.max((window.CATALOGO||[]).length - FEATURED.length, 0)}</span>
              <span className="feat-cta-label">piezas más<br/>en el catálogo</span>
              <span className="feat-cta-arr">Ver todo <Arr /></span>
            </div>
          </div>
        </div>

        <button className={`feat-nav prev ${canLeft ? "" : "is-hidden"}`} onClick={() => scrollBy(-1)} aria-label="Anteriores">‹</button>
        <button className={`feat-nav next ${canRight ? "" : "is-hidden"}`} onClick={() => scrollBy(1)} aria-label="Siguientes">›</button>
      </div>
    </Reveal>
  );
}

function FeatHeart({ p }) {
  const wl = useWishlist();
  const isOn = wl.has(p.id);
  return (
    <button
      className={`heart ${isOn ? "is-on" : ""}`}
      aria-label={isOn ? "Quitar de mis piezas" : "Guardar"}
      onClick={(e) => { e.stopPropagation(); wl.toggle({ id: p.id, name: p.name, family: p.family, pattern: p.pattern, price: p.price, tone: p.tone }); }}
    >
      <HeartIcon filled={isOn} size={15} stroke={isOn ? "var(--bone)" : "var(--ink)"} />
    </button>
  );
}

function ClientesSection() {
  const goClientes = () => window.__davasRoute?.setPage("clientes");
  return (
    <Reveal as="section" className="clientes tight">
      <div className="section-head">
        <div>
          <Eyebrow>04 · Sillas en su ambiente</Eyebrow>
          <h2><em>Cinco</em> piezas,<br />cinco casas.</h2>
        </div>
        <div className="right">
          <p>Fotos reales de clientes DAVA'S. Cada pieza tejida a mano, cada espacio único.
          Así se ven nuestros muebles donde de verdad importa — en tu casa.</p>
          <button className="btn line" style={{ alignSelf: "flex-start" }} onClick={goClientes}>Ver toda la galería <Arr /></button>
        </div>
      </div>
      <div className="carousel">
        {CLIENTES.map((c, i) => (
          <div className="cli-card" key={c.id}>
            <div className="photo">
              {c.photo ? (
                <img src={c.photo} alt={c.caption} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "inherit" }} />
              ) : (
                <Placeholder ratio="auto" tone={c.tone} label={`/ASSETS/CLIENTE-${c.id.toUpperCase()}.JPG`} corner={c.by} fill />
              )}
            </div>
            <div className="top-row">
              <span>C / {String(i + 1).padStart(2, "0")}</span>
              <span>{c.by}</span>
            </div>
            <p>{c.caption}</p>
            <div className="pn">
              <span className="link">{c.product} <Arr /></span>
            </div>
          </div>
        ))}
      </div>
    </Reveal>
  );
}

function TallerTease({ setPage }) {
  return (
    <Reveal as="section" className="taller-tease" style={{ padding: undefined }}>
      <div className="left">
        <Eyebrow onDark accent="var(--mostaza)">05 · El Taller</Eyebrow>
        <h2 style={{ marginTop: 14 }}>No tenemos bodega.<br />Tenemos <em>manos</em>.</h2>
        <p>
          Tu pieza se empieza a tejer cuando tú la pides. Hilo, madera, tiempo —
          y un taller listo para cumplirte en quince días.
        </p>
        <div className="ctas">
          <button className="btn line on-dark" onClick={() => setPage("taller")}>
            Entrar al taller
            <Arr />
          </button>
          <button className="btn line on-dark">Materiales y oficio</button>
        </div>
      </div>
      <div className="photos">
        <div className="taller-photo">
          <img src="assets/casas/taller-artesanos.jpg" alt="Artesanos DAVA'S trabajando en el taller" loading="lazy" />
        </div>
        <div className="taller-photo">
          <img src="assets/casas/taller-showroom.jpg" alt="Showroom DAVA'S — piezas en exhibición" loading="lazy" />
        </div>
      </div>
    </Reveal>
  );
}

function ShowroomCursosSection() {
  return (
    <Reveal as="section" className="showroom-cursos">
      <div className="sc-head">
        <div>
          <Eyebrow>06 · Showroom + Cursos</Eyebrow>
          <h2>Conócelas<br /><em>en persona</em>.</h2>
        </div>
        <div className="right">
          <p>El showroom es sala de ventas con cita: la piezas en tamaño real, el peso del hilo en la mano,
          la madera que no se ve en foto.</p>
          <p>Y desde 2026, cursos para aprender a tejer con nosotros — módulos pagos, cupos pequeños.</p>
        </div>
      </div>
      <div className="sc-grid">
        <div className="showroom-card">
          <img src="assets/casas/showroom-bogota.jpg" alt="Showroom DAVA'S Bogotá" loading="lazy" className="showroom-bg" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", zIndex: 0 }} />
          <div className="top">
            <span>· 01</span>
            <span>SHOWROOM</span>
          </div>
          <div>
            <h3>Bogotá</h3>
            <div className="addr">Cra 21 · 49 — 13 · Bogotá</div>
            <div className="ctas">
              <button className="btn bone">Agendar visita <Arr /></button>
              <a className="btn line on-dark" href="https://wa.me/573005260637" target="_blank" rel="noopener">Pregunta por WhatsApp</a>
            </div>
          </div>
        </div>

        <div className="cursos-stack">
          <div style={{ background: "var(--paper)", borderRadius: 16, padding: "clamp(24px, 4vw, 40px)", display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="mono" style={{ color: "var(--ink-mute)" }}>CURSOS DE TEJIDO</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 300, fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.1 }}>Aprende a tejer<br /><em>con nosotros</em>.</h3>
            <p style={{ maxWidth: "42ch", lineHeight: 1.6 }}>
              Módulos desde iniciación hasta patrón diamante. Cupos pequeños, en el taller de Bogotá.
              Te llevas tu pieza terminada.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 8 }}>
              <a className="btn wa" href={waLink("Hola DAVA'S, me interesan los cursos de tejido. ¿Me cuentan fechas y disponibilidad?")} target="_blank" rel="noopener">
                Preguntar por WhatsApp <Arr />
              </a>
            </div>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function WhatsAppBand() {
  return (
    <Reveal as="section" className="wa-band">
      <div className="left">
        <Eyebrow onDark accent="var(--whatsapp)">07 · WhatsApp · canal directo</Eyebrow>
        <h2 style={{ marginTop: 16 }}>El cierre<br /><em>es por chat</em>.</h2>
      </div>
      <div className="right">
        <p>No hay carrito ni pasarela: los pedidos se confirman por WhatsApp, una conversación con quien hace tu pieza. Te respondemos en horas hábiles.</p>
        <div className="ctas">
          <a className="btn wa lg" href="https://wa.me/573005260637" target="_blank" rel="noopener">Abrir WhatsApp · 300 526 0637 <Arr /></a>
        </div>
        <div className="stats">
          <div><div className="v">~ 15 d</div><div className="k">Producción a pedido</div></div>
          <div><div className="v">72k</div><div className="k">@artedavas en IG</div></div>
          <div><div className="v">2014</div><div className="k">Año uno del taller</div></div>
        </div>
      </div>
    </Reveal>
  );
}

function NewsletterBand() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="newsletter">
      <div className="row">
        <div>
          <Eyebrow>09 · Diario del taller</Eyebrow>
          <h3 style={{ marginTop: 12 }}>Una nota al mes —<br />nuevas piezas y fechas de cursos.</h3>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}>
          {sent ? (
            <span className="mono" style={{ padding: "14px 0" }}>· LISTO. TE ESCRIBIMOS PRONTO.</span>
          ) : (
            <>
              <input
                type="email"
                placeholder="tu correo"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <button type="submit" className="btn line">Suscribirme <Arr /></button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function InstaStrip() {
  return (
    <section className="insta">
      <div className="head">
        <div>
          <Eyebrow>08 · Redes</Eyebrow>
          <h3 style={{ marginTop: 12 }}><em>@artedavas</em></h3>
        </div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a className="btn line" href="https://instagram.com/artedavas" target="_blank" rel="noopener">Instagram <Arr /></a>
          <a className="btn line" href="https://tiktok.com/@artedavas" target="_blank" rel="noopener">TikTok <Arr /></a>
        </div>
      </div>
      <div className="grid">
        {CLIENTES.filter(c => c.photo).slice(0, 5).map((c, i) => {
          const labels = ["IG · POST", "TT · REEL", "IG · REEL", "IG · POST", "TT · REEL"];
          return (
            <a className="tile" key={i} href="https://instagram.com/artedavas" target="_blank" rel="noopener">
              <img src={c.photo} alt={c.by} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <div className="pin">{labels[i]} → @artedavas</div>
            </a>
          );
        })}
        <a className="tile tile-cta" href="https://instagram.com/artedavas" target="_blank" rel="noopener" style={{ display: "flex", alignItems: "center", justifyContent: "center", background: "var(--ink)", color: "var(--bone)", textDecoration: "none" }}>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1 }}>Síguenos</div>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 8, opacity: 0.7 }}>@artedavas</div>
          </div>
        </a>
      </div>
    </section>
  );
}

function Footer({ setPage }) {
  const go  = (p) => () => window.__davasRoute?.setPage(p);
  const cat = (id) => () => window.__davasRoute?.openCategoria(id);
  const WA  = "https://wa.me/573005260637";
  const isMob = typeof window !== "undefined" && window.innerWidth < 760;

  const catItems = [
    <button onClick={cat("mecedoras")}>Mecedoras</button>,
    <button onClick={cat("sillas")}>Sillas</button>,
    <button onClick={cat("comedores")}>Comedores</button>,
    <button onClick={cat("combos")}>Juegos</button>,
    <button onClick={cat("mesas")}>Mesas</button>,
    <button onClick={cat("sofas")}>Sofás</button>,
    <button onClick={cat("percheros")}>Percheros</button>,
    <button onClick={cat("bancas")}>Bancas</button>,
  ];
  const nosotrosItems = [
    <button onClick={go("taller")}>El Taller</button>,
    <button onClick={go("showroom")}>Showroom · Bogotá</button>,
    <button onClick={go("cursos")}>Cursos de tejido</button>,
    <button onClick={go("clientes")}>Clientes felices</button>,
  ];
  const contactoItems = [
    <a href={WA} target="_blank" rel="noopener">WhatsApp</a>,
    <a href="mailto:ventas@artedavas.com">ventas@artedavas.com</a>,
    <a href="https://instagram.com/artedavas" target="_blank" rel="noopener">@artedavas</a>,
    <a href="https://tiktok.com/@artedavas" target="_blank" rel="noopener">TikTok</a>,
  ];

  // Desktop: columna clásica (título fijo + lista). Mobile: acordeón nativo,
  // colapsado por defecto — nada de parrillas de 15 links apretadas.
  const FooterCol = ({ title, items }) => {
    if (!isMob) {
      return (
        <div className="fp2-col">
          <h4>{title}</h4>
          <ul>{items.map((it, i) => <li key={i}>{it}</li>)}</ul>
        </div>
      );
    }
    return (
      <details className="fp2-acc">
        <summary>{title}<span className="fp2-acc-arrow">⌄</span></summary>
        <ul>{items.map((it, i) => <li key={i}>{it}</li>)}</ul>
      </details>
    );
  };

  return (
    <footer style={{ background: "#1b1813", color: "rgba(247,242,234,.75)", fontFamily: "Inter,sans-serif" }}>
      <style>{`
        .fp2 { padding: clamp(48px,6vw,80px) clamp(24px,5vw,72px) 0; }
        .fp2-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,4vw,56px); padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid rgba(247,242,234,.1); }
        .fp2-col h4 { font-family:var(--f-display,'Fraunces',serif); font-weight:400; font-style:italic; font-size:16px; color:#F7F2EA; margin:0 0 16px; }
        .fp2-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
        .fp2-col ul li a, .fp2-col ul li button { font-size:13px; color:rgba(247,242,234,.6); cursor:pointer; background:none; border:none; padding:0; text-decoration:none; text-align:left; transition:color .2s; }
        .fp2-col ul li a:hover, .fp2-col ul li button:hover { color:#F7F2EA; }
        .fp2-brand p { font-size:13.5px; line-height:1.7; color:rgba(247,242,234,.55); max-width:26ch; margin:16px 0 24px; }
        .fp2-wa { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; font-size:13px; font-weight:600; padding:11px 20px; border-radius:24px; text-decoration:none; transition:background .2s; }
        .fp2-wa:hover { background:#1dbd57; }
        .fp2-bot { padding:20px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:11.5px; color:rgba(247,242,234,.35); letter-spacing:.05em; }
        /* Acordeón mobile — reemplaza la parrilla de 2 columnas apretada */
        .fp2-acc { border-top:1px solid rgba(247,242,234,.1); padding:16px 0; }
        .fp2-acc summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-family:var(--f-display,'Fraunces',serif); font-weight:400; font-style:italic; font-size:16px; color:#F7F2EA; }
        .fp2-acc summary::-webkit-details-marker { display:none; }
        .fp2-acc-arrow { font-size:16px; color:rgba(247,242,234,.5); transition:transform .25s; line-height:1; }
        .fp2-acc[open] .fp2-acc-arrow { transform:rotate(180deg); }
        .fp2-acc ul { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
        .fp2-acc ul li a, .fp2-acc ul li button { font-size:13.5px; color:rgba(247,242,234,.65); cursor:pointer; background:none; border:none; padding:0; text-decoration:none; text-align:left; }
        .fp2-acc ul li a:hover, .fp2-acc ul li button:hover { color:#F7F2EA; }
        @media(max-width:759px){
          .fp2-top { display:block; }
          .fp2-brand { margin-bottom:8px; }
        }
      `}</style>

      <div className="fp2">
        <div className="fp2-top">
          {/* Brand */}
          <div className="fp2-col fp2-brand">
            <img src="logo-blanco.png" alt="DAVA'S Arte & Diseño"
              style={{ height: 64, width: "auto", display: "block", opacity: .95 }}
              onError={e => { e.target.outerHTML = "<span style='font-family:var(--f-display);font-style:italic;font-size:24px;color:#F7F2EA'>DAVA'S</span>"; }} />
            <p>Muebles tejidos a mano sobre hierro y madera noble. Taller en Bogotá desde 2014.</p>
            <a className="fp2-wa" href={WA} target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 32 32" fill="currentColor"><path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.66 6.33L3 29l6.85-1.63A13 13 0 0016 29c7.18 0 13-5.82 13-13S23.18 3 16 3z"/><path d="M21.5 18.9c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.47-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.63-.93-2.23-.24-.58-.49-.5-.68-.51l-.58-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.47s1.07 2.86 1.21 3.06c.15.2 2.1 3.2 5.09 4.49.71.3 1.27.49 1.7.62.71.22 1.36.19 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.19-.57-.34z" fill="#25D366"/></svg>
              300 526 0637
            </a>
          </div>

          <FooterCol title="Catálogo" items={catItems} />
          <FooterCol title="Nosotros" items={nosotrosItems} />
          <FooterCol title="Contacto" items={contactoItems} />
        </div>

        <div className="fp2-bot">
          <span>© DAVA'S {new Date().getFullYear()} · Arte & Diseño · Colombia</span>
          <span>Hecho a mano en Bogotá</span>
        </div>
      </div>
    </footer>
  );
}

function Home({ setPage, showPrices, cardStyle }) {
  return (
    <>
      <OficioSection />
      <HeroPortadaPolaroid setPage={setPage} />
      <CategoriesSection />
      <AMedidaSection />
      <TejidosSection />
      <ClientesSection />
      <ShowroomCursosSection />
      <WhatsAppBand />
      <NewsletterBand />
      <Footer setPage={setPage} />
    </>
  );
}

window.Home = Home;
window.HomeFooter = Footer;