Vahine \u2014 Map, Feed, Chats<\/title>\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/maplibre-gl@4.7.1\/dist\/maplibre-gl.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/maplibre-gl@4.7.1\/dist\/maplibre-gl.js\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --blue:#2F6FED; --blue-dim:#E8EFFE; --ink:#0E1B2C; --dim:#5B6B82; --faint:#94A3B8;\n --line:#E7ECF3; --bg:#F5F7FB; --white:#FFFFFF; --mint:#1FAE6E;\n --footerH:70px;\n box-sizing:border-box;\n }\n *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}\n html,body{height:100%;margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow:hidden;}\n .serif{font-family:'Fraunces',serif;}\n button{font-family:inherit;-webkit-appearance:none;appearance:none;border:none;cursor:pointer;background:none;}\n img,.ph{display:block;}\n\n \/* ---- Page shell ---- *\/\n .page{position:fixed;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .15s;\n overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);padding-bottom:var(--footerH);}\n .page.active{opacity:1;pointer-events:auto;z-index:8;}\n #page-map{background:transparent;padding-bottom:0;overflow:hidden;}\n .pagehead{padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 14px;display:flex;justify-content:space-between;align-items:center;\n background:var(--bg);position:sticky;top:0;z-index:2;}\n .pagehead h2{font-size:20px;margin:0;font-weight:700;}\n .iconbtn{width:36px;height:36px;border-radius:12px;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim);}\n .iconbtn svg{width:17px;height:17px;}\n\n \/* ---- Footer nav (global) ---- *\/\n #footer{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:480px;margin:0 auto;height:var(--footerH);\n background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(14,27,44,.08);display:flex;\n padding-bottom:env(safe-area-inset-bottom,0px);}\n .tabbtn{flex:1;color:var(--faint);display:flex;flex-direction:column;align-items:center;justify-content:center;\n gap:4px;font-size:10.5px;font-weight:600;position:relative;}\n .tabbtn svg{width:20px;height:20px;}\n .tabbtn.active{color:var(--blue);}\n .badge{position:absolute;top:2px;right:24%;background:var(--mint);color:#fff;font-size:9px;font-weight:700;\n width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}\n\n \/* ============ MAP PAGE ============ *\/\n #map{position:fixed;inset:0;}\n .maplibregl-ctrl-attrib{font-size:10px;}\n #topbar{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 0;}\n #searchwrap{max-width:480px;margin:0 auto;background:var(--white);border-radius:16px;box-shadow:0 8px 28px rgba(14,27,44,.12);\n display:flex;align-items:center;gap:10px;padding:12px 14px;}\n #searchwrap svg{width:18px;height:18px;color:var(--dim);flex:0 0 auto;}\n #searchInput{flex:1;border:none;outline:none;font-size:14px;color:var(--ink);background:none;}\n #searchInput::placeholder{color:var(--faint);}\n #clearBtn{display:none;color:var(--faint);}\n #results{max-width:480px;margin:8px auto 0;background:var(--white);border-radius:16px;box-shadow:0 8px 28px rgba(14,27,44,.12);overflow:hidden;display:none;}\n .result{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;}\n .result:last-child{border-bottom:none;}\n .result svg{width:16px;height:16px;color:var(--blue);flex:0 0 auto;margin-top:1px;}\n .result .name{font-size:13.5px;font-weight:600;}\n .result .addr{font-size:11.5px;color:var(--dim);margin-top:1px;}\n #chips{max-width:480px;margin:10px auto 0;display:flex;gap:8px;overflow-x:auto;padding:0 2px;}\n .chip{flex:0 0 auto;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 13px;font-size:12px;\n font-weight:600;color:var(--dim);box-shadow:0 3px 10px rgba(14,27,44,.06);display:flex;align-items:center;gap:6px;}\n .chip svg{width:14px;height:14px;}\n .chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}\n #vtoggle{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;background:var(--white);\n border-radius:16px;box-shadow:0 8px 22px rgba(14,27,44,.16);overflow:hidden;display:flex;flex-direction:column;}\n .vbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);}\n .vbtn svg{width:19px;height:19px;}\n .vbtn.on{background:var(--blue);color:#fff;}\n .vbtn.busy svg{animation:spin 1s linear infinite;}\n @keyframes spin{to{transform:rotate(360deg)}}\n .vdiv{height:1px;background:var(--line);margin:0 8px;}\n #styleLabel{position:fixed;right:64px;top:calc(50% - 22px);z-index:20;background:var(--white);border-radius:10px;\n box-shadow:0 6px 16px rgba(14,27,44,.14);padding:5px 10px;font-size:10.5px;font-weight:700;color:var(--dim);\n opacity:0;pointer-events:none;transition:opacity .2s;}\n #styleLabel.show{opacity:1;}\n .fab{background:var(--white);box-shadow:0 8px 22px rgba(14,27,44,.16);display:flex;align-items:center;justify-content:center;color:var(--ink);\n position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:20;width:40px;height:40px;border-radius:12px;}\n .poi-marker{width:30px;height:30px;border-radius:50%;background:var(--blue);border:2.5px solid #fff;box-shadow:0 3px 10px rgba(47,111,237,.4);\n display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;}\n .poi-marker:active{transform:scale(.88);}\n .poi-marker svg{width:14px;height:14px;color:#fff;}\n .me-dot{width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,111,237,.22);}\n .me-dot.tracking{animation:pulse 1.6s ease-in-out infinite;}\n @keyframes pulse{0%,100%{box-shadow:0 0 0 6px rgba(47,111,237,.22)}50%{box-shadow:0 0 0 12px rgba(47,111,237,.1)}}\n #sheet{position:fixed;left:0;right:0;bottom:var(--footerH);z-index:30;background:var(--white);border-radius:20px 20px 0 0;\n box-shadow:0 -12px 32px rgba(14,27,44,.18);padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 18px);\n max-width:480px;margin:0 auto;transform:translateY(110%);transition:transform .25s ease;}\n #sheet.show{transform:translateY(0);}\n .sheethandle{width:36px;height:4px;background:var(--line);border-radius:3px;margin:0 auto 14px;}\n .sheettitle{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}\n .sheettitle h3{font-size:16px;margin:0;font-weight:700;}\n .sheetcat{font-size:11.5px;color:var(--blue);font-weight:600;background:var(--blue-dim);padding:3px 9px;border-radius:9px;}\n .sheetaddr{font-size:12.5px;color:var(--dim);margin:6px 0 14px;line-height:1.5;}\n .metarow{display:flex;gap:10px;margin-bottom:16px;}\n .metabox{flex:1;background:var(--bg);border-radius:12px;padding:10px 12px;}\n .metabox .lbl{font-size:10.5px;color:var(--faint);margin-bottom:2px;}\n .metabox .val{font-size:15px;font-weight:700;}\n .btn{width:100%;background:var(--blue);color:#fff;border-radius:13px;padding:14px;font-weight:700;font-size:14px;\n display:flex;align-items:center;justify-content:center;gap:8px;}\n .btn svg{width:16px;height:16px;}\n .btn.wa{background:var(--mint);}\n .closesheet{position:absolute;top:16px;right:16px;color:var(--faint);}\n\n \/* ============ FEED PAGE (Instagram) ============ *\/\n .stories{display:flex;gap:14px;overflow-x:auto;padding:0 20px 16px;}\n .story{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;}\n .story .ring{width:58px;height:58px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--blue),var(--mint));}\n .story .ring .in{width:100%;height:100%;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;\n font-family:'Fraunces',serif;font-weight:700;font-size:16px;color:var(--blue);}\n .story span{font-size:10.5px;color:var(--dim);max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n .post{background:var(--white);margin:0 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}\n .post .phead{display:flex;align-items:center;gap:10px;padding:12px 16px;}\n .post .av{width:34px;height:34px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;\n font-weight:700;font-size:13px;flex:0 0 auto;}\n .post .pn{font-size:13px;font-weight:700;}\n .post .pl{font-size:11px;color:var(--faint);}\n .post .media{height:230px;background:linear-gradient(135deg,var(--blue),#7FB6FF);position:relative;display:flex;align-items:flex-end;padding:14px;}\n .post .media .cap{color:#fff;font-family:'Fraunces',serif;font-size:15px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3);}\n .post .actions{display:flex;gap:16px;padding:12px 16px 4px;}\n .post .actions svg{width:21px;height:21px;color:var(--ink);}\n .post .likes{padding:2px 16px;font-size:12.5px;font-weight:700;}\n .post .caption{padding:4px 16px 4px;font-size:12.5px;line-height:1.5;}\n .post .caption b{font-weight:700;}\n .post .bookrow{padding:6px 16px 14px;}\n .postbook{display:inline-flex;align-items:center;gap:6px;background:var(--blue-dim);color:var(--blue);font-size:12px;font-weight:700;\n padding:8px 14px;border-radius:12px;}\n\n \/* ============ CHATS PAGE (WhatsApp) ============ *\/\n .chatrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}\n .chatrow .av{width:46px;height:46px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;\n font-weight:700;font-size:15px;flex:0 0 auto;}\n .chatrow .body{flex:1;min-width:0;}\n .chatrow .top{display:flex;justify-content:space-between;}\n .chatrow .n{font-size:13.5px;font-weight:700;}\n .chatrow .t{font-size:10.5px;color:var(--faint);}\n .chatrow .m{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}\n .chatrow .dot{width:18px;height:18px;border-radius:50%;background:var(--mint);color:#fff;font-size:10px;font-weight:700;\n display:flex;align-items:center;justify-content:center;flex:0 0 auto;}\n\n #page-thread{position:fixed;inset:0;z-index:60;background:var(--bg);opacity:0;pointer-events:none;transform:translateX(16px);\n transition:opacity .2s,transform .2s;display:flex;flex-direction:column;}\n #page-thread.show{opacity:1;pointer-events:auto;transform:translateX(0);}\n .threadtop{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 12px;background:var(--white);\n border-bottom:1px solid var(--line);}\n .threadtop .av{width:36px;height:36px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;}\n .threadtop .n{font-size:14px;font-weight:700;}\n .threadtop .s{font-size:11px;color:var(--mint);}\n .threadbody{flex:1;overflow-y:auto;padding:16px;}\n .bubble{max-width:75%;padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.4;margin-bottom:8px;}\n .bubble.in{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px;}\n .bubble.out{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:4px;}\n .threadfoot{display:flex;gap:8px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);background:var(--white);border-top:1px solid var(--line);}\n .threadfoot input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:11px 15px;font-size:13px;outline:none;}\n .sendbtn{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}\n .sendbtn svg{width:17px;height:17px;}\n\n \/* ============ ACTIVITY & PROFILE ============ *\/\n .card{margin:0 20px 12px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:15px 16px;}\n .card .row{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);padding:3px 0;}\n .card .route{font-size:14px;font-weight:700;margin-bottom:8px;}\n .pill{display:inline-flex;align-items:center;gap:5px;background:rgba(31,174,110,.12);color:var(--mint);font-size:10.5px;\n padding:4px 10px;border-radius:11px;margin-bottom:10px;font-weight:700;width:fit-content;}\n .pill::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mint);}\n .empty{margin:40px auto;text-align:center;color:var(--faint);font-size:13px;padding:0 40px;line-height:1.6;}\n .empty svg{width:32px;height:32px;color:var(--line);margin-bottom:10px;}\n\n .wallet{margin:0 20px 16px;padding:18px;border-radius:18px;background:linear-gradient(135deg,var(--blue),#5B8CF0);color:#fff;}\n .wallet .lbl{font-size:11.5px;opacity:.85;margin-bottom:4px;}\n .wallet .amt{font-size:26px;font-weight:700;font-family:'Fraunces',serif;}\n .profcard{margin:0 20px 16px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;gap:12px;align-items:center;}\n .avatar{width:48px;height:48px;border-radius:14px;background:var(--blue);display:flex;align-items:center;justify-content:center;\n font-family:'Fraunces',serif;font-weight:700;color:#fff;font-size:18px;flex:0 0 auto;}\n .menu{padding:0 20px;}\n .menuitem{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);font-size:13.5px;}\n .menuitem svg{width:15px;height:15px;color:var(--faint);}\n\n #toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 90px);transform:translate(-50%,-10px);\n background:var(--ink);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;\n transition:opacity .2s,transform .2s;z-index:90;white-space:nowrap;}\n #toast.show{opacity:1;transform:translate(-50%,0);}\n\n @media (min-width:481px){\n body{background:#eef1f6;}\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"page active\" id=\"page-map\">\n <div id=\"map\"><\/div>\n <div id=\"topbar\">\n <div id=\"searchwrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\n <input id=\"searchInput\" placeholder=\"Search a place in Tahiti\u2026\" autocomplete=\"off\">\n <button id=\"clearBtn\" onclick=\"Vahine.clearSearch()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"16\" height=\"16\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg><\/button>\n <\/div>\n <div id=\"results\"><\/div>\n <div id=\"chips\"><\/div>\n <\/div>\n <div id=\"vtoggle\">\n <button class=\"vbtn\" id=\"locateBtn\" onclick=\"Vahine.locateMe()\" aria-label=\"Locate me\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L4 20l8-4 8 4z\"\/><\/svg><\/button>\n <div class=\"vdiv\"><\/div>\n <button class=\"vbtn\" id=\"trackBtn\" onclick=\"Vahine.toggleTrack()\" aria-label=\"Track me\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg><\/button>\n <div class=\"vdiv\"><\/div>\n <button class=\"vbtn\" id=\"layerBtn\" onclick=\"Vahine.cycleStyle()\" aria-label=\"Map style\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg><\/button>\n <\/div>\n <div id=\"styleLabel\">Standard<\/div>\n <button class=\"fab\" onclick=\"Vahine.toggleFullscreen()\" aria-label=\"Fullscreen\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"17\" height=\"17\"><path d=\"M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3\"\/><\/svg><\/button>\n <div id=\"sheet\">\n <button class=\"closesheet\" onclick=\"Vahine.closeSheet()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"18\" height=\"18\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg><\/button>\n <div class=\"sheethandle\"><\/div>\n <div class=\"sheettitle\"><h3 id=\"sheetName\">\u2014<\/h3><span class=\"sheetcat\" id=\"sheetCat\">Place<\/span><\/div>\n <div class=\"sheetaddr\" id=\"sheetAddr\">\u2014<\/div>\n <div class=\"metarow\">\n <div class=\"metabox\"><div class=\"lbl\">Distance<\/div><div class=\"val\" id=\"sheetDist\">\u2014<\/div><\/div>\n <div class=\"metabox\"><div class=\"lbl\">ETA (driving)<\/div><div class=\"val\" id=\"sheetEta\">\u2014<\/div><\/div>\n <\/div>\n <button class=\"btn wa\" onclick=\"Vahine.requestPlace()\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.2L2 22l4.9-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z\"\/><\/svg>Request on WhatsApp<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-feed\">\n <div class=\"pagehead\"><h2 class=\"serif\">Feed<\/h2><button class=\"iconbtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.5 8.5 0 11-4-7.2L21 3l-1.3 4A8.5 8.5 0 0121 11.5z\"\/><\/svg><\/button><\/div>\n <div class=\"stories\" id=\"stories\"><\/div>\n <div id=\"posts\"><\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-chats\">\n <div class=\"pagehead\"><h2 class=\"serif\">Chats<\/h2><button class=\"iconbtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg><\/button><\/div>\n <div id=\"chatlist\"><\/div>\n<\/div>\n<div id=\"page-thread\">\n <div class=\"threadtop\">\n <button class=\"iconbtn\" onclick=\"Vahine.closeThread()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg><\/button>\n <div class=\"av\" id=\"threadAv\">\u2014<\/div>\n <div><div class=\"n\" id=\"threadName\">\u2014<\/div><div class=\"s\">online<\/div><\/div>\n <\/div>\n <div class=\"threadbody\" id=\"threadBody\"><\/div>\n <div class=\"threadfoot\">\n <input id=\"threadInput\" placeholder=\"Message\u2026\">\n <button class=\"sendbtn\" onclick=\"Vahine.sendThread()\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 21l21-9L2 3v7l15 2-15 2z\"\/><\/svg><\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-activity\">\n <div class=\"pagehead\"><h2 class=\"serif\">Activity<\/h2><\/div>\n <div id=\"activityList\"><\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-profile\">\n <div class=\"pagehead\"><h2 class=\"serif\">Profile<\/h2><\/div>\n <div class=\"wallet\"><div class=\"lbl\">Travel budget<\/div><div class=\"amt\">$2,400.00<\/div><\/div>\n <div class=\"profcard\"><div class=\"avatar\">AL<\/div><div><div style=\"font-weight:700;font-size:15px;\">Alexandre Laurent<\/div><div style=\"font-size:12px;color:var(--faint);\">Member since 2024<\/div><\/div><\/div>\n <div class=\"menu\">\n <div class=\"menuitem\">Payment methods <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <div class=\"menuitem\">WhatsApp number <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <div class=\"menuitem\">Support <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <\/div>\n<\/div>\n\n<div id=\"toast\"><\/div>\n\n<div id=\"footer\">\n <button class=\"tabbtn active\" data-tab=\"map\" onclick=\"Vahine.setTab('map')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 11l9-7 9 7\"\/><path d=\"M5 10v10h14V10\"\/><\/svg>Map<\/button>\n <button class=\"tabbtn\" data-tab=\"feed\" onclick=\"Vahine.setTab('feed')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><\/svg>Feed<\/button>\n <button class=\"tabbtn\" data-tab=\"chats\" onclick=\"Vahine.setTab('chats')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.5 8.5 0 11-4-7.2L21 3l-1.3 4A8.5 8.5 0 0121 11.5z\"\/><\/svg>Chats<span class=\"badge\" id=\"chatBadge\" style=\"display:none;\">2<\/span><\/button>\n <button class=\"tabbtn\" data-tab=\"activity\" onclick=\"Vahine.setTab('activity')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 9h18\"\/><\/svg>Activity<\/button>\n <button class=\"tabbtn\" data-tab=\"profile\" onclick=\"Vahine.setTab('profile')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"\/><\/svg>Profile<\/button>\n<\/div>\n\n<script>\n(function(){\n \"use strict\";\n var WA_NUMBER = \"68989660003\";\n var START = [-149.5665, -17.5350];\n var STORAGE_KEY = \"vahine_requests_v1\";\n\n var CATEGORIES = [\n {key:\"ride\", label:\"Ride\", icon:'<path d=\"M3 12l2-6h14l2 6M5 12h14v6H5z\"\/>'},\n {key:\"hotel\", label:\"Hotel\", icon:'<path d=\"M3 21V8l9-5 9 5v13\"\/>'},\n {key:\"tour\", label:\"Tour\", icon:'<circle cx=\"12\" cy=\"12\" r=\"9\"\/>'},\n {key:\"restaurant\", label:\"Food\", icon:'<path d=\"M6 2v8M18 2v20\"\/>'},\n {key:\"activity\", label:\"Activity\", icon:'<path d=\"M2 12c2-3 4 3 6 0\"\/>'}\n ];\n var POIS = [\n {name:\"Le M\u00e9ridien Tahiti\", cat:\"hotel\", lng:-149.5990, lat:-17.5490, addr:\"Punaauia, Tahiti\"},\n {name:\"InterContinental Tahiti\", cat:\"hotel\", lng:-149.6110, lat:-17.5600, addr:\"Faaa, Tahiti\"},\n {name:\"Circle Island Tour\", cat:\"tour\", lng:-149.4200, lat:-17.6800, addr:\"Full island route\"},\n {name:\"Tahiti Airport Transfer\", cat:\"ride\", lng:-149.6067, lat:-17.5537, addr:\"Faa'a International Airport\"},\n {name:\"Uparau Restaurant\", cat:\"restaurant\", lng:-149.5720, lat:-17.5390, addr:\"Papeete waterfront\"},\n {name:\"Lagoonarium Snorkeling\", cat:\"activity\", lng:-149.5300, lat:-17.5900, addr:\"Punaauia lagoon\"}\n ];\n var POSTS = [\n {who:\"Le M\u00e9ridien\", loc:\"Punaauia, Tahiti\", cap:\"Sunset over the lagoon \ud83c\udf05\", likes:243, poi:0},\n {who:\"Circle Island Tour\", loc:\"Full island route\", cap:\"Waterfalls, black sand & belvedere views\", likes:118, poi:2},\n {who:\"Uparau Restaurant\", loc:\"Papeete\", cap:\"Fresh poisson cru, table for two tonight\", likes:87, poi:4}\n ];\n var CHATS = [\n {id:\"c1\", who:\"Le M\u00e9ridien Host\", last:\"Your room is ready from 2pm!\", time:\"09:14\", unread:1,\n msgs:[[\"in\",\"Bonjour! Thanks for booking with us.\"],[\"in\",\"Your room is ready from 2pm.\"]]},\n {id:\"c2\", who:\"Circle Island Guide\", last:\"Pickup at 8:30 tomorrow \ud83d\ude90\", time:\"Yesterday\", unread:1,\n msgs:[[\"in\",\"Hi! Confirming your tour for tomorrow.\"],[\"out\",\"Sounds great, see you then.\"],[\"in\",\"Pickup at 8:30 tomorrow \ud83d\ude90\"]]},\n {id:\"c3\", who:\"Uparau Restaurant\", last:\"Table for 2 confirmed at 19:30\", time:\"Mon\", unread:0,\n msgs:[[\"in\",\"Table for 2 confirmed at 19:30.\"]]}\n ];\n\n var map, meMarker, watchId = null, activeChip = null, markers = [], routeLoaded = false;\n var me = null, selected = null, activeChatId = null;\n var requests = loadRequests();\n\n function loadRequests(){ try{ return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; }catch(e){ return []; } }\n function saveRequests(){ try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(requests)); }catch(e){} }\n function logRequest(name, addr){\n requests.unshift({ name: name, addr: addr, time: new Date().toLocaleString() });\n saveRequests();\n }\n function waSend(text){ window.open(\"https:\/\/wa.me\/\" + WA_NUMBER + \"?text=\" + encodeURIComponent(text), \"_blank\"); }\n\n function toast(msg){\n var t = document.getElementById(\"toast\");\n t.textContent = msg; t.classList.add(\"show\");\n clearTimeout(toast._h); toast._h = setTimeout(function(){ t.classList.remove(\"show\"); }, 2200);\n }\n function haversineKm(a, b){\n var R=6371, dLat=(b.lat-a.lat)*Math.PI\/180, dLng=(b.lng-a.lng)*Math.PI\/180;\n var s = Math.sin(dLat\/2)**2 + Math.cos(a.lat*Math.PI\/180)*Math.cos(b.lat*Math.PI\/180)*Math.sin(dLng\/2)**2;\n return R*2*Math.atan2(Math.sqrt(s), Math.sqrt(1-s));\n }\n\n \/* ===== MAP ===== *\/\n \/\/ Free OpenStreetMap community tile servers \u2014 no API key, no account, ever.\n \/\/ Usage policy: light\/moderate traffic only, keep attribution visible. For heavy production\n \/\/ traffic, self-host tiles (e.g. with a tileserver you run) rather than hammering these public ones.\n var STYLES = {\n standard: { label:\"Standard\", subs:[\"a\",\"b\",\"c\"], url:\"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors\" },\n humanitarian: { label:\"Humanitarian\", subs:[\"a\",\"b\"], url:\"https:\/\/{s}.tile.openstreetmap.fr\/hot\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors, Tiles style by HOT\" },\n cyclosm: { label:\"CyclOSM\", subs:[\"a\",\"b\",\"c\"], url:\"https:\/\/{s}.tile-cyclosm.openstreetmap.fr\/cyclosm\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors, Tiles style by CyclOSM\" }\n };\n var styleKeys = [\"standard\",\"humanitarian\",\"cyclosm\"];\n var styleIdx = 0;\n\n function buildStyle(key){\n var s = STYLES[key];\n return { version:8,\n sources:{ base:{ type:\"raster\",\n tiles: s.subs.map(function(sub){ return s.url.replace(\"{s}\", sub); }),\n tileSize:256, attribution:s.attribution } },\n layers:[{ id:\"base-layer\", type:\"raster\", source:\"base\" }] };\n }\n\n function initMap(){\n map = new maplibregl.Map({\n container: \"map\", style: buildStyle(styleKeys[styleIdx]),\n center: START, zoom: 12, attributionControl: true\n });\n map.on(\"load\", renderPOIs);\n }\n function cycleStyle(){\n styleIdx = (styleIdx+1) % styleKeys.length;\n var key = styleKeys[styleIdx];\n map.setStyle(buildStyle(key));\n routeLoaded = false;\n map.once(\"styledata\", function(){ if(selected) computeRoute(selected); });\n var lbl = document.getElementById(\"styleLabel\");\n lbl.textContent = STYLES[key].label;\n lbl.classList.add(\"show\");\n clearTimeout(cycleStyle._h);\n cycleStyle._h = setTimeout(function(){ lbl.classList.remove(\"show\"); }, 1500);\n toast(\"Map style: \" + STYLES[key].label);\n }\n function renderChips(){\n document.getElementById(\"chips\").innerHTML = CATEGORIES.map(function(c){\n return '<div class=\"chip\" id=\"chip-'+c.key+'\" onclick=\"Vahine.toggleChip(\\''+c.key+'\\')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">'+c.icon+'<\/svg>'+c.label+'<\/div>';\n }).join(\"\");\n }\n function toggleChip(key){\n activeChip = activeChip === key ? null : key;\n document.querySelectorAll(\".chip\").forEach(function(c){ c.classList.remove(\"active\"); });\n if(activeChip) document.getElementById(\"chip-\"+activeChip).classList.add(\"active\");\n renderPOIs();\n }\n function renderPOIs(){\n markers.forEach(function(m){ m.remove(); }); markers = [];\n var list = activeChip ? POIS.filter(function(p){ return p.cat === activeChip; }) : POIS;\n list.forEach(function(p){\n var cat = CATEGORIES.find(function(c){ return c.key === p.cat; });\n var el = document.createElement(\"div\");\n el.className = \"poi-marker\";\n el.innerHTML = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\">'+cat.icon+'<\/svg>';\n el.addEventListener(\"click\", function(){ openSheet(p); });\n markers.push(new maplibregl.Marker({element:el}).setLngLat([p.lng,p.lat]).addTo(map));\n });\n }\n function openSheet(p){\n selected = p;\n document.getElementById(\"sheetName\").textContent = p.name;\n document.getElementById(\"sheetCat\").textContent = CATEGORIES.find(function(c){ return c.key===p.cat; }).label;\n document.getElementById(\"sheetAddr\").textContent = p.addr;\n document.getElementById(\"sheetDist\").textContent = \"\u2026\";\n document.getElementById(\"sheetEta\").textContent = \"\u2026\";\n document.getElementById(\"sheet\").classList.add(\"show\");\n map.flyTo({ center:[p.lng,p.lat], zoom:14, essential:true });\n computeRoute(p);\n }\n function closeSheet(){ document.getElementById(\"sheet\").classList.remove(\"show\"); clearRoute(); }\n function computeRoute(p){\n var origin = me || { lng: START[0], lat: START[1] };\n var km = haversineKm({lng:origin.lng,lat:origin.lat},{lng:p.lng,lat:p.lat});\n document.getElementById(\"sheetDist\").textContent = km.toFixed(1)+\" km\";\n document.getElementById(\"sheetEta\").textContent = Math.max(1,Math.round(km\/30*60))+\" min\";\n var url = \"https:\/\/router.project-osrm.org\/route\/v1\/driving\/\"+origin.lng+\",\"+origin.lat+\";\"+p.lng+\",\"+p.lat+\"?overview=full&geometries=geojson\";\n fetch(url).then(function(r){ return r.json(); }).then(function(data){\n if(data.routes && data.routes[0]){\n var r = data.routes[0];\n document.getElementById(\"sheetDist\").textContent = (r.distance\/1000).toFixed(1)+\" km\";\n document.getElementById(\"sheetEta\").textContent = Math.max(1,Math.round(r.duration\/60))+\" min\";\n drawRoute(r.geometry);\n }\n }).catch(function(){});\n }\n function drawRoute(geom){\n clearRoute();\n map.addSource(\"route\",{type:\"geojson\",data:{type:\"Feature\",geometry:geom,properties:{}}});\n map.addLayer({id:\"route-line\",type:\"line\",source:\"route\",paint:{\"line-color\":\"#2F6FED\",\"line-width\":4,\"line-opacity\":.85}});\n routeLoaded = true;\n }\n function clearRoute(){ if(routeLoaded){ map.removeLayer(\"route-line\"); map.removeSource(\"route\"); routeLoaded=false; } }\n function requestPlace(){\n if(!selected) return;\n waSend(\"Hi! I'd like to request: \"+selected.name+\" (\"+selected.addr+\") via Vahine.\");\n logRequest(selected.name, selected.addr);\n toast(\"Opening WhatsApp\u2026\");\n }\n var searchTimer=null;\n function onSearchInput(v){\n document.getElementById(\"clearBtn\").style.display = v ? \"block\":\"none\";\n clearTimeout(searchTimer);\n if(v.trim().length<3){ document.getElementById(\"results\").style.display=\"none\"; return; }\n searchTimer = setTimeout(function(){ runSearch(v); },400);\n }\n function runSearch(q){\n var url = \"https:\/\/nominatim.openstreetmap.org\/search?format=json&limit=6&q=\"+encodeURIComponent(q+\" Tahiti\");\n fetch(url).then(function(r){return r.json();}).then(function(list){\n var el=document.getElementById(\"results\");\n if(!list.length){ el.style.display=\"none\"; return; }\n el.innerHTML=list.map(function(item,i){\n return '<div class=\"result\" onclick=\"Vahine.selectSearch('+i+')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\"\/><\/svg><div><div class=\"name\">'+item.display_name.split(\",\")[0]+'<\/div><div class=\"addr\">'+item.display_name+'<\/div><\/div><\/div>';\n }).join(\"\");\n el.style.display=\"block\"; window._searchResults=list;\n }).catch(function(){ toast(\"Search unavailable \u2014 check connection\"); });\n }\n function selectSearch(i){\n var item = window._searchResults[i];\n var p = { name:item.display_name.split(\",\")[0], cat:\"activity\", lng:+item.lon, lat:+item.lat, addr:item.display_name };\n document.getElementById(\"results\").style.display=\"none\";\n document.getElementById(\"searchInput\").value = p.name;\n var el = document.createElement(\"div\"); el.className=\"poi-marker\";\n el.innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\"\/><\/svg>';\n markers.push(new maplibregl.Marker({element:el}).setLngLat([p.lng,p.lat]).addTo(map));\n openSheet(p);\n }\n function clearSearch(){\n document.getElementById(\"searchInput\").value=\"\";\n document.getElementById(\"results\").style.display=\"none\";\n document.getElementById(\"clearBtn\").style.display=\"none\";\n }\n function ensureMeMarker(lng,lat){\n if(!meMarker){\n var el=document.createElement(\"div\"); el.className=\"me-dot\"; el.id=\"meDot\";\n meMarker = new maplibregl.Marker({element:el}).setLngLat([lng,lat]).addTo(map);\n } else { meMarker.setLngLat([lng,lat]); }\n me = { lng:lng, lat:lat };\n }\n function locateMe(){\n if(!navigator.geolocation){ toast(\"Geolocation not supported\"); return; }\n document.getElementById(\"locateBtn\").classList.add(\"busy\");\n navigator.geolocation.getCurrentPosition(function(pos){\n document.getElementById(\"locateBtn\").classList.remove(\"busy\");\n ensureMeMarker(pos.coords.longitude,pos.coords.latitude);\n map.flyTo({center:[pos.coords.longitude,pos.coords.latitude],zoom:14});\n toast(\"Location found\");\n }, function(){ document.getElementById(\"locateBtn\").classList.remove(\"busy\"); toast(\"Couldn't get your location\"); },\n {enableHighAccuracy:true,timeout:8000});\n }\n function toggleTrack(){\n var btn=document.getElementById(\"trackBtn\");\n if(watchId!==null){\n navigator.geolocation.clearWatch(watchId); watchId=null; btn.classList.remove(\"on\");\n var dot=document.getElementById(\"meDot\"); if(dot) dot.classList.remove(\"tracking\");\n toast(\"Tracking stopped\"); return;\n }\n if(!navigator.geolocation){ toast(\"Geolocation not supported\"); return; }\n watchId = navigator.geolocation.watchPosition(function(pos){\n ensureMeMarker(pos.coords.longitude,pos.coords.latitude);\n map.easeTo({center:[pos.coords.longitude,pos.coords.latitude]});\n var dot=document.getElementById(\"meDot\"); if(dot) dot.classList.add(\"tracking\");\n }, function(){ toast(\"Tracking error\"); }, {enableHighAccuracy:true,maximumAge:2000});\n btn.classList.add(\"on\"); toast(\"Tracking your location\u2026\");\n }\n function toggleFullscreen(){\n if(!document.fullscreenElement){ document.documentElement.requestFullscreen().catch(function(){ toast(\"Fullscreen not available\"); }); }\n else { document.exitFullscreen(); }\n }\n\n \/* ===== FEED ===== *\/\n function renderFeed(){\n document.getElementById(\"stories\").innerHTML = POIS.map(function(p){\n return '<div class=\"story\"><div class=\"ring\"><div class=\"in\">'+p.name[0]+'<\/div><\/div><span>'+p.name.split(\" \")[0]+'<\/span><\/div>';\n }).join(\"\");\n document.getElementById(\"posts\").innerHTML = POSTS.map(function(post,i){\n return '<div class=\"post\"><div class=\"phead\"><div class=\"av\">'+post.who[0]+'<\/div><div><div class=\"pn\">'+post.who+'<\/div><div class=\"pl\">'+post.loc+'<\/div><\/div><\/div>'+\n '<div class=\"media\"><div class=\"cap\">'+post.cap+'<\/div><\/div>'+\n '<div class=\"actions\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z\"\/><\/svg>'+\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>'+\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4z\"\/><\/svg><\/div>'+\n '<div class=\"likes\">'+post.likes+' likes<\/div>'+\n '<div class=\"caption\"><b>'+post.who+'<\/b> '+post.cap+'<\/div>'+\n '<div class=\"bookrow\"><button class=\"postbook\" onclick=\"Vahine.bookPost('+i+')\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.2L2 22l4.9-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z\"\/><\/svg>Book on WhatsApp<\/button><\/div><\/div>';\n }).join(\"\");\n }\n function bookPost(i){\n var post = POSTS[i], p = POIS[post.poi];\n waSend(\"Hi! I saw \"+post.who+\" on the feed and I'd like to book it via Vahine.\");\n logRequest(post.who, p.addr);\n toast(\"Opening WhatsApp\u2026\");\n }\n\n \/* ===== CHATS ===== *\/\n function renderChats(){\n document.getElementById(\"chatlist\").innerHTML = CHATS.map(function(c){\n return '<div class=\"chatrow\" onclick=\"Vahine.openThread(\\''+c.id+'\\')\"><div class=\"av\">'+c.who[0]+'<\/div>'+\n '<div class=\"body\"><div class=\"top\"><div class=\"n\">'+c.who+'<\/div><div class=\"t\">'+c.time+'<\/div><\/div><div class=\"m\">'+c.last+'<\/div><\/div>'+\n (c.unread? '<div class=\"dot\">'+c.unread+'<\/div>' : '') + '<\/div>';\n }).join(\"\");\n var unread = CHATS.reduce(function(s,c){ return s+c.unread; },0);\n var b = document.getElementById(\"chatBadge\");\n if(unread){ b.style.display=\"flex\"; b.textContent = unread; } else { b.style.display=\"none\"; }\n }\n function openThread(id){\n activeChatId = id;\n var c = CHATS.find(function(x){ return x.id===id; });\n c.unread = 0; renderChats();\n document.getElementById(\"threadAv\").textContent = c.who[0];\n document.getElementById(\"threadName\").textContent = c.who;\n renderThreadBody(c);\n document.getElementById(\"page-thread\").classList.add(\"show\");\n }\n function renderThreadBody(c){\n document.getElementById(\"threadBody\").innerHTML = c.msgs.map(function(m){\n return '<div class=\"bubble '+m[0]+'\">'+m[1]+'<\/div>';\n }).join(\"\");\n var body = document.getElementById(\"threadBody\"); body.scrollTop = body.scrollHeight;\n }\n function closeThread(){ document.getElementById(\"page-thread\").classList.remove(\"show\"); }\n function sendThread(){\n var input = document.getElementById(\"threadInput\");\n var text = input.value.trim();\n if(!text) return;\n var c = CHATS.find(function(x){ return x.id===activeChatId; });\n c.msgs.push([\"out\", text]);\n renderThreadBody(c);\n input.value = \"\";\n \/\/ Hands off to real WhatsApp \u2014 in-app message is a local preview only.\n waSend(text + \" (re: \" + c.who + \")\");\n toast(\"Opening WhatsApp to actually send\u2026\");\n }\n\n \/* ===== ACTIVITY ===== *\/\n function renderActivity(){\n var el = document.getElementById(\"activityList\");\n if(!requests.length){\n el.innerHTML = '<div class=\"empty\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 9h18\"\/><\/svg>No requests yet.<br>Book from Map or Feed and it lands here.<\/div>';\n return;\n }\n el.innerHTML = requests.map(function(r){\n return '<div class=\"card\"><span class=\"pill\">Sent via WhatsApp<\/span><div class=\"route\">'+r.name+'<\/div>'+\n '<div class=\"row\"><span>'+r.addr+'<\/span><span>'+r.time+'<\/span><\/div><\/div>';\n }).join(\"\");\n }\n\n \/* ===== Footer tabs ===== *\/\n function setTab(tab){\n document.querySelectorAll(\".page\").forEach(function(p){ p.classList.remove(\"active\"); });\n document.getElementById(\"page-\"+tab).classList.add(\"active\");\n document.querySelectorAll(\".tabbtn\").forEach(function(b){ b.classList.toggle(\"active\", b.dataset.tab===tab); });\n if(tab===\"activity\") renderActivity();\n }\n\n document.getElementById(\"searchInput\").addEventListener(\"input\", function(e){ onSearchInput(e.target.value); });\n document.getElementById(\"threadInput\").addEventListener(\"keydown\", function(e){ if(e.key===\"Enter\") sendThread(); });\n\n initMap(); renderChips(); renderFeed(); renderChats(); renderActivity();\n\n window.Vahine = { toggleChip:toggleChip, selectSearch:selectSearch, clearSearch:clearSearch,\n locateMe:locateMe, toggleTrack:toggleTrack, toggleFullscreen:toggleFullscreen, cycleStyle:cycleStyle,\n closeSheet:closeSheet, requestPlace:requestPlace, setTab:setTab,\n bookPost:bookPost, openThread:openThread, closeThread:closeThread, sendThread:sendThread };\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Vahine \u2014 Map, Feed, Chats Standard \u2014 Place \u2014 Distance\u2014 ETA (driving)\u2014 Request on WhatsApp Feed Chats \u2014 \u2014online Activity Profile Travel budget$2,400.00 ALAlexandre LaurentMember since 2024 Payment methods WhatsApp number Support Map Feed Chats2 Activity Profile<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-296","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=296"}],"version-history":[{"count":4,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nVahine \u2014 Map, Feed, Chats<\/title>\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/maplibre-gl@4.7.1\/dist\/maplibre-gl.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/maplibre-gl@4.7.1\/dist\/maplibre-gl.js\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --blue:#2F6FED; --blue-dim:#E8EFFE; --ink:#0E1B2C; --dim:#5B6B82; --faint:#94A3B8;\n --line:#E7ECF3; --bg:#F5F7FB; --white:#FFFFFF; --mint:#1FAE6E;\n --footerH:70px;\n box-sizing:border-box;\n }\n *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}\n html,body{height:100%;margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow:hidden;}\n .serif{font-family:'Fraunces',serif;}\n button{font-family:inherit;-webkit-appearance:none;appearance:none;border:none;cursor:pointer;background:none;}\n img,.ph{display:block;}\n\n \/* ---- Page shell ---- *\/\n .page{position:fixed;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .15s;\n overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);padding-bottom:var(--footerH);}\n .page.active{opacity:1;pointer-events:auto;z-index:8;}\n #page-map{background:transparent;padding-bottom:0;overflow:hidden;}\n .pagehead{padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 14px;display:flex;justify-content:space-between;align-items:center;\n background:var(--bg);position:sticky;top:0;z-index:2;}\n .pagehead h2{font-size:20px;margin:0;font-weight:700;}\n .iconbtn{width:36px;height:36px;border-radius:12px;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--dim);}\n .iconbtn svg{width:17px;height:17px;}\n\n \/* ---- Footer nav (global) ---- *\/\n #footer{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:480px;margin:0 auto;height:var(--footerH);\n background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(14,27,44,.08);display:flex;\n padding-bottom:env(safe-area-inset-bottom,0px);}\n .tabbtn{flex:1;color:var(--faint);display:flex;flex-direction:column;align-items:center;justify-content:center;\n gap:4px;font-size:10.5px;font-weight:600;position:relative;}\n .tabbtn svg{width:20px;height:20px;}\n .tabbtn.active{color:var(--blue);}\n .badge{position:absolute;top:2px;right:24%;background:var(--mint);color:#fff;font-size:9px;font-weight:700;\n width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;}\n\n \/* ============ MAP PAGE ============ *\/\n #map{position:fixed;inset:0;}\n .maplibregl-ctrl-attrib{font-size:10px;}\n #topbar{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 0;}\n #searchwrap{max-width:480px;margin:0 auto;background:var(--white);border-radius:16px;box-shadow:0 8px 28px rgba(14,27,44,.12);\n display:flex;align-items:center;gap:10px;padding:12px 14px;}\n #searchwrap svg{width:18px;height:18px;color:var(--dim);flex:0 0 auto;}\n #searchInput{flex:1;border:none;outline:none;font-size:14px;color:var(--ink);background:none;}\n #searchInput::placeholder{color:var(--faint);}\n #clearBtn{display:none;color:var(--faint);}\n #results{max-width:480px;margin:8px auto 0;background:var(--white);border-radius:16px;box-shadow:0 8px 28px rgba(14,27,44,.12);overflow:hidden;display:none;}\n .result{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;}\n .result:last-child{border-bottom:none;}\n .result svg{width:16px;height:16px;color:var(--blue);flex:0 0 auto;margin-top:1px;}\n .result .name{font-size:13.5px;font-weight:600;}\n .result .addr{font-size:11.5px;color:var(--dim);margin-top:1px;}\n #chips{max-width:480px;margin:10px auto 0;display:flex;gap:8px;overflow-x:auto;padding:0 2px;}\n .chip{flex:0 0 auto;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 13px;font-size:12px;\n font-weight:600;color:var(--dim);box-shadow:0 3px 10px rgba(14,27,44,.06);display:flex;align-items:center;gap:6px;}\n .chip svg{width:14px;height:14px;}\n .chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}\n #vtoggle{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;background:var(--white);\n border-radius:16px;box-shadow:0 8px 22px rgba(14,27,44,.16);overflow:hidden;display:flex;flex-direction:column;}\n .vbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);}\n .vbtn svg{width:19px;height:19px;}\n .vbtn.on{background:var(--blue);color:#fff;}\n .vbtn.busy svg{animation:spin 1s linear infinite;}\n @keyframes spin{to{transform:rotate(360deg)}}\n .vdiv{height:1px;background:var(--line);margin:0 8px;}\n #styleLabel{position:fixed;right:64px;top:calc(50% - 22px);z-index:20;background:var(--white);border-radius:10px;\n box-shadow:0 6px 16px rgba(14,27,44,.14);padding:5px 10px;font-size:10.5px;font-weight:700;color:var(--dim);\n opacity:0;pointer-events:none;transition:opacity .2s;}\n #styleLabel.show{opacity:1;}\n .fab{background:var(--white);box-shadow:0 8px 22px rgba(14,27,44,.16);display:flex;align-items:center;justify-content:center;color:var(--ink);\n position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;z-index:20;width:40px;height:40px;border-radius:12px;}\n .poi-marker{width:30px;height:30px;border-radius:50%;background:var(--blue);border:2.5px solid #fff;box-shadow:0 3px 10px rgba(47,111,237,.4);\n display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;}\n .poi-marker:active{transform:scale(.88);}\n .poi-marker svg{width:14px;height:14px;color:#fff;}\n .me-dot{width:18px;height:18px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,111,237,.22);}\n .me-dot.tracking{animation:pulse 1.6s ease-in-out infinite;}\n @keyframes pulse{0%,100%{box-shadow:0 0 0 6px rgba(47,111,237,.22)}50%{box-shadow:0 0 0 12px rgba(47,111,237,.1)}}\n #sheet{position:fixed;left:0;right:0;bottom:var(--footerH);z-index:30;background:var(--white);border-radius:20px 20px 0 0;\n box-shadow:0 -12px 32px rgba(14,27,44,.18);padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 18px);\n max-width:480px;margin:0 auto;transform:translateY(110%);transition:transform .25s ease;}\n #sheet.show{transform:translateY(0);}\n .sheethandle{width:36px;height:4px;background:var(--line);border-radius:3px;margin:0 auto 14px;}\n .sheettitle{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}\n .sheettitle h3{font-size:16px;margin:0;font-weight:700;}\n .sheetcat{font-size:11.5px;color:var(--blue);font-weight:600;background:var(--blue-dim);padding:3px 9px;border-radius:9px;}\n .sheetaddr{font-size:12.5px;color:var(--dim);margin:6px 0 14px;line-height:1.5;}\n .metarow{display:flex;gap:10px;margin-bottom:16px;}\n .metabox{flex:1;background:var(--bg);border-radius:12px;padding:10px 12px;}\n .metabox .lbl{font-size:10.5px;color:var(--faint);margin-bottom:2px;}\n .metabox .val{font-size:15px;font-weight:700;}\n .btn{width:100%;background:var(--blue);color:#fff;border-radius:13px;padding:14px;font-weight:700;font-size:14px;\n display:flex;align-items:center;justify-content:center;gap:8px;}\n .btn svg{width:16px;height:16px;}\n .btn.wa{background:var(--mint);}\n .closesheet{position:absolute;top:16px;right:16px;color:var(--faint);}\n\n \/* ============ FEED PAGE (Instagram) ============ *\/\n .stories{display:flex;gap:14px;overflow-x:auto;padding:0 20px 16px;}\n .story{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;}\n .story .ring{width:58px;height:58px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--blue),var(--mint));}\n .story .ring .in{width:100%;height:100%;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;\n font-family:'Fraunces',serif;font-weight:700;font-size:16px;color:var(--blue);}\n .story span{font-size:10.5px;color:var(--dim);max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n .post{background:var(--white);margin:0 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}\n .post .phead{display:flex;align-items:center;gap:10px;padding:12px 16px;}\n .post .av{width:34px;height:34px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;\n font-weight:700;font-size:13px;flex:0 0 auto;}\n .post .pn{font-size:13px;font-weight:700;}\n .post .pl{font-size:11px;color:var(--faint);}\n .post .media{height:230px;background:linear-gradient(135deg,var(--blue),#7FB6FF);position:relative;display:flex;align-items:flex-end;padding:14px;}\n .post .media .cap{color:#fff;font-family:'Fraunces',serif;font-size:15px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3);}\n .post .actions{display:flex;gap:16px;padding:12px 16px 4px;}\n .post .actions svg{width:21px;height:21px;color:var(--ink);}\n .post .likes{padding:2px 16px;font-size:12.5px;font-weight:700;}\n .post .caption{padding:4px 16px 4px;font-size:12.5px;line-height:1.5;}\n .post .caption b{font-weight:700;}\n .post .bookrow{padding:6px 16px 14px;}\n .postbook{display:inline-flex;align-items:center;gap:6px;background:var(--blue-dim);color:var(--blue);font-size:12px;font-weight:700;\n padding:8px 14px;border-radius:12px;}\n\n \/* ============ CHATS PAGE (WhatsApp) ============ *\/\n .chatrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);}\n .chatrow .av{width:46px;height:46px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;\n font-weight:700;font-size:15px;flex:0 0 auto;}\n .chatrow .body{flex:1;min-width:0;}\n .chatrow .top{display:flex;justify-content:space-between;}\n .chatrow .n{font-size:13.5px;font-weight:700;}\n .chatrow .t{font-size:10.5px;color:var(--faint);}\n .chatrow .m{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}\n .chatrow .dot{width:18px;height:18px;border-radius:50%;background:var(--mint);color:#fff;font-size:10px;font-weight:700;\n display:flex;align-items:center;justify-content:center;flex:0 0 auto;}\n\n #page-thread{position:fixed;inset:0;z-index:60;background:var(--bg);opacity:0;pointer-events:none;transform:translateX(16px);\n transition:opacity .2s,transform .2s;display:flex;flex-direction:column;}\n #page-thread.show{opacity:1;pointer-events:auto;transform:translateX(0);}\n .threadtop{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 12px;background:var(--white);\n border-bottom:1px solid var(--line);}\n .threadtop .av{width:36px;height:36px;border-radius:50%;background:var(--blue-dim);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;}\n .threadtop .n{font-size:14px;font-weight:700;}\n .threadtop .s{font-size:11px;color:var(--mint);}\n .threadbody{flex:1;overflow-y:auto;padding:16px;}\n .bubble{max-width:75%;padding:10px 13px;border-radius:16px;font-size:13px;line-height:1.4;margin-bottom:8px;}\n .bubble.in{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px;}\n .bubble.out{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:4px;}\n .threadfoot{display:flex;gap:8px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);background:var(--white);border-top:1px solid var(--line);}\n .threadfoot input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:11px 15px;font-size:13px;outline:none;}\n .sendbtn{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}\n .sendbtn svg{width:17px;height:17px;}\n\n \/* ============ ACTIVITY & PROFILE ============ *\/\n .card{margin:0 20px 12px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:15px 16px;}\n .card .row{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);padding:3px 0;}\n .card .route{font-size:14px;font-weight:700;margin-bottom:8px;}\n .pill{display:inline-flex;align-items:center;gap:5px;background:rgba(31,174,110,.12);color:var(--mint);font-size:10.5px;\n padding:4px 10px;border-radius:11px;margin-bottom:10px;font-weight:700;width:fit-content;}\n .pill::before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mint);}\n .empty{margin:40px auto;text-align:center;color:var(--faint);font-size:13px;padding:0 40px;line-height:1.6;}\n .empty svg{width:32px;height:32px;color:var(--line);margin-bottom:10px;}\n\n .wallet{margin:0 20px 16px;padding:18px;border-radius:18px;background:linear-gradient(135deg,var(--blue),#5B8CF0);color:#fff;}\n .wallet .lbl{font-size:11.5px;opacity:.85;margin-bottom:4px;}\n .wallet .amt{font-size:26px;font-weight:700;font-family:'Fraunces',serif;}\n .profcard{margin:0 20px 16px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;gap:12px;align-items:center;}\n .avatar{width:48px;height:48px;border-radius:14px;background:var(--blue);display:flex;align-items:center;justify-content:center;\n font-family:'Fraunces',serif;font-weight:700;color:#fff;font-size:18px;flex:0 0 auto;}\n .menu{padding:0 20px;}\n .menuitem{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);font-size:13.5px;}\n .menuitem svg{width:15px;height:15px;color:var(--faint);}\n\n #toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 90px);transform:translate(-50%,-10px);\n background:var(--ink);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;\n transition:opacity .2s,transform .2s;z-index:90;white-space:nowrap;}\n #toast.show{opacity:1;transform:translate(-50%,0);}\n\n @media (min-width:481px){\n body{background:#eef1f6;}\n }\n<\/style>\n<\/head>\n<body>\n\n\n<div class=\"page active\" id=\"page-map\">\n <div id=\"map\"><\/div>\n <div id=\"topbar\">\n <div id=\"searchwrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\n <input id=\"searchInput\" placeholder=\"Search a place in Tahiti\u2026\" autocomplete=\"off\">\n <button id=\"clearBtn\" onclick=\"Vahine.clearSearch()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"16\" height=\"16\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg><\/button>\n <\/div>\n <div id=\"results\"><\/div>\n <div id=\"chips\"><\/div>\n <\/div>\n <div id=\"vtoggle\">\n <button class=\"vbtn\" id=\"locateBtn\" onclick=\"Vahine.locateMe()\" aria-label=\"Locate me\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L4 20l8-4 8 4z\"\/><\/svg><\/button>\n <div class=\"vdiv\"><\/div>\n <button class=\"vbtn\" id=\"trackBtn\" onclick=\"Vahine.toggleTrack()\" aria-label=\"Track me\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg><\/button>\n <div class=\"vdiv\"><\/div>\n <button class=\"vbtn\" id=\"layerBtn\" onclick=\"Vahine.cycleStyle()\" aria-label=\"Map style\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg><\/button>\n <\/div>\n <div id=\"styleLabel\">Standard<\/div>\n <button class=\"fab\" onclick=\"Vahine.toggleFullscreen()\" aria-label=\"Fullscreen\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"17\" height=\"17\"><path d=\"M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3\"\/><\/svg><\/button>\n <div id=\"sheet\">\n <button class=\"closesheet\" onclick=\"Vahine.closeSheet()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"18\" height=\"18\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg><\/button>\n <div class=\"sheethandle\"><\/div>\n <div class=\"sheettitle\"><h3 id=\"sheetName\">\u2014<\/h3><span class=\"sheetcat\" id=\"sheetCat\">Place<\/span><\/div>\n <div class=\"sheetaddr\" id=\"sheetAddr\">\u2014<\/div>\n <div class=\"metarow\">\n <div class=\"metabox\"><div class=\"lbl\">Distance<\/div><div class=\"val\" id=\"sheetDist\">\u2014<\/div><\/div>\n <div class=\"metabox\"><div class=\"lbl\">ETA (driving)<\/div><div class=\"val\" id=\"sheetEta\">\u2014<\/div><\/div>\n <\/div>\n <button class=\"btn wa\" onclick=\"Vahine.requestPlace()\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.2L2 22l4.9-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z\"\/><\/svg>Request on WhatsApp<\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-feed\">\n <div class=\"pagehead\"><h2 class=\"serif\">Feed<\/h2><button class=\"iconbtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.5 8.5 0 11-4-7.2L21 3l-1.3 4A8.5 8.5 0 0121 11.5z\"\/><\/svg><\/button><\/div>\n <div class=\"stories\" id=\"stories\"><\/div>\n <div id=\"posts\"><\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-chats\">\n <div class=\"pagehead\"><h2 class=\"serif\">Chats<\/h2><button class=\"iconbtn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg><\/button><\/div>\n <div id=\"chatlist\"><\/div>\n<\/div>\n<div id=\"page-thread\">\n <div class=\"threadtop\">\n <button class=\"iconbtn\" onclick=\"Vahine.closeThread()\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg><\/button>\n <div class=\"av\" id=\"threadAv\">\u2014<\/div>\n <div><div class=\"n\" id=\"threadName\">\u2014<\/div><div class=\"s\">online<\/div><\/div>\n <\/div>\n <div class=\"threadbody\" id=\"threadBody\"><\/div>\n <div class=\"threadfoot\">\n <input id=\"threadInput\" placeholder=\"Message\u2026\">\n <button class=\"sendbtn\" onclick=\"Vahine.sendThread()\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M2 21l21-9L2 3v7l15 2-15 2z\"\/><\/svg><\/button>\n <\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-activity\">\n <div class=\"pagehead\"><h2 class=\"serif\">Activity<\/h2><\/div>\n <div id=\"activityList\"><\/div>\n<\/div>\n\n\n<div class=\"page\" id=\"page-profile\">\n <div class=\"pagehead\"><h2 class=\"serif\">Profile<\/h2><\/div>\n <div class=\"wallet\"><div class=\"lbl\">Travel budget<\/div><div class=\"amt\">$2,400.00<\/div><\/div>\n <div class=\"profcard\"><div class=\"avatar\">AL<\/div><div><div style=\"font-weight:700;font-size:15px;\">Alexandre Laurent<\/div><div style=\"font-size:12px;color:var(--faint);\">Member since 2024<\/div><\/div><\/div>\n <div class=\"menu\">\n <div class=\"menuitem\">Payment methods <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <div class=\"menuitem\">WhatsApp number <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <div class=\"menuitem\">Support <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 6l6 6-6 6\"\/><\/svg><\/div>\n <\/div>\n<\/div>\n\n<div id=\"toast\"><\/div>\n\n<div id=\"footer\">\n <button class=\"tabbtn active\" data-tab=\"map\" onclick=\"Vahine.setTab('map')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 11l9-7 9 7\"\/><path d=\"M5 10v10h14V10\"\/><\/svg>Map<\/button>\n <button class=\"tabbtn\" data-tab=\"feed\" onclick=\"Vahine.setTab('feed')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><\/svg>Feed<\/button>\n <button class=\"tabbtn\" data-tab=\"chats\" onclick=\"Vahine.setTab('chats')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 11.5a8.5 8.5 0 11-4-7.2L21 3l-1.3 4A8.5 8.5 0 0121 11.5z\"\/><\/svg>Chats<span class=\"badge\" id=\"chatBadge\" style=\"display:none;\">2<\/span><\/button>\n <button class=\"tabbtn\" data-tab=\"activity\" onclick=\"Vahine.setTab('activity')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 9h18\"\/><\/svg>Activity<\/button>\n <button class=\"tabbtn\" data-tab=\"profile\" onclick=\"Vahine.setTab('profile')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"\/><\/svg>Profile<\/button>\n<\/div>\n\n<script>\n(function(){\n \"use strict\";\n var WA_NUMBER = \"68989660003\";\n var START = [-149.5665, -17.5350];\n var STORAGE_KEY = \"vahine_requests_v1\";\n\n var CATEGORIES = [\n {key:\"ride\", label:\"Ride\", icon:'<path d=\"M3 12l2-6h14l2 6M5 12h14v6H5z\"\/>'},\n {key:\"hotel\", label:\"Hotel\", icon:'<path d=\"M3 21V8l9-5 9 5v13\"\/>'},\n {key:\"tour\", label:\"Tour\", icon:'<circle cx=\"12\" cy=\"12\" r=\"9\"\/>'},\n {key:\"restaurant\", label:\"Food\", icon:'<path d=\"M6 2v8M18 2v20\"\/>'},\n {key:\"activity\", label:\"Activity\", icon:'<path d=\"M2 12c2-3 4 3 6 0\"\/>'}\n ];\n var POIS = [\n {name:\"Le M\u00e9ridien Tahiti\", cat:\"hotel\", lng:-149.5990, lat:-17.5490, addr:\"Punaauia, Tahiti\"},\n {name:\"InterContinental Tahiti\", cat:\"hotel\", lng:-149.6110, lat:-17.5600, addr:\"Faaa, Tahiti\"},\n {name:\"Circle Island Tour\", cat:\"tour\", lng:-149.4200, lat:-17.6800, addr:\"Full island route\"},\n {name:\"Tahiti Airport Transfer\", cat:\"ride\", lng:-149.6067, lat:-17.5537, addr:\"Faa'a International Airport\"},\n {name:\"Uparau Restaurant\", cat:\"restaurant\", lng:-149.5720, lat:-17.5390, addr:\"Papeete waterfront\"},\n {name:\"Lagoonarium Snorkeling\", cat:\"activity\", lng:-149.5300, lat:-17.5900, addr:\"Punaauia lagoon\"}\n ];\n var POSTS = [\n {who:\"Le M\u00e9ridien\", loc:\"Punaauia, Tahiti\", cap:\"Sunset over the lagoon \ud83c\udf05\", likes:243, poi:0},\n {who:\"Circle Island Tour\", loc:\"Full island route\", cap:\"Waterfalls, black sand & belvedere views\", likes:118, poi:2},\n {who:\"Uparau Restaurant\", loc:\"Papeete\", cap:\"Fresh poisson cru, table for two tonight\", likes:87, poi:4}\n ];\n var CHATS = [\n {id:\"c1\", who:\"Le M\u00e9ridien Host\", last:\"Your room is ready from 2pm!\", time:\"09:14\", unread:1,\n msgs:[[\"in\",\"Bonjour! Thanks for booking with us.\"],[\"in\",\"Your room is ready from 2pm.\"]]},\n {id:\"c2\", who:\"Circle Island Guide\", last:\"Pickup at 8:30 tomorrow \ud83d\ude90\", time:\"Yesterday\", unread:1,\n msgs:[[\"in\",\"Hi! Confirming your tour for tomorrow.\"],[\"out\",\"Sounds great, see you then.\"],[\"in\",\"Pickup at 8:30 tomorrow \ud83d\ude90\"]]},\n {id:\"c3\", who:\"Uparau Restaurant\", last:\"Table for 2 confirmed at 19:30\", time:\"Mon\", unread:0,\n msgs:[[\"in\",\"Table for 2 confirmed at 19:30.\"]]}\n ];\n\n var map, meMarker, watchId = null, activeChip = null, markers = [], routeLoaded = false;\n var me = null, selected = null, activeChatId = null;\n var requests = loadRequests();\n\n function loadRequests(){ try{ return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; }catch(e){ return []; } }\n function saveRequests(){ try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(requests)); }catch(e){} }\n function logRequest(name, addr){\n requests.unshift({ name: name, addr: addr, time: new Date().toLocaleString() });\n saveRequests();\n }\n function waSend(text){ window.open(\"https:\/\/wa.me\/\" + WA_NUMBER + \"?text=\" + encodeURIComponent(text), \"_blank\"); }\n\n function toast(msg){\n var t = document.getElementById(\"toast\");\n t.textContent = msg; t.classList.add(\"show\");\n clearTimeout(toast._h); toast._h = setTimeout(function(){ t.classList.remove(\"show\"); }, 2200);\n }\n function haversineKm(a, b){\n var R=6371, dLat=(b.lat-a.lat)*Math.PI\/180, dLng=(b.lng-a.lng)*Math.PI\/180;\n var s = Math.sin(dLat\/2)**2 + Math.cos(a.lat*Math.PI\/180)*Math.cos(b.lat*Math.PI\/180)*Math.sin(dLng\/2)**2;\n return R*2*Math.atan2(Math.sqrt(s), Math.sqrt(1-s));\n }\n\n \/* ===== MAP ===== *\/\n \/\/ Free OpenStreetMap community tile servers \u2014 no API key, no account, ever.\n \/\/ Usage policy: light\/moderate traffic only, keep attribution visible. For heavy production\n \/\/ traffic, self-host tiles (e.g. with a tileserver you run) rather than hammering these public ones.\n var STYLES = {\n standard: { label:\"Standard\", subs:[\"a\",\"b\",\"c\"], url:\"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors\" },\n humanitarian: { label:\"Humanitarian\", subs:[\"a\",\"b\"], url:\"https:\/\/{s}.tile.openstreetmap.fr\/hot\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors, Tiles style by HOT\" },\n cyclosm: { label:\"CyclOSM\", subs:[\"a\",\"b\",\"c\"], url:\"https:\/\/{s}.tile-cyclosm.openstreetmap.fr\/cyclosm\/{z}\/{x}\/{y}.png\",\n attribution:\"\u00a9 OpenStreetMap contributors, Tiles style by CyclOSM\" }\n };\n var styleKeys = [\"standard\",\"humanitarian\",\"cyclosm\"];\n var styleIdx = 0;\n\n function buildStyle(key){\n var s = STYLES[key];\n return { version:8,\n sources:{ base:{ type:\"raster\",\n tiles: s.subs.map(function(sub){ return s.url.replace(\"{s}\", sub); }),\n tileSize:256, attribution:s.attribution } },\n layers:[{ id:\"base-layer\", type:\"raster\", source:\"base\" }] };\n }\n\n function initMap(){\n map = new maplibregl.Map({\n container: \"map\", style: buildStyle(styleKeys[styleIdx]),\n center: START, zoom: 12, attributionControl: true\n });\n map.on(\"load\", renderPOIs);\n }\n function cycleStyle(){\n styleIdx = (styleIdx+1) % styleKeys.length;\n var key = styleKeys[styleIdx];\n map.setStyle(buildStyle(key));\n routeLoaded = false;\n map.once(\"styledata\", function(){ if(selected) computeRoute(selected); });\n var lbl = document.getElementById(\"styleLabel\");\n lbl.textContent = STYLES[key].label;\n lbl.classList.add(\"show\");\n clearTimeout(cycleStyle._h);\n cycleStyle._h = setTimeout(function(){ lbl.classList.remove(\"show\"); }, 1500);\n toast(\"Map style: \" + STYLES[key].label);\n }\n function renderChips(){\n document.getElementById(\"chips\").innerHTML = CATEGORIES.map(function(c){\n return '<div class=\"chip\" id=\"chip-'+c.key+'\" onclick=\"Vahine.toggleChip(\\''+c.key+'\\')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">'+c.icon+'<\/svg>'+c.label+'<\/div>';\n }).join(\"\");\n }\n function toggleChip(key){\n activeChip = activeChip === key ? null : key;\n document.querySelectorAll(\".chip\").forEach(function(c){ c.classList.remove(\"active\"); });\n if(activeChip) document.getElementById(\"chip-\"+activeChip).classList.add(\"active\");\n renderPOIs();\n }\n function renderPOIs(){\n markers.forEach(function(m){ m.remove(); }); markers = [];\n var list = activeChip ? POIS.filter(function(p){ return p.cat === activeChip; }) : POIS;\n list.forEach(function(p){\n var cat = CATEGORIES.find(function(c){ return c.key === p.cat; });\n var el = document.createElement(\"div\");\n el.className = \"poi-marker\";\n el.innerHTML = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\">'+cat.icon+'<\/svg>';\n el.addEventListener(\"click\", function(){ openSheet(p); });\n markers.push(new maplibregl.Marker({element:el}).setLngLat([p.lng,p.lat]).addTo(map));\n });\n }\n function openSheet(p){\n selected = p;\n document.getElementById(\"sheetName\").textContent = p.name;\n document.getElementById(\"sheetCat\").textContent = CATEGORIES.find(function(c){ return c.key===p.cat; }).label;\n document.getElementById(\"sheetAddr\").textContent = p.addr;\n document.getElementById(\"sheetDist\").textContent = \"\u2026\";\n document.getElementById(\"sheetEta\").textContent = \"\u2026\";\n document.getElementById(\"sheet\").classList.add(\"show\");\n map.flyTo({ center:[p.lng,p.lat], zoom:14, essential:true });\n computeRoute(p);\n }\n function closeSheet(){ document.getElementById(\"sheet\").classList.remove(\"show\"); clearRoute(); }\n function computeRoute(p){\n var origin = me || { lng: START[0], lat: START[1] };\n var km = haversineKm({lng:origin.lng,lat:origin.lat},{lng:p.lng,lat:p.lat});\n document.getElementById(\"sheetDist\").textContent = km.toFixed(1)+\" km\";\n document.getElementById(\"sheetEta\").textContent = Math.max(1,Math.round(km\/30*60))+\" min\";\n var url = \"https:\/\/router.project-osrm.org\/route\/v1\/driving\/\"+origin.lng+\",\"+origin.lat+\";\"+p.lng+\",\"+p.lat+\"?overview=full&geometries=geojson\";\n fetch(url).then(function(r){ return r.json(); }).then(function(data){\n if(data.routes && data.routes[0]){\n var r = data.routes[0];\n document.getElementById(\"sheetDist\").textContent = (r.distance\/1000).toFixed(1)+\" km\";\n document.getElementById(\"sheetEta\").textContent = Math.max(1,Math.round(r.duration\/60))+\" min\";\n drawRoute(r.geometry);\n }\n }).catch(function(){});\n }\n function drawRoute(geom){\n clearRoute();\n map.addSource(\"route\",{type:\"geojson\",data:{type:\"Feature\",geometry:geom,properties:{}}});\n map.addLayer({id:\"route-line\",type:\"line\",source:\"route\",paint:{\"line-color\":\"#2F6FED\",\"line-width\":4,\"line-opacity\":.85}});\n routeLoaded = true;\n }\n function clearRoute(){ if(routeLoaded){ map.removeLayer(\"route-line\"); map.removeSource(\"route\"); routeLoaded=false; } }\n function requestPlace(){\n if(!selected) return;\n waSend(\"Hi! I'd like to request: \"+selected.name+\" (\"+selected.addr+\") via Vahine.\");\n logRequest(selected.name, selected.addr);\n toast(\"Opening WhatsApp\u2026\");\n }\n var searchTimer=null;\n function onSearchInput(v){\n document.getElementById(\"clearBtn\").style.display = v ? \"block\":\"none\";\n clearTimeout(searchTimer);\n if(v.trim().length<3){ document.getElementById(\"results\").style.display=\"none\"; return; }\n searchTimer = setTimeout(function(){ runSearch(v); },400);\n }\n function runSearch(q){\n var url = \"https:\/\/nominatim.openstreetmap.org\/search?format=json&limit=6&q=\"+encodeURIComponent(q+\" Tahiti\");\n fetch(url).then(function(r){return r.json();}).then(function(list){\n var el=document.getElementById(\"results\");\n if(!list.length){ el.style.display=\"none\"; return; }\n el.innerHTML=list.map(function(item,i){\n return '<div class=\"result\" onclick=\"Vahine.selectSearch('+i+')\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\"\/><\/svg><div><div class=\"name\">'+item.display_name.split(\",\")[0]+'<\/div><div class=\"addr\">'+item.display_name+'<\/div><\/div><\/div>';\n }).join(\"\");\n el.style.display=\"block\"; window._searchResults=list;\n }).catch(function(){ toast(\"Search unavailable \u2014 check connection\"); });\n }\n function selectSearch(i){\n var item = window._searchResults[i];\n var p = { name:item.display_name.split(\",\")[0], cat:\"activity\", lng:+item.lon, lat:+item.lat, addr:item.display_name };\n document.getElementById(\"results\").style.display=\"none\";\n document.getElementById(\"searchInput\").value = p.name;\n var el = document.createElement(\"div\"); el.className=\"poi-marker\";\n el.innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z\"\/><\/svg>';\n markers.push(new maplibregl.Marker({element:el}).setLngLat([p.lng,p.lat]).addTo(map));\n openSheet(p);\n }\n function clearSearch(){\n document.getElementById(\"searchInput\").value=\"\";\n document.getElementById(\"results\").style.display=\"none\";\n document.getElementById(\"clearBtn\").style.display=\"none\";\n }\n function ensureMeMarker(lng,lat){\n if(!meMarker){\n var el=document.createElement(\"div\"); el.className=\"me-dot\"; el.id=\"meDot\";\n meMarker = new maplibregl.Marker({element:el}).setLngLat([lng,lat]).addTo(map);\n } else { meMarker.setLngLat([lng,lat]); }\n me = { lng:lng, lat:lat };\n }\n function locateMe(){\n if(!navigator.geolocation){ toast(\"Geolocation not supported\"); return; }\n document.getElementById(\"locateBtn\").classList.add(\"busy\");\n navigator.geolocation.getCurrentPosition(function(pos){\n document.getElementById(\"locateBtn\").classList.remove(\"busy\");\n ensureMeMarker(pos.coords.longitude,pos.coords.latitude);\n map.flyTo({center:[pos.coords.longitude,pos.coords.latitude],zoom:14});\n toast(\"Location found\");\n }, function(){ document.getElementById(\"locateBtn\").classList.remove(\"busy\"); toast(\"Couldn't get your location\"); },\n {enableHighAccuracy:true,timeout:8000});\n }\n function toggleTrack(){\n var btn=document.getElementById(\"trackBtn\");\n if(watchId!==null){\n navigator.geolocation.clearWatch(watchId); watchId=null; btn.classList.remove(\"on\");\n var dot=document.getElementById(\"meDot\"); if(dot) dot.classList.remove(\"tracking\");\n toast(\"Tracking stopped\"); return;\n }\n if(!navigator.geolocation){ toast(\"Geolocation not supported\"); return; }\n watchId = navigator.geolocation.watchPosition(function(pos){\n ensureMeMarker(pos.coords.longitude,pos.coords.latitude);\n map.easeTo({center:[pos.coords.longitude,pos.coords.latitude]});\n var dot=document.getElementById(\"meDot\"); if(dot) dot.classList.add(\"tracking\");\n }, function(){ toast(\"Tracking error\"); }, {enableHighAccuracy:true,maximumAge:2000});\n btn.classList.add(\"on\"); toast(\"Tracking your location\u2026\");\n }\n function toggleFullscreen(){\n if(!document.fullscreenElement){ document.documentElement.requestFullscreen().catch(function(){ toast(\"Fullscreen not available\"); }); }\n else { document.exitFullscreen(); }\n }\n\n \/* ===== FEED ===== *\/\n function renderFeed(){\n document.getElementById(\"stories\").innerHTML = POIS.map(function(p){\n return '<div class=\"story\"><div class=\"ring\"><div class=\"in\">'+p.name[0]+'<\/div><\/div><span>'+p.name.split(\" \")[0]+'<\/span><\/div>';\n }).join(\"\");\n document.getElementById(\"posts\").innerHTML = POSTS.map(function(post,i){\n return '<div class=\"post\"><div class=\"phead\"><div class=\"av\">'+post.who[0]+'<\/div><div><div class=\"pn\">'+post.who+'<\/div><div class=\"pl\">'+post.loc+'<\/div><\/div><\/div>'+\n '<div class=\"media\"><div class=\"cap\">'+post.cap+'<\/div><\/div>'+\n '<div class=\"actions\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z\"\/><\/svg>'+\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg>'+\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4z\"\/><\/svg><\/div>'+\n '<div class=\"likes\">'+post.likes+' likes<\/div>'+\n '<div class=\"caption\"><b>'+post.who+'<\/b> '+post.cap+'<\/div>'+\n '<div class=\"bookrow\"><button class=\"postbook\" onclick=\"Vahine.bookPost('+i+')\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.2L2 22l4.9-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z\"\/><\/svg>Book on WhatsApp<\/button><\/div><\/div>';\n }).join(\"\");\n }\n function bookPost(i){\n var post = POSTS[i], p = POIS[post.poi];\n waSend(\"Hi! I saw \"+post.who+\" on the feed and I'd like to book it via Vahine.\");\n logRequest(post.who, p.addr);\n toast(\"Opening WhatsApp\u2026\");\n }\n\n \/* ===== CHATS ===== *\/\n function renderChats(){\n document.getElementById(\"chatlist\").innerHTML = CHATS.map(function(c){\n return '<div class=\"chatrow\" onclick=\"Vahine.openThread(\\''+c.id+'\\')\"><div class=\"av\">'+c.who[0]+'<\/div>'+\n '<div class=\"body\"><div class=\"top\"><div class=\"n\">'+c.who+'<\/div><div class=\"t\">'+c.time+'<\/div><\/div><div class=\"m\">'+c.last+'<\/div><\/div>'+\n (c.unread? '<div class=\"dot\">'+c.unread+'<\/div>' : '') + '<\/div>';\n }).join(\"\");\n var unread = CHATS.reduce(function(s,c){ return s+c.unread; },0);\n var b = document.getElementById(\"chatBadge\");\n if(unread){ b.style.display=\"flex\"; b.textContent = unread; } else { b.style.display=\"none\"; }\n }\n function openThread(id){\n activeChatId = id;\n var c = CHATS.find(function(x){ return x.id===id; });\n c.unread = 0; renderChats();\n document.getElementById(\"threadAv\").textContent = c.who[0];\n document.getElementById(\"threadName\").textContent = c.who;\n renderThreadBody(c);\n document.getElementById(\"page-thread\").classList.add(\"show\");\n }\n function renderThreadBody(c){\n document.getElementById(\"threadBody\").innerHTML = c.msgs.map(function(m){\n return '<div class=\"bubble '+m[0]+'\">'+m[1]+'<\/div>';\n }).join(\"\");\n var body = document.getElementById(\"threadBody\"); body.scrollTop = body.scrollHeight;\n }\n function closeThread(){ document.getElementById(\"page-thread\").classList.remove(\"show\"); }\n function sendThread(){\n var input = document.getElementById(\"threadInput\");\n var text = input.value.trim();\n if(!text) return;\n var c = CHATS.find(function(x){ return x.id===activeChatId; });\n c.msgs.push([\"out\", text]);\n renderThreadBody(c);\n input.value = \"\";\n \/\/ Hands off to real WhatsApp \u2014 in-app message is a local preview only.\n waSend(text + \" (re: \" + c.who + \")\");\n toast(\"Opening WhatsApp to actually send\u2026\");\n }\n\n \/* ===== ACTIVITY ===== *\/\n function renderActivity(){\n var el = document.getElementById(\"activityList\");\n if(!requests.length){\n el.innerHTML = '<div class=\"empty\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M3 9h18\"\/><\/svg>No requests yet.<br>Book from Map or Feed and it lands here.<\/div>';\n return;\n }\n el.innerHTML = requests.map(function(r){\n return '<div class=\"card\"><span class=\"pill\">Sent via WhatsApp<\/span><div class=\"route\">'+r.name+'<\/div>'+\n '<div class=\"row\"><span>'+r.addr+'<\/span><span>'+r.time+'<\/span><\/div><\/div>';\n }).join(\"\");\n }\n\n \/* ===== Footer tabs ===== *\/\n function setTab(tab){\n document.querySelectorAll(\".page\").forEach(function(p){ p.classList.remove(\"active\"); });\n document.getElementById(\"page-\"+tab).classList.add(\"active\");\n document.querySelectorAll(\".tabbtn\").forEach(function(b){ b.classList.toggle(\"active\", b.dataset.tab===tab); });\n if(tab===\"activity\") renderActivity();\n }\n\n document.getElementById(\"searchInput\").addEventListener(\"input\", function(e){ onSearchInput(e.target.value); });\n document.getElementById(\"threadInput\").addEventListener(\"keydown\", function(e){ if(e.key===\"Enter\") sendThread(); });\n\n initMap(); renderChips(); renderFeed(); renderChats(); renderActivity();\n\n window.Vahine = { toggleChip:toggleChip, selectSearch:selectSearch, clearSearch:clearSearch,\n locateMe:locateMe, toggleTrack:toggleTrack, toggleFullscreen:toggleFullscreen, cycleStyle:cycleStyle,\n closeSheet:closeSheet, requestPlace:requestPlace, setTab:setTab,\n bookPost:bookPost, openThread:openThread, closeThread:closeThread, sendThread:sendThread };\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Vahine \u2014 Map, Feed, Chats Standard \u2014 Place \u2014 Distance\u2014 ETA (driving)\u2014 Request on WhatsApp Feed Chats \u2014 \u2014online Activity Profile Travel budget$2,400.00 ALAlexandre LaurentMember since 2024 Payment methods WhatsApp number Support Map Feed Chats2 Activity Profile<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-296","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=296"}],"version-history":[{"count":4,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/296\/revisions\/300"}],"wp:attachment":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}