// chrome.jsx — shared multi-page Nav + Footer.  Exports SiteNav, SiteFooter → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const { useState: useChromeState } = React;

const GR_WA = "5491150522993";
const GR_MAIL = "contacto@gruporemodelar.com.ar";
const GR_IG = "https://www.instagram.com/grupo_remodelar/";
const GR_FB = "https://www.facebook.com/profile.php?id=61579792974689";
const GR_TT = "https://www.tiktok.com/@grupo_remodelar";
const GR_WA_URL = "https://wa.me/" + GR_WA + "?text=" + encodeURIComponent("Hola Grupo Remodelar 👷 quiero una cotización sin costo.");

// [ href, short label (desktop), full label (overlay + footer), key ]
const GR_PAGES = [
["index.html", "Construcción", "Construcción y remodelación", "home"],
["Remodela tu casa.html", "Remodelar", "Remodelá tu casa", "remodela"],
["Servicios inmobiliarios.html", "Inmobiliaria", "Servicios inmobiliarios", "servicios-inmo"],
["Quienes somos.html", "Nosotros", "Quiénes somos", "nosotros"],
["Blog inmobiliario.html", "Blog", "Blog inmobiliario", "blog"],
["Socios comerciales.html", "Socios", "Nuestros socios comerciales", "socios"]];

// Sub-páginas del dropdown "Servicios inmobiliarios"
const GR_SERVICIOS_INMO = [
["Servicios inmobiliarios.html", "Ver todos los servicios", true],
["Servicios inmobiliarios - Venta.html", "Venta de propiedades"],
["Servicios inmobiliarios - Tasaciones.html", "Tasaciones"],
["Servicios inmobiliarios - Informe pre-compra.html", "Informe Pre-Compra"],
["Servicios inmobiliarios - Alquileres.html", "Alquileres"]];


function SiteNav({ active = "home" }) {
  const { scrolled, progress } = window.useNavScroll();
  const [open, setOpen] = useChromeState(false);
  const [subOpen, setSubOpen] = useChromeState(false);
  const inmoActive = active === "servicios-inmo";
  return (
    <>
      <div className="gr-progress" style={{ width: progress + "%" }} />
      <nav className={"gr-nav gr-nav-tuned" + (scrolled ? " scrolled" : "")}>
        <a className="brand" href="index.html">
          <img src="assets/logo-white.png" alt="Grupo Remodelar" />
          <span className="tag" style={{ fontSize: "9px" }}>Remodelación<br />y construcción</span>
        </a>
        <div className="links">
          {GR_PAGES.map(([href, short,, key]) =>
          key === "servicios-inmo" ?
          <div className="nav-dd" key={key}>
              <a href={href} className={inmoActive ? "active" : ""} style={{ fontSize: "14px" }}>{short}<i className="cv">▾</i><span /></a>
              <div className="dd-panel">
                {GR_SERVICIOS_INMO.map(([sh, sl, all]) =>
                <a key={sh} href={sh} className={all ? "all" : ""}>{sl}</a>
                )}
              </div>
            </div> :

          <a key={key} href={href} className={key === active ? "active" : ""} style={{ fontSize: "14px" }}>{short}<span /></a>
          )}
        </div>
        <a className="gr-cta" href={GRWA_LINK("Cotización gratis")} target="_blank" rel="noopener">Cotización gratis <span className="arrow">→</span></a>
        <button className={"burger" + (open ? " open" : "")} type="button" aria-label="Menú" onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={"nav-overlay" + (open ? " open" : "")}>
        {GR_PAGES.map(([href,, full, key]) =>
        key === "servicios-inmo" ?
        <div className="ov-group" key={key}>
            <button type="button" className={"ov-parent" + (subOpen || inmoActive ? " open" : "")} onClick={() => setSubOpen((s) => !s)}>
              {full}<i className="cv">▾</i>
            </button>
            <div className={"ov-sub" + (subOpen ? " open" : "")}>
              {GR_SERVICIOS_INMO.slice(1).map(([sh, sl]) =>
              <a key={sh} href={sh} onClick={() => setOpen(false)}>{sl}</a>
              )}
            </div>
          </div> :

        <a key={key} href={href} className={key === active ? "active" : ""} onClick={() => setOpen(false)}>{full}</a>
        )}
      </div>
    </>);

}

function SiteFooter() {
  return (
    <footer className="gr-foot">
      <div className="wrap">
        <div className="row">
          <div className="brand">
            <img src="assets/logo-white.png" alt="Grupo Remodelar" style={{ height: "88px", width: "auto" }} />
            <p style={{ fontSize: "16px" }}>Construcción, remodelación integral y servicios inmobiliarios en CABA y GBA. Tu inversión inteligente comienza acá.</p>
          </div>
          <div>
            <h4>Páginas</h4>
            {GR_PAGES.map(([href,, full, key]) => <a className="flink" key={key} href={href}>{full}</a>)}
          </div>
          <div>
            <h4>Servicios inmobiliarios</h4>
            {GR_SERVICIOS_INMO.slice(1).map(([href, label]) => <a className="flink" key={href} href={href}>{label}</a>)}
          </div>
          <div>
            <h4>Contacto</h4>
            <a className="flink" href={`https://wa.me/${GR_WA}`} target="_blank" rel="noopener">WhatsApp · 11 5052-2993</a>
            <a className="flink" href={`mailto:${GR_MAIL}`}>{GR_MAIL}</a>
            <a className="flink" href={GR_IG} target="_blank" rel="noopener">Instagram · @grupo_remodelar</a>
            <a className="flink" href={GR_TT} target="_blank" rel="noopener">TikTok · @grupo_remodelar</a>
            <a className="flink" href={GR_FB} target="_blank" rel="noopener">Facebook</a>
          </div>
          <div>
            <h4>Dónde estamos</h4>
            <span className="flink" style={{ color: "var(--gr-gray-500)" }}>Juan B. Justo 8921</span>
            <span className="flink" style={{ color: "var(--gr-gray-500)" }}>Versailles, CABA</span>
            <span className="flink" style={{ color: "var(--gr-gray-500)" }}>Atención en CABA y GBA</span>
          </div>
        </div>
        <div className="legal">
          <span>© Grupo Remodelar 2015 - 2025 · Todos los derechos reservados</span>
          <span>Grupo Doblezzeta</span>
          <span>gruporemodelar · CABA · GBA</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { SiteNav, SiteFooter });