/* Arquimétrica — sitio VERTICAL editorial B&N (parte 2).
   El Informe · Indicadores · El valor · Servicios/Precios · Noticias · Contacto · Footer. */
const cms = window.cms, cmsImg = window.cmsImg;
const ImgFrame = window.ImgFrame, Eyebrow = window.Eyebrow, Btn = window.Btn;

/* ---------------- El Informe de Plusvalía Residencial ---------------- */
const INFORME_ITEMS = [
  "Resumen ejecutivo", "Objetivos del cliente", "Diagnóstico general",
  "Estado constructivo (ICC)", "Estado arquitectónico", "Estado funcional (IFR)",
  "Revisión normativa", "Potencial de ampliación (cabida)", "Comparación de mercado",
  "Oportunidades detectadas", "Ranking de intervenciones", "Estimación de costos",
  "Cronograma sugerido", "Valorización potencial (IAC)", "Conclusiones",
];
function Informe({ onNav }) {
  return (
    <section id="informe" className="am-sec am-divtop">
      <div className="am-wrap">
        <div className="am-2col" style={{ alignItems: "end" }}>
          <div className="am-rise">
            <Eyebrow cmsKey="informe_kicker" label="Etiqueta" section="El Informe" text={cms("informe_kicker", "Producto insignia")} />
            <h2 className="am-display" data-cms-key="informe_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="El Informe" style={{ maxWidth: "13ch" }}>
              {cms("informe_heading", "el informe de plusvalía residencial")}
            </h2>
          </div>
          <p className="am-lead" data-cms-key="informe_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="El Informe" style={{ maxWidth: "42ch", marginBottom: 8 }}>
            {cms("informe_lead", "El cliente no compra una reunión: compra un informe profesional de 20 a 30 páginas que respalda cada decisión sobre su propiedad.")}
          </p>
        </div>

        <div className="am-mosaic am-rise" style={{ marginTop: "clamp(36px,5vw,60px)" }}>
          <ImgFrame cmsKey="informe_img_1" label="Imagen principal" section="El Informe" variant={2} />
          <ImgFrame cmsKey="informe_img_2" label="Imagen 2" section="El Informe" variant={3} />
          <ImgFrame cmsKey="informe_img_3" label="Imagen 3" section="El Informe" variant={0} />
        </div>

        <div className="am-rise" style={{ marginTop: "clamp(44px,6vw,72px)" }}>
          <div className="am-kicker" style={{ marginBottom: 22 }} data-cms-key="informe_items_title" data-cms-kind="text" data-cms-label="Subtítulo lista" data-cms-section="El Informe">
            {cms("informe_items_title", "Qué incluye el informe")}
          </div>
          <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: "2px 40px" }}>
            {INFORME_ITEMS.map((it, i) => (
              <li key={i} style={{ display: "flex", gap: 16, alignItems: "baseline", padding: "13px 0", borderBottom: "1px solid var(--am-line)" }}>
                <span style={{ fontFamily: "var(--am-font-mono)", fontSize: 12, color: "var(--am-mut)", minWidth: 26 }}>{String(i + 1).padStart(2, "0")}</span>
                <span data-cms-key={`informe_item_${i}`} data-cms-kind="text" data-cms-label={`Punto ${i + 1}`} data-cms-section="El Informe" style={{ fontSize: "1rem", color: "#1c1c1c" }}>{cms(`informe_item_${i}`, it)}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Indicadores propios ---------------- */
const INDICADORES = [
  { code: "IPP", name: "Índice de Potencial de Plusvalía", desc: "Capacidad de la vivienda para aumentar su valor mediante intervenciones estratégicas." },
  { code: "IFR", name: "Índice de Funcionalidad Residencial", desc: "Eficiencia de la distribución y el uso real de los espacios." },
  { code: "ICC", name: "Índice de Conservación Constructiva", desc: "Estado general de la vivienda y sus necesidades de mantención." },
  { code: "IAC", name: "Índice de Atractivo Comercial", desc: "Potencial de venta o arriendo de la propiedad en el mercado." },
];
function Indicadores() {
  return (
    <section id="indicadores" className="am-sec am-dark">
      <div className="am-wrap">
        <div className="am-2col" style={{ alignItems: "end", marginBottom: "clamp(40px,5vw,64px)" }}>
          <div className="am-rise">
            <Eyebrow cmsKey="ind_kicker" label="Etiqueta" section="Indicadores" text={cms("ind_kicker", "Métricas exclusivas")} />
            <h2 className="am-h2" data-cms-key="ind_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Indicadores" style={{ maxWidth: "15ch" }}>
              {cms("ind_heading", "indicadores que estandarizan cada informe")}
            </h2>
          </div>
          <p className="am-lead" data-cms-key="ind_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Indicadores" style={{ maxWidth: "40ch" }}>
            {cms("ind_lead", "Diseñamos indicadores propios para evaluar cada propiedad de forma objetiva y comparable.")}
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(230px,1fr))", gap: 0, borderTop: "1px solid var(--am-line-d)", borderLeft: "1px solid var(--am-line-d)" }}>
          {INDICADORES.map((x, i) => (
            <div key={x.code} className="am-rise" style={{ padding: "clamp(26px,2.6vw,38px)", borderRight: "1px solid var(--am-line-d)", borderBottom: "1px solid var(--am-line-d)" }}>
              <div className="am-num" data-cms-key={`ind_${i}_code`} data-cms-kind="text" data-cms-label="Sigla" data-cms-section="Indicadores" style={{ fontSize: "clamp(2.4rem,3.6vw,3.4rem)", marginBottom: 16 }}>{cms(`ind_${i}_code`, x.code)}</div>
              <h3 style={{ fontFamily: "var(--am-font-sans)", fontWeight: 700, fontSize: "1.02rem", lineHeight: 1.25, margin: "0 0 10px" }} data-cms-key={`ind_${i}_name`} data-cms-kind="text" data-cms-label="Nombre" data-cms-section="Indicadores">{cms(`ind_${i}_name`, x.name)}</h3>
              <p className="am-body" style={{ fontSize: ".94rem" }} data-cms-key={`ind_${i}_desc`} data-cms-kind="text" data-cms-label="Descripción" data-cms-section="Indicadores">{cms(`ind_${i}_desc`, x.desc)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- El valor que entregamos ---------------- */
const VALOR_FIGS = [
  { n: "$8M", l: "inversión estratégica, no remodelación innecesaria" },
  { n: "+$12M", l: "aumento estimado del valor de la vivienda" },
  { n: "~$4M", l: "ganancia patrimonial neta para el propietario" },
];
function Valor() {
  return (
    <section id="valor" className="am-sec am-paper2 am-divtop">
      <div className="am-wrap">
        <Eyebrow cmsKey="value_kicker" label="Etiqueta" section="El valor" text={cms("value_kicker", "El valor que entregas")} />
        <h2 className="am-h2 am-rise" data-cms-key="value_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="El valor" style={{ maxWidth: "18ch" }}>
          {cms("value_heading", "no vendes un informe: proteges una inversión de cientos de millones")}
        </h2>
        <p className="am-lead am-rise" data-cms-key="value_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="El valor" style={{ maxWidth: "56ch", marginTop: 22 }}>
          {cms("value_lead", "Ejemplo: en una vivienda de $90 millones, una consultoría evita gastos innecesarios y orienta las mejoras que de verdad generan valor.")}
        </p>
        <div className="am-rise" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: "clamp(20px,3vw,40px)", marginTop: "clamp(40px,5vw,64px)" }}>
          {VALOR_FIGS.map((f, i) => (
            <div key={i} style={{ borderTop: "2px solid var(--am-ink)", paddingTop: 18 }}>
              <div className="am-num" data-cms-key={`value_fig${i}_num`} data-cms-kind="text" data-cms-label={`Cifra ${i + 1}`} data-cms-section="El valor" style={{ fontSize: "clamp(2.8rem,5vw,4.4rem)" }}>{cms(`value_fig${i}_num`, f.n)}</div>
              <p className="am-body" data-cms-key={`value_fig${i}_label`} data-cms-kind="text" data-cms-label={`Detalle ${i + 1}`} data-cms-section="El valor" style={{ marginTop: 12, maxWidth: "28ch", fontSize: ".98rem" }}>{cms(`value_fig${i}_label`, f.l)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Servicios / Precios ---------------- */
const PLAN1 = ["Visita técnica (1 a 2 horas)", "Levantamiento fotográfico", "Revisión general de la propiedad", "Conversación con el cliente", "Identificación preliminar de oportunidades"];
const PLAN2 = ["Diagnóstico arquitectónico y funcional", "Análisis comparativo de mercado", "Matriz de oportunidades de mejora", "Priorización de intervenciones por impacto/costo", "Estimación preliminar de inversión", "Informe profesional de 20–30 páginas", "Reunión de entrega (60–90 min)"];
function PlanCard({ idx, badge, name, price, note, items, cta, dark }) {
  const section = "Servicios";
  return (
    <div className="am-card" style={dark ? { background: "var(--am-ink)", color: "#fff" } : null}>
      {badge && <span className="am-tag" style={dark ? { borderColor: "rgba(255,255,255,.3)", color: "rgba(255,255,255,.8)" } : null} data-cms-key={`plan${idx}_badge`} data-cms-kind="text" data-cms-label="Etiqueta" data-cms-section={section}>{badge}</span>}
      <h3 className="am-h3" style={{ marginTop: badge ? 16 : 0 }} data-cms-key={`plan${idx}_name`} data-cms-kind="text" data-cms-label="Nombre" data-cms-section={section}>{name}</h3>
      <div className="am-num" data-cms-key={`plan${idx}_price`} data-cms-kind="text" data-cms-label="Precio" data-cms-section={section} style={{ fontSize: "clamp(1.8rem,3vw,2.6rem)", margin: "14px 0 4px" }}>{price}</div>
      <p data-cms-key={`plan${idx}_note`} data-cms-kind="text" data-cms-label="Nota" data-cms-section={section} style={{ fontFamily: "var(--am-font-mono)", fontSize: 12, letterSpacing: ".04em", color: dark ? "rgba(255,255,255,.6)" : "var(--am-mut)", margin: "0 0 22px" }}>{note}</p>
      <ul style={{ listStyle: "none", margin: "0 0 28px", padding: 0, display: "grid", gap: 11 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: ".96rem", lineHeight: 1.4, color: dark ? "rgba(255,255,255,.86)" : "#262626" }}>
            <span aria-hidden="true" style={{ flexShrink: 0, marginTop: 2 }}>—</span>
            <span data-cms-key={`plan${idx}_item_${i}`} data-cms-kind="text" data-cms-label={`Punto ${i + 1}`} data-cms-section={section}>{it}</span>
          </li>
        ))}
      </ul>
      <Btn cmsKey={`plan${idx}_cta`} label="Botón" section={section} text={cta} variant={dark ? null : "ghost"} onClick={() => window.__amGoTo && window.__amGoTo("contacto")} />
    </div>
  );
}
function Servicios() {
  return (
    <section id="servicios" className="am-sec am-divtop">
      <div className="am-wrap">
        <div className="am-2col" style={{ alignItems: "end", marginBottom: "clamp(40px,5vw,64px)" }}>
          <div className="am-rise">
            <Eyebrow cmsKey="pricing_kicker" label="Etiqueta" section="Servicios" text={cms("pricing_kicker", "Servicios")} />
            <h2 className="am-display" data-cms-key="pricing_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Servicios" style={{ maxWidth: "12ch" }}>
              {cms("pricing_heading", "dos formas de empezar")}
            </h2>
          </div>
          <p className="am-lead" data-cms-key="pricing_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Servicios" style={{ maxWidth: "40ch" }}>
            {cms("pricing_lead", "Parte por un diagnóstico de entrada o avanza directo a la consultoría completa. El diagnóstico se descuenta si continúas.")}
          </p>
        </div>
        <div className="am-rise" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: "clamp(18px,2.5vw,28px)" }}>
          <PlanCard idx={1} name={cms("plan1_name", "Diagnóstico Inicial")} price={cms("plan1_price", "$79.000 – $129.000")} note={cms("plan1_note", "Se descuenta de la consultoría completa")} items={PLAN1.map((it, i) => cms(`plan1_item_${i}`, it))} cta={cms("plan1_cta", "Agendar diagnóstico")} />
          <PlanCard idx={2} dark badge={cms("plan2_badge", "Producto estrella")} name={cms("plan2_name", "Consultoría de Plusvalía Residencial")} price={cms("plan2_price", "Cotización a medida")} note={cms("plan2_note", "Incluye el Informe de Plusvalía Residencial")} items={PLAN2.map((it, i) => cms(`plan2_item_${i}`, it))} cta={cms("plan2_cta", "Solicitar propuesta")} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- Noticias (blog real) ---------------- */
const NEWS_DEMO = [
  { title: "Cómo la distribución de tu vivienda afecta su valor", tag: "Plusvalía" },
  { title: "5 intervenciones que sí aumentan la plusvalía", tag: "Estrategia" },
  { title: "Qué revisa un informe de plusvalía residencial", tag: "Informe" },
];
function NewsCard({ n, idx }) {
  const [hover, setHover] = React.useState(false);
  const AM_API = (typeof window !== "undefined" && window.__amApi) || "";
  const cover = n.cover ? (String(n.cover).startsWith("http") ? n.cover : AM_API + n.cover) : "";
  const link = n.slug ? AM_API + "/blog/" + n.slug : null;
  const editing = typeof location !== "undefined" && new URLSearchParams(location.search).has("amEdit");
  return (
    <article onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => link && !editing && window.open(link, "_blank")}
      style={{ cursor: link ? "pointer" : "default" }}>
      <div className="am-img" style={{ width: "100%", aspectRatio: "4 / 3" }}>
        {cover
          ? <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${cover})`, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(1) contrast(1.06)", transform: hover ? "scale(1.05)" : "scale(1)", transition: "transform .6s ease" }} />
          : <window.Scene variant={idx + 1} />}
      </div>
      <div style={{ marginTop: 16 }}>
        <span className="am-kicker" style={{ fontSize: 11 }} data-cms-key={`news_${idx}_tag`} data-cms-kind="text" data-cms-label="Etiqueta" data-cms-section="Noticias">{cms(`news_${idx}_tag`, n.tag)}</span>
        <h3 className="am-h3" style={{ margin: "12px 0 10px", fontSize: "1.25rem" }} data-cms-key={`news_${idx}_title`} data-cms-kind="text" data-cms-label="Título" data-cms-section="Noticias">{cms(`news_${idx}_title`, n.title)}</h3>
        <span style={{ fontFamily: "var(--am-font-sans)", fontSize: ".74rem", fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", borderBottom: "1.5px solid var(--am-ink)", paddingBottom: 3 }}>Leer artículo</span>
      </div>
    </article>
  );
}
function News() {
  const posts = (typeof window !== "undefined" && window.__amPosts) || [];
  const items = posts.length ? posts.slice(0, 3).map((p) => ({ title: p.title, tag: p.tag, slug: p.slug, cover: p.coverUrl })) : NEWS_DEMO;
  return (
    <section id="noticias" className="am-sec am-paper2 am-divtop">
      <div className="am-wrap">
        <div className="am-2col" style={{ alignItems: "end", marginBottom: "clamp(36px,5vw,56px)" }}>
          <div className="am-rise">
            <Eyebrow cmsKey="news_kicker" label="Etiqueta" section="Noticias" text={cms("news_kicker", "Ideas y criterio")} />
            <h2 className="am-display" data-cms-key="news_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Noticias" style={{ maxWidth: "10ch" }}>
              {cms("news_heading", "notas")}
            </h2>
          </div>
          <p className="am-lead" data-cms-key="news_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Noticias" style={{ maxWidth: "40ch" }}>
            {cms("news_lead", "Plusvalía, decisiones de inversión y la mirada técnica de Arquimétrica.")}
          </p>
        </div>
        <div className="am-rise" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: "clamp(20px,3vw,34px)" }}>
          {items.map((n, idx) => <NewsCard key={n.slug || idx} n={n} idx={idx} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Contacto ---------------- */
function Contacto() {
  const [f, setF] = React.useState({ nombre: "", email: "", fono: "", msg: "" });
  const [plan, setPlan] = React.useState("Diagnóstico Inicial");
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const upd = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (!f.nombre.trim() || (!f.email.trim() && !f.fono.trim())) { setErr("Indica tu nombre y un correo o teléfono."); return; }
    setErr(""); setBusy(true);
    const txt = `Hola, soy ${f.nombre || "—"}. Me interesa: ${plan}.` + (f.msg ? `\n${f.msg}` : "") + `\nContacto: ${f.email || ""} ${f.fono || ""}`;
    // Registra la consulta en el CRM (cliente + cotización + contacto); luego abre WhatsApp.
    try {
      await fetch((window.__amApi || "") + "/api/contact", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nombre: f.nombre, email: f.email, fono: f.fono, plan, mensaje: f.msg }),
      });
    } catch (_) { /* si falla, la consulta igual se envía por WhatsApp */ }
    window.open("https://wa.me/56951560160?text=" + encodeURIComponent(txt), "_blank");
    setBusy(false); setSent(true);
  };
  const phone = cms("contact_phone", "+56 9 5156 0160");
  const email = cms("contact_email", "contacto@arquimetrica.cl");
  return (
    <section id="contacto" className="am-sec am-dark">
      <div className="am-wrap am-2col" style={{ alignItems: "start" }}>
        <div className="am-rise">
          <Eyebrow cmsKey="contact_kicker" label="Etiqueta" section="Contacto" text={cms("contact_kicker", "Conversemos")} />
          <h2 className="am-display" data-cms-key="contact_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Contacto" style={{ maxWidth: "11ch" }}>
            {cms("contact_heading", "agenda tu diagnóstico")}
          </h2>
          <p className="am-lead" data-cms-key="contact_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Contacto" style={{ maxWidth: "40ch", marginTop: 22 }}>
            {cms("contact_lead", "Cuéntanos sobre tu propiedad y te respondemos con los próximos pasos. También puedes escribirnos directo por WhatsApp.")}
          </p>
          <div style={{ marginTop: 30, display: "grid", gap: 10 }}>
            <a href={`tel:${phone.replace(/\s/g, "")}`} style={{ color: "#fff", textDecoration: "none", fontSize: "1.05rem" }}><span data-cms-key="contact_phone" data-cms-kind="text" data-cms-label="Teléfono" data-cms-section="Contacto">{phone}</span></a>
            <a href={`mailto:${email}`} style={{ color: "rgba(255,255,255,.8)", textDecoration: "none", fontSize: "1.05rem" }}><span data-cms-key="contact_email" data-cms-kind="text" data-cms-label="Correo" data-cms-section="Contacto">{email}</span></a>
          </div>
        </div>

        {sent ? (
          <div className="am-rise" style={{ border: "1px solid var(--am-line-d)", padding: "clamp(28px,4vw,44px)" }}>
            <div className="am-num" style={{ fontSize: "clamp(1.8rem,3vw,2.6rem)" }}>¡Gracias!</div>
            <p className="am-body" style={{ marginTop: 14 }}>Recibimos tu consulta y te contactaremos a la brevedad. Si se abrió WhatsApp, también puedes enviarnos el mensaje directo.</p>
            <button className="am-btn am-btn--ghost" style={{ marginTop: 24, borderColor: "#fff", color: "#fff" }} onClick={() => { setSent(false); setF({ nombre: "", email: "", fono: "", msg: "" }); }}>Enviar otra consulta</button>
          </div>
        ) : (
          <form className="am-rise" onSubmit={submit} style={{ display: "grid", gap: 14 }}>
            <input className="am-input" placeholder="Nombre" value={f.nombre} onChange={upd("nombre")} aria-label="Nombre" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <input className="am-input" type="email" placeholder="Correo" value={f.email} onChange={upd("email")} aria-label="Correo" />
              <input className="am-input" placeholder="Teléfono" value={f.fono} onChange={upd("fono")} aria-label="Teléfono" />
            </div>
            <select className="am-input" value={plan} onChange={(e) => setPlan(e.target.value)} aria-label="Servicio de interés">
              <option>Diagnóstico Inicial</option>
              <option>Consultoría de Plusvalía Residencial</option>
              <option>Otra consulta</option>
            </select>
            <textarea className="am-input" rows="4" placeholder="Cuéntanos sobre tu propiedad" value={f.msg} onChange={upd("msg")} aria-label="Mensaje" style={{ resize: "vertical" }} />
            {err ? <div style={{ color: "#ff9b9b", fontSize: ".88rem" }}>{err}</div> : null}
            <button type="submit" disabled={busy} className="am-btn" style={{ background: "#fff", color: "var(--am-ink)", borderColor: "#fff", justifyContent: "center", opacity: busy ? 0.7 : 1 }}>
              <span>{busy ? "Enviando…" : "Enviar consulta"}</span>{busy ? null : <span className="am-arr" aria-hidden="true">→</span>}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function SiteFooter({ onNav }) {
  const phone = cms("contact_phone", "+56 9 5156 0160");
  const email = cms("contact_email", "contacto@arquimetrica.cl");
  const link = { display: "block", background: "none", border: 0, padding: 0, textAlign: "left", cursor: "pointer", color: "rgba(255,255,255,.66)", fontSize: ".95rem", marginTop: 10, fontFamily: "var(--am-font-sans)" };
  const head = { fontFamily: "var(--am-font-mono)", fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "rgba(255,255,255,.45)" };
  return (
    <footer id="footer" className="am-sec am-dark" style={{ paddingTop: "clamp(56px,7vw,90px)", paddingBottom: "clamp(40px,5vw,60px)" }}>
      <div className="am-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 36, alignItems: "start" }} className="am-foot">
          <div>
            <div style={{ fontFamily: "var(--am-font-display)", fontWeight: 800, fontSize: 22, textTransform: "uppercase", letterSpacing: ".02em" }}>Arquimétrica</div>
            <p data-cms-key="footer_tagline" data-cms-kind="text" data-cms-label="Descripción" data-cms-section="Footer" style={{ marginTop: 14, maxWidth: "34ch", color: "rgba(255,255,255,.62)", fontSize: ".96rem", lineHeight: 1.6 }}>
              {cms("footer_tagline", "Consultoría de plusvalía residencial. Aumentamos el valor de tu vivienda con arquitectura estratégica e inteligencia inmobiliaria.")}
            </p>
          </div>
          <div>
            <div style={head}>Secciones</div>
            <button style={link} onClick={() => onNav("metodo")}>Método P.L.U.S.</button>
            <button style={link} onClick={() => onNav("informe")}>El informe</button>
            <button style={link} onClick={() => onNav("servicios")}>Servicios</button>
          </div>
          <div>
            <div style={head}>Contacto</div>
            <a style={link} href={`tel:${phone.replace(/\s/g, "")}`}>{phone}</a>
            <a style={link} href={`mailto:${email}`}>{email}</a>
            <span style={{ ...link, cursor: "default" }} data-cms-key="footer_address" data-cms-kind="text" data-cms-label="Dirección" data-cms-section="Footer">{cms("footer_address", "Concepción, Biobío, Chile")}</span>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginTop: 48, paddingTop: 22, borderTop: "1px solid var(--am-line-d)", fontFamily: "var(--am-font-mono)", fontSize: 12, color: "rgba(255,255,255,.4)" }}>
          <span>© 2026 Arquimétrica — Victor Riesco</span>
          <span>Concepción · Universidad del Biobío</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Informe, Indicadores, Valor, Servicios, News, Contacto, SiteFooter });