/* global React, CATALOGO, CAT_LABELS, ICONOS_INFO, Placeholder, Eyebrow, Arr, Reveal, CatProd, waLink */

function Modelo({ modeloName, setPage, openFicha, goCatalog }) {
  const variantes = CATALOGO.filter((p) => p.nombre === modeloName);
  const info = ICONOS_INFO[modeloName] || {};
  const families = [...new Set(variantes.map((v) => CAT_LABELS[v.categoria]))];
  const priceMin = Math.min(...variantes.map((v) => v.precio));
  const priceMax = Math.max(...variantes.map((v) => v.precio));
  const hero = variantes[0];

  if (!variantes.length) {
    return (
      <section className="modelo-hero">
        <div className="crumb">Modelo no encontrado</div>
        <h1>—</h1>
        <button className="btn line on-dark" onClick={goCatalog}>← Volver al catálogo</button>
      </section>
    );
  }

  return (
    <>
      <section className="modelo-hero">
        <div className="crumb">Inicio  ·  Catálogo  ·  <span style={{ opacity: 0.95 }}>{modeloName}</span></div>
        <div className="grid">
          <div>
            <Eyebrow onDark accent="var(--mostaza)">Modelo · {variantes.length} versiones</Eyebrow>
            <h1>
              <em>{modeloName}</em>.
            </h1>
            {info.since ? <div className="since">{info.since}</div> : null}
            <p className="lead">{info.blurb || `Familia ${modeloName} — disponible en ${variantes.length} versiones distintas. Cada combinación de patrón y madera es un SKU único, no configurable.`}</p>
            <div className="meta-grid">
              <div><div className="k">Familia</div><div className="v">{info.family || families.join(" / ")}</div></div>
              <div><div className="k">Versiones</div><div className="v">{variantes.length}</div></div>
              <div>
                <div className="k">Desde</div>
                <div className="v">$ {priceMin.toLocaleString("es-CO")}</div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn wa lg" href={waLink(`Hola DAVA'S, me interesa el modelo ${modeloName}. ¿Me cuentan disponibilidad y opciones?`)} target="_blank" rel="noopener">
                Pregunta por las versiones <Arr />
              </a>
              <button className="btn line on-dark" onClick={goCatalog}>Volver al catálogo</button>
            </div>
          </div>
          <div className="photo">
            <Placeholder ratio="auto" tone="dark" label={`/${hero.foto || "assets/productos/PLACEHOLDER.jpg"}`} corner={`Foto representativa · ${hero.id}`} ring="◯ MODELO" fill />
          </div>
        </div>
      </section>

      <Reveal as="section" className="modelo-variants">
        <div className="head">
          <div>
            <Eyebrow>Las <em>{variantes.length}</em> versiones</Eyebrow>
            <h2 style={{ marginTop: 12 }}>
              Mismo nombre,<br />
              <em>distintos dibujos</em>.
            </h2>
          </div>
          <p>
            Cada variante combina patrón, material y acabado de forma distinta. Toca cualquiera para ver su ficha,
            guardarla, o pedirla por WhatsApp. Precios entre ${priceMin.toLocaleString("es-CO")} y ${priceMax.toLocaleString("es-CO")}.
          </p>
        </div>
        <div className="cat-grid">
          {variantes.map((p) => (
            <CatProd key={p.id} p={p} onOpen={openFicha} />
          ))}
        </div>
      </Reveal>
    </>
  );
}

window.Modelo = Modelo;