/* 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 ───── */

function CategoriesSection() {
  const goCat = (id) => window.__davasRoute?.openCategoria(id);
  const goAll = () => window.__davasRoute?.openCatalog();
  const totalProductos = (window.CATALOGO || []).length;
  return (
    <Reveal as="section" className="tight">
      <div className="section-head">
        <div>
          <Eyebrow>01 · El catálogo · {totalProductos} piezas</Eyebrow>
          <h2>Cada pieza,<br /><em>su lugar</em>.</h2>
        </div>
        <div className="right">
          <p>El catálogo entero, organizado como se piensa en taller: por familia, por uso, por patrón.
          Toca cualquier categoría para explorar.</p>
          <button className="btn line" style={{ alignSelf: "flex-start" }} onClick={goAll}>Ver el catálogo completo <Arr /></button>
        </div>
      </div>
      <div className="cats">
        {CATEGORIES.map((c, i) => (
          <div className={`cat ${c.cls}`} key={c.id} onClick={() => goCat(c.id)}>
            <Placeholder ratio="auto" tone={c.tone} label={c.photo || `/ASSETS/CAT-${c.id.toUpperCase()}.JPG`} corner={c.name} fill />
            <div className="num">N°. {String(i + 1).padStart(2, "0")}</div>
            <div className="meta">
              <h3>{c.name}</h3>
              <span className="count">{c.count} piezas →</span>
            </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();
  return (
    <Reveal as="section" className="tight">
      <div className="section-head">
        <div>
          <Eyebrow>03 · Esta semana</Eyebrow>
          <h2>Esta semana<br /><em>en taller</em>.</h2>
        </div>
        <div className="right">
          <p>Cada semana cambia. Las piezas que estamos tejiendo, las que acaban de salir, las que se están armando. Lo que ves acá es producción real.</p>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn line" onClick={goCatalog}>Ver el catálogo completo</button>
            <a className="btn wa" href="https://wa.me/573005260637" target="_blank" rel="noopener">WhatsApp</a>
          </div>
        </div>
      </div>
      <div className="rail-4">
        {FEATURED.map((p) => (
          <ProductCard key={p.id} p={p} style={cardStyle} showPrices={showPrices} />
        ))}
      </div>
    </Reveal>
  );
}

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á<br /><span style={{ fontStyle: "normal", fontFamily: "var(--f-mono)", fontSize: 14, letterSpacing: "0.16em", opacity: 0.85 }}>+ Barranquilla</span></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 goCat = (id) => () => window.__davasRoute?.openCategoria(id);
  return (
    <footer className="fp">
      <div className="mark">
        <img src="logo.png" alt="DAVA'S" style={{ height: 70, width: "auto", display: "block", filter: "brightness(0) invert(1)", marginBottom: 8 }} />
        <sup className="sup">est. mmxiv</sup>
      </div>
      <div className="top">
        <div>
          <p className="pitch">
            Arte & Diseño · Colombia. Muebles tejidos a mano sobre teca, pino y hierro.
            Cada pieza, hecha a pedido en taller propio. Sin bodega y sin atajos.
          </p>
        </div>
        <div>
          <h4>Catálogo</h4>
          <ul>
            <li><a onClick={goCat("sillas")}>Sillas</a></li>
            <li><a onClick={goCat("mecedoras")}>Mecedoras</a></li>
            <li><a onClick={goCat("comedores")}>Comedores</a></li>
            <li><a onClick={goCat("sofas")}>Sofás</a></li>
            <li><a onClick={goCat("percheros")}>Percheros</a></li>
            <li><a onClick={goCat("combos")}>Combos</a></li>
          </ul>
        </div>
        <div>
          <h4>Showrooms</h4>
          <ul>
            <li><a onClick={go("showroom")}>Bogotá · Cra 21 #49-13</a></li>
            <li><a onClick={go("showroom")}>Barranquilla</a></li>
            <li><a onClick={go("showroom")}>Visitas con cita previa</a></li>
            <li><a onClick={go("cursos")}>Cursos de tejido</a></li>
          </ul>
        </div>
        <div>
          <h4>Conversemos</h4>
          <ul>
            <li><a href="https://wa.me/573005260637">WhatsApp · 300 526 0637</a></li>
            <li><a href="mailto:ventas@artedavas.com">ventas@artedavas.com</a></li>
            <li><a href="https://instagram.com/artedavas">Instagram · @artedavas</a></li>
            <li><a href="https://tiktok.com/@artedavas">TikTok · @artedavas</a></li>
            <li><a onClick={go("taller")}>El Taller</a></li>
          </ul>
        </div>
      </div>
      <div className="bot">
        <span>© DAVA'S MMXXVI · hecho a mano en Colombia</span>
        <span>Arte & Diseño · Bogotá · Barranquilla</span>
      </div>
    </footer>
  );
}

function Home({ setPage, showPrices, cardStyle }) {
  return (
    <>
      <CategoriesSection />
      <FeaturedSection showPrices={showPrices} cardStyle={cardStyle} />
      <ClientesSection />
      <TallerTease setPage={setPage} />
      <ShowroomCursosSection />
      <WhatsAppBand />
      <InstaStrip />
      <NewsletterBand />
      <Footer setPage={setPage} />
    </>
  );
}

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