{"id":219,"date":"2026-08-25T12:32:05","date_gmt":"2026-08-25T22:32:05","guid":{"rendered":"https:\/\/mana-corp.com\/?page_id=219"},"modified":"2026-08-25T12:32:35","modified_gmt":"2026-08-25T22:32:35","slug":"elementor-219","status":"publish","type":"page","link":"https:\/\/mana-corp.com\/?page_id=219","title":{"rendered":"Elementor #219"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"219\" class=\"elementor elementor-219\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f81183d e-flex e-con-boxed e-con e-parent\" data-id=\"f81183d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-272ec41 elementor-widget elementor-widget-html\" data-id=\"272ec41\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover\">\n<title>Island Transfer Pro<\/title>\n<link href=\"https:\/\/unpkg.com\/maplibre-gl@3.6.2\/dist\/maplibre-gl.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/unpkg.com\/maplibre-gl@3.6.2\/dist\/maplibre-gl.js\"><\/script>\n<style>\n:root{\n  --bg:#000000;\n  --panel:#1c1c1e;\n  --panel-glass: rgba(20,20,22,0.72);\n  --accent:#FF9500;\n  --accent-dim:#7a4a00;\n  --icon:#FFFFFF;\n  --text-dim:#9a9a9e;\n  --divider: rgba(255,255,255,0.08);\n  --safe-bottom: env(safe-area-inset-bottom, 0px);\n  --safe-top: env(safe-area-inset-top, 0px);\n}\n*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}\nhtml,body{\n  margin:0; padding:0; height:100%; width:100%; overflow:hidden;\n  background:var(--bg); color:#fff;\n  font-family:-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n}\n#map-container{position:fixed; inset:0; z-index:1;}\n.maplibregl-ctrl-attrib{display:none !important;}\n.maplibregl-ctrl-logo{display:none !important;}\n\n\/* Hex grid overlay accent *\/\n#hex-overlay{\n  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.05; mix-blend-mode:screen;\n  background-image:\n    radial-gradient(circle at 1px 1px, rgba(255,149,0,0.9) 1px, transparent 1.4px);\n  background-size: 26px 26px;\n}\n\n\/* Top status bar *\/\n#top-bar{\n  position:fixed; top:calc(14px + var(--safe-top)); left:16px; right:16px; z-index:20;\n  display:flex; align-items:center; justify-content:space-between;\n  pointer-events:none;\n}\n.brand{\n  display:flex; align-items:center; gap:9px;\n  background:var(--panel-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\n  border:1px solid var(--divider); border-radius:20px; padding:9px 16px 9px 12px;\n  pointer-events:auto;\n}\n.brand svg{width:20px; height:20px; flex-shrink:0;}\n.brand-text{font-size:14px; font-weight:700; letter-spacing:0.2px;}\n.brand-text span{color:var(--accent);}\n.status-pill{\n  background:var(--panel-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\n  border:1px solid var(--divider); border-radius:20px; padding:9px 14px;\n  font-size:12px; color:var(--text-dim); pointer-events:auto; display:flex; align-items:center; gap:6px;\n}\n.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2s infinite;}\n@keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.35}}\n\n\/* Right vertical control pill *\/\n#control-pill{\n  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:20;\n  display:flex; flex-direction:column; gap:2px;\n  background:var(--panel-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);\n  border:1px solid var(--divider); border-radius:26px; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,0.5);\n}\n.ctrl-btn{\n  width:46px; height:46px; border-radius:20px; border:none; background:transparent;\n  display:flex; align-items:center; justify-content:center; cursor:pointer;\n  transition:background 0.2s ease, transform 0.15s ease;\n}\n.ctrl-btn svg{width:21px; height:21px; stroke:var(--icon); fill:none;}\n.ctrl-btn:active{transform:scale(0.9);}\n.ctrl-btn.active{background:var(--accent);}\n.ctrl-btn.active svg{stroke:#000;}\n.ctrl-divider{height:1px; background:var(--divider); margin:2px 10px;}\n\n\/* Bottom sheet *\/\n#sheet{\n  position:fixed; left:0; right:0; bottom:0; z-index:30;\n  background:var(--panel);\n  border-top:1px solid var(--divider);\n  border-radius:24px 24px 0 0;\n  box-shadow:0 -10px 40px rgba(0,0,0,0.6);\n  transform:translateY(0);\n  transition:transform 0.38s cubic-bezier(0.32,0.72,0,1), height 0.38s cubic-bezier(0.32,0.72,0,1);\n  will-change:transform;\n  padding-bottom:calc(18px + var(--safe-bottom));\n  max-height:88vh;\n  overflow:hidden;\n  display:flex; flex-direction:column;\n}\n.sheet-handle{\n  width:36px; height:5px; border-radius:3px; background:#3a3a3c; margin:10px auto 6px;\n  flex-shrink:0;\n}\n.sheet-scroll{overflow-y:auto; padding:0 20px;}\n.sheet-scroll::-webkit-scrollbar{display:none;}\n\n\/* State 1: idle *\/\n#state-idle{padding:14px 20px 4px;}\n#where-to-btn{\n  width:100%; text-align:left; background:#2c2c2e; border:none; border-radius:16px;\n  padding:16px 18px; color:#fff; font-size:16px; font-weight:600; display:flex; align-items:center; gap:12px;\n  cursor:pointer;\n}\n#where-to-btn svg{width:18px; height:18px; stroke:var(--accent); fill:none; flex-shrink:0;}\n#where-to-btn .ph{color:var(--text-dim); font-weight:500;}\n.mode-tabs{display:flex; gap:8px; margin-top:12px;}\n.mode-tab{\n  flex:1; padding:11px 0; text-align:center; border-radius:14px; background:#2c2c2e;\n  font-size:13px; font-weight:600; color:var(--text-dim); border:none; cursor:pointer;\n}\n.mode-tab.active{background:var(--accent); color:#000;}\n\n\/* State 2: input *\/\n.field-group{display:flex; flex-direction:column; gap:10px; padding-top:8px;}\n.field-row{display:flex; align-items:center; gap:12px; background:#2c2c2e; border-radius:14px; padding:13px 14px;}\n.field-row .field-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}\n.field-dot.pickup{background:var(--accent);}\n.field-dot.dropoff{background:#fff; border:2px solid var(--accent); background-clip:padding-box; width:8px; height:8px;}\n.field-row input{\n  flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px; font-weight:500;\n}\n.field-row input::placeholder{color:var(--text-dim);}\n.field-row .use-current{font-size:11px; color:var(--accent); font-weight:700; flex-shrink:0; background:rgba(255,149,0,0.12); padding:5px 9px; border-radius:8px; cursor:pointer;}\n#suggestions{margin-top:4px;}\n.suggestion-item{\n  padding:12px 4px; border-bottom:1px solid var(--divider); display:flex; gap:12px; align-items:flex-start; cursor:pointer;\n}\n.suggestion-item:last-child{border-bottom:none;}\n.suggestion-item svg{width:16px; height:16px; stroke:var(--text-dim); fill:none; margin-top:2px; flex-shrink:0;}\n.suggestion-main{font-size:14px; font-weight:600; color:#fff;}\n.suggestion-sub{font-size:12px; color:var(--text-dim); margin-top:2px;}\n.sheet-back{\n  position:absolute; top:14px; left:16px; width:32px; height:32px; border-radius:16px; background:#2c2c2e;\n  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; z-index:2;\n}\n.sheet-back svg{width:16px; height:16px; stroke:#fff; fill:none;}\n.sheet-title{font-size:16px; font-weight:700; text-align:center; padding:6px 0 4px;}\n.empty-hint{color:var(--text-dim); font-size:13px; text-align:center; padding:24px 10px;}\n\n\/* State 3: confirmation *\/\n.route-summary{display:flex; align-items:center; gap:10px; padding:14px 4px; margin-top:4px;}\n.route-line{display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 0;}\n.route-line .rdot{width:8px; height:8px; border-radius:50%;}\n.route-line .rdot.a{background:var(--accent);}\n.route-line .rdot.b{background:#fff; border:2px solid var(--accent);}\n.route-line .rbar{width:2px; flex:1; min-height:22px; background:linear-gradient(var(--accent), #fff);}\n.route-text{flex:1; display:flex; flex-direction:column; gap:16px;}\n.route-text .addr{font-size:13.5px; font-weight:600; line-height:1.3;}\n.route-text .addr .lbl{color:var(--text-dim); font-weight:500; display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:2px;}\n\n.stats-row{display:flex; gap:10px; padding:6px 0 4px;}\n.stat-box{flex:1; background:#2c2c2e; border-radius:14px; padding:12px; text-align:center;}\n.stat-box .v{font-size:17px; font-weight:800;}\n.stat-box .l{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px;}\n\n.when-row{display:flex; gap:8px; padding:12px 0 2px;}\n.when-btn{flex:1; padding:11px 0; border-radius:14px; background:#2c2c2e; border:none; color:var(--text-dim); font-weight:700; font-size:13px; cursor:pointer;}\n.when-btn.active{background:var(--accent); color:#000;}\n#later-picker{display:none; margin-top:10px;}\n#later-picker input{\n  width:100%; background:#2c2c2e; border:none; border-radius:14px; padding:12px 14px; color:#fff; font-size:14px;\n}\n\n.price-row{\n  display:flex; align-items:center; justify-content:space-between; padding:16px 4px 6px; margin-top:6px;\n  border-top:1px solid var(--divider);\n}\n.price-row .plabel{font-size:13px; color:var(--text-dim); font-weight:600;}\n.price-row .pvalue{font-size:26px; font-weight:800; color:var(--accent);}\n\n#book-btn{\n  width:100%; background:var(--accent); border:none; border-radius:16px; padding:17px 0; margin-top:12px;\n  color:#000; font-size:16px; font-weight:800; cursor:pointer; letter-spacing:0.2px;\n}\n#book-btn:active{transform:scale(0.98);}\n#book-btn:disabled{background:#4a3418; color:#8a6a3a;}\n\n\/* State 4: voucher *\/\n.voucher-check{width:64px; height:64px; border-radius:50%; background:rgba(255,149,0,0.14); display:flex; align-items:center; justify-content:center; margin:18px auto 6px;}\n.voucher-check svg{width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:2.6;}\n.voucher-title{text-align:center; font-size:18px; font-weight:800;}\n.voucher-sub{text-align:center; font-size:13px; color:var(--text-dim); margin-top:4px; padding:0 20px;}\n.voucher-card{background:#2c2c2e; border-radius:16px; padding:16px; margin-top:16px; font-size:13px; line-height:1.8;}\n.voucher-card b{color:var(--accent);}\n.action-row{display:flex; gap:10px; margin-top:14px;}\n.action-btn{flex:1; padding:14px 0; border-radius:14px; border:none; font-size:13.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;}\n.action-btn.wa{background:#25D366; color:#000;}\n.action-btn.ics{background:#2c2c2e; color:#fff; border:1px solid var(--divider);}\n.action-btn svg{width:16px; height:16px;}\n#new-booking-btn{width:100%; background:transparent; border:1px solid var(--divider); border-radius:14px; padding:13px 0; color:var(--text-dim); font-weight:700; font-size:13px; margin-top:10px; cursor:pointer;}\n\n.hidden{display:none !important;}\n\n\/* Locate button toast *\/\n#toast{\n  position:fixed; top:calc(70px + var(--safe-top)); left:50%; transform:translateX(-50%) translateY(-20px); z-index:40;\n  background:var(--panel-glass); backdrop-filter:blur(20px); border:1px solid var(--divider); border-radius:14px;\n  padding:10px 16px; font-size:12.5px; opacity:0; transition:all 0.3s ease; pointer-events:none; white-space:nowrap;\n}\n#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}\n\n\/* custom markers *\/\n.pin{width:26px; height:26px; display:flex; align-items:center; justify-content:center;}\n.pin svg{width:26px; height:26px;}\n.gps-dot{width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 0 0 6px rgba(255,149,0,0.25);}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"map-container\"><\/div>\n<div id=\"hex-overlay\"><\/div>\n\n<div id=\"top-bar\">\n  <div class=\"brand\">\n    <svg viewBox=\"0 0 24 24\" stroke=\"#FF9500\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg>\n    <div class=\"brand-text\">ISLAND <span>TRANSFER<\/span><\/div>\n  <\/div>\n  <div class=\"status-pill\"><div class=\"dot\"><\/div><span id=\"gps-status\">Locating\u2026<\/span><\/div>\n<\/div>\n\n<div id=\"control-pill\">\n  <button class=\"ctrl-btn\" id=\"btn-locate\" title=\"Locate me\">\n    <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3\"\/><\/svg>\n  <\/button>\n  <div class=\"ctrl-divider\"><\/div>\n  <button class=\"ctrl-btn\" id=\"btn-track\" title=\"Track me\">\n    <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 17h14M6 17l1.5-8.5a2 2 0 0 1 2-1.5h5a2 2 0 0 1 2 1.5L18 17M9 17v2M15 17v2M6 12h12\"\/><\/svg>\n  <\/button>\n  <div class=\"ctrl-divider\"><\/div>\n  <button class=\"ctrl-btn\" id=\"btn-fullscreen\" title=\"Fullscreen\">\n    <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M16 21h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"\/><\/svg>\n  <\/button>\n<\/div>\n\n<div id=\"toast\"><\/div>\n\n<!-- BOTTOM SHEET -->\n<div id=\"sheet\">\n  <div class=\"sheet-handle\"><\/div>\n  <div class=\"sheet-scroll\">\n\n    <!-- STATE 1: IDLE -->\n    <div id=\"state-idle\">\n      <button id=\"where-to-btn\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\n        <span class=\"ph\">Where to?<\/span>\n      <\/button>\n      <div class=\"mode-tabs\">\n        <button class=\"mode-tab active\" data-mode=\"transfer\">Transfer<\/button>\n        <button class=\"mode-tab\" data-mode=\"tour\">Island Tour<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- STATE 2: INPUT -->\n    <div id=\"state-input\" class=\"hidden\" style=\"position:relative; padding-top:8px;\">\n      <button class=\"sheet-back\" id=\"back-to-idle\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n      <\/button>\n      <div class=\"sheet-title\">Set your route<\/div>\n      <div class=\"field-group\">\n        <div class=\"field-row\">\n          <div class=\"field-dot pickup\"><\/div>\n          <input type=\"text\" id=\"input-pickup\" placeholder=\"Pickup location\" value=\"Current Location\">\n          <div class=\"use-current\" id=\"use-current-btn\">GPS<\/div>\n        <\/div>\n        <div class=\"field-row\" id=\"dropoff-row\">\n          <div class=\"field-dot dropoff\"><\/div>\n          <input type=\"text\" id=\"input-dropoff\" placeholder=\"Where are you going?\">\n        <\/div>\n      <\/div>\n      <div id=\"suggestions\"><\/div>\n\n      <div id=\"tour-note\" class=\"hidden\" style=\"margin-top:2px;\">\n        <div class=\"empty-hint\" style=\"padding:6px 4px 14px; text-align:left;\">Island tours run at a flat hourly rate from your pickup point \u2014 no destination needed. Pick a slot on the next screen.<\/div>\n      <\/div>\n      <button id=\"tour-continue-btn\" class=\"hidden\" style=\"width:100%; background:var(--accent); border:none; border-radius:16px; padding:15px 0; color:#000; font-size:15px; font-weight:800; cursor:pointer; margin-top:2px;\">Continue<\/button>\n    <\/div>\n\n    <!-- STATE 3: CONFIRMATION -->\n    <div id=\"state-confirm\" class=\"hidden\" style=\"position:relative; padding-top:8px;\">\n      <button class=\"sheet-back\" id=\"back-to-input\">\n        <svg viewBox=\"0 0 24 24\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n      <\/button>\n      <div class=\"sheet-title\">Confirm trip<\/div>\n\n      <div class=\"route-summary\">\n        <div class=\"route-line\">\n          <div class=\"rdot a\"><\/div>\n          <div class=\"rbar\"><\/div>\n          <div class=\"rdot b\"><\/div>\n        <\/div>\n        <div class=\"route-text\">\n          <div class=\"addr\"><span class=\"lbl\">Pickup<\/span><span id=\"confirm-pickup\">\u2014<\/span><\/div>\n          <div class=\"addr\"><span class=\"lbl\">Dropoff<\/span><span id=\"confirm-dropoff\">\u2014<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"stats-row\">\n        <div class=\"stat-box\" id=\"stat-distance-box\"><div class=\"v\" id=\"stat-distance\">\u2014<\/div><div class=\"l\" id=\"stat-distance-label\">Distance<\/div><\/div>\n        <div class=\"stat-box\" id=\"stat-duration-box\"><div class=\"v\" id=\"stat-duration\">\u2014<\/div><div class=\"l\" id=\"stat-duration-label\">Duration<\/div><\/div>\n        <div class=\"stat-box\"><div class=\"v\" id=\"stat-vehicle\">Sedan<\/div><div class=\"l\">Vehicle<\/div><\/div>\n      <\/div>\n\n      <div id=\"tour-slots\" class=\"hidden\">\n        <div class=\"mode-tabs\" style=\"margin-top:6px;\">\n          <button class=\"when-btn tour-slot active\" data-slot=\"half-am\">Half-Day AM<\/button>\n          <button class=\"when-btn tour-slot\" data-slot=\"half-pm\">Half-Day PM<\/button>\n          <button class=\"when-btn tour-slot\" data-slot=\"full\">Full-Day<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"when-row\">\n        <button class=\"when-btn active\" id=\"when-now\">Now<\/button>\n        <button class=\"when-btn\" id=\"when-later\">Later<\/button>\n      <\/div>\n      <div id=\"later-picker\">\n        <input type=\"datetime-local\" id=\"later-datetime\">\n      <\/div>\n\n      <div class=\"price-row\">\n        <div class=\"plabel\">Total fare<\/div>\n        <div class=\"pvalue\" id=\"price-value\">$40<\/div>\n      <\/div>\n\n      <button id=\"book-btn\">Book Now<\/button>\n    <\/div>\n\n    <!-- STATE 4: VOUCHER -->\n    <div id=\"state-voucher\" class=\"hidden\" style=\"padding-top:4px;\">\n      <div class=\"voucher-check\">\n        <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n      <\/div>\n      <div class=\"voucher-title\">Booking confirmed<\/div>\n      <div class=\"voucher-sub\">Your voucher is ready to send<\/div>\n\n      <div class=\"voucher-card\" id=\"voucher-text-display\"><\/div>\n\n      <div class=\"action-row\">\n        <button class=\"action-btn wa\" id=\"send-whatsapp\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.5 14.4c-.3-.1-1.7-.9-2-1s-.5-.1-.7.1-.7 1-.9 1.1-.3.2-.6.1a7.6 7.6 0 0 1-2.2-1.4 8.5 8.5 0 0 1-1.6-2c-.2-.3 0-.5.1-.6l.4-.5.3-.4a.6.6 0 0 0 0-.5c-.1-.1-.7-1.6-.9-2.2s-.5-.5-.7-.5h-.6a1.1 1.1 0 0 0-.8.4A3.4 3.4 0 0 0 6.3 9c0 1.3.9 2.6 1.1 2.8s1.7 2.7 4.2 3.7a14.4 14.4 0 0 0 1.4.5 3.4 3.4 0 0 0 1.5.1 2.5 2.5 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c-.1-.1-.3-.2-.6-.4z\"\/><path d=\"M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.3A10 10 0 1 0 12 2z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><\/svg>\n          WhatsApp\n        <\/button>\n        <button class=\"action-btn ics\" id=\"download-ics\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\n          Add to Calendar\n        <\/button>\n      <\/div>\n      <button id=\"new-booking-btn\">Book another trip<\/button>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n\/* ---------------- STATE ---------------- *\/\nconst S = {\n  map:null, userLocation:null, trackMode:false, watchId:null,\n  pickupCoord:null, dropoffCoord:null, pickupLabel:\"Current Location\", dropoffLabel:null,\n  mode:\"transfer\", tourSlot:\"half-am\", when:\"now\", laterTime:null,\n  distanceKm:0, durationMin:0, price:40,\n  markers:{pickup:null, dropoff:null, gps:null},\n  activeField:\"dropoff\"\n};\n\nconst WHATSAPP_NUMBER = \"68989660003\";\n\n\/* ---------------- MAP INIT ---------------- *\/\nconst CARTO_DARK = \"https:\/\/basemaps.cartocdn.com\/gl\/dark-matter-gl-style\/style.json\";\n\nif(typeof maplibregl === 'undefined'){\n  document.getElementById('map-container').innerHTML =\n    '<div style=\"height:100%;display:flex;align-items:center;justify-content:center;color:#fff;background:#111;padding:20px;text-align:center;font-family:sans-serif;\">MapLibre GL failed to load from the CDN.<br>Check your internet connection or an ad blocker may be blocking unpkg.com.<\/div>';\n  throw new Error('maplibregl not loaded');\n}\n\nS.map = new maplibregl.Map({\n  container:'map-container',\n  style: CARTO_DARK,\n  center:[-149.4295, -17.6797], \/\/ Tahiti-ish default; will recenter on GPS\n  zoom:12,\n  attributionControl:false,\n  pitch:0\n});\n\nS.map.on('load', () => {\n  addRouteLayer();\n  locateUser(true);\n});\n\nfunction addRouteLayer(){\n  if(S.map.getSource('route')) return;\n  S.map.addSource('route', { type:'geojson', data:{type:'Feature', geometry:{type:'LineString', coordinates:[]}, properties:{}} });\n  S.map.addLayer({\n    id:'route-line', type:'line', source:'route',\n    layout:{'line-join':'round','line-cap':'round'},\n    paint:{'line-color':'#FF9500', 'line-width':5, 'line-opacity':0.92}\n  });\n}\n\nfunction setRoute(coords){\n  const src = S.map.getSource('route');\n  if(src) src.setData({type:'Feature', geometry:{type:'LineString', coordinates:coords}, properties:{}});\n}\n\n\/* ---------------- GEOLOCATION ---------------- *\/\nfunction makeElMarker(cls, innerHTML){\n  const el = document.createElement('div');\n  el.className = cls;\n  el.innerHTML = innerHTML;\n  return el;\n}\n\nfunction updateGpsMarker(lng, lat){\n  if(!S.markers.gps){\n    const el = makeElMarker('gps-dot','');\n    S.markers.gps = new maplibregl.Marker({element:el}).setLngLat([lng,lat]).addTo(S.map);\n  } else {\n    S.markers.gps.setLngLat([lng,lat]);\n  }\n}\n\nfunction locateUser(initial){\n  showToast(\"Getting your location\u2026\");\n  navigator.geolocation.getCurrentPosition(pos => {\n    const {longitude, latitude} = {longitude:pos.coords.longitude, latitude:pos.coords.latitude};\n    S.userLocation = [longitude, latitude];\n    S.pickupCoord = S.pickupCoord || S.userLocation;\n    updateGpsMarker(longitude, latitude);\n    S.map.flyTo({center:[longitude,latitude], zoom:14, speed:1.2});\n    document.getElementById('gps-status').textContent = \"GPS locked\";\n    showToast(\"Location found\");\n  }, err => {\n    document.getElementById('gps-status').textContent = \"GPS unavailable\";\n    showToast(\"Couldn't get your location\");\n  }, {enableHighAccuracy:true, timeout:8000});\n}\n\ndocument.getElementById('btn-locate').addEventListener('click', () => locateUser(false));\n\ndocument.getElementById('btn-track').addEventListener('click', function(){\n  S.trackMode = !S.trackMode;\n  this.classList.toggle('active', S.trackMode);\n  if(S.trackMode){\n    showToast(\"Track mode on\");\n    S.watchId = navigator.geolocation.watchPosition(pos=>{\n      const {longitude, latitude} = pos.coords;\n      updateGpsMarker(longitude, latitude);\n      S.map.easeTo({center:[longitude, latitude], duration:600});\n    }, ()=>{}, {enableHighAccuracy:true});\n  } else {\n    showToast(\"Track mode off\");\n    if(S.watchId) navigator.geolocation.clearWatch(S.watchId);\n  }\n});\n\ndocument.getElementById('btn-fullscreen').addEventListener('click', function(){\n  if(!document.fullscreenElement){\n    document.documentElement.requestFullscreen().catch(()=>{});\n    this.classList.add('active');\n  } else {\n    document.exitFullscreen();\n    this.classList.remove('active');\n  }\n});\n\n\/* ---------------- TOAST ---------------- *\/\nlet toastTimer;\nfunction showToast(msg){\n  const t = document.getElementById('toast');\n  t.textContent = msg;\n  t.classList.add('show');\n  clearTimeout(toastTimer);\n  toastTimer = setTimeout(()=> t.classList.remove('show'), 2200);\n}\n\n\/* ---------------- SHEET NAVIGATION ---------------- *\/\nconst stateIdle = document.getElementById('state-idle');\nconst stateInput = document.getElementById('state-input');\nconst stateConfirm = document.getElementById('state-confirm');\nconst stateVoucher = document.getElementById('state-voucher');\n\nfunction showState(name){\n  [stateIdle, stateInput, stateConfirm, stateVoucher].forEach(s=>s.classList.add('hidden'));\n  ({idle:stateIdle, input:stateInput, confirm:stateConfirm, voucher:stateVoucher})[name].classList.remove('hidden');\n}\n\ndocument.getElementById('where-to-btn').addEventListener('click', ()=>{\n  applyModeToInputState();\n  showState('input');\n  if(S.mode !== 'tour') document.getElementById('input-dropoff').focus();\n});\ndocument.getElementById('back-to-idle').addEventListener('click', ()=> showState('idle'));\ndocument.getElementById('back-to-input').addEventListener('click', ()=> showState('input'));\n\ndocument.querySelectorAll('.mode-tab[data-mode]').forEach(tab=>{\n  tab.addEventListener('click', ()=>{\n    document.querySelectorAll('.mode-tab[data-mode]').forEach(t=>t.classList.remove('active'));\n    tab.classList.add('active');\n    S.mode = tab.dataset.mode;\n    applyModeToInputState();\n  });\n});\n\nfunction applyModeToInputState(){\n  const isTour = S.mode === 'tour';\n  document.getElementById('dropoff-row').classList.toggle('hidden', isTour);\n  document.getElementById('suggestions').innerHTML = \"\";\n  document.getElementById('tour-note').classList.toggle('hidden', !isTour);\n  document.getElementById('tour-continue-btn').classList.toggle('hidden', !isTour);\n}\n\n\/* ---------------- NOMINATIM SEARCH ---------------- *\/\nlet searchDebounce;\nconst suggestionsEl = document.getElementById('suggestions');\nconst inputPickup = document.getElementById('input-pickup');\nconst inputDropoff = document.getElementById('input-dropoff');\n\ndocument.getElementById('use-current-btn').addEventListener('click', ()=>{\n  inputPickup.value = \"Current Location\";\n  S.pickupCoord = S.userLocation;\n  S.pickupLabel = \"Current Location\";\n  showToast(\"Pickup set to your location\");\n});\n\n[inputPickup, inputDropoff].forEach(inp=>{\n  inp.addEventListener('focus', ()=> S.activeField = inp === inputPickup ? 'pickup' : 'dropoff');\n  inp.addEventListener('input', ()=>{\n    clearTimeout(searchDebounce);\n    const q = inp.value.trim();\n    if(q.length < 3 || q === \"Current Location\"){ suggestionsEl.innerHTML = \"\"; return; }\n    searchDebounce = setTimeout(()=> searchLocation(q), 400);\n  });\n});\n\nasync function searchLocation(query){\n  try{\n    let url = `https:\/\/nominatim.openstreetmap.org\/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1`;\n    if(S.userLocation){\n      const [lng,lat]=S.userLocation;\n      const d=0.6;\n      url += `&viewbox=${lng-d},${lat+d},${lng+d},${lat-d}&bounded=0`;\n    }\n    const res = await fetch(url);\n    const data = await res.json();\n    renderSuggestions(data);\n  }catch(e){\n    suggestionsEl.innerHTML = `<div class=\"empty-hint\">Search unavailable \u2014 check connection<\/div>`;\n  }\n}\n\nfunction renderSuggestions(results){\n  if(!results.length){\n    suggestionsEl.innerHTML = `<div class=\"empty-hint\">No matches found<\/div>`;\n    return;\n  }\n  suggestionsEl.innerHTML = results.map((r,i)=>{\n    const main = (r.display_name.split(',')[0]||r.display_name);\n    const sub = r.display_name.split(',').slice(1,4).join(',').trim();\n    return `<div class=\"suggestion-item\" data-idx=\"${i}\">\n      <svg viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.5\"\/><\/svg>\n      <div><div class=\"suggestion-main\">${escapeHtml(main)}<\/div><div class=\"suggestion-sub\">${escapeHtml(sub)}<\/div><\/div>\n    <\/div>`;\n  }).join('');\n  suggestionsEl.querySelectorAll('.suggestion-item').forEach(item=>{\n    item.addEventListener('click', ()=>{\n      const r = results[item.dataset.idx];\n      selectPlace(r);\n    });\n  });\n}\n\nfunction escapeHtml(s){ return s.replace(\/[&<>\"']\/g, c=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c])); }\n\nfunction selectPlace(r){\n  const coord = [parseFloat(r.lon), parseFloat(r.lat)];\n  const label = r.display_name.split(',').slice(0,3).join(',');\n  if(S.activeField === 'pickup'){\n    S.pickupCoord = coord; S.pickupLabel = label; inputPickup.value = label;\n  } else {\n    S.dropoffCoord = coord; S.dropoffLabel = label; inputDropoff.value = label;\n  }\n  suggestionsEl.innerHTML = \"\";\n  if(S.pickupCoord && S.dropoffCoord){\n    buildRoute();\n  }\n}\n\ndocument.getElementById('tour-continue-btn').addEventListener('click', ()=>{\n  const startCoord = S.pickupCoord || S.userLocation;\n  if(!startCoord){\n    showToast(\"Locate yourself or set a pickup point first\");\n    return;\n  }\n  S.pickupCoord = startCoord;\n  S.dropoffCoord = null;\n  S.dropoffLabel = null;\n  setRoute([]);\n  if(S.markers.dropoff){ S.markers.dropoff.remove(); S.markers.dropoff = null; }\n  placePinMarker('pickup', S.pickupCoord);\n  S.map.flyTo({center:S.pickupCoord, zoom:13, duration:800});\n  S.distanceKm = 0;\n  S.durationMin = 0;\n  computePrice();\n  populateConfirmState();\n  showState('confirm');\n});\n\n\/* ---------------- ROUTING (OSRM demo server) ---------------- *\/\nasync function buildRoute(){\n  showToast(\"Calculating route\u2026\");\n  placePinMarker('pickup', S.pickupCoord);\n  placePinMarker('dropoff', S.dropoffCoord);\n\n  try{\n    const [p, d] = [S.pickupCoord, S.dropoffCoord];\n    const url = `https:\/\/router.project-osrm.org\/route\/v1\/driving\/${p[0]},${p[1]};${d[0]},${d[1]}?overview=full&geometries=geojson`;\n    const res = await fetch(url);\n    const json = await res.json();\n    if(json.routes && json.routes[0]){\n      const route = json.routes[0];\n      setRoute(route.geometry.coordinates);\n      S.distanceKm = route.distance\/1000;\n      S.durationMin = route.duration\/60;\n    } else {\n      throw new Error(\"no route\");\n    }\n  }catch(e){\n    \/\/ fallback: straight great-circle line\n    setRoute([S.pickupCoord, S.dropoffCoord]);\n    S.distanceKm = haversineKm(S.pickupCoord, S.dropoffCoord);\n    S.durationMin = S.distanceKm \/ 40 * 60;\n  }\n\n  fitToRoute();\n  computePrice();\n  populateConfirmState();\n  showState('confirm');\n}\n\nfunction haversineKm(a,b){\n  const R=6371, toRad=d=>d*Math.PI\/180;\n  const dLat=toRad(b[1]-a[1]), dLon=toRad(b[0]-a[0]);\n  const lat1=toRad(a[1]), lat2=toRad(b[1]);\n  const h=Math.sin(dLat\/2)**2 + Math.cos(lat1)*Math.cos(lat2)*Math.sin(dLon\/2)**2;\n  return R*2*Math.atan2(Math.sqrt(h), Math.sqrt(1-h));\n}\n\nfunction placePinMarker(type, coord){\n  const colorFill = type==='pickup' ? '#FF9500' : '#FFFFFF';\n  const stroke = type==='pickup' ? '#fff' : '#FF9500';\n  const svg = `<svg viewBox=\"0 0 24 24\"><path d=\"M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8z\" fill=\"${colorFill}\" stroke=\"${stroke}\" stroke-width=\"1.5\"\/><circle cx=\"12\" cy=\"10\" r=\"3\" fill=\"${type==='pickup'?'#000':'#FF9500'}\"\/><\/svg>`;\n  if(S.markers[type]) S.markers[type].remove();\n  const el = makeElMarker('pin', svg);\n  S.markers[type] = new maplibregl.Marker({element:el, anchor:'bottom'}).setLngLat(coord).addTo(S.map);\n}\n\nfunction fitToRoute(){\n  if(!S.pickupCoord || !S.dropoffCoord) return;\n  const bounds = new maplibregl.LngLatBounds();\n  bounds.extend(S.pickupCoord); bounds.extend(S.dropoffCoord);\n  S.map.fitBounds(bounds, {padding:{top:100,bottom:340,left:60,right:60}, duration:900});\n}\n\n\/* ---------------- PRICING ---------------- *\/\nfunction computePrice(){\n  if(S.mode === 'tour'){\n    const rates = {'half-am':400,'half-pm':400,'full':800};\n    S.price = rates[S.tourSlot];\n  } else {\n    const base = 40, capDist = 60, capPrice = 150;\n    let p = base + (capPrice-base) * Math.min(S.distanceKm, capDist)\/capDist;\n    if(S.distanceKm > capDist){ p += (S.distanceKm-capDist) * ((capPrice-base)\/capDist); }\n    S.price = Math.round(Math.max(base, p));\n  }\n}\n\ndocument.querySelectorAll('.tour-slot').forEach(btn=>{\n  btn.addEventListener('click', ()=>{\n    document.querySelectorAll('.tour-slot').forEach(b=>b.classList.remove('active'));\n    btn.classList.add('active');\n    S.tourSlot = btn.dataset.slot;\n    computePrice();\n    populateConfirmState();\n  });\n});\n\n\/* ---------------- CONFIRM STATE POPULATE ---------------- *\/\nfunction populateConfirmState(){\n  const isTour = S.mode === 'tour';\n  document.getElementById('confirm-pickup').textContent = S.pickupLabel || \"Current Location\";\n\n  const dropoffAddrRow = document.getElementById('confirm-dropoff').closest('.addr');\n  if(isTour){\n    dropoffAddrRow.classList.add('hidden');\n  } else {\n    dropoffAddrRow.classList.remove('hidden');\n    document.getElementById('confirm-dropoff').textContent = S.dropoffLabel || \"\u2014\";\n  }\n\n  if(isTour){\n    const hrs = S.tourSlot === 'full' ? 8 : 4;\n    document.getElementById('stat-distance').textContent = labelForSlot(S.tourSlot);\n    document.getElementById('stat-distance-label').textContent = \"Package\";\n    document.getElementById('stat-duration').textContent = hrs + \" hrs\";\n    document.getElementById('stat-duration-label').textContent = \"Duration\";\n  } else {\n    document.getElementById('stat-distance').textContent = S.distanceKm.toFixed(1)+\" km\";\n    document.getElementById('stat-distance-label').textContent = \"Distance\";\n    document.getElementById('stat-duration').textContent = Math.round(S.durationMin)+\" min\";\n    document.getElementById('stat-duration-label').textContent = \"Duration\";\n  }\n\n  document.getElementById('price-value').textContent = `$${S.price}`;\n  document.getElementById('tour-slots').classList.toggle('hidden', !isTour);\n  document.getElementById('stat-vehicle').textContent = isTour ? 'Van' : 'Sedan';\n}\n\ndocument.getElementById('when-now').addEventListener('click', function(){\n  S.when='now'; this.classList.add('active');\n  document.getElementById('when-later').classList.remove('active');\n  document.getElementById('later-picker').style.display='none';\n});\ndocument.getElementById('when-later').addEventListener('click', function(){\n  S.when='later'; this.classList.add('active');\n  document.getElementById('when-now').classList.remove('active');\n  document.getElementById('later-picker').style.display='block';\n  const dt = document.getElementById('later-datetime');\n  const now = new Date(Date.now()+30*60000);\n  dt.min = now.toISOString().slice(0,16);\n  dt.value = now.toISOString().slice(0,16);\n});\ndocument.getElementById('later-datetime').addEventListener('change', e=>{ S.laterTime = e.target.value; });\n\n\/* ---------------- BOOKING \/ VOUCHER ---------------- *\/\ndocument.getElementById('book-btn').addEventListener('click', ()=>{\n  buildVoucher();\n  showState('voucher');\n});\n\nlet currentVoucher = null;\n\nfunction buildVoucher(){\n  const now = new Date();\n  const tripTime = S.when === 'later' && S.laterTime ? new Date(S.laterTime) : new Date(now.getTime()+15*60000);\n  const ref = \"ITP-\" + Math.random().toString(36).slice(2,8).toUpperCase();\n\n  const lines = [\n    `*ISLAND TRANSFER PRO*`,\n    `Voucher: ${ref}`,\n    ``,\n    `Service: ${S.mode==='tour' ? 'Island Tour ('+labelForSlot(S.tourSlot)+')' : 'Private Transfer'}`,\n    `Pickup: ${S.pickupLabel || 'Current Location'}`,\n    S.mode==='transfer' ? `Dropoff: ${S.dropoffLabel || '\u2014'}` : null,\n    `When: ${S.when==='now' ? 'ASAP (~15 min)' : tripTime.toLocaleString()}`,\n    S.mode==='transfer' ? `Distance: ${S.distanceKm.toFixed(1)} km \u00b7 ~${Math.round(S.durationMin)} min` : null,\n    `Fare: $${S.price}`,\n    S.userLocation ? `GPS: ${S.userLocation[1].toFixed(5)}, ${S.userLocation[0].toFixed(5)}` : null,\n    ``,\n    `Thank you for booking with Island Transfer Pro.`\n  ].filter(Boolean);\n\n  currentVoucher = { text: lines.join('\\n'), tripTime, ref };\n  document.getElementById('voucher-text-display').innerHTML = lines.map(escapeHtml).join('<br>');\n}\n\nfunction labelForSlot(slot){\n  return {'half-am':'Half-Day AM','half-pm':'Half-Day PM','full':'Full-Day'}[slot] || slot;\n}\n\ndocument.getElementById('send-whatsapp').addEventListener('click', ()=>{\n  const msg = encodeURIComponent(currentVoucher.text);\n  window.open(`https:\/\/wa.me\/${WHATSAPP_NUMBER}?text=${msg}`, '_blank');\n});\n\ndocument.getElementById('download-ics').addEventListener('click', ()=>{\n  const start = currentVoucher.tripTime;\n  const end = new Date(start.getTime() + (S.mode==='tour' ? (S.tourSlot==='full'?8:4)*3600000 : 45*60000));\n  const fmt = d => d.toISOString().replace(\/[-:]\/g,'').split('.')[0]+'Z';\n  const ics = [\n    'BEGIN:VCALENDAR','VERSION:2.0','PRODID:-\/\/IslandTransferPro\/\/EN','BEGIN:VEVENT',\n    `UID:${currentVoucher.ref}@islandtransferpro`,\n    `DTSTAMP:${fmt(new Date())}`,\n    `DTSTART:${fmt(start)}`,\n    `DTEND:${fmt(end)}`,\n    `SUMMARY:Island Transfer Pro \u2014 ${S.mode==='tour'?'Island Tour':'Transfer'} (${currentVoucher.ref})`,\n    `DESCRIPTION:${currentVoucher.text.replace(\/\\n\/g,'\\\\n')}`,\n    `LOCATION:${(S.pickupLabel||'Current Location').replace(\/,\/g,'\\\\,')}`,\n    'END:VEVENT','END:VCALENDAR'\n  ].join('\\r\\n');\n  const blob = new Blob([ics], {type:'text\/calendar'});\n  const a = document.createElement('a');\n  a.href = URL.createObjectURL(blob);\n  a.download = `${currentVoucher.ref}.ics`;\n  a.click();\n});\n\ndocument.getElementById('new-booking-btn').addEventListener('click', ()=>{\n  S.dropoffCoord = null; S.dropoffLabel = null;\n  inputDropoff.value = \"\";\n  document.getElementById('confirm-dropoff').closest('.addr').classList.remove('hidden');\n  if(S.markers.dropoff){ S.markers.dropoff.remove(); S.markers.dropoff=null; }\n  if(S.markers.pickup){ S.markers.pickup.remove(); S.markers.pickup=null; }\n  setRoute([]);\n  showState('idle');\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>Island Transfer Pro ISLAND TRANSFER Locating\u2026 Where to? Transfer Island Tour Set your route GPS Island tours run at a flat hourly rate from your pickup point \u2014 no destination needed. Pick a slot on the next screen. Continue Confirm trip Pickup\u2014 Dropoff\u2014 \u2014Distance \u2014Duration SedanVehicle Half-Day AM Half-Day PM Full-Day Now Later Total fare [&hellip;]<\/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-219","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/219","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=219"}],"version-history":[{"count":4,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/mana-corp.com\/index.php?rest_route=\/wp\/v2\/pages\/219\/revisions\/223"}],"wp:attachment":[{"href":"https:\/\/mana-corp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}