// components.jsx — Tienda Padel home (e-commerce clásico optimizado)
const { useState, useEffect, useRef, useMemo } = React;

// ───────── Iconos ─────────
const Icon = {
  Search: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  Bag: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 8h14l-1 12H6L5 8Z"/><path d="M9 8a3 3 0 0 1 6 0"/></svg>,
  User: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1-4 4.5-5.5 7-5.5S18 16 19 20"/></svg>,
  Heart: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z"/></svg>,
  Phone: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 4h4l2 5-3 2c1.5 3 3.5 5 6.5 6.5l2-3 5 2v4a2 2 0 0 1-2 2C9 22 2 15 2 6a2 2 0 0 1 2-2Z"/></svg>,
  Truck: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M2 7h11v9H2zM13 10h5l3 3v3h-8z"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>,
  Shield: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5l-8-3Z"/></svg>,
  Return: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>,
  Card: (p) => <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="2" y="6" width="20" height="13" rx="2"/><path d="M2 10h20M6 15h4"/></svg>,
  Chevron: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="m6 9 6 6 6-6"/></svg>,
  Arrow: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14m-5-5 5 5-5 5"/></svg>,
  Star: (p) => <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" {...p}><path d="m12 2 2.6 6.6L22 9.3l-5.6 4.6L18.2 22 12 18l-6.2 4 1.8-8.1L2 9.3l7.4-.7L12 2Z"/></svg>,
  Plus: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" {...p}><path d="m5 12 5 5 9-11"/></svg>,
  Menu: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>,
  Mail: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>,
};

// ───────── Favoritos (localStorage, sincronizado entre páginas/pestañas) ─────────
const FAV_PAGE = "/?page_id=11062";
const FAV_KEY  = "top_favs";
const Fav = {
  list() { try { return JSON.parse(localStorage.getItem(FAV_KEY) || "[]").map(Number); } catch (e) { return []; } },
  has(id) { return Fav.list().includes(Number(id)); },
  toggle(id) {
    id = Number(id);
    const l = Fav.list();
    const i = l.indexOf(id);
    if (i >= 0) l.splice(i, 1); else l.push(id);
    localStorage.setItem(FAV_KEY, JSON.stringify(l));
    window.dispatchEvent(new CustomEvent("favchange", { detail: l }));
    return l;
  },
  count() { return Fav.list().length; },
};
function useFavSync(read) {
  const [val, setVal] = useState(read);
  useEffect(() => {
    const h = () => setVal(read());
    window.addEventListener("favchange", h);
    window.addEventListener("storage", h); // sincroniza entre pestañas
    return () => { window.removeEventListener("favchange", h); window.removeEventListener("storage", h); };
  }, []);
  return val;
}
const useFavCount = () => useFavSync(() => Fav.count());
function FavButton({ id, className = "pc-fav" }) {
  const on = useFavSync(() => Fav.has(id));
  const toggle = (e) => { if (e) { e.preventDefault(); e.stopPropagation(); } Fav.toggle(id); };
  return (
    <button type="button"
      className={className + (on ? " is-fav" : "")}
      aria-label={on ? "Quitar de favoritos" : "Añadir a favoritos"}
      aria-pressed={on}
      onClick={toggle}>
      <Icon.Heart/>
    </button>
  );
}

// ───────── Carrito REAL (WooCommerce Store API) ─────────
const CART_PAGE     = "/carrito/";
const CHECKOUT_PAGE = "/checkout/";
const STORE_API     = "/wp-json/wc/store/v1";

function fmtMinor(value, minor) {
  const div = Math.pow(10, (minor == null ? 2 : minor));
  return (Number(value || 0) / div).toFixed(2).replace(".", ",") + " €";
}

const Cart = {
  _nonce: null,
  _grabNonce(res) {
    const n = res.headers.get("Nonce") || res.headers.get("X-WC-Store-API-Nonce");
    if (n) Cart._nonce = n;
  },
  _broadcast(cart) {
    try { window.__tpCart = cart; window.dispatchEvent(new CustomEvent("cartchange", { detail: cart })); } catch (e) {}
  },
  async get() {
    const res = await fetch(`${STORE_API}/cart`, { credentials: "same-origin", headers: { "Accept": "application/json" } });
    Cart._grabNonce(res);
    const cart = await res.json();
    Cart._broadcast(cart);
    return cart;
  },
  async _ensureNonce() {
    if (!Cart._nonce) await Cart.get();
    return Cart._nonce;
  },
  async add(id, quantity = 1) {
    await Cart._ensureNonce();
    const res = await fetch(`${STORE_API}/cart/add-item`, {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/json", "Accept": "application/json", "Nonce": Cart._nonce || "" },
      body: JSON.stringify({ id: Number(id), quantity }),
    });
    Cart._grabNonce(res);
    if (!res.ok) { const e = await res.json().catch(() => ({})); throw new Error(e.message || ("Error " + res.status)); }
    const cart = await res.json();
    Cart._broadcast(cart);
    return cart;
  },
  async removeItem(key) {
    await Cart._ensureNonce();
    const res = await fetch(`${STORE_API}/cart/remove-item`, {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/json", "Accept": "application/json", "Nonce": Cart._nonce || "" },
      body: JSON.stringify({ key }),
    });
    Cart._grabNonce(res);
    const cart = await res.json();
    Cart._broadcast(cart);
    return cart;
  },
};

// Hook: estado del carrito (se hidrata una vez y escucha "cartchange")
function useCart() {
  const [cart, setCart] = useState(() => (typeof window !== "undefined" ? window.__tpCart : null) || null);
  useEffect(() => {
    const h = (e) => setCart(e.detail || window.__tpCart || null);
    window.addEventListener("cartchange", h);
    if (!window.__tpCart) Cart.get().catch(() => {});
    return () => window.removeEventListener("cartchange", h);
  }, []);
  return cart;
}

// Función global: añadir al carrito desde cualquier tarjeta/ficha + abrir drawer.
// Usa el endpoint AJAX de WooCommerce (maneja productos simples Y variables igual que
// el "add to cart" nativo); luego refresca el carrito vía Store API y abre el drawer.
// opts: { quantity, variation_id, attributes: { "attribute_pa_color": "rojo", ... } }
window.tpAddToCart = async function (id, btn, opts) {
  opts = opts || {};
  try {
    if (btn) { btn.classList.add("is-loading"); btn.disabled = true; }
    const body = new URLSearchParams();
    body.set("product_id", id);
    body.set("quantity", opts.quantity || 1);
    if (opts.variation_id) body.set("variation_id", opts.variation_id);
    if (opts.attributes) for (const k in opts.attributes) { if (opts.attributes[k]) body.set(k, opts.attributes[k]); }
    const res = await fetch("/?wc-ajax=add_to_cart", {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
      body: body.toString(),
    });
    const data = await res.json().catch(() => null);
    // Producto variable sin opciones elegidas → WooCommerce pide ir a la ficha
    if (data && data.error && data.product_url) { window.location.href = data.product_url; return; }
    await Cart.get();   // refresca badge + drawer (misma sesión)
    window.dispatchEvent(new CustomEvent("cartopen"));
  } catch (e) {
    console.warn("[Cart] add:", e.message);
    alert("No se pudo añadir al carrito.");
  } finally {
    if (btn) { btn.classList.remove("is-loading"); btn.disabled = false; }
  }
};

// ───────── Drawer lateral del carrito ─────────
function CartDrawer() {
  const cart = useCart();
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const openH = () => setOpen(true);
    window.addEventListener("cartopen", openH);
    return () => window.removeEventListener("cartopen", openH);
  }, []);
  useEffect(() => {
    const esc = (e) => { if (e.key === "Escape") setOpen(false); };
    if (open) document.addEventListener("keydown", esc);
    return () => document.removeEventListener("keydown", esc);
  }, [open]);

  const items = (cart && cart.items) || [];
  const minor = cart && cart.totals ? cart.totals.currency_minor_unit : 2;
  const count = cart ? cart.items_count : 0;
  const subtotal = cart && cart.totals ? cart.totals.total_items : 0;

  return (
    <>
      <div className={`cart-drawer-ov ${open ? "is-open" : ""}`} onClick={() => setOpen(false)} aria-hidden="true"/>
      <aside className={`cart-drawer ${open ? "is-open" : ""}`} role="dialog" aria-label="Tu cesta" aria-modal="true">
        <div className="cart-drawer-head">
          <h3>Tu cesta {count > 0 && <span>({count})</span>}</h3>
          <button className="cart-drawer-x" aria-label="Cerrar" onClick={() => setOpen(false)}>
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 6 12 12M18 6 6 18"/></svg>
          </button>
        </div>
        <div className="cart-drawer-body">
          {!cart && <div className="cart-drawer-empty"><div className="spinner"/></div>}
          {cart && items.length === 0 && (
            <div className="cart-drawer-empty">
              <Icon.Bag/>
              <p>Tu cesta está vacía.</p>
              <a href="/tienda/" className="btn btn-primary" onClick={() => setOpen(false)}>Ver productos <Icon.Arrow/></a>
            </div>
          )}
          {cart && items.length > 0 && items.map((it) => (
            <div className="cart-line" key={it.key}>
              <div className="cart-line-img">
                {it.images && it.images[0] && <img src={it.images[0].thumbnail || it.images[0].src} alt={it.name} loading="lazy"/>}
              </div>
              <div className="cart-line-info">
                <span className="cart-line-name" dangerouslySetInnerHTML={{ __html: it.name }}/>
                <span className="cart-line-meta">{it.quantity} × {fmtMinor(it.prices && it.prices.price, it.prices && it.prices.currency_minor_unit)}</span>
              </div>
              <button className="cart-line-del" aria-label="Quitar" onClick={() => Cart.removeItem(it.key).catch(() => {})}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>
              </button>
            </div>
          ))}
        </div>
        {cart && items.length > 0 && (
          <div className="cart-drawer-foot">
            <div className="cart-drawer-sub"><span>Subtotal</span><b>{fmtMinor(subtotal, minor)}</b></div>
            <a href={CART_PAGE} className="btn btn-ghost">Ver cesta</a>
            <a href={CHECKOUT_PAGE} className="btn btn-primary">Finalizar compra <Icon.Arrow/></a>
          </div>
        )}
      </aside>
    </>
  );
}

// ───────── Pala SVG ─────────
function PalaSVG({ tone = "lime", n = "01" }) {
  const tones = {
    lime:    { a: "#D9FF3C", b: "#7BE000", g: "#0a3a00" },
    emerald: { a: "#3CFFA9", b: "#00B570", g: "#003322" },
    deep:    { a: "#0E3A1F", b: "#08210F", g: "#0a1a0d" },
    cream:   { a: "#F1EBDA", b: "#D9CFB6", g: "#3a3520" },
    black:   { a: "#1f1f1f", b: "#000000", g: "#222" },
    blue:    { a: "#3CC4FF", b: "#0066B5", g: "#001a33" },
    red:     { a: "#FF5C5C", b: "#B50000", g: "#330000" },
    yellow:  { a: "#FFE03C", b: "#E0A800", g: "#332000" },
  };
  const t = tones[tone] || tones.lime;
  const id = `${tone}-${n}`;
  return (
    <svg viewBox="0 0 200 280" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id={`pg-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={t.a}/>
          <stop offset="100%" stopColor={t.b}/>
        </linearGradient>
        <pattern id={`dot-${id}`} width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="0.9" fill={t.g} opacity="0.3"/>
        </pattern>
      </defs>
      <rect x="92" y="200" width="16" height="62" rx="6" fill="#0a0a0a"/>
      <rect x="88" y="258" width="24" height="8" rx="3" fill="#1a1a1a"/>
      <path d="M85 195 Q100 180 115 195" stroke="#0a0a0a" strokeWidth="3" fill="none"/>
      <path d="M100 12 C 158 12, 184 56, 184 110 C 184 160, 154 200, 100 200 C 46 200, 16 160, 16 110 C 16 56, 42 12, 100 12 Z" fill={`url(#pg-${id})`}/>
      <path d="M100 12 C 158 12, 184 56, 184 110 C 184 160, 154 200, 100 200 C 46 200, 16 160, 16 110 C 16 56, 42 12, 100 12 Z" fill={`url(#dot-${id})`}/>
      <text x="100" y="125" textAnchor="middle" fill={t.g} fontFamily="Inter Tight, sans-serif" fontSize="44" fontWeight="800" opacity="0.85">{n}</text>
    </svg>
  );
}

// ───────── Top bar avisos ─────────
// Wordmarks blancos (visibles sobre fondo negro) para el ticker
const KlarnaMark = () => (
  <svg viewBox="0 0 62 18" height="13" role="img" aria-label="Klarna" style={{ display: "inline-block", verticalAlign: "middle" }}>
    <text x="0" y="14" fontFamily="'Inter Tight', Arial, sans-serif" fontSize="16" fontWeight="800" letterSpacing="-0.4" fill="#fff">Klarna</text>
  </svg>
);
const PayPalMark = () => (
  <svg viewBox="0 0 58 18" height="13" role="img" aria-label="PayPal" style={{ display: "inline-block", verticalAlign: "middle" }}>
    <text x="0" y="14" fontFamily="Arial, Helvetica, sans-serif" fontSize="15.5" fontStyle="italic" fontWeight="700" letterSpacing="-0.3" fill="#fff">PayPal</text>
  </svg>
);

function TopBar() {
  const items = [
    "Envío GRATIS desde 40€",
    "Devoluciones 30 días",
    <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
      Fracciona tus pagos con <KlarnaMark/> <PayPalMark/>
    </span>,
  ];
  const [i, setI] = useState(0);
  const barRef = useRef(null);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % items.length), 3500);
    return () => clearInterval(id);
  }, []);
  // Mide la altura real de la franja negra y la expone como --tp-tbh para que
  // el header sticky se apile justo debajo (franja + menú ambos fijos al hacer scroll).
  useEffect(() => {
    const el = barRef.current;
    if (!el) return;
    const apply = () => document.documentElement.style.setProperty("--tp-tbh", el.offsetHeight + "px");
    apply();
    window.addEventListener("resize", apply);
    let ro;
    if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(apply); ro.observe(el); }
    return () => { window.removeEventListener("resize", apply); if (ro) ro.disconnect(); };
  }, []);
  return (
    <div className="topbar" ref={barRef}>
      <div className="topbar-inner">
        <div className="tb-left">
          <span className="tb-rotator" key={i}>· {items[i]}</span>
        </div>
        <div className="tb-right">
          <a href="tel:+34662655185"><Icon.Phone/> 662 655 185</a>
          <a href="/?page_id=11078">Tiendas físicas</a>
        </div>
      </div>
    </div>
  );
}

// ───────── Header ─────────
// `cat` = slug REAL de product_cat (no usar id como categoría: "ropa"/"calzado" no existen → caerían en palas)
// `cat` = slug REAL de product_cat → URL limpia /categoria-producto/<cat>/
const NAV_CATS = [
  { id: "palas",      cat: "palas",          label: "Palas",      href: "/categoria-producto/palas/", sub: ["Control", "Polivalentes", "Potencia", "Junior", "Edición limitada", "Por marca"] },
  { id: "ropa",       cat: "ropa-y-textil",  label: "Ropa",       href: "/categoria-producto/ropa-y-textil/", sub: ["Hombre", "Mujer", "Niños", "Camisetas", "Pantalones", "Sudaderas"] },
  { id: "calzado",    cat: "zapatillas",     label: "Calzado",    href: "/categoria-producto/zapatillas/", sub: ["Hombre", "Mujer", "Niños", "Pista dura", "Tierra batida", "Indoor"] },
  { id: "pelotas",    cat: "pelotas",        label: "Pelotas",    href: "/categoria-producto/pelotas/", sub: ["Pro", "Entreno", "Indoor", "Junior", "Por marca", "Pack ahorro"] },
  { id: "accesorios", cat: "accesorios",     label: "Accesorios", href: "/categoria-producto/accesorios/", sub: ["Mochilas", "Paleteros", "Grips", "Protectores", "Overgrips", "Termos"] },
  { id: "marcas",     label: "Marcas",       href: "/marcas/", solo: true },
  { id: "outlet",     label: "Outlet",       href: "/outlet/", solo: true, accent: true },
];

// Megamenú — destinos. El listado pre-aplica solo ?categoria=; las facetas extra son
// pistas (todo aterriza en una categoría relevante; ningún item queda en #).
const SLUGM = (s) => s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "")
  .replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
const NIVEL_SLUG = { "Iniciación": "iniciacion", "Intermedio": "intermedio", "Avanzado": "avanzado", "Competición": "competicion" };
function subHref(c, s) {
  if (c.id === "marcas") return "/marcas/";
  if (c.id === "outlet") return "/outlet/";
  return `/categoria-producto/${c.cat}/`;
}

function Header() {
  const [open, setOpen] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [search, setSearch] = useState("");
  const favCount = useFavCount();
  const cart = useCart();
  const cartCount = cart ? cart.items_count : 0;
  const cartTotal = cart && cart.totals ? fmtMinor(cart.totals.total_items, cart.totals.currency_minor_unit) : "0,00 €";
  // Rebote de la cesta del menú cuando aumenta la cantidad (feedback "se añadió").
  const bagRef = useRef(null);
  const prevCount = useRef(cartCount);
  useEffect(() => {
    const el = bagRef.current;
    if (el && cartCount > prevCount.current) {
      el.classList.remove("is-bump");
      void el.offsetWidth; // fuerza reflow para reiniciar la animación
      el.classList.add("is-bump");
      const t = setTimeout(() => el.classList.remove("is-bump"), 500);
      prevCount.current = cartCount;
      return () => clearTimeout(t);
    }
    prevCount.current = cartCount;
  }, [cartCount]);
  return (
    <header className="hd">
      <div className="hd-main">
        <button type="button" className="hd-burger" aria-label="Abrir menú" aria-expanded={menuOpen}
          onClick={() => setMenuOpen(true)}>
          <Icon.Menu/>
        </button>
        <a href="/?page_id=11032" className="hd-brand">
          <img className="hd-logo-img"
               src="https://tiendaonlinepadel.es/wp-content/uploads/2025/09/new-logo-1.png"
               alt="Tienda Online Pádel"/>
        </a>
        {/* Buscador: Motive Commerce Search se engancha a `.hd-search` (MOTIVE_TRIGGER_SELECTOR)
            y abre su capa al hacer clic. Si Motive no estuviera activo, el form hace
            búsqueda nativa (/?s=) que Motive también enriquece en la página de resultados. */}
        <form className="hd-search" role="search" method="get" action="/">
          <Icon.Search/>
          <input
            type="search" name="s" placeholder="Buscar palas, ropa, marcas…"
            aria-label="Buscar productos"
            value={search} onChange={(e) => setSearch(e.target.value)}
          />
          <button type="submit" className="hd-search-btn">Buscar</button>
        </form>
        <div className="hd-actions">
          <a href="/mi-cuenta/" className="hd-act" aria-label="Mi cuenta">
            <Icon.User/>
            <span className="hd-act-label">Mi cuenta</span>
          </a>
          <a href={FAV_PAGE} className="hd-act" aria-label="Favoritos">
            <Icon.Heart/>
            <span className="hd-act-label">{favCount} {favCount === 1 ? "pieza" : "piezas"}</span>
          </a>
          <button type="button" className="hd-act hd-act-bag" aria-label="Abrir cesta" ref={bagRef}
            onClick={() => window.dispatchEvent(new CustomEvent("cartopen"))}>
            <span className="hd-bag-icon">
              <Icon.Bag/>
              {cartCount > 0 && <span className="hd-bag-num" key={cartCount}>{cartCount}</span>}
            </span>
            <span className="hd-act-label">{cartTotal}</span>
          </button>
        </div>
      </div>
      <nav className="hd-nav">
        <div className="hd-nav-inner">
          <a href="/tienda/" className="hd-cats-btn">
            <Icon.Menu/> Todas las categorías <Icon.Chevron/>
          </a>
          {NAV_CATS.map((c) => (
            c.solo ? (
              <a
                key={c.id}
                href={c.href}
                className={`hd-nav-link ${c.accent ? "is-accent" : ""}`}
              >{c.label}</a>
            ) : (
            <div
              key={c.id}
              className={`hd-nav-item ${c.accent ? "is-accent" : ""} ${open === c.id ? "is-open" : ""}`}
              onMouseEnter={() => setOpen(c.id)}
              onMouseLeave={() => setOpen(null)}
            >
              <a href={c.href || `#${c.id}`}>{c.label} <Icon.Chevron/></a>
              <div className="hd-mega">
                <div className="hd-mega-cols">
                  <div className="hd-mega-col">
                    <h4>{c.label}</h4>
                    <ul>
                      {c.sub.map((s) => <li key={s}><a href={subHref(c, s)}>{s}</a></li>)}
                    </ul>
                  </div>
                  <div className="hd-mega-col">
                    <h4>Por nivel</h4>
                    <ul>
                      {["Iniciación", "Intermedio", "Avanzado", "Competición"].map((n) => (
                        <li key={n}><a href={`/categoria-producto/${c.cat}/`}>{n}</a></li>
                      ))}
                    </ul>
                  </div>
                  <div className="hd-mega-promo">
                    <span className="hd-mega-tag">Destacado</span>
                    <h5>Nueva temporada<br/>2026</h5>
                    <p>Hasta -25% en selección de palas</p>
                    <a href={`/categoria-producto/${c.cat}/`} className="hd-mega-cta">Ver promoción <Icon.Arrow/></a>
                    <div className="hd-mega-img">
                      <PalaSVG tone="lime" n="26"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            )
          ))}
          <a href="/?page_id=11077" className="hd-nav-link">Blog</a>
        </div>
      </nav>
      <CartDrawer/>

      {/* ── Menú móvil (hamburguesa) ── */}
      <div className={`hd-mobile-ov ${menuOpen ? "is-open" : ""}`} onClick={() => setMenuOpen(false)} aria-hidden="true"/>
      <aside className={`hd-mobile ${menuOpen ? "is-open" : ""}`} role="dialog" aria-label="Menú" aria-modal="true">
        <div className="hd-mobile-head">
          <span className="hd-mobile-title">Menú</span>
          <button className="hd-mobile-x" aria-label="Cerrar menú" onClick={() => setMenuOpen(false)}>
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 6 12 12M18 6 6 18"/></svg>
          </button>
        </div>
        <form className="hd-mobile-search" role="search" method="get" action="/">
          <Icon.Search/>
          <input type="search" name="s" placeholder="Buscar palas, ropa, marcas…" aria-label="Buscar productos"/>
        </form>
        <nav className="hd-mobile-nav" onClick={() => setMenuOpen(false)}>
          <a href="/tienda/">Todas las categorías</a>
          {NAV_CATS.map((c) => (
            <a key={c.id} href={c.href} className={c.accent ? "is-accent" : ""}>{c.label}</a>
          ))}
          <a href="/?page_id=11077">Blog</a>
        </nav>
        <div className="hd-mobile-foot">
          <a href="/mi-cuenta/"><Icon.User/> Mi cuenta</a>
          <a href={FAV_PAGE}><Icon.Heart/> Favoritos ({favCount})</a>
        </div>
      </aside>
    </header>
  );
}

// ───────── Hero — slider de banners ─────────
const SLIDES = [
  {
    eyebrow: "Nueva temporada 2026",
    title: ["Tu juego.", "Tu pala.", "Tu pista."],
    text: "Más de 312 palas seleccionadas y testadas en pista por jugadores reales. Encuentra la tuya.",
    cta1: "Ver palas nuevas",
    cta2: "Encuentra tu pala",
    badge: "—25%",
    tone: "lime",
    grad: "main",
  },
  {
    eyebrow: "Ofertas especiales",
    title: ["Outlet", "hasta", "—40%"],
    text: "Stock anterior, mismo equipo. Palas, calzado y ropa con descuento real mientras dure el inventario.",
    cta1: "Ir al outlet",
    cta2: "Ver más vendidos",
    badge: "—40%",
    tone: "deep",
    grad: "deep",
  },
  {
    eyebrow: "Edición limitada",
    title: ["Hexa Pro", "24K Carbon"],
    text: "La pala que están usando los pros. Carbono 24K, EVA Soft, edición limitada de 500 unidades.",
    cta1: "Comprar 329€",
    cta2: "Ver ficha técnica",
    badge: "Pro",
    tone: "emerald",
    grad: "emerald",
  },
];

function Hero() {
  const [i, setI] = useState(0);
  const timerRef = useRef(null);
  useEffect(() => {
    timerRef.current = setInterval(() => setI((x) => (x + 1) % SLIDES.length), 6000);
    return () => clearInterval(timerRef.current);
  }, []);
  const goto = (n) => {
    setI(n);
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setI((x) => (x + 1) % SLIDES.length), 6000);
  };
  const s = SLIDES[i];

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className={`hero-slide hero-grad-${s.grad}`} key={i}>
        <div className="hero-text">
          <span className="hero-eyebrow">
            <span className="he-dot"/>
            {s.eyebrow}
          </span>
          <h1 className="hero-title">
            {s.title.map((t, idx) => (
              <span key={idx} className={idx === s.title.length - 1 ? "ht-accent" : ""}>{t}</span>
            ))}
          </h1>
          <p className="hero-sub">{s.text}</p>
          <div className="hero-cta">
            <a href="#palas" className="btn btn-primary">{s.cta1} <Icon.Arrow/></a>
            <a href="#quiz" className="btn btn-ghost-light">{s.cta2}</a>
          </div>
          <div className="hero-trust">
            <span><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/></span>
            <span><b>4.7/5</b> · Más de 22.400 reseñas verificadas</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-badge">{s.badge}</div>
          <div className="hero-pala">
            <PalaSVG tone={s.tone} n={String(i + 1).padStart(2, "0")}/>
          </div>
          <div className="hero-circle"/>
        </div>
      </div>

      <div className="hero-controls">
        <div className="hero-dots">
          {SLIDES.map((_, idx) => (
            <button key={idx} className={`hd-dot ${i === idx ? "is-on" : ""}`} onClick={() => goto(idx)} aria-label={`Slide ${idx + 1}`}/>
          ))}
        </div>
        <div className="hero-count">
          <b>{String(i + 1).padStart(2, "0")}</b>
          <span>/ {String(SLIDES.length).padStart(2, "0")}</span>
        </div>
      </div>

      {/* Trust bar */}
      <div className="trust-bar">
        <div><Icon.Truck/><span><b>Envío gratis</b> desde 40€</span></div>
        <div><Icon.Return/><span><b>30 días</b> para devolver</span></div>
        <div><Icon.Shield/><span><b>2 años</b> de garantía</span></div>
        <div><Icon.Card/><span><b>Pago en 3 plazos</b> sin intereses</span></div>
      </div>
    </section>
  );
}

// ───────── Categorías destacadas ─────────
const CATS = [
  { id: "palas",      label: "Palas",      n: 312, tone: "lime",    desc: "Control · Potencia · Polivalentes" },
  { id: "ropa",       label: "Ropa",       n: 184, tone: "emerald", desc: "Camisetas · Faldas · Sudaderas" },
  { id: "calzado",    label: "Calzado",    n:  76, tone: "deep",    desc: "Pista · Tierra · Indoor" },
  { id: "pelotas",    label: "Pelotas",    n:  29, tone: "yellow",  desc: "Pro · Entreno · Indoor" },
  { id: "accesorios", label: "Accesorios", n: 142, tone: "blue",    desc: "Mochilas · Grips · Protectores" },
];

function Categories() {
  return (
    <section className="cats" data-screen-label="02 Categorías">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sec-eyebrow">Compra por categoría</span>
            <h2 className="sec-title">Encuentra lo que necesitas</h2>
          </div>
          <a href="#" className="sec-link">Ver todas <Icon.Arrow/></a>
        </div>
        <div className="cats-grid">
          {CATS.map((c) => (
            <a key={c.id} href={`#${c.id}`} className={`cat cat--${c.tone}`}>
              <div className="cat-img">
                <PalaSVG tone={c.tone} n={String(c.n)}/>
              </div>
              <div className="cat-body">
                <h3>{c.label}</h3>
                <p>{c.desc}</p>
                <span className="cat-count">{c.n} productos</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Producto card ─────────
function ProductCard({ p }) {
  const discount = p.was ? Math.round((1 - p.price / p.was) * 100) : 0;
  return (
    <article className="pc">
      {p.tag && <span className={`pc-tag pc-tag--${p.tagTone || "green"}`}>{p.tag}</span>}
      {discount > 0 && <span className="pc-disc">−{discount}%</span>}
      <button className="pc-fav" aria-label="Añadir a favoritos"><Icon.Heart/></button>
      <a href="#" className="pc-img">
        <PalaSVG tone={p.tone} n={String(p.id).padStart(2, "0")}/>
      </a>
      <div className="pc-body">
        <span className="pc-brand">{p.brand}</span>
        <h3 className="pc-name">{p.name}</h3>
        <div className="pc-rating">
          <span className="pc-stars">
            <Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/>
          </span>
          <span className="pc-rev">({p.reviews})</span>
        </div>
        <div className="pc-price">
          <div>
            {p.was && <span className="pc-was">{p.was.toFixed(2)}€</span>}
            <span className="pc-now">{p.price.toFixed(2)}€</span>
          </div>
          <button className="pc-add" aria-label="Añadir al carrito">
            <Icon.Bag/>
          </button>
        </div>
      </div>
    </article>
  );
}

const PRODUCTS_BEST = [
  { id: 1, name: "Hexa Pro 24K",     brand: "Cancha Lab", price: 329, was: 379, tone: "lime",    tag: "Edición limitada", tagTone: "green", reviews: 248 },
  { id: 2, name: "Blackline CTRL",   brand: "Norte",      price: 269, was: null, tone: "emerald", tag: "Best seller",       tagTone: "lime",  reviews: 412 },
  { id: 3, name: "Viper Essential",  brand: "Pista 7",    price: 189, was: 219, tone: "deep",    tag: "Nuevo",             tagTone: "blue",  reviews: 156 },
  { id: 4, name: "Smash Tour",       brand: "Cancha Lab", price: 299, was: null, tone: "blue",    tag: "Pro player",        tagTone: "dark",  reviews: 89 },
  { id: 5, name: "Drive 03",         brand: "Atlas",      price: 159, was: 199, tone: "red",     tag: "Outlet -20%",       tagTone: "red",   reviews: 324 },
  { id: 6, name: "Spin Cluster",     brand: "Norte",      price: 245, was: null, tone: "yellow",  tag: "Spin máximo",       tagTone: "lime",  reviews: 178 },
  { id: 7, name: "Court King",       brand: "Volea",      price: 219, was: 249, tone: "emerald", tag: null,                tagTone: null,    reviews: 92  },
  { id: 8, name: "Power Strike",     brand: "Atlas",      price: 199, was: null, tone: "black",   tag: "Best seller",       tagTone: "lime",  reviews: 267 },
];

const PRODUCTS_NEW = [
  { id: 11, name: "Aero Wing 26",   brand: "Cancha Lab", price: 289, was: null, tone: "blue",    tag: "Nuevo", tagTone: "blue", reviews: 23 },
  { id: 12, name: "Drop Shot Plus", brand: "Doble Pared",price: 179, was: null, tone: "lime",    tag: "Nuevo", tagTone: "blue", reviews: 14 },
  { id: 13, name: "Reaction X",     brand: "Tándem",     price: 229, was: null, tone: "deep",    tag: "Nuevo", tagTone: "blue", reviews: 9  },
  { id: 14, name: "Combat 3D",      brand: "Norte",      price: 259, was: null, tone: "red",     tag: "Nuevo", tagTone: "blue", reviews: 11 },
];

function ProductsSection({ title, eyebrow, products, link, id }) {
  const [tab, setTab] = useState("all");
  const tabs = ["Todos", "Control", "Potencia", "Polivalentes"];
  const filtered = products; // placeholder — visual tab solo
  return (
    <section className="prods" data-screen-label={`03 ${title}`} id={id}>
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sec-eyebrow">{eyebrow}</span>
            <h2 className="sec-title">{title}</h2>
          </div>
          <div className="sec-tabs">
            {tabs.map((t) => (
              <button
                key={t}
                className={`sec-tab ${tab === (t === "Todos" ? "all" : t.toLowerCase()) ? "is-on" : ""}`}
                onClick={() => setTab(t === "Todos" ? "all" : t.toLowerCase())}
              >
                {t}
              </button>
            ))}
            <a href={link || "#"} className="sec-link">Ver todo <Icon.Arrow/></a>
          </div>
        </div>
        <div className="prods-grid">
          {filtered.map((p) => <ProductCard key={p.id} p={p}/>)}
        </div>
      </div>
    </section>
  );
}

// ───────── Banner promo full width ─────────
function PromoBanner() {
  return (
    <section className="promo" data-screen-label="04 Promo">
      <div className="container">
        <div className="promo-card">
          <div className="promo-text">
            <span className="promo-eyebrow">Promoción del mes · Abril 2026</span>
            <h2>Compra 2 palas y llévate <em>la 2ª al 50%</em></h2>
            <p>Aplicable a la selección de palas Nox, Head, Bullpadel y Adidas. Hasta agotar stock.</p>
            <div className="promo-cta">
              <a href="/outlet/" className="btn btn-primary">Aprovechar oferta <Icon.Arrow/></a>
              <span className="promo-note">Hasta el 30/04 · Código <b>PADEL2X1</b></span>
            </div>
          </div>
          <div className="promo-vis">
            <div className="promo-pala promo-pala-a"><PalaSVG tone="lime" n="01"/></div>
            <div className="promo-pala promo-pala-b"><PalaSVG tone="emerald" n="02"/></div>
            <div className="promo-bigtag">−50%</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Quiz encuentra tu pala ─────────
const QUIZ = [
  { q: "¿Cuál es tu nivel?", k: "level",
    options: [
      { v: "starter", label: "Empezando",   sub: "0–1 año" },
      { v: "regular", label: "Cada semana", sub: "1–4 años" },
      { v: "comp",    label: "Competición", sub: "Federado" },
    ] },
  { q: "¿Qué priorizas?", k: "style",
    options: [
      { v: "control", label: "Control",      sub: "Coloco la bola" },
      { v: "balance", label: "Polivalencia", sub: "Mitad y mitad" },
      { v: "power",   label: "Potencia",     sub: "Remate y fondo" },
    ] },
  { q: "¿Tu posición?", k: "side",
    options: [
      { v: "right", label: "Derecha", sub: "Defensivo" },
      { v: "left",  label: "Revés",   sub: "Atacante" },
      { v: "any",   label: "Ambas",   sub: "Mixto" },
    ] },
  { q: "¿Presupuesto?", k: "budget",
    options: [
      { v: "low", label: "Hasta 150€",  sub: "Buena relación" },
      { v: "mid", label: "150 – 250€",  sub: "Gama media-alta" },
      { v: "hi",  label: "250€ +",      sub: "Top performance" },
    ] },
];

function recommend(a) {
  const { style = "balance", level = "regular", budget = "mid" } = a;
  if (style === "power" && budget === "hi") return PRODUCTS_BEST[0];
  if (style === "control" && level === "comp") return PRODUCTS_BEST[1];
  if (level === "starter") return PRODUCTS_BEST[4];
  if (style === "balance") return PRODUCTS_BEST[3];
  if (style === "control") return PRODUCTS_BEST[2];
  return PRODUCTS_BEST[5];
}

function Quiz() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const total = QUIZ.length;
  const done = step >= total;
  const result = useMemo(() => recommend(answers), [answers]);
  const select = (v) => {
    const k = QUIZ[step].k;
    setAnswers((a) => ({ ...a, [k]: v }));
    setTimeout(() => setStep((s) => s + 1), 200);
  };
  const reset = () => { setAnswers({}); setStep(0); };

  return (
    <section className="quiz" id="quiz" data-screen-label="05 Quiz">
      <div className="container">
        <div className="quiz-shell">
          <div className="quiz-side">
            <span className="sec-eyebrow on-dark">Test interactivo</span>
            <h2 className="quiz-title">Encuentra tu pala<br/>en <em>30 segundos</em></h2>
            <p className="quiz-text">Responde 4 preguntas y nuestro algoritmo te recomienda la pala que mejor encaja con tu juego.</p>
            <div className="quiz-progress">
              <div className="qp-bar"><div className="qp-fill" style={{ width: `${(Math.min(step, total) / total) * 100}%` }}/></div>
              <div className="qp-text">
                <span>Paso {Math.min(step + (done ? 0 : 1), total)} / {total}</span>
                <span>{done ? "✓ Listo" : `${Math.round(((step) / total) * 100)}% completado`}</span>
              </div>
            </div>
          </div>
          <div className="quiz-stage">
            {!done ? (
              <div className="quiz-card" key={step}>
                <span className="qc-step">PASO {String(step + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
                <h3 className="qc-q">{QUIZ[step].q}</h3>
                <div className="qc-options">
                  {QUIZ[step].options.map((o) => (
                    <button key={o.v} className="qc-opt" onClick={() => select(o.v)}>
                      <span className="qc-opt-dot"/>
                      <span>
                        <b>{o.label}</b>
                        <small>{o.sub}</small>
                      </span>
                      <Icon.Arrow/>
                    </button>
                  ))}
                </div>
                <button className="qc-back" disabled={step === 0} onClick={() => setStep((s) => Math.max(0, s - 1))}>← Atrás</button>
              </div>
            ) : (
              <div className="quiz-result" key="result">
                <span className="qr-flag"><Icon.Check/> Tu pala ideal</span>
                <div className="qr-grid">
                  <div className="qr-img"><PalaSVG tone={result.tone} n={String(result.id).padStart(2, "0")}/></div>
                  <div className="qr-info">
                    <span className="pc-brand">{result.brand}</span>
                    <h3>{result.name}</h3>
                    <div className="pc-rating">
                      <span className="pc-stars"><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/></span>
                      <span className="pc-rev">({result.reviews})</span>
                    </div>
                    <ul className="qr-why">
                      <li><Icon.Check/> Encaja con tu nivel</li>
                      <li><Icon.Check/> Optimizada para tu estilo</li>
                      <li><Icon.Check/> Dentro de tu presupuesto</li>
                    </ul>
                    <div className="qr-cta">
                      <a href="#" className="btn btn-primary">Comprar {result.price}€ <Icon.Arrow/></a>
                      <button className="btn btn-ghost" onClick={reset}>Repetir</button>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Marcas ─────────
const BRANDS = [
  "CANCHA LAB", "NORTE", "PISTA 7", "ATLAS", "VOLEA",
  "DOBLE PARED", "SMASH&CO", "TÁNDEM", "ESQUINA", "SPIN CO.",
];

function Brands() {
  return (
    <section className="brands" data-screen-label="06 Marcas">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sec-eyebrow">+47 firmas seleccionadas</span>
            <h2 className="sec-title">Las marcas que llevas en pista</h2>
          </div>
          <a href="#" className="sec-link">Ver todas <Icon.Arrow/></a>
        </div>
        <div className="brands-grid">
          {BRANDS.map((b, i) => (
            <a key={b} href="#" className="brand-tile">
              <span>{b}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Editorial split ─────────
function EditorialSplit() {
  return (
    <section className="ed-split" data-screen-label="07 Editorial split">
      <div className="container ed-grid">
        <a href="#outlet" className="ed-card ed-out">
          <div className="ed-body">
            <span className="ed-eye">Outlet</span>
            <h3>Hasta <em>−40%</em> en piezas de pista</h3>
            <p>Stock anterior con descuento real, mientras dure el inventario.</p>
            <span className="ed-cta">Ir al outlet <Icon.Arrow/></span>
          </div>
          <div className="ed-num">−40<span>%</span></div>
        </a>
        <a href="#blog" className="ed-card ed-blog">
          <div className="ed-body">
            <span className="ed-eye">Blog Tienda Online Padel</span>
            <h3>El cuaderno <em>de la cancha</em></h3>
            <p>Tests, tutoriales y entrevistas con quienes pisan pista cada día.</p>
            <ul>
              <li>Cómo elegir el grosor de la goma</li>
              <li>Calendario WPT 2026 actualizado</li>
              <li>Pala de control vs. potencia</li>
            </ul>
            <span className="ed-cta">Leer artículos <Icon.Arrow/></span>
          </div>
        </a>
      </div>
    </section>
  );
}

// ───────── Reviews ─────────
const REVIEWS = [
  { name: "Carlos M.", role: "Jugador 3ª categoría", text: "La Hexa Pro 24K es increíble. Llevo 2 meses con ella y mi remate ha mejorado muchísimo. Envío en 24h.", rating: 5 },
  { name: "Laura V.",  role: "Jugadora aficionada",  text: "Pedí una pala y unas zapatillas. Llegó todo perfecto, con caja sostenible. Muy buena atención.", rating: 5 },
  { name: "Diego R.",  role: "Jugador federado",     text: "El test de pala me recomendó la Blackline CTRL y acertaron de pleno. Mejor que ir a la tienda.", rating: 5 },
  { name: "Sara P.",   role: "Iniciación",           text: "Soy nueva en el pádel y me han asesorado por chat para elegir pala. Súper amables y profesionales.", rating: 5 },
];

function Reviews() {
  return (
    <section className="rev" data-screen-label="08 Reviews">
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="sec-eyebrow">Lo que dicen los jugadores</span>
            <h2 className="sec-title">22.400 reseñas, 4.7 / 5</h2>
          </div>
          <span className="rev-stars">
            <Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/><Icon.Star/>
          </span>
        </div>
        <div className="rev-grid">
          {REVIEWS.map((r, i) => (
            <article key={i} className="rev-card">
              <div className="rev-stars">
                {Array.from({ length: r.rating }).map((_, k) => <Icon.Star key={k}/>)}
              </div>
              <p>"{r.text}"</p>
              <div className="rev-by">
                <div className="rev-av">{r.name[0]}</div>
                <div>
                  <b>{r.name}</b>
                  <span>{r.role}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Newsletter ─────────
function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="news" data-screen-label="09 Newsletter">
      <div className="container">
        <div className="news-card">
          <div className="news-text">
            <span className="sec-eyebrow on-dark"><Icon.Mail/> Newsletter</span>
            <h2>Suscríbete y llévate <em>−10%</em> en tu primer pedido</h2>
            <p>Drops, tests y pre-acceso a ofertas. Una vez al mes, sin spam.</p>
          </div>
          <form className="news-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            {!sent ? (
              <>
                <input type="email" required placeholder="tu@email.com" value={email} onChange={(e) => setEmail(e.target.value)}/>
                <button className="btn btn-accent" type="submit">Suscribirme <Icon.Arrow/></button>
              </>
            ) : (
              <div className="news-ok"><Icon.Check/> ¡Listo! Revisa tu email para tu cupón.</div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

// ───────── Logos de métodos de pago (compartido: footer / ficha / checkout) ─────────
function PaymentLogos() {
  return (
    <div className="pay-logos">
      <span className="pay-logo" title="Visa"><svg viewBox="0 0 48 32" aria-label="Visa"><rect width="48" height="32" rx="4" fill="#1A1F71"/><text x="24" y="22" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="800" fontStyle="italic" fontSize="13" fill="#fff">VISA</text></svg></span>
      <span className="pay-logo" title="Mastercard"><svg viewBox="0 0 48 32" aria-label="Mastercard"><rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5"/><circle cx="20" cy="16" r="8" fill="#EB001B"/><circle cx="28" cy="16" r="8" fill="#F79E1B"/><path d="M24 10 a8 8 0 0 0 0 12 a8 8 0 0 0 0 -12z" fill="#FF5F00"/></svg></span>
      <span className="pay-logo" title="PayPal"><svg viewBox="0 0 48 32" aria-label="PayPal"><rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5"/><text x="24" y="20" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="800" fontStyle="italic" fontSize="9" fill="#003087">Pay<tspan fill="#0070BA">Pal</tspan></text></svg></span>
      <span className="pay-logo" title="Klarna"><svg viewBox="0 0 48 32" aria-label="Klarna"><rect width="48" height="32" rx="4" fill="#FFB3C7"/><text x="24" y="21" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="800" fontSize="11" fill="#0A0A0A">Klarna.</text></svg></span>
      <span className="pay-logo" title="Transferencia bancaria"><svg viewBox="0 0 48 32" aria-label="Transferencia"><rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5"/><g fill="#444"><rect x="11" y="14" width="2" height="8"/><rect x="17" y="14" width="2" height="8"/><rect x="23" y="14" width="2" height="8"/><rect x="29" y="14" width="2" height="8"/><rect x="35" y="14" width="2" height="8"/><polygon points="24,8 10,13 38,13"/><rect x="9" y="23" width="30" height="2"/></g></svg></span>
      <span className="pay-logo" title="Google Pay"><svg viewBox="0 0 48 32" aria-label="Google Pay"><rect width="48" height="32" rx="4" fill="#fff" stroke="#e5e5e5"/><text x="24" y="20" textAnchor="middle" fontFamily="Arial, sans-serif" fontWeight="700" fontSize="9" fill="#5F6368">G<tspan fontWeight="500"> Pay</tspan></text></svg></span>
      <span className="pay-logo" title="Apple Pay"><svg viewBox="0 0 48 32" aria-label="Apple Pay"><rect width="48" height="32" rx="4" fill="#000"/><text x="24" y="20" textAnchor="middle" fontFamily="-apple-system, system-ui, sans-serif" fontWeight="700" fontSize="9" fill="#fff">&#63743; Pay</text></svg></span>
    </div>
  );
}

// ───────── Footer ─────────
function Footer() {
  return (
    <footer className="ft" data-screen-label="10 Footer">
      <div className="container">
        <div className="ft-top">
          <div className="ft-brand">
            <img className="ft-logo-img"
                 src="https://tiendaonlinepadel.es/wp-content/uploads/2025/09/new-logo-1.png"
                 alt="Tienda Online Pádel"/>
            <p>La tienda online de pádel para los que viven la pista cada semana. Más de 2.000 productos, 47 marcas y envío en 24h.</p>
            <div className="ft-pay">
              <PaymentLogos/>
            </div>
          </div>
          <div className="ft-cols">
            <div>
              <h4>Tienda</h4>
              <a href="/categoria-producto/palas/">Palas</a><a href="/categoria-producto/ropa-y-textil/">Ropa</a><a href="/categoria-producto/zapatillas/">Calzado</a>
              <a href="/categoria-producto/pelotas/">Pelotas</a><a href="/categoria-producto/accesorios/">Accesorios</a><a href="/outlet/">Outlet</a>
            </div>
            <div>
              <h4>Ayuda</h4>
              <a href="/politica-de-cambios-y-devoluciones/">Envíos</a><a href="/politica-de-cambios-y-devoluciones/">Devoluciones</a><a href="/?page_id=11036">Garantía</a>
              <a href="/mi-cuenta/">Estado del pedido</a><a href="/?page_id=11036">Contacto</a><a href="/?page_id=11036">FAQ</a>
            </div>
            <div>
              <h4>Empresa</h4>
              <a href="/?page_id=11037">Sobre nosotros</a><a href="/?page_id=11078">Tiendas físicas</a>
              <a href="/?page_id=11036">Trabaja con nosotros</a><a href="/?page_id=11077">Blog</a>
            </div>
            <div>
              <h4>Síguenos</h4>
              {/* TODO: sustituir por los perfiles sociales reales del cliente */}
              <a href="/">Instagram</a><a href="/">TikTok</a><a href="/">YouTube</a><a href="/">Facebook</a>
              <h4 style={{ marginTop: 16 }}>Contacto</h4>
              <a href="tel:+34662655185">+34 662 655 185</a>
              <a href="mailto:info@tiendaonlinepadel.es">info@tiendaonlinepadel.es</a>
            </div>
          </div>
        </div>
        <div className="ft-bot">
          <span>© 2026 Tienda Online Padel · CIF B-12345678</span>
          <div className="ft-legal">
            <a href="/aviso-legal/">Aviso legal</a>
            <a href="/politica-de-privacidad/">Privacidad</a>
            <a href="/politica-de-cookies/">Cookies</a>
            <a href="/politica-de-cambios-y-devoluciones/">Términos</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Icon, PalaSVG, TopBar, Header, Hero, Categories,
  ProductsSection, PROD_BEST: PRODUCTS_BEST, PROD_NEW: PRODUCTS_NEW,
  PromoBanner, Quiz, Brands, EditorialSplit, Reviews, Newsletter, Footer,
  FavButton, Fav, Cart, useCart, CartDrawer, fmtMinor, PaymentLogos,
});
