/* ============================================================
SPACIO AM — Mi espacio (Bento home) + Tile detail + Account modal
============================================================ */
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;
/* tile config */
const BENTO = [
{ key: "checkin", span: "hero", kind: "photo", img: "PROP" },
{ key: "wifi", span: "sq", kind: "dark" },
{ key: "parqueo", span: "sq", kind: "light" },
{ key: "manual", span: "sq", kind: "light" },
{ key: "amenities", span: "wide", kind: "photo", img: IMG.rooftop },
{ key: "upsells", span: "tall", kind: "photo", img: IMG.welcome, accent: true },
{ key: "chat", span: "sq", kind: "peach" },
{ key: "visits", span: "sq", kind: "light" },
{ key: "factura", span: "sq", kind: "light" },
{ key: "emergency", span: "sq", kind: "light" },
{ key: "activities", span: "sq", kind: "light" },
{ key: "selflove", span: "wide", kind: "photo", img: IMG.selfcare },
{ key: "review", span: "wide", kind: "light" },
];
const spanStyle = {
hero: { gridColumn: "span 2", gridRow: "span 2" },
wide: { gridColumn: "span 2" },
tall: { gridRow: "span 2" },
sq: {},
};
/* ---------- STAY SWITCHER (one user, several bookings) ---------- */
function StaySwitcher({ t, res, siblings, onSwitch }) {
const [open, setOpen] = useStateB(false);
const ref = useRefB(null);
useEffectB(() => {
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
return (
{open && (
{siblings.map((r) => {
const active = r.id === res.id;
return (
);
})}
)}
);
}
function BentoScreen({ t, res, siblings, onSwitch, firstName, emails, onSwitchLang, onLogout }) {
const nights = nightsBetween(res.checkin, res.checkout);
const hasSwitcher = siblings && siblings.length > 1;
// el bloque de check-in respira suavemente hasta que el huésped lo abre una vez
const [ckSeen, setCkSeen] = useStateB(() => {
try { return !!(loadStore().ckSeen || {})[res.id]; } catch (e) { return true; }
});
const openTile = (k) => {
if (k === "checkin" && !ckSeen) {
setCkSeen(true);
try { const s = loadStore(); saveStore({ ...s, ckSeen: { ...(s.ckSeen || {}), [res.id]: 1 } }); } catch (e) {}
}
window.location.hash = k;
};
const es = t.code === "es";
const [notiOpen, setNotiOpen] = useStateB(false);
const [notiDismiss, setNotiDismiss] = useStateB(() => { try { return JSON.parse(localStorage.getItem("spacioam_guest_notiDismiss") || "{}"); } catch (e) { return {}; } });
const guestNotis = (typeof buildGuestNotis === "function" ? buildGuestNotis(res, es) : []).filter((n) => !notiDismiss[n.id]);
const dismissGuestNoti = (n) => setNotiDismiss((p) => { const u = { ...p, [n.id]: 1 }; try { localStorage.setItem("spacioam_guest_notiDismiss", JSON.stringify(u)); } catch (e) {} return u; });
const guestUser = { name: firstName ? titleCaseName(firstName) : resName(res), avatar: "" };
return (
setNotiOpen(true)} onLogout={onLogout} onBrand={onLogout} />
{/* header */}
{hasSwitcher
?
:
{t.yourStay} · {resName(res)}
}
{t.hello}{firstName ? `, ${titleCaseName(firstName)}` : ""}.
{t.bentoSub}
{/* grid */}
{BENTO.map((tile, idx) => (
))}
{window.NotiCenter &&
setNotiOpen(false)} notis={guestNotis} onDismiss={dismissGuestNoti} es={es} />}
{window.NotiPush && setNotiOpen(true)} es={es} />}
);
}
function BentoTile({ tile, t, res, nights, idx, onOpen, pulse }) {
const info = t.tiles[tile.key];
const img = tile.img === "PROP" ? resPhoto(res) : tile.img;
const isPhoto = tile.kind === "photo", isDark = tile.kind === "dark", isPeach = tile.kind === "peach";
const fg = isPhoto || isDark ? C.alabaster : (isPeach ? C.white : C.negro);
const subFg = isPhoto || isDark ? "rgba(250,250,250,.8)" : (isPeach ? "rgba(255,255,255,.82)" : C.tierra);
const bg = isDark ? C.negro : isPeach ? C.peach : C.white;
const big = tile.span === "hero";
return (
);
}
function HeroStat({ label, value }) {
return (
);
}
/* ============================================================
ACCOUNT MODAL — offered a moment after landing in Mi espacio.
create user → choose email → password → share → invitations
============================================================ */
function AccountModal({ t, emails, maxShare, onClose, onCreated }) {
const [step, setStep] = useStateB("ask"); // ask · email · password · shareAsk · shareEmails · done
const candidates = (emails || []).filter(Boolean);
const [chosen, setChosen] = useStateB(candidates[0] || "");
const [customEmail, setCustomEmail] = useStateB(candidates.length ? "" : "");
const [pass, setPass] = useStateB("");
const [shareList, setShareList] = useStateB(Array.from({ length: Math.max(1, (maxShare || 2) - 1) }, () => ""));
const [err, setErr] = useStateB("");
const wrap = (children) => (
{ if (e.target === e.currentTarget) onClose(); }}>
setStep(candidates.length > 1 ? "email" : "password")}>{t.acctYes}
);
if (step === "email") return wrap(<>
{header("mail", t.acctChooseEmail, t.acctChooseEmailSub)}
{candidates.map((em) => (
))}
setStep("password")} disabled={!chosen}>{t.next}
);
if (step === "password") return wrap(<>
{header("key", t.acctPassword, chosen || candidates[0] ? `${t.acctChooseEmail}: ${chosen || candidates[0]}` : "")}
{err && {err}
}
{
if ((pass || "").length < 6) { setErr(t.acctPasswordPh); return; }
if (maxShare > 1) { setStep("shareAsk"); }
else { onCreated({ email: chosen || candidates[0], pass, sharedEmails: [] }); setStep("done"); }
}}>{t.acctCreate}
);
if (step === "shareAsk") return wrap(<>
{header("user", t.shareTitle, t.shareSub)}
setStep("shareEmails")}>{t.shareYes}
);
if (step === "shareEmails") return wrap(<>
{header("mail", t.shareEmailsTitle, t.shareEmailsSub.replace("{n}", maxShare))}
{shareList.map((v, i) => (
{ const n = [...shareList]; n[i] = val; setShareList(n); }} />
))}
{ onCreated({ email: chosen || candidates[0], pass, sharedEmails: shareList.map((e) => (e || "").trim()).filter(Boolean) }); setStep("done"); }}
disabled={!shareList.some((e) => (e || "").trim())}>{t.shareSend}
);
// done
return wrap(<>
{header("check", shareList.some((e) => (e || "").trim()) ? t.shareSent : t.acctCreated,
shareList.some((e) => (e || "").trim()) ? t.shareSentDesc : null)}
{t.finishAcct}
);
}
/* ============================================================
TILE DETAIL
============================================================ */
const DETAIL_HERO = { checkin: "PROP", amenities: IMG.rooftop, upsells: IMG.welcome, selflove: IMG.selfcare, manual: IMG.kitchen, activities: IMG.rooftop, parqueo: null, factura: null, visits: null };
function TileDetail({ t, tileKey, res, onBack }) {
const tile = t.tiles[tileKey];
const heroImg = DETAIL_HERO[tileKey] === "PROP" ? resPhoto(res) : DETAIL_HERO[tileKey];
return (
{heroImg ? (
{tile.t}
} />
) : (
)}
{tile.d}.
{renderTileContent(tileKey, t, res)}
{(typeof window !== "undefined" ? window.location.host : "hola.spacioam.com")}/#{tileKey}
);
}
function InfoRow({ label, value }) {
return (
{label}
{value}
);
}
function ActionBtn({ children, onClick, accent }) {
return {children};
}
function Chips({ items }) {
return (
{items.map((a) => (
{a}
))}
);
}
/* small labeled field for the bento forms */
function MiniField({ label, value, onChange, placeholder, type, textarea }) {
const base = { width: "100%", boxSizing: "border-box", padding: "12px 14px", borderRadius: 12, border: `1px solid ${C.grisCalido}`,
background: C.alabaster, fontFamily: C.sans, fontSize: 13.5, color: C.negro, outline: "none", letterSpacing: "0.01em" };
return (