/* Plantillas de sección (Fase 2): estructuras predefinidas con el ESTILO DEL
   INDEX. Cada plantilla lee sus textos/imágenes del CMS con claves namespaced
   por la sección (section.key + "__campo"), así se editan en vivo igual que el
   resto del sitio. Reutilizan helpers/primitivas de sections-a.jsx (cms, cmsImg,
   Scene, Btn). */

function _cfg(section) {
  try {
    const c = section && section.config;
    return c ? (typeof c === "string" ? JSON.parse(c) : c) : {};
  } catch (e) { return {}; }
}
function _k(section, f) { return (section && section.key ? section.key : "tpl") + "__" + f; }
function tcms(section, f, fb) { return cms(_k(section, f), fb); }
function timg(section, f) { return cmsImg(_k(section, f)); }
/* URL de video del CMS (relativa → API del mismo origen). */
function tvid(section, f) {
  const v = cms(_k(section, f), "");
  if (!v) return "";
  return String(v).startsWith("http") ? v : ((typeof window !== "undefined" && window.__amApi) || "") + v;
}
function _secId(section) { return (section && (section.anchor || section.key)) || "seccion"; }
function _grp(section) { return (section && section.label) || "Sección"; }

/* Texto editable namespaced (mantiene el resto de la estructura intacta). */
function TText({ section, field, label, cls, fb, style, tag }) {
  const Tag = tag || "div";
  return (
    <Tag className={cls} style={style}
      data-cms-key={_k(section, field)} data-cms-kind="text" data-cms-label={label} data-cms-section={_grp(section)}>
      {tcms(section, field, fb)}
    </Tag>
  );
}

/* Imagen editable namespaced (placeholder gris si aún no hay foto). */
function TImg({ section, field, label, className, style, variant }) {
  const url = timg(section, field);
  return (
    <div className={"am-img " + (className || "")} style={style}
      data-cms-key={_k(section, field)} data-cms-kind="image" data-cms-label={label} data-cms-section={_grp(section)}>
      {url
        ? <div style={{ position: "absolute", inset: 0, backgroundImage: "url(" + url + ")", backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(1) contrast(1.06)" }} />
        : <Scene variant={variant || 0} />}
    </div>
  );
}

/* 1) Texto + imagen (2 columnas). */
function TplTextImage({ section, onNav }) {
  const cfg = _cfg(section);
  const dark = cfg.variant === "dark";
  const imgRight = cfg.imageSide !== "left";
  const txt = (
    <div className="am-rise" key="txt">
      <div className="am-eyebrow-row">
        <TText section={section} field="eyebrow" label="Etiqueta" cls="am-kicker" fb="Sección" tag="span" />
        <span className="am-rule" />
      </div>
      <TText section={section} field="title" label="Título" cls="am-h2" fb="Un título atractivo" tag="h2" style={{ marginBottom: 18 }} />
      <TText section={section} field="body" label="Texto" cls="am-body" fb="Escribe aquí el contenido de esta sección. Haz clic para editarlo en vivo." tag="p" style={{ maxWidth: "52ch" }} />
      <div style={{ marginTop: 32 }}>
        <Btn cmsKey={_k(section, "cta")} label="Botón" section={_grp(section)} text={tcms(section, "cta", "Saber más")} onClick={() => onNav && onNav("contacto")} />
      </div>
    </div>
  );
  const img = <TImg section={section} field="image" label="Imagen" className="am-rise" style={{ aspectRatio: "4/5" }} variant={dark ? 0 : 1} key="img" />;
  return (
    <section id={_secId(section)} className={"am-sec am-divtop " + (dark ? "am-dark" : "am-paper2")}>
      <div className="am-wrap am-2col">
        {imgRight ? [txt, img] : [img, txt]}
      </div>
    </section>
  );
}

/* 2) Frase destacada. */
function TplQuote({ section }) {
  const cfg = _cfg(section);
  const dark = cfg.variant !== "light";
  return (
    <section id={_secId(section)} className={"am-sec am-divtop " + (dark ? "am-dark" : "am-paper2")}>
      <div className="am-wrap am-rise" style={{ maxWidth: 1000 }}>
        <div className="am-eyebrow-row">
          <TText section={section} field="kicker" label="Etiqueta" cls="am-kicker" fb="Manifiesto" tag="span" />
          <span className="am-rule" />
        </div>
        <TText section={section} field="quote" label="Frase" cls="am-h2" fb="Una frase potente que resume tu propuesta de valor." tag="blockquote" style={{ margin: 0, maxWidth: "20ch" }} />
        <TText section={section} field="author" label="Autor" cls="am-lead" fb="— Arquimétrica" tag="p" style={{ marginTop: 28 }} />
      </div>
    </section>
  );
}

/* 3) Cifras. */
function TplStats({ section }) {
  return (
    <section id={_secId(section)} className="am-sec am-divtop am-paper2">
      <div className="am-wrap">
        <div className="am-eyebrow-row am-rise">
          <TText section={section} field="kicker" label="Etiqueta" cls="am-kicker" fb="Cifras" tag="span" />
          <span className="am-rule" />
        </div>
        <TText section={section} field="title" label="Título" cls="am-h2 am-rise" fb="Resultados que hablan" tag="h2" style={{ marginBottom: 48, maxWidth: "16ch" }} />
        <div className="am-rise" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: "clamp(28px,4vw,64px)" }}>
          {[1, 2, 3].map((n) => (
            <div key={n} style={{ borderTop: "1px solid var(--am-line)", paddingTop: 22 }}>
              <TText section={section} field={"stat" + n + "_num"} label={"Cifra " + n} cls="am-num" fb={["+30%", "8M", "15"][n - 1]} tag="div" style={{ fontSize: "clamp(2.6rem,5vw,4.4rem)" }} />
              <TText section={section} field={"stat" + n + "_label"} label={"Detalle " + n} cls="am-body" fb={["mayor plusvalía", "en estudios", "indicadores"][n - 1]} tag="div" style={{ marginTop: 10 }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* 4) Llamado a la acción. */
function TplCta({ section, onNav }) {
  return (
    <section id={_secId(section)} className="am-sec am-divtop am-dark" style={{ textAlign: "center" }}>
      <div className="am-wrap am-rise" style={{ maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
        <TText section={section} field="title" label="Título" cls="am-h2" fb="¿Lista o listo para aumentar el valor de tu propiedad?" tag="h2" style={{ marginBottom: 20 }} />
        <TText section={section} field="subtitle" label="Bajada" cls="am-lead" fb="Agenda un diagnóstico y conversemos tu caso." tag="p" style={{ marginLeft: "auto", marginRight: "auto", maxWidth: "46ch" }} />
        <div style={{ marginTop: 36, display: "flex", justifyContent: "center" }}>
          <Btn cmsKey={_k(section, "cta")} label="Botón" section={_grp(section)} text={tcms(section, "cta", "Agenda tu diagnóstico")} onClick={() => onNav && onNav("contacto")} />
        </div>
      </div>
    </section>
  );
}

/* 6) Video (se sube y comprime desde el panel; editable como campo "video"). */
function TplVideo({ section }) {
  const url = tvid(section, "video");
  return (
    <section id={_secId(section)} className="am-sec am-divtop am-dark">
      <div className="am-wrap">
        <div className="am-eyebrow-row am-rise">
          <TText section={section} field="kicker" label="Etiqueta" cls="am-kicker" fb="Video" tag="span" />
          <span className="am-rule" />
        </div>
        <TText section={section} field="title" label="Título" cls="am-h2 am-rise" fb="Mira cómo trabajamos" tag="h2" style={{ marginBottom: 36, maxWidth: "16ch" }} />
        <div className="am-rise" style={{ position: "relative", overflow: "hidden", background: "#000", aspectRatio: "16 / 9" }}
          data-cms-key={_k(section, "video")} data-cms-kind="video" data-cms-label="Video" data-cms-section={_grp(section)}>
          <video src={url || undefined} controls preload="metadata" playsInline
            style={{ width: "100%", height: "100%", objectFit: "cover", display: url ? "block" : "none" }} />
          <div className="am-vid-ph" style={{ position: "absolute", inset: 0, display: url ? "none" : "grid", placeItems: "center", color: "rgba(255,255,255,.55)", fontFamily: "var(--am-font-mono)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase" }}>
            Sube un video desde el panel
          </div>
        </div>
      </div>
    </section>
  );
}

/* 5) Galería (mosaico). */
function TplGallery({ section }) {
  return (
    <section id={_secId(section)} className="am-sec am-divtop am-paper2">
      <div className="am-wrap">
        <div className="am-eyebrow-row am-rise">
          <TText section={section} field="kicker" label="Etiqueta" cls="am-kicker" fb="Galería" tag="span" />
          <span className="am-rule" />
        </div>
        <TText section={section} field="title" label="Título" cls="am-h2 am-rise" fb="Proyectos y referencias" tag="h2" style={{ marginBottom: 36, maxWidth: "16ch" }} />
        <div className="am-mosaic am-rise">
          <TImg section={section} field="img1" label="Imagen 1" variant={1} />
          <TImg section={section} field="img2" label="Imagen 2" variant={3} />
          <TImg section={section} field="img3" label="Imagen 3" variant={1} />
        </div>
      </div>
    </section>
  );
}