// Catálogo público · imcopartes.com/catalogo
// SPA mínimo con History API — 3 vistas:
//   /catalogo                    → Home (grid 8 marcas)
//   /catalogo/{brand}            → Listado productos de marca con filtros
//   /catalogo/{brand}/{sku}      → Detalle producto + WhatsApp + JSON-LD
//
// Regla bidireccional inviolable: este archivo NO debe contener la palabra
// la marca B2C separada (cuyo nombre NO debe escribirse aquí) ni en código,
// ni en strings, ni en alt text, ni en metadatos. Ver README — Regla inviolable.
//
// NO muestra precios en versión pública (decisión conservadora documentada
// en BITACORA). Flag PUBLIC_SHOW_PRICES=false. Cambiar a true si Julian
// aprueba mostrar lista de precios.

const { useState, useEffect, useMemo, useCallback, useRef } = React;

/* ===== Config ===== */
const API_BASE = "https://api.imcopartes.com";
const IMG_BASE = "https://api.imcopartes.com/img"; // /{sku}/public | /{sku}/thumb
const PUBLIC_SHOW_PRICES = false; // ← flag bidireccional: cero precios públicos

/* ===== Marcas (paletas oficiales tomadas del BRAND_AND_SKU_KNOWLEDGE.md) ===== */
const PUBLIC_BRANDS = [
  { id: "novaparts",   name: "NovaParts",   color: "#0063FF", ink: "#FFFFFF", logo: "/assets/brand-logos/logo-novaparts.png", tagline: "Repuestos con respaldo",
    desc: "Manijas, chapas, cilindros y switches para más de 30 marcas de vehículo." },
  { id: "mrshift",     name: "MR SHHIFT",   color: "#F15A24", ink: "#FFFFFF", logo: "/assets/brand-logos/logo-mrshift.png", tagline: "Precisión en cada cambio",
    desc: "Pomos, peras, forros y kits de palanca de cambios — acabado anodizado." },
  { id: "mrswitch",    name: "Mr.Switch",   color: "#435056", ink: "#DDF664", logo: "/assets/brand-logos/logo-mrswitch.png", tagline: "Control eléctrico para tu vehículo",
    desc: "Switches eléctricos, cremalleras elevavidrios, motores y cintas de airbag." },
  { id: "matdefender", name: "Mat Defender",color: "#17393F", ink: "#C9BCA6", logo: "/assets/brand-logos/logo-matdefender.png", tagline: "Protección para cada camino",
    desc: "Tapetes termoformados — habitáculo, baúl y espaldares — cobertura total." },
  { id: "prolift",     name: "ProLift",     color: "#ED4720", ink: "#FFFFFF", logo: "/assets/brand-logos/logo-prolift.png", tagline: "Amortiguadores de compuerta y vidrio",
    desc: "Amortiguadores hidráulicos para compuerta, baúl y capó. Especificaciones técnicas." },
  { id: "prismaglass", name: "PrismaGlass", color: "#0B1220", ink: "#FFFFFF", logo: "/assets/brand-logos/prismaglass-final.svg", tagline: "Vidrios templados para tableros y radios",
    desc: "Protectores de pantalla templados para clusters digitales y radios multimedia." },
  { id: "rainx",       name: "Rain-X",      color: "#0a1b5a", ink: "#FFD60A", logo: "/assets/brand-logos/rainx.svg", tagline: "Visibilidad y cuidado para tu vehículo",
    desc: "Plumillas, repelente de lluvia, shampoo y kits de limpieza." },
  { id: "hushan",      name: "Hushan",      color: "#DC1F2E", ink: "#FFFFFF", logo: "/assets/brand-logos/logo-hushan.png", tagline: "Manijas y cilindros",
    desc: "Manijas exteriores e interiores, cilindros y juegos de chapas — origen Hushan." },
];

function brandById(id) {
  return PUBLIC_BRANDS.find((b) => b.id === id) || null;
}

/* ===== Estado del producto → píldora (solo datos reales del ERP) ===== */
const PUBLIC_ESTADOS = {
  agotado: { label: "Agotado", cls: "agotado" },
  novedad: { label: "Novedad", cls: "novedad" },
  restock: { label: "Restock", cls: "restock" },
};
function estadoOf(p) {
  if (!p) return null;
  const e = p.estado;
  if (p.agotado || e === "agotado") return PUBLIC_ESTADOS.agotado;
  if (e === "restock") return PUBLIC_ESTADOS.restock;
  if (e === "novedad") return PUBLIC_ESTADOS.novedad;
  return null;
}

/* ===== Router minimalista basado en location.pathname =====
   _redirects rewrites todas /catalogo* a /catalogo-public.html con 200,
   por lo que window.location.pathname conserva la URL "bonita". */
function parseRoute(pathname) {
  // Normalizar: quitar trailing slash y "/catalogo" prefix
  const clean = pathname.replace(/\/+$/, "");
  const parts = clean.split("/").filter(Boolean);
  // /catalogo → ["catalogo"]
  // /catalogo/{brand} → ["catalogo", brand]
  // /catalogo/{brand}/{sku} → ["catalogo", brand, sku]
  if (parts[0] !== "catalogo") return { view: "home" };
  if (parts.length === 1) return { view: "home" };
  if (parts.length === 2) return { view: "brand", brand: decodeURIComponent(parts[1]) };
  if (parts.length >= 3) {
    return {
      view: "product",
      brand: decodeURIComponent(parts[1]),
      sku: decodeURIComponent(parts.slice(2).join("/")),
    };
  }
  return { view: "home" };
}

function navTo(href, e) {
  if (e) e.preventDefault();
  window.history.pushState({}, "", href);
  window.dispatchEvent(new PopStateEvent("popstate"));
}

/* ===== Helpers SEO ===== */
function setMeta(name, value, attr = "name") {
  if (!value) return;
  let el = document.querySelector(`meta[${attr}="${name}"]`);
  if (!el) {
    el = document.createElement("meta");
    el.setAttribute(attr, name);
    document.head.appendChild(el);
  }
  el.setAttribute("content", value);
}
function setCanonical(url) {
  let el = document.querySelector("link[rel='canonical']");
  if (!el) {
    el = document.createElement("link");
    el.setAttribute("rel", "canonical");
    document.head.appendChild(el);
  }
  el.setAttribute("href", url);
}
function setJsonLd(id, obj) {
  let el = document.getElementById(id);
  if (!el) {
    el = document.createElement("script");
    el.setAttribute("type", "application/ld+json");
    el.setAttribute("id", id);
    document.head.appendChild(el);
  }
  el.textContent = JSON.stringify(obj);
}
function clearJsonLd(id) {
  const el = document.getElementById(id);
  if (el) el.remove();
}

/* ===== Thumbnail con watermark CSS extra encima ===== */
function ProductImg({ sku, alt, size = "thumb", lg = false }) {
  const [errored, setErrored] = useState(false);
  if (!sku || errored) {
    return (
      <>
        <div className="cat-card__no-img">Imagen próximamente</div>
        <div className={"cat-watermark" + (lg ? " cat-watermark--lg" : "")} aria-hidden="true" />
      </>
    );
  }
  return (
    <>
      <img
        src={`${IMG_BASE}/${encodeURIComponent(sku)}/${size}`}
        alt={alt || sku}
        loading="lazy"
        onError={() => setErrored(true)}
      />
      <div className={"cat-watermark" + (lg ? " cat-watermark--lg" : "")} aria-hidden="true" />
    </>
  );
}

/* ===== Vista HOME — /catalogo ===== */
function HomeView() {
  useEffect(() => {
    document.title = "Catálogo público · 8 marcas · +3.000 referencias · Imcopartes";
    setMeta("description", "Catálogo público de Imcopartes: 8 marcas representadas, +3.000 referencias automotrices. Consulta SKUs y solicita cotización por WhatsApp.");
    setCanonical("https://www.imcopartes.com/catalogo");
    setMeta("og:title", "Catálogo Imcopartes — Repuestos con respaldo", "property");
    setMeta("og:description", "8 marcas, +3.000 referencias automotrices.", "property");
    setMeta("og:url", "https://www.imcopartes.com/catalogo", "property");
    clearJsonLd("ld-product");
  }, []);

  return (
    <>
      <Nav active="catalogo" />
      <main className="cat-page">
        <section className="cat-hero">
          <div className="cat-container">
            <div className="cat-hero__eyebrow">Catálogo público · Colombia</div>
            <h1 className="cat-hero__title">
              Repuestos con <em>respaldo</em>.
            </h1>
            <p className="cat-hero__lead">
              Explora las 8 marcas representadas por Imcopartes. Cada referencia tiene
              ficha técnica, compatibilidad y atención por WhatsApp para distribuidores
              mayoristas en Colombia.
            </p>
            <div className="cat-hero__stats">
              <div className="cat-hero__stat"><strong>+3.000</strong><span>referencias</span></div>
              <div className="cat-hero__stat"><strong>8</strong><span>marcas representadas</span></div>
              <div className="cat-hero__stat"><strong>30+</strong><span>marcas de vehículo</span></div>
            </div>
          </div>
        </section>

        <section className="cat-brands">
          <div className="cat-container">
            <div className="cat-brands__head">
              <h2 className="cat-brands__title">Marcas representadas</h2>
              <p className="cat-brands__sub">Elige una marca para ver su catálogo completo.</p>
            </div>
            <div className="cat-brands__grid">
              {PUBLIC_BRANDS.map((b) => (
                <a
                  key={b.id}
                  href={`/catalogo/${b.id}`}
                  className="cat-brand-card"
                  style={{ "--bc": b.color }}
                  onClick={(e) => navTo(`/catalogo/${b.id}`, e)}
                >
                  <h3 className="cat-brand-card__name">
                    {b.logo
                      ? <img className="cat-brand-card__logo" src={b.logo} alt={b.name} />
                      : b.name}
                  </h3>
                  <p className="cat-brand-card__tagline">{b.tagline}</p>
                  <p className="cat-brand-card__desc">{b.desc}</p>
                  <div className="cat-brand-card__foot">
                    <span>Ver catálogo</span>
                    <strong>→</strong>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <WhatsAppFAB message="Hola, vengo del catálogo público. Quisiera más información sobre sus productos." />
    </>
  );
}

/* ===== Vista BRAND — /catalogo/{brand} ===== */
function BrandView({ brand }) {
  const meta = brandById(brand);
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(true);
  const [q, setQ] = useState("");
  const [vehicle, setVehicle] = useState("");
  const [vehicles, setVehicles] = useState([]);
  const LIMIT = 24;

  // Cargar vehículos disponibles para esta marca (una sola vez)
  useEffect(() => {
    if (!brand) return;
    fetch(`${API_BASE}/v1/catalogo/vehiculos?brand=${encodeURIComponent(brand)}`)
      .then((r) => r.ok ? r.json() : { items: [] })
      .then((d) => setVehicles(d.items || []))
      .catch(() => setVehicles([]));
  }, [brand]);

  // Cargar productos (resetea cuando cambia brand/q/vehicle)
  useEffect(() => {
    if (!brand) return;
    setLoading(true);
    setItems([]);
    setOffset(0);
    const url = new URL(`${API_BASE}/v1/catalogo/productos`);
    url.searchParams.set("brand", brand);
    url.searchParams.set("limit", String(LIMIT));
    url.searchParams.set("offset", "0");
    if (q) url.searchParams.set("q", q);
    if (vehicle) url.searchParams.set("vehicle", vehicle);
    fetch(url.toString())
      .then((r) => r.ok ? r.json() : { items: [], total: 0 })
      .then((d) => { setItems(d.items || []); setTotal(d.total || 0); })
      .catch(() => { setItems([]); setTotal(0); })
      .finally(() => setLoading(false));
  }, [brand, q, vehicle]);

  // SEO meta tags por marca
  useEffect(() => {
    if (!meta) return;
    const title = `${meta.name} — ${meta.tagline} · Catálogo Imcopartes`;
    document.title = title;
    setMeta("description", `${meta.desc} Consulta SKUs y solicita cotización mayorista en Imcopartes.`);
    setCanonical(`https://www.imcopartes.com/catalogo/${meta.id}`);
    setMeta("og:title", title, "property");
    setMeta("og:description", meta.desc, "property");
    setMeta("og:url", `https://www.imcopartes.com/catalogo/${meta.id}`, "property");
    setMeta("theme-color", meta.color);
    clearJsonLd("ld-product");
  }, [meta]);

  // Cargar más (paginación)
  const loadMore = useCallback(() => {
    const newOffset = offset + LIMIT;
    setOffset(newOffset);
    const url = new URL(`${API_BASE}/v1/catalogo/productos`);
    url.searchParams.set("brand", brand);
    url.searchParams.set("limit", String(LIMIT));
    url.searchParams.set("offset", String(newOffset));
    if (q) url.searchParams.set("q", q);
    if (vehicle) url.searchParams.set("vehicle", vehicle);
    setLoading(true);
    fetch(url.toString())
      .then((r) => r.ok ? r.json() : { items: [] })
      .then((d) => setItems((prev) => [...prev, ...(d.items || [])]))
      .finally(() => setLoading(false));
  }, [brand, q, vehicle, offset]);

  if (!meta) {
    return (
      <>
        <Nav active="catalogo" />
        <main className="cat-page">
          <div className="cat-container" style={{ padding: "48px 16px" }}>
            <p>Marca no encontrada. <a href="/catalogo" onClick={(e)=>navTo('/catalogo',e)}>Volver al catálogo</a></p>
          </div>
        </main>
        <Footer />
      </>
    );
  }

  return (
    <>
      <Nav active="catalogo" />
      <main className="cat-page">
        <header className="cat-brand-head" style={{ background: meta.color, color: meta.ink || "#fff" }}>
          <div className="cat-container">
            <div className="cat-brand-head__crumb">
              <a href="/catalogo" onClick={(e)=>navTo('/catalogo',e)}>Catálogo</a> / {meta.name}
            </div>
            <h1 className="cat-brand-head__title">
              {meta.logo
                ? <span className="cat-brand-head__logo"><img src={meta.logo} alt={meta.name} /></span>
                : meta.name}
            </h1>
            <p className="cat-brand-head__tagline">{meta.tagline}</p>
            <p className="cat-brand-head__desc">{meta.desc}</p>
          </div>
        </header>

        <div className="cat-container">
          <div className="cat-list">
            <aside className="cat-filters">
              <div className="cat-filters__group">
                <div className="cat-filters__label">Buscar</div>
                <input
                  className="cat-filters__input"
                  type="search"
                  placeholder="Referencia o palabra clave"
                  value={q}
                  onChange={(e)=>setQ(e.target.value)}
                  aria-label="Buscar producto"
                />
              </div>
              {vehicles.length > 0 && (
                <div className="cat-filters__group">
                  <div className="cat-filters__label">Vehículo</div>
                  <select
                    className="cat-filters__select"
                    value={vehicle}
                    onChange={(e)=>setVehicle(e.target.value)}
                    aria-label="Filtrar por vehículo"
                  >
                    <option value="">Todos</option>
                    {vehicles.map((v) => (
                      <option key={v.vehicle} value={v.vehicle}>{v.vehicle} ({v.n})</option>
                    ))}
                  </select>
                </div>
              )}
              {(q || vehicle) && (
                <button className="cat-filters__clear" onClick={() => { setQ(""); setVehicle(""); }}>
                  Limpiar filtros
                </button>
              )}
              <div style={{ fontSize: 12, color: "var(--neutral-500,#767676)", padding: "0 4px" }}>
                {total > 0 ? `${total.toLocaleString("es-CO")} referencias` : ""}
              </div>
            </aside>

            <section className="cat-grid" aria-label={`Productos ${meta.name}`}>
              {loading && items.length === 0 && (
                <div className="cat-loading">
                  <div className="cat-loading__spinner" aria-hidden="true" />
                  <div>Cargando catálogo…</div>
                </div>
              )}
              {!loading && items.length === 0 && (
                <div className="cat-empty">No encontramos productos con esos filtros.</div>
              )}
              {items.map((p) => (
                <a
                  key={p.sku}
                  href={`/catalogo/${meta.id}/${encodeURIComponent(p.sku)}`}
                  className="cat-card"
                  onClick={(e)=>navTo(`/catalogo/${meta.id}/${encodeURIComponent(p.sku)}`,e)}
                >
                  <div className="cat-card__thumb">
                    <ProductImg sku={p.sku} alt={p.desc || p.sku} size="thumb" />
                    {(() => { const e = estadoOf(p); return e ? <span className={"cat-pill cat-pill--" + e.cls}>{e.label}</span> : null; })()}
                  </div>
                  <div className="cat-card__body">
                    <span className="cat-card__sku">{p.sku}</span>
                    <p className="cat-card__desc">{p.desc || "Sin descripción"}</p>
                    <span className="cat-card__brand">{meta.name}</span>
                  </div>
                </a>
              ))}
              {items.length > 0 && items.length < total && (
                <div className="cat-loadmore">
                  <button onClick={loadMore} disabled={loading}>
                    {loading ? "Cargando…" : `Ver más (${total - items.length} restantes)`}
                  </button>
                </div>
              )}
            </section>
          </div>
        </div>
      </main>
      <Footer />
      <WhatsAppFAB message={`Hola, estoy viendo el catálogo de ${meta.name}. Quisiera cotizar.`} />
    </>
  );
}

/* ===== Vista PRODUCT — /catalogo/{brand}/{sku} ===== */
function ProductView({ brand, sku }) {
  const meta = brandById(brand);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    if (!sku) return;
    setLoading(true);
    setNotFound(false);
    fetch(`${API_BASE}/v1/catalogo/productos/${encodeURIComponent(sku)}`)
      .then((r) => {
        if (r.status === 404) { setNotFound(true); return null; }
        return r.ok ? r.json() : null;
      })
      .then((d) => setData(d))
      .catch(() => setNotFound(true))
      .finally(() => setLoading(false));
  }, [sku]);

  // SEO: title, description, og, JSON-LD Product schema
  useEffect(() => {
    if (!data) { clearJsonLd("ld-product"); return; }
    const title = `${data.sku} · ${data.desc || "Repuesto"} · ${meta?.name || "Imcopartes"}`;
    document.title = title;
    setMeta("description", `${data.desc || data.sku} — Marca ${meta?.name || ""}. Solicita cotización mayorista por WhatsApp.`);
    setCanonical(`https://www.imcopartes.com/catalogo/${brand}/${encodeURIComponent(data.sku)}`);
    setMeta("og:title", title, "property");
    setMeta("og:description", data.desc || "", "property");
    setMeta("og:url", `https://www.imcopartes.com/catalogo/${brand}/${encodeURIComponent(data.sku)}`, "property");
    setMeta("og:image", `${IMG_BASE}/${encodeURIComponent(data.sku)}/public`, "property");

    // JSON-LD Product schema (SIN price — política conservadora)
    setJsonLd("ld-product", {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": data.desc || data.sku,
      "sku": data.sku,
      "mpn": data.sku,
      "brand": { "@type": "Brand", "name": meta?.name || "Imcopartes" },
      "image": `${IMG_BASE}/${encodeURIComponent(data.sku)}/public`,
      "description": data.desc || "",
      "category": data.category || data.vehicle || undefined,
      "offers": {
        "@type": "Offer",
        "availability": data.agotado ? "https://schema.org/OutOfStock" : "https://schema.org/InStock",
        "priceCurrency": "COP",
        "url": `https://www.imcopartes.com/catalogo/${brand}/${encodeURIComponent(data.sku)}`,
        "seller": { "@type": "Organization", "name": "Imcopartes S.A.S." }
      }
    });

    return () => clearJsonLd("ld-product");
  }, [data, brand, meta]);

  if (loading) {
    return (
      <>
        <Nav active="catalogo" />
        <main className="cat-page">
          <div className="cat-container" style={{ padding: 48 }}>
            <div className="cat-loading">
              <div className="cat-loading__spinner" aria-hidden="true" />
              Cargando producto…
            </div>
          </div>
        </main>
        <Footer />
      </>
    );
  }

  if (notFound || !data) {
    return (
      <>
        <Nav active="catalogo" />
        <main className="cat-page">
          <div className="cat-container" style={{ padding: "48px 16px" }}>
            <h1 style={{ fontSize: 22, margin: "0 0 8px" }}>Producto no encontrado</h1>
            <p style={{ color: "var(--neutral-600,#525154)" }}>
              La referencia <code>{sku}</code> no está en el catálogo.{" "}
              <a href={`/catalogo/${brand}`} onClick={(e)=>navTo(`/catalogo/${brand}`,e)}>Ver más productos de la marca</a>.
            </p>
          </div>
        </main>
        <Footer />
      </>
    );
  }

  const waMsg = `Hola, me interesa la referencia ${data.sku} (${data.desc || ""}). ¿Pueden enviarme cotización?`;

  return (
    <>
      <Nav active="catalogo" />
      <main className="cat-page">
        <div className="cat-container">
          <div className="cat-detail">
            <div className="cat-detail__media">
              <ProductImg sku={data.sku} alt={data.desc || data.sku} size="public" lg />
              {(() => { const e = estadoOf(data); return e ? <span className={"cat-pill cat-pill--" + e.cls}>{e.label}</span> : null; })()}
            </div>
            <div>
              <div className="cat-detail__crumb">
                <a href="/catalogo" onClick={(e)=>navTo('/catalogo',e)}>Catálogo</a>
                {" / "}
                <a href={`/catalogo/${brand}`} onClick={(e)=>navTo(`/catalogo/${brand}`,e)}>{meta?.name || brand}</a>
                {" / "}
                {data.sku}
              </div>

              <span className="cat-detail__sku">{data.sku}</span>
              <h1 className="cat-detail__title">{data.desc || "Repuesto automotriz"}</h1>
              {meta && (
                <span className="cat-detail__brand" style={{ background: meta.color, color: meta.ink || "#fff" }}>
                  {meta.name}
                </span>
              )}

              <dl className="cat-detail__specs">
                {data.vehicle && (
                  <div className="cat-detail__spec"><dt>Vehículo</dt><dd>{data.vehicle}</dd></div>
                )}
                {data.category && (
                  <div className="cat-detail__spec"><dt>Categoría</dt><dd>{data.category}</dd></div>
                )}
                {meta?.name && (
                  <div className="cat-detail__spec"><dt>Marca</dt><dd>{meta.name}</dd></div>
                )}
                <div className="cat-detail__spec">
                  <dt>Disponibilidad</dt>
                  <dd>{data.agotado ? "Consultar" : "Disponible"}</dd>
                </div>
                {PUBLIC_SHOW_PRICES && data.precio && (
                  <div className="cat-detail__spec">
                    <dt>Precio referencia</dt>
                    <dd>${Number(data.precio).toLocaleString("es-CO")} COP</dd>
                  </div>
                )}
              </dl>

              <a
                className="cat-detail__cta"
                href={waLink(waMsg)}
                target="_blank"
                rel="noopener noreferrer"
              >
                <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true">
                  <path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 7.94-7.94 7.9 7.9 0 0 0-2.39-5.62Z"/>
                </svg>
                Solicitar cotización por WhatsApp
              </a>
              <p className="cat-detail__note">
                Atención mayorista para distribuidores en Colombia. Precios y disponibilidad
                se confirman directamente por WhatsApp.
              </p>
            </div>
          </div>
        </div>
      </main>
      <Footer />
      <WhatsAppFAB message={waMsg} />
    </>
  );
}

/* ===== Root: lee la ruta y monta la vista correspondiente ===== */
function CatalogoPublicApp() {
  const [route, setRoute] = useState(() => parseRoute(window.location.pathname));
  useLucide([route]);

  useEffect(() => {
    const onPop = () => setRoute(parseRoute(window.location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  // Scroll al top en cada cambio de ruta
  useEffect(() => { window.scrollTo(0, 0); }, [route]);

  if (route.view === "product") return <ProductView brand={route.brand} sku={route.sku} />;
  if (route.view === "brand")   return <BrandView brand={route.brand} />;
  return <HomeView />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<CatalogoPublicApp />);