/* Arquimétrica — sitio VERTICAL, editorial, blanco y negro.
   Contenido: Consultoría de Plusvalía Residencial.
   Top: Nav, Hero, Manifiesto, Nosotros, Método P.L.U.S.
   Todo editable en vivo (data-cms-*) vía el panel admin. */

/* Lee un override editable (CMS del admin), o el fallback. */
function cms(key, fallback) {
  const c = (typeof window !== "undefined" && window.__amContent) || {};
  return (c[key] !== undefined && c[key] !== "") ? c[key] : fallback;
}

/* Resuelve una URL de imagen del CMS (relativa → API del mismo origen). */
function cmsImg(key) {
  const v = cms(key, "");
  if (!v) return "";
  return String(v).startsWith("http") ? v : ((typeof window !== "undefined" && window.__amApi) || "") + v;
}

/* ============================================================
   Placeholder arquitectónico (SVG) — se muestra en gris cuando
   un espacio de imagen aún no tiene foto cargada. Sin fotos
   externas: el editor reemplaza cada uno por una imagen real.
   ============================================================ */
function Scene({ variant = 0 }) {
  const tones = [
    { a: "#1a1a1a", b: "#2c2c2c", c: "#3d3d3d", d: "#4f4f4f", sky: "#0e0e0e", g: "#111" },
    { a: "#f0efec", b: "#dcdbd7", c: "#c7c6c1", d: "#b2b1ac", sky: "#f6f5f2", g: "#e8e7e3" },
    { a: "#222", b: "#333", c: "#444", d: "#555", sky: "#161616", g: "#1a1a1a" },
    { a: "#e7e6e2", b: "#d2d1cc", c: "#bcbbb6", d: "#a6a5a0", sky: "#efeeeb", g: "#dddcd8" },
  ];
  const P = tones[variant % tones.length];
  return (
    <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}>
      <rect width="800" height="600" fill={P.sky} />
      <rect x="470" y="150" width="170" height="330" fill={P.d} />
      <rect x="250" y="205" width="300" height="275" fill={P.c} />
      <rect x="238" y="196" width="324" height="13" fill={P.b} />
      <rect x="150" y="250" width="300" height="165" fill={P.b} />
      <rect x="150" y="250" width="300" height="11" fill={P.a} />
      <rect x="174" y="278" width="150" height="120" fill={P.a} opacity="0.55" />
      <g stroke={P.a} strokeWidth="1" opacity="0.5">
        {Array.from({ length: 4 }).map((_, i) => <line key={"v" + i} x1={174 + i * 50} y1="278" x2={174 + i * 50} y2="398" />)}
        {Array.from({ length: 3 }).map((_, i) => <line key={"h" + i} x1="174" y1={278 + i * 40} x2="324" y2={278 + i * 40} />)}
      </g>
      <rect x="0" y="480" width="800" height="120" fill={P.g} />
      <ellipse cx="100" cy="450" rx="74" ry="96" fill={P.d} />
      <rect x="92" y="500" width="12" height="70" fill={P.a} opacity="0.6" />
    </svg>
  );
}

/* Marco de imagen editable: foto del CMS o, si no hay, el placeholder gris. */
function ImgFrame({ cmsKey, label, section, variant = 0, className = "", style }) {
  const url = cmsImg(cmsKey);
  return (
    <div className={"am-img " + className} data-cms-key={cmsKey} data-cms-kind="image"
      data-cms-label={label} data-cms-section={section} style={style}>
      {url
        ? <div style={{ position: "absolute", inset: 0, backgroundImage: `url(${url})`, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(1) contrast(1.06)" }} />
        : <Scene variant={variant} />}
    </div>
  );
}

/* Etiqueta superior (kicker) editable, con regla opcional. */
function Eyebrow({ cmsKey, label, section, text, rule = true }) {
  return (
    <div className="am-eyebrow-row">
      <span className="am-kicker" data-cms-key={cmsKey} data-cms-kind="text" data-cms-label={label || "Etiqueta"} data-cms-section={section}>{text}</span>
      {rule && <span className="am-rule" />}
    </div>
  );
}

/* Botón con flecha cuya etiqueta es editable sin perder la flecha. */
function Btn({ cmsKey, label, section, text, onClick, href, variant, arrow = true }) {
  const cls = "am-btn" + (variant === "ghost" ? " am-btn--ghost" : "");
  const inner = (
    <React.Fragment>
      <span data-cms-key={cmsKey} data-cms-kind="text" data-cms-label={label || "Botón"} data-cms-section={section}>{text}</span>
      {arrow && <span className="am-arr" aria-hidden="true">→</span>}
    </React.Fragment>
  );
  if (href) return <a className={cls} href={href} onClick={onClick}>{inner}</a>;
  return <button className={cls} onClick={onClick}>{inner}</button>;
}

/* ---------------- Nav ---------------- */
function Nav({ onNav }) {
  return (
    <nav id="am-nav" className="am-nav">
      <button className="am-brand" onClick={() => onNav("inicio")} aria-label="Arquimétrica — inicio">
        <b>Arquimétrica</b>
      </button>
      <div className="am-navlinks">
        <button className="am-navlink" onClick={() => onNav("perfil")}>Arquitecto</button>
        <button className="am-navlink" onClick={() => onNav("metodo")}>Método</button>
        <button className="am-navlink" onClick={() => onNav("informe")}>El informe</button>
        <button className="am-navlink" onClick={() => onNav("servicios")}>Servicios</button>
        <button className="am-navcta" onClick={() => onNav("contacto")}><span>Contacto</span></button>
      </div>
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ onNav }) {
  return (
    <section id="inicio" className="am-sec am-dark" style={{
      minHeight: "100vh", display: "flex", alignItems: "flex-end", overflow: "hidden",
      paddingTop: "clamp(120px,18vh,200px)", paddingBottom: "clamp(54px,9vh,108px)",
    }}>
      <ImgFrame cmsKey="hero_image" label="Imagen de portada" section="Portada" variant={0} style={{ position: "absolute", inset: 0, zIndex: 0 }} />
      <div style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(to top, rgba(11,11,11,.92), rgba(11,11,11,.34) 56%, rgba(11,11,11,.55))" }} />
      <div className="am-wrap" style={{ zIndex: 2, width: "100%" }}>
        <Eyebrow cmsKey="hero_eyebrow" label="Bajada superior" section="Portada" text={cms("hero_eyebrow", "Consultoría de Plusvalía Residencial")} />
        <h1 className="am-display" data-cms-key="hero_title" data-cms-kind="text" data-cms-label="Título" data-cms-section="Portada" style={{ maxWidth: "14ch" }}>
          {cms("hero_title", "aumenta el valor de tu vivienda")}
        </h1>
        <p className="am-lead" data-cms-key="hero_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Portada" style={{ maxWidth: "48ch", marginTop: 28, color: "rgba(255,255,255,.82)" }}>
          {cms("hero_lead", "Arquitectura estratégica, análisis técnico e inteligencia inmobiliaria para decidir dónde invertir y cuánto valor puedes generar en tu propiedad.")}
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 40 }}>
          <Btn cmsKey="hero_cta" label="Botón principal" section="Portada" text={cms("hero_cta", "Agenda tu diagnóstico")} onClick={() => onNav("contacto")} />
          <Btn text="Conoce el método" section="Portada" cmsKey="hero_cta2" label="Botón secundario" variant="ghost" arrow={false} onClick={() => onNav("metodo")} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- Manifiesto ---------------- */
function Manifiesto() {
  return (
    <section id="manifiesto" className="am-sec">
      <div className="am-wrap am-rise">
        <Eyebrow cmsKey="manifesto_kicker" label="Etiqueta" section="Manifiesto" text={cms("manifesto_kicker", "Principio rector")} />
        <h2 className="am-display" data-cms-key="manifesto_heading" data-cms-kind="text" data-cms-label="Frase grande" data-cms-section="Manifiesto" style={{ maxWidth: "15ch" }}>
          {cms("manifesto_heading", "no diseñamos por diseñar.")}
        </h2>
        <p data-cms-key="manifesto_body" data-cms-kind="text" data-cms-label="Texto" data-cms-section="Manifiesto" style={{
          maxWidth: "38ch", marginTop: 32, fontFamily: "var(--am-font-display)", fontWeight: 500,
          fontSize: "clamp(1.35rem,2.5vw,2.1rem)", lineHeight: 1.3, letterSpacing: "-.01em", color: "#111",
        }}>
          {cms("manifesto_body", "Diseñamos para aumentar el valor del patrimonio de nuestros clientes mediante decisiones arquitectónicas estratégicas, técnicamente fundamentadas y respaldadas por inteligencia inmobiliaria.")}
        </p>
      </div>
    </section>
  );
}

/* ---------------- Nosotros ---------------- */
function About() {
  return (
    <section id="nosotros" className="am-sec am-paper2 am-divtop">
      <div className="am-wrap am-2col">
        <div className="am-rise">
          <Eyebrow cmsKey="about_kicker" label="Etiqueta" section="Nosotros" text={cms("about_kicker", "Quiénes somos")} />
          <h2 className="am-h2" data-cms-key="about_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Nosotros" style={{ maxWidth: "16ch" }}>
            {cms("about_heading", "valorización residencial mediante arquitectura estratégica")}
          </h2>
          <div style={{ marginTop: 28 }} className="am-stack-sm">
            <p className="am-body" data-cms-key="about_body" data-cms-kind="text" data-cms-label="Párrafo 1" data-cms-section="Nosotros">
              {cms("about_body", "Somos la primera consultora chilena especializada en aumentar el valor de las viviendas. No vendemos remodelaciones ni planos: entregamos información y estrategia para invertir donde realmente se genera valor.")}
            </p>
            <p className="am-body" data-cms-key="about_body2" data-cms-kind="text" data-cms-label="Párrafo 2" data-cms-section="Nosotros">
              {cms("about_body2", "Cuando una persona piensa en aumentar el valor de su vivienda, Arquimétrica debe ser la primera empresa que venga a su mente.")}
            </p>
          </div>
        </div>
        <div className="am-rise">
          <ImgFrame cmsKey="about_image" label="Foto" section="Nosotros" variant={1} style={{ width: "100%", aspectRatio: "4 / 5" }} />
          <div className="am-tag" style={{ marginTop: 14 }} data-cms-key="about_caption" data-cms-kind="text" data-cms-label="Leyenda" data-cms-section="Nosotros">
            {cms("about_caption", "Arquimétrica · Concepción, Chile")}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Método P.L.U.S. ---------------- */
const PLUS = [
  { L: "P", w: "Patrimonio", d: "Comprendemos la vivienda y el objetivo real del propietario." },
  { L: "L", w: "Lectura", d: "Diagnóstico arquitectónico, técnico y normativo de la propiedad." },
  { L: "U", w: "Utilización", d: "Detectamos las oportunidades concretas de valorización." },
  { L: "S", w: "Smart Investment", d: "Diseñamos un plan de inversión priorizado según el retorno esperado." },
];
function Metodo() {
  return (
    <section id="metodo" className="am-sec am-dark">
      <div className="am-wrap">
        <Eyebrow cmsKey="method_kicker" label="Etiqueta" section="Método P.L.U.S." text={cms("method_kicker", "Metodología propia")} />
        <h2 className="am-display" data-cms-key="method_heading" data-cms-kind="text" data-cms-label="Título" data-cms-section="Método P.L.U.S.">
          {cms("method_heading", "el método p.l.u.s.")}
        </h2>
        <p className="am-lead" data-cms-key="method_lead" data-cms-kind="text" data-cms-label="Bajada" data-cms-section="Método P.L.U.S." style={{ maxWidth: "46ch", marginTop: 24 }}>
          {cms("method_lead", "Una metodología registrada y repetible que es el eje de todos nuestros servicios.")}
        </p>
        <div style={{ marginTop: "clamp(40px,6vw,72px)", borderTop: "1px solid var(--am-line-d)" }}>
          {PLUS.map((m, i) => (
            <div key={m.L} className="am-rise" style={{
              display: "grid", gridTemplateColumns: "minmax(70px,150px) 1fr", gap: "clamp(18px,4vw,56px)",
              alignItems: "baseline", padding: "clamp(22px,3.4vw,40px) 0", borderBottom: "1px solid var(--am-line-d)",
            }}>
              <div className="am-num" style={{ fontSize: "clamp(3.2rem,9vw,7.5rem)" }}>{m.L}</div>
              <div>
                <h3 className="am-h3" data-cms-key={`method_${i}_word`} data-cms-kind="text" data-cms-label={`Palabra ${m.L}`} data-cms-section="Método P.L.U.S.">
                  {cms(`method_${i}_word`, m.w)}
                </h3>
                <p className="am-body" data-cms-key={`method_${i}_desc`} data-cms-kind="text" data-cms-label={`Descripción ${m.L}`} data-cms-section="Método P.L.U.S." style={{ marginTop: 12, maxWidth: "48ch" }}>
                  {cms(`method_${i}_desc`, m.d)}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Perfil / CV de Victor Riesco ---------------- */
const CV_EDU = [
  "Arquitecto — Universidad del Biobío, Concepción",
  "Diplomado en gestión y desarrollo inmobiliario",
  "Especialización en valorización y tasación residencial",
];
const CV_EXP = [
  "Fundador y arquitecto — Arquimétrica (actualidad)",
  "Proyectos de arquitectura, ampliaciones y remodelaciones",
  "Regularización y recepciones municipales (DOM)",
  "Asesoría de plusvalía a propietarios e inversionistas",
];
const CV_SKILLS = [
  "Valorización residencial",
  "Regularización y permisos (DOM)",
  "Diseño y remodelación",
  "Inspección técnica de viviendas",
  "Análisis de mercado inmobiliario",
  "Estudios de cabida y normativa",
];
const CV_FACTS = [
  { n: "Concepción", l: "Región del Biobío" },
  { n: "U. del Biobío", l: "formación" },
  { n: "Plusvalía", l: "área de especialidad" },
];
const CV_SECTION = "El arquitecto";

function CvList({ titleKey, titleFallback, items, keyPrefix }) {
  return (
    <div>
      <div className="am-kicker" style={{ display: "block", marginBottom: 14 }} data-cms-key={titleKey} data-cms-kind="text" data-cms-label="Subtítulo" data-cms-section={CV_SECTION}>
        {cms(titleKey, titleFallback)}
      </div>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        {items.map((it, i) => (
          <li key={i} style={{ padding: "11px 0", borderTop: "1px solid var(--am-line)" }}>
            <span data-cms-key={`${keyPrefix}_${i}`} data-cms-kind="text" data-cms-label={`Punto ${i + 1}`} data-cms-section={CV_SECTION} style={{ fontSize: ".97rem", color: "#1c1c1c", lineHeight: 1.45 }}>
              {cms(`${keyPrefix}_${i}`, it)}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Perfil() {
  return (
    <section id="perfil" className="am-sec am-divtop">
      <div className="am-wrap">
        <Eyebrow cmsKey="profile_kicker" label="Etiqueta" section={CV_SECTION} text={cms("profile_kicker", "El arquitecto")} />
        <div className="am-2col" style={{ alignItems: "start", marginBottom: "clamp(40px,5vw,68px)" }}>
          <div className="am-rise">
            <ImgFrame cmsKey="profile_image" label="Foto de Victor" section={CV_SECTION} variant={1} style={{ width: "100%", aspectRatio: "4 / 5" }} />
          </div>
          <div className="am-rise">
            <h2 className="am-display" data-cms-key="profile_name" data-cms-kind="text" data-cms-label="Nombre" data-cms-section={CV_SECTION} style={{ fontSize: "clamp(2.4rem,5vw,4.6rem)" }}>
              {cms("profile_name", "Victor Riesco")}
            </h2>
            <div className="am-kicker" style={{ display: "block", marginTop: 16 }} data-cms-key="profile_role" data-cms-kind="text" data-cms-label="Cargo" data-cms-section={CV_SECTION}>
              {cms("profile_role", "Arquitecto · Fundador de Arquimétrica")}
            </div>
            <p className="am-body" style={{ marginTop: 22, maxWidth: "46ch" }} data-cms-key="profile_bio" data-cms-kind="text" data-cms-label="Reseña" data-cms-section={CV_SECTION}>
              {cms("profile_bio", "Arquitecto titulado de la Universidad del Biobío (Concepción). Une diseño arquitectónico, análisis técnico y visión inmobiliaria para ayudar a los propietarios a tomar decisiones que aumentan el valor de su patrimonio.")}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginTop: 30 }}>
              {CV_FACTS.map((f, i) => (
                <div key={i} style={{ borderTop: "2px solid var(--am-ink)", paddingTop: 12 }}>
                  <div style={{ fontFamily: "var(--am-font-display)", fontWeight: 800, fontSize: "1.1rem", letterSpacing: "-.01em", lineHeight: 1.1 }} data-cms-key={`profile_fact${i}_num`} data-cms-kind="text" data-cms-label={`Dato ${i + 1}`} data-cms-section={CV_SECTION}>{cms(`profile_fact${i}_num`, f.n)}</div>
                  <div style={{ fontSize: ".8rem", color: "var(--am-mut)", marginTop: 5, lineHeight: 1.3 }} data-cms-key={`profile_fact${i}_label`} data-cms-kind="text" data-cms-label={`Detalle ${i + 1}`} data-cms-section={CV_SECTION}>{cms(`profile_fact${i}_label`, f.l)}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="am-rise" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(230px,1fr))", gap: "clamp(28px,4vw,56px)" }}>
          <CvList titleKey="profile_edu_title" titleFallback="Formación" items={CV_EDU} keyPrefix="profile_edu" />
          <CvList titleKey="profile_exp_title" titleFallback="Experiencia" items={CV_EXP} keyPrefix="profile_exp" />
          <CvList titleKey="profile_skill_title" titleFallback="Especialidades" items={CV_SKILLS} keyPrefix="profile_skill" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { cms, cmsImg, Scene, ImgFrame, Eyebrow, Btn, Nav, Hero, Manifiesto, About, Perfil, Metodo });