// chrome.jsx — shared multi-page Nav + Footer.  Exports SiteNav, SiteFooter → window
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"],
["Flipping inmobiliario.html", "Flipping", "Flipping inmobiliario", "flipping"],
["Quienes somos.html", "Nosotros", "Quiénes somos", "nosotros"],
["Blog inmobiliario.html", "Blog", "Blog inmobiliario", "blog"],
["Socios comerciales.html", "Socios", "Nuestros socios comerciales", "socios"]];


function SiteNav({ active = "home" }) {
  const { scrolled, progress } = window.useNavScroll();
  const [open, setOpen] = useChromeState(false);
  return (
    <>
      <div className="gr-progress" style={{ width: progress + "%" }} />
      <nav className={"gr-nav" + (scrolled ? " scrolled" : "")} style={{ gap: "28px", padding: "33px 29px 17px 28px", borderWidth: "0px" }}>
        <a className="brand" href="index.html">
          <img src="assets/logo-white.png" alt="Grupo Remodelar" style={{ height: "58px", width: "auto" }} />
          <span className="tag" style={{ fontSize: "9px" }}>Remodelación<br />y construcción</span>
        </a>
        <div className="links">
          {GR_PAGES.map(([href, short,, key]) =>
          <a key={key} href={href} className={key === active ? "active" : ""} style={{ fontSize: "14px" }}>{short}<span /></a>
          )}
        </div>
        <a className="gr-cta" href={GR_WA_URL} 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]) =>
        <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 flipping inmobiliario 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>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 });