/* Galería, Instagram, Organigrama, Calidad, Ubicación, Contacto, Footer */

function Galeria() {
  const photos = [
    "assets/fotos/galeria1.jpg", "assets/fotos/galeria2.jpg", "assets/fotos/galeria3.jpg",
    "assets/fotos/galeria5.jpg", "assets/fotos/galeria6.jpg", "assets/fotos/galeria7.jpg",
    "assets/fotos/galeria9.jpg", "assets/fotos/galeria10.jpg",
  ];
  const [open, setOpen] = useState(null);
  return (
    <section id="galeria" data-screen-label="11 Galería" style={{ background: "var(--c-bg)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Galería</span>
            <h2 className="display">La <span className="it">casa,</span> en imágenes.</h2>
          </div>
          <p className="lede">
            Una mirada a los espacios, los rituales cotidianos y la vida que sucede dentro de Solariega.
          </p>
        </div>

        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridAutoRows: 180, gap: 14 }}>
          {photos.map((src, i) => {
            // editorial varied sizes
            const layouts = [
              { c: "span 5", r: "span 2" },
              { c: "span 3", r: "span 1" },
              { c: "span 4", r: "span 2" },
              { c: "span 3", r: "span 1" },
              { c: "span 4", r: "span 1" },
              { c: "span 4", r: "span 1" },
              { c: "span 5", r: "span 1" },
              { c: "span 3", r: "span 1" },
            ];
            const l = layouts[i] || { c: "span 4", r: "span 1" };
            return (
              <button key={i} onClick={() => setOpen(i)} style={{
                gridColumn: l.c, gridRow: l.r, borderRadius: 14, overflow: "hidden", padding: 0, position: "relative", background: "var(--c-line)"
              }}>
                <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform .6s ease" }}
                  onMouseEnter={e => e.currentTarget.style.transform = "scale(1.05)"}
                  onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
                />
              </button>
            );
          })}
        </div>
      </div>

      {open !== null && (
        <div onClick={() => setOpen(null)} style={{
          position: "fixed", inset: 0, background: "rgba(20,23,28,.92)", zIndex: 100,
          display: "flex", alignItems: "center", justifyContent: "center", padding: 30, cursor: "zoom-out"
        }}>
          <img src={photos[open]} alt="" style={{ maxWidth: "92%", maxHeight: "92%", borderRadius: 8 }} />
          <button onClick={(e) => { e.stopPropagation(); setOpen(o => (o + 1) % photos.length); }} style={{ position: "absolute", right: 30, color: "#fff", fontSize: 28 }}>→</button>
          <button onClick={(e) => { e.stopPropagation(); setOpen(o => (o - 1 + photos.length) % photos.length); }} style={{ position: "absolute", left: 30, color: "#fff", fontSize: 28 }}>←</button>
        </div>
      )}
    </section>
  );
}

function Instagram() {
  useEffect(() => {
    const t = setTimeout(() => {
      if (window.instgrm && window.instgrm.Embeds) window.instgrm.Embeds.process();
    }, 200);
    return () => clearTimeout(t);
  }, []);

  const posts = [
    "https://www.instagram.com/p/DP1EBcJCdro/",
    "https://www.instagram.com/p/C8CH9uUBrsA/",
  ];
  return (
    <section id="novedades" data-screen-label="12 Redes" style={{ background: "var(--c-paper)", borderTop: "1px solid var(--c-line)" }}>
      <div className="wrap">
        <div className="reveal" style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 36 }}>
          <span className="eyebrow mark">Novedades</span>
          <div style={{ display: "flex", gap: 22, fontFamily: "var(--f-sans)", fontSize: 13, letterSpacing: ".02em" }}>
            <a href="https://www.instagram.com/solariega_/" target="_blank" rel="noopener" style={{ color: "var(--c-ink)", textDecoration: "none", borderBottom: "1px solid var(--c-primary-20)" }}>@solariega_ →</a>
            <a href="https://www.youtube.com/@Solariega-canning" target="_blank" rel="noopener" style={{ color: "var(--c-ink)", textDecoration: "none", borderBottom: "1px solid var(--c-primary-20)" }}>YouTube →</a>
          </div>
        </div>

        <div className="reveal ig-grid">
          {/* Video institucional / reel */}
          <div className="ig-reel">
            <div className="ig-reel-frame">
              <iframe
                src="https://www.youtube.com/embed/fyE7ndHNwuE"
                title="Solariega | residencia para adultos en Ezeiza, Canning. Geriatría y discapacidad. Actividades 2024"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              ></iframe>
            </div>
            <div className="ig-reel-caption">
              <strong>YouTube</strong>
              <a href="https://www.youtube.com/@Solariega-canning" target="_blank" rel="noopener" style={{ color: "var(--c-ink-soft)", textDecoration: "none" }}>
                Suscribite a @Solariega-canning →
              </a>
            </div>
          </div>

          {posts.map((url, i) => (
            <blockquote key={i} className="instagram-media"
              data-instgrm-permalink={url + "?utm_source=ig_embed&utm_campaign=loading"}
              data-instgrm-version="14"
              style={{ background: "#FFF", border: 0, borderRadius: 12, boxShadow: "0 1px 1px rgba(0,0,0,.04), 0 8px 30px -10px rgba(25,36,59,.12)", margin: 0, maxWidth: 540, minWidth: 0, padding: 0, width: "100%" }}>
              <a href={url + "?utm_source=ig_embed&utm_campaign=loading"} target="_blank" rel="noopener" style={{ background: "#fff", lineHeight: 0, padding: 0, textAlign: "center", textDecoration: "none", width: "100%" }}>
                <div style={{ padding: 16, fontFamily: "Arial, sans-serif", fontSize: 14, color: "#3897f0" }}>Ver publicación en Instagram</div>
              </a>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}
function Organigrama() {
  const data = [
    { titulo: "Directorio", color: "var(--c-primary)", items: [{ rol: "Solariega S.A." }] },
    { titulo: "Dirección", color: "var(--c-navy)", items: [
      { rol: "Director Administrativo", n: "Matías Morilla" },
      { rol: "Director Médico", n: "Alejandro Morilla" },
      { rol: "Comité de Calidad" },
    ]},
    { titulo: "Área administrativa", color: "var(--c-navy)", items: [
      { rol: "Contabilidad y Finanzas", n: "Andrea Mendonca", sub: ["Contabilidad", "Finanzas"] },
      { rol: "Cuentas Corrientes y Compras", n: "Nicole Coppa" },
      { rol: "Recursos Humanos", n: "Camila Goldszmidt" },
      { rol: "Gestión del Paciente", n: "Luana Alfieri" },
    ]},
    { titulo: "Coordinación general", color: "var(--c-primary)", items: [
      { rol: "Coordinación general", n: "Nora Maidana", sub: ["Lavadero", "Seguridad", "Cocina", "Mantenimiento", "Asistencia", "Recreación"] },
    ]},
    { titulo: "Área médica y asistencial", color: "var(--c-navy)", items: [
      { rol: "Equipo de Rehabilitación", n: "Hernán López Córdoba", sub: ["Terapia Ocupacional", "Kinesiología", "Educación Física", "Asistencia Social", "Fonoaudiología"] },
      { rol: "Farmacia", n: "Cristian Sanabria" },
      { rol: "Enfermería", n: "Jorge Zarate" },
      { rol: "Equipo Médico", n: "Sofía Meza", sub: ["Neurología", "Psiquiatría", "Psicología"] },
    ]},
  ];
  const [openSection, setOpenSection] = useState(0);
  return (
    <section id="organigrama" data-screen-label="13 Organigrama" style={{ background: "var(--c-bg)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow navy mark">Organigrama institucional</span>
            <h2 className="display">Cómo <span className="it">nos organizamos.</span></h2>
          </div>
          <p className="lede">
            Una estructura clara con responsables visibles. Así garantizamos coherencia, calidad
            y comunicación entre todas las áreas que cuidan de los residentes.
          </p>
        </div>

        <div className="reveal" style={{ background: "var(--c-paper)", border: "1px solid var(--c-line)", borderRadius: 20, overflow: "hidden" }}>
          {data.map((sec, idx) => {
            const open = openSection === idx;
            return (
              <div key={idx} style={{ borderTop: idx === 0 ? "none" : "1px solid var(--c-line)" }}>
                <button onClick={() => setOpenSection(open ? -1 : idx)} style={{
                  width: "100%", padding: "24px clamp(20px,3vw,36px)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, textAlign: "left"
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 999, background: sec.color }}></span>
                    <span style={{ fontSize: 12, color: "var(--c-text-soft)", letterSpacing: ".14em", textTransform: "uppercase", fontWeight: 600 }}>Nivel {String(idx+1).padStart(2,"0")}</span>
                    <h3 className="display" style={{ fontSize: "clamp(22px, 2.4vw, 32px)", margin: 0, color: "var(--c-ink)" }}>{sec.titulo}</h3>
                  </div>
                  <span style={{ fontSize: 24, transition: "transform .3s ease", transform: open ? "rotate(45deg)" : "rotate(0)", color: sec.color }}>+</span>
                </button>
                <div style={{ maxHeight: open ? 1200 : 0, overflow: "hidden", transition: "max-height .5s ease" }}>
                  <div style={{ padding: "0 clamp(20px,3vw,36px) 32px", paddingLeft: "clamp(46px, 4vw, 70px)" }}>
                    {sec.items.map((it, j) => (
                      <div key={j} style={{ paddingTop: 16, paddingBottom: 16, borderTop: j === 0 ? "1px solid var(--c-line-soft)" : "1px solid var(--c-line-soft)", display: "grid", gridTemplateColumns: it.sub ? "1fr 1.4fr" : "1fr", gap: 24, alignItems: "start" }}>
                        <div>
                          <div className="display" style={{ fontSize: 19, color: "var(--c-ink)" }}>{it.rol}</div>
                          {it.n && <div style={{ fontSize: 14, color: "var(--c-text-soft)", marginTop: 4, fontStyle: "italic", fontFamily: "var(--f-display)" }}>{it.n}</div>}
                        </div>
                        {it.sub && (
                          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                            {it.sub.map((s, k) => (
                              <span key={k} style={{ fontSize: 13, padding: "6px 12px", border: "1px solid var(--c-line)", borderRadius: 999, color: "var(--c-text)", background: "var(--c-bg)" }}>{s}</span>
                            ))}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Calidad() { return null; } // moved to Acreditaciones in sections-4

function Ubicacion() {
  return (
    <section id="ubicacion" data-screen-label="15 Ubicación">
      <div className="wrap">
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 0, alignItems: "stretch", border: "1px solid var(--c-line)", borderRadius: 24, overflow: "hidden", background: "var(--c-paper)" }}>
          <div style={{ padding: "clamp(32px, 4vw, 56px)" }}>
            <span className="eyebrow mark">Ubicación</span>
            <h2 className="display" style={{ fontSize: "clamp(32px, 3.6vw, 48px)", margin: "12px 0 24px" }}>
              En el corazón de <span className="it">Canning.</span>
            </h2>
            <p style={{ fontSize: 16, color: "var(--c-text-soft)", lineHeight: 1.65, margin: "0 0 28px" }}>
              Estamos en una zona arbolada, tranquila y de fácil acceso desde Capital y zona sur.
              Recibimos visitas con cita previa.
            </p>
            <div style={{ display: "grid", gap: 16, marginBottom: 32 }}>
              {[
                ["Dirección", "Ruta 58 Km 4, Canning, Buenos Aires"],
                ["Teléfono", "+54 11 4295-8703"],
                ["WhatsApp", "+54 9 11 6219-4438"],
                ["Email", "info@solariega.com.ar"],
                ["Horario de visitas", "Lunes a domingo · 10 a 19 hs"],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 20, paddingBottom: 14, borderBottom: "1px solid var(--c-line-soft)", alignItems: "baseline" }}>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--c-text-soft)" }}>{k}</div>
                  <div style={{ fontSize: 15, color: "var(--c-ink)" }}>{v}</div>
                </div>
              ))}
            </div>
            <a className="btn btn-navy" href="#contacto">Agendar una visita →</a>
          </div>
          <div style={{ position: "relative", minHeight: 380, background: "var(--c-bg)" }}>
            <iframe
              title="Mapa Solariega"
              src="https://www.openstreetmap.org/export/embed.html?bbox=-58.4900%2C-34.8900%2C-58.4400%2C-34.8500&amp;layer=mapnik&amp;marker=-34.870%2C-58.465"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0, filter: "saturate(0.85) contrast(0.95)" }}
              loading="lazy"
            />
            <div style={{
              position: "absolute", left: 24, top: 24, background: "var(--c-paper)", padding: "12px 18px", borderRadius: 12,
              boxShadow: "0 10px 30px -10px rgba(0,0,0,.2)", display: "flex", alignItems: "center", gap: 10
            }}>
              <span style={{ width: 10, height: 10, borderRadius: 999, background: "var(--c-primary)" }}></span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>Solariega — Canning</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contacto() {
  const [form, setForm] = useState({ nombre: "", email: "", tel: "", motivo: "Consulta general", msg: "" });
  const [sent, setSent] = useState(false);
  const motivos = ["Consulta general", "Estadía permanente", "Estadía temporal", "Centro de Día", "Rehabilitación", "Visitar la institución"];

  return (
    <section id="contacto" data-screen-label="16 Contacto" style={{ background: "var(--c-paper)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Contacto</span>
            <h2 className="display">Hablemos. <span className="it">Estamos para acompañarte.</span></h2>
          </div>
          <p className="lede">
            Contanos brevemente la situación. Un coordinador del equipo se pondrá en contacto a la
            brevedad para orientarte y, si lo deseás, agendar una visita.
          </p>
        </div>

        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 0, border: "1px solid var(--c-line)", borderRadius: 24, overflow: "hidden", background: "var(--c-bg)" }}>
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
            style={{ padding: "clamp(28px, 4vw, 56px)", background: "var(--c-paper)" }}>
            {sent ? (
              <div style={{ minHeight: 420, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div className="display" style={{ fontSize: 36, color: "var(--c-primary)" }}>Gracias.</div>
                <p style={{ fontSize: 17, color: "var(--c-text)", maxWidth: 420, lineHeight: 1.6 }}>
                  Recibimos tu mensaje. En las próximas horas te respondemos con información personalizada.
                </p>
                <button onClick={() => { setSent(false); setForm({ nombre: "", email: "", tel: "", motivo: "Consulta general", msg: "" }); }} className="btn btn-line" style={{ alignSelf: "flex-start", marginTop: 16 }}>Enviar otra consulta</button>
              </div>
            ) : (
              <div style={{ display: "grid", gap: 20 }}>
                <Field label="Nombre y apellido" v={form.nombre} on={(v) => setForm({...form, nombre: v})} />
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <Field label="Email" type="email" v={form.email} on={(v) => setForm({...form, email: v})} />
                  <Field label="Teléfono" v={form.tel} on={(v) => setForm({...form, tel: v})} />
                </div>
                <div>
                  <label style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--c-text-soft)" }}>Motivo</label>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
                    {motivos.map((m, i) => (
                      <button type="button" key={i} onClick={() => setForm({...form, motivo: m})} style={{
                        fontSize: 13, padding: "8px 14px", borderRadius: 999,
                        border: `1px solid ${form.motivo === m ? "var(--c-navy)" : "var(--c-line)"}`,
                        background: form.motivo === m ? "var(--c-navy)" : "transparent",
                        color: form.motivo === m ? "#fff" : "var(--c-text)",
                        transition: "all .15s ease",
                      }}>{m}</button>
                    ))}
                  </div>
                </div>
                <Field label="Tu mensaje" textarea v={form.msg} on={(v) => setForm({...form, msg: v})} />
                <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start" }}>Enviar consulta →</button>
              </div>
            )}
          </form>

          <div style={{ padding: "clamp(28px, 4vw, 48px)", background: "var(--c-navy)", color: "#fff", position: "relative" }}>
            <h3 className="display" style={{ fontSize: 26, margin: "0 0 24px" }}>Otras formas de contacto</h3>
            <div style={{ display: "grid", gap: 18 }}>
              {[
                { k: "WhatsApp", v: "+54 9 11 6219-4438", href: "https://wa.me/5491162194438" },
                { k: "Email", v: "info@solariega.com.ar", href: "mailto:info@solariega.com.ar" },
                { k: "Teléfono", v: "+54 11 4295-8703", href: "tel:+541142958703" },
                { k: "Dirección", v: "Ruta 58 Km 4, Canning · Buenos Aires", href: "https://www.google.com.ar/search?q=Solariega+S.A&ludocid=3749620425843604346&lsig=AB86z5VRBwsTwIl67YR6lvfwxLaI#lkt=LocalPoiPhotos" },
              ].map((c, i) => (
                <a key={i} href={c.href || "#"} style={{ display: "block", padding: "14px 0", borderTop: "1px solid rgba(255,255,255,.18)" }}>
                  <div style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: c.c || "rgba(255,255,255,.55)", fontWeight: 600 }}>{c.k}</div>
                  <div style={{ fontSize: 16, marginTop: 4 }}>{c.v}</div>
                </a>
              ))}
            </div>
            <div style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,.18)" }}>
              <div style={{ fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.55)", fontWeight: 600, marginBottom: 14 }}>Atención</div>
              <div style={{ fontSize: 14, color: "rgba(255,255,255,.85)", lineHeight: 1.6 }}>Lunes a domingo · 10 a 19 hs<br/>Visitas con cita previa</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, type = "text", textarea, v, on }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--c-text-soft)" }}>{label}</span>
      {textarea ? (
        <textarea value={v} onChange={(e) => on(e.target.value)} rows={4}
          style={{ width: "100%", marginTop: 10, padding: "12px 0", border: "none", borderBottom: "1.5px solid var(--c-line)", background: "transparent", fontSize: 15, fontFamily: "inherit", outline: "none", resize: "vertical" }}
          onFocus={(e) => e.target.style.borderBottomColor = "var(--c-navy)"}
          onBlur={(e) => e.target.style.borderBottomColor = "var(--c-line)"}
        />
      ) : (
        <input value={v} onChange={(e) => on(e.target.value)} type={type}
          style={{ width: "100%", marginTop: 10, padding: "12px 0", border: "none", borderBottom: "1.5px solid var(--c-line)", background: "transparent", fontSize: 15, outline: "none" }}
          onFocus={(e) => e.target.style.borderBottomColor = "var(--c-navy)"}
          onBlur={(e) => e.target.style.borderBottomColor = "var(--c-line)"}
        />
      )}
    </label>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--c-ink)", color: "#fff", padding: "clamp(48px,6vw,80px) 0 32px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40, paddingBottom: 40, borderBottom: "1px solid rgba(255,255,255,.15)" }}>
          <div>
            <img src="assets/logo/principal.png" alt="Solariega" style={{ height: 56, filter: "brightness(0) invert(1)", marginBottom: 20 }} />
            <p style={{ fontSize: 14, color: "rgba(255,255,255,.65)", lineHeight: 1.6, maxWidth: 320 }}>
              Instituto de geriatría, rehabilitación y centro de día. Cuidado, bienestar y acompañamiento
              para personas mayores en Canning, Buenos Aires.
            </p>
          </div>
          <div>
            <FCol title="Sitio" links={[["Nosotros","#nosotros"],["Servicios","#servicios"],["Equipo","#equipo"],["Instalaciones","#instalaciones"],["Acreditaciones","#calidad"],["Trabajá con nosotros","#trabajo"]]} />
          </div>
          <div>
            <FCol title="Servicios" links={[["Estadía permanente","#servicios"],["Centro de Día","#centro-dia"],["Rehabilitación","#rehabilitacion"],["Cuidados paliativos","#paliativos"]]} />
          </div>
          <div>
            <div style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.45)", fontWeight: 600, marginBottom: 16 }}>Contacto</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "rgba(255,255,255,.85)" }}>
              Ruta 58 Km 4, Canning<br/>+54 11 4295-8703<br/>WhatsApp +54 9 11 6219-4438<br/>info@solariega.com.ar
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              {[
                ["IG","https://www.instagram.com/solariega_/"],
                ["FB","https://www.facebook.com/solariega"],
                ["YT","https://www.youtube.com/@Solariega-canning"],
              ].map(([l, h], i) => (
                <a key={i} href={h} target="_blank" rel="noopener" style={{ width: 38, height: 38, borderRadius: 999, border: "1px solid rgba(255,255,255,.25)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, letterSpacing: ".05em", color: "#fff", textDecoration: "none" }}>{l}</a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 24, fontSize: 12, color: "rgba(255,255,255,.45)", flexWrap: "wrap", gap: 12 }}>
          <span>© {new Date().getFullYear()} Solariega S.A. — Todos los derechos reservados.</span>
          <span style={{ display: "inline-flex", gap: 14, alignItems: "center" }}>
            <span>Canning · Buenos Aires · Argentina</span>
            <span style={{ opacity: .35 }}>•</span>
            <a href="https://divadigitaldesign.com" target="_blank" rel="noopener" style={{ color: "rgba(255,255,255,.55)", textDecoration: "none", fontFamily: "var(--f-sans)", letterSpacing: ".02em" }}>by divadigitaldesign</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FCol({ title, links }) {
  return (
    <div>
      <div style={{ fontSize: 11.5, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.45)", fontWeight: 600, marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
        {links.map(([t, h], i) => <li key={i}><a href={h} style={{ fontSize: 14, color: "rgba(255,255,255,.85)" }}>{t}</a></li>)}
      </ul>
    </div>
  );
}

Object.assign(window, { Galeria, Instagram, Organigrama, Calidad, Ubicacion, Contacto, Footer });