/*
  inv-shared.jsx — helpers, iconos, Nav y Footer para las páginas de inventario.
  Carga después de React. Exporta a window para que las otras vistas lo usen.
*/

const WA_URL = "https://wa.me/523327947692?text=Hola%20Emiliano%2C%20me%20interesa%20una%20propiedad%20de%20tu%20inventario.";

const TYPE_LABEL = {
  casa: "Casa", departamento: "Departamento", terreno: "Terreno",
  oficina: "Oficina", local: "Local comercial", bodega: "Bodega", nave: "Industrial",
};
const OP_LABEL = { venta: "Venta", renta: "Renta", preventa: "Preventa" };

function fmtPrice(p) {
  const n = (p.price || 0).toLocaleString("es-MX");
  const per = p.pricePeriod ? ` /${p.pricePeriod}` : "";
  return { value: `$${n}`, per };
}

// ── Iconos de specs ──
const IconBed = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 17v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 17v2m18-2v2M3 13h18M7 10V8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2m0 0V8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const IconBath = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M4 12V6a2 2 0 0 1 2-2 2 2 0 0 1 2 2M4 12h16v2a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-2Zm3 8 .5-1m9.5 1-.5-1M8 6h2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const IconArea = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v16H4V4Zm0 6h4m12 0h-4M10 4v4m0 12v-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const IconLand = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 20h18M5 20V9l7-5 7 5v11M9 20v-5h6v5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const IconPin = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 22s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12Z" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="10" r="2.6" stroke="currentColor" strokeWidth="1.8"/></svg>
);
const IconCar = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11m-14 0h14m-14 0a2 2 0 0 0-2 2v4h2m14-6a2 2 0 0 1 2 2v4h-2m-12 0h12m-12 0v1m12-1v1M7 14h1m8 0h1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
);

function PropSpecs({ p }) {
  const ICONS = { bed: <IconBed />, bath: <IconBath />, area: <IconArea />, land: <IconLand /> };
  const items = [];
  if (p.bedrooms != null) items.push(["bed", `${p.bedrooms}`]);
  if (p.bathrooms != null) items.push(["bath", `${p.bathrooms}`]);
  if (p.type === "terreno") {
    if (p.landM2 != null) items.push(["land", `${p.landM2} m²`]);
  } else if (p.constructionM2 != null) {
    items.push(["area", `${p.constructionM2} m²`]);
  }
  return (
    <>
      {items.map(([ic, tx], i) => (
        <span className="pcard-spec" key={i}>{ICONS[ic]}{tx}</span>
      ))}
    </>
  );
}

// ─────────── NAV ───────────
function InvNav({ active }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    if (open) document.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; document.removeEventListener('keydown', onKey); };
  }, [open]);
  const links = [
    ["index.html", "Inicio"],
    ["propiedades.html", "Propiedades"],
    ["blog.html", "Blog"],
    ["index.html#services", "Servicios"],
    ["index.html#contact", "Contacto"],
  ];
  return (
    <>
      <nav className={open ? "nav nav-solid scrolled" : "nav nav-solid"}>
        <a href="index.html" className="nav-brand">
          Emiliano Centenero
          <small>Bienes raíces · GDL & Zapopan</small>
        </a>
        <div className="nav-links">
          {links.map(([href, label]) => (
            <a key={href} href={href} style={active === href ? { opacity: 1, color: 'var(--accent)' } : null}>{label}</a>
          ))}
        </div>
        <div className="nav-right">
          <a href={WA_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary inv-nav-cta">WhatsApp</a>
          <button className={open ? 'nav-burger is-open' : 'nav-burger'} aria-label="Menú" onClick={() => setOpen(o => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
      <div className={open ? "mobile-menu open" : "mobile-menu"}>
        <nav className="mobile-menu-links">
          {links.map(([href, label]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
        </nav>
        <a className="mobile-menu-cta" href={WA_URL} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>
          <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 1.5a6.5 6.5 0 0 0-5.5 10L1.5 14.5l3-1A6.5 6.5 0 1 0 8 1.5Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /></svg>
          Hablemos por WhatsApp
        </a>
      </div>
    </>
  );
}

// ─────────── FOOTER ───────────
function InvFooter() {
  return (
    <footer className="footer" style={{ position: 'static', padding: '5rem 0 3rem' }}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">Emiliano Centenero</div>
            <p className="footer-tag">Acompañamiento inmobiliario personal en Guadalajara y Zapopan. Compra, venta y renta de propiedades residenciales.</p>
          </div>
          <div className="footer-col">
            <h5>Navegación</h5>
            <ul>
              <li><a href="index.html#featured">Destacada</a></li>
              <li><a href="propiedades.html">Propiedades</a></li>
              <li><a href="index.html#about">Sobre mí</a></li>
              <li><a href="index.html#services">Servicios</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="index.html#contact">Contacto</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Servicios</h5>
            <ul>
              <li><a href="index.html#services">Compra</a></li>
              <li><a href="index.html#services">Vende</a></li>
              <li><a href="index.html#services">Renta</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <ul>
              <li><a href={WA_URL} target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
              <li><a href="mailto:ecentenero@hotmail.com">ecentenero@hotmail.com</a></li>
              <li>Guadalajara, Jalisco · México</li>
              <li>Lun–Vie · 9:00–18:00</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Emiliano Centenero. Todos los derechos reservados.</span>
          <div className="footer-socials">
            <a href="https://www.youtube.com/@emiliano_centenero" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="3.5" width="13" height="9" rx="2.5" stroke="currentColor" strokeWidth="1.2" /><path d="M6.8 6.2v3.6l3.1-1.8-3.1-1.8Z" fill="currentColor" /></svg>
            </a>
            <a href="https://www.instagram.com/emiliano_centenero" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.2" /><circle cx="8" cy="8" r="2.5" stroke="currentColor" strokeWidth="1.2" /><circle cx="11.5" cy="4.5" r="0.7" fill="currentColor" /></svg>
            </a>
            <a href="https://www.tiktok.com/@ecentenero" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10.5 2v1.5a3.3 3.3 0 0 0 3.3 3.3v1.6a4.8 4.8 0 0 1-3.3-1.3v4.2a3.6 3.6 0 1 1-3.6-3.6c.2 0 .4 0 .6.05V9.3a2 2 0 1 0 1.4 1.9V2h1.6Z" fill="currentColor" /></svg>
            </a>
            <a href="https://www.linkedin.com/in/ecentenero/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.2" /><path d="M5 7v5M5 5.3v.1M8 12V7m0 0c0-.5.5-1.2 1.5-1.2S11 6.5 11 7.5V12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>
            </a>
            <a href="https://x.com/EmilianoCentGTZ" target="_blank" rel="noopener noreferrer" aria-label="X">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3l4.2 5.6L3.2 13H4.6l3.3-3.6L10.6 13H13L8.6 7.1 12.4 3H11l-2.9 3.2L5.7 3H3Z" fill="currentColor" /></svg>
            </a>
          </div>
          <a href="aviso-privacidad.html" style={{ color: 'var(--ink-3)' }}>Aviso de privacidad</a>
        </div>
      </div>
    </footer>
  );
}

// Botón flotante WhatsApp (móvil)
function WaFloat() {
  return (
    <a className="wa-float" href={WA_URL} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
      <svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8c1.8 1 3.9 1.5 6.2 1.5 7.2 0 13-5.8 13-13S23.2 3 16 3Z" fill="#fff"/>
        <path d="M12.3 9.4c-.3-.6-.5-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.3 1.4 3.6.2.2 2.4 3.8 6 5.2 3 1.2 3.6 1 4.2.9.6-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.1-.3-.2-.6-.4-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.9 1.1-1.1 1.3-.2.2-.4.3-.7.1-.3-.2-1.4-.5-2.7-1.7-1-.9-1.7-2-1.9-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.5-.6.2-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.8-2-1.1-2.6Z" fill="#25d366"/>
      </svg>
    </a>
  );
}

Object.assign(window, {
  WA_URL, TYPE_LABEL, OP_LABEL, fmtPrice, PropSpecs,
  IconBed, IconBath, IconArea, IconLand, IconPin, IconCar,
  InvNav, InvFooter, WaFloat,
});