// Sections — moody premium tiki-bar feel const { useState: useStateS } = React; // ========== STORY ========== const Story = () => (
★ Drink and be heard

A small bar.
Big voice.

Tucked inside Honokowai Marketplace just north of Lahaina and Ka'anapali, Pineapple Robot is the late-night sibling of Pizza Paradiso — the gourmet pizzeria right next door.

By day, a tiki cocktail bar with happy hour from noon to five. By night, the lights dim, the mic comes out, and the karaoke runs from nine until 1:30 in the morning. Seven days a week.

Locals, visitors, off-shift bartenders, off-key tenors — everyone's welcome.

); const Stat = ({ n, label }) => (
{n}
{label}
); const PhotoTile = ({ color, emoji, photo, caption, tall }) => (
{photo ? ( {caption} ) : (
{emoji}
)}
{caption}
); // ========== COCKTAILS ========== // "Meet the Bots" — house signature cocktails, all $15 // `desc` is the ingredient list, not a written blurb: that is what Marqii // publishes for a drink, so a stand-in tile reads exactly like the live one it // gets replaced by. Keep these strings in sync with BASE_COCKTAILS in // api/_cocktails.js so the bot never describes a drink differently from its tile. const COCKTAILS = [ { name: "Moscow Mule", price: "15", color: "var(--accent-2)", desc: "Ocean Vodka, ginger beer, lime", tag: "Vodka" }, { name: "Lahaina Sunset", price: "15", color: "var(--coral)", desc: "bourbon, Aperol, pineapple juice, lime, simple syrup", tag: "Bourbon" }, { name: "Lazy Tree Hugger", price: "15", color: "var(--jungle)", desc: "passion-fruit-infused rum, pineapple, Campari, lime, simple syrup", tag: "Rum" }, { name: "Piñarita", price: "15", color: "var(--gold-deep)", desc: "tequila reposado, pineapple juice, coconut cream, mac-nut sugar cane, fresh lime", tag: "Tequila" }, { name: "Jarrito Loco", price: "15", color: "var(--magenta, #C13B58)", desc: "spicy tamarind vodka, orange juice, sugar-cane falernum, hibiscus tea, chamoy & Tajín rim", tag: "Vodka" }, { name: "Spam Mail", price: "15", color: "var(--teal)", desc: "vodka, Choya yuzu, lime, sugar-cane syrup", tag: "Vodka" }, { name: "Tech Mex", price: "15", color: "var(--accent)", desc: "blanco tequila, ginger, pineapple, honey, tiki bitters, allspice bitters", tag: "Tequila" }, { name: "Peach con Fuego", price: "15", color: "var(--coral)", desc: "mezcal, peach, lime, falernum", tag: "Mezcal" }, { name: "R2Cheeeehoooo", price: "15", color: "var(--accent-2)", desc: "gin, Don Q passion fruit, lime, sugar cane, falernum", tag: "Gin" }, { name: "Blue Fishbowl", price: "15", color: "var(--teal)", desc: "coconut rum, white rum, white tequila, blue curaçao, pineapple juice, lime, lemon-lime soda", tag: "Shareable" }, ]; // ---- Live Marqii merge (via /api/drinks) ---- // The cocktails render from COCKTAILS above (hand-tuned color/tag/blurb), but // name / price / ingredients come live from Marqii when available. Marqii item // names carry small typos + accents, so match on a loose normalized key. const COCKTAIL_TILE_COLORS = ["var(--coral)", "var(--teal)", "var(--accent-2)", "var(--jungle)", "var(--gold-deep)"]; const normDrink = (s) => (s || "") .toLowerCase() .normalize("NFD").replace(/[̀-ͯ]/g, "") // strip accents (ñ→n) .replace(/[^a-z0-9]/g, "") .replace(/(.)\1+/g, "$1"); // collapse repeats (cheeeh→ceh) // Local placeholder photo per drink. Used only until a real photo is uploaded // to Marqii — a live Marqii image always wins (see mergeCocktails + CocktailCard). // Keyed by display name; looked up via the same normalized key as the merge. const COCKTAIL_PHOTOS = { "Moscow Mule": "assets/drinks/moscow-mule.jpg", "Lahaina Sunset": "assets/drinks/lahaina-sunset.jpg", "Lazy Tree Hugger": "assets/drinks/lazy-tree-hugger.jpg", "Piñarita": "assets/drinks/pinarita.jpg", "Jarrito Loco": "assets/drinks/jarrito-loco.jpg", "Spam Mail": "assets/drinks/spam-mail.jpg", "Tech Mex": "assets/drinks/tech-mex.jpg", "Peach con Fuego": "assets/drinks/peach-con-fuego.jpg", "R2Cheeeehoooo": "assets/drinks/r2chee.jpg", "Blue Fishbowl": "assets/drinks/blue-fishbowl.jpg", "Lava Flow": "assets/drinks/lava-flow.jpg", }; const PLACEHOLDER_BY_KEY = {}; Object.keys(COCKTAIL_PHOTOS).forEach((n) => { PLACEHOLDER_BY_KEY[normDrink(n)] = COCKTAIL_PHOTOS[n]; }); const placeholderFor = (name) => PLACEHOLDER_BY_KEY[normDrink(name)] || ""; // Spirit label derived from the ingredient list — only used for brand-new // cocktails that have no hand-tuned entry above. Word-boundaries so "ginger" // doesn't read as "gin". const SPIRIT_TAGS = [["mezcal","Mezcal"],["tequila","Tequila"],["bourbon","Bourbon"],["whiskey","Whiskey"],["whisky","Whiskey"],["rum","Rum"],["gin","Gin"],["vodka","Vodka"]]; const deriveTag = (ingredients) => { const t = (ingredients || "").toLowerCase(); for (const [k, label] of SPIRIT_TAGS) if (new RegExp(`\\b${k}\\b`).test(t)) return label; return "Signature"; }; // Merge a live Marqii drinks array into the COCKTAILS design table. // COCKTAILS decides WHICH cocktails show; Marqii only enriches them. The widget // often publishes a partial list (at one point just Moscow Mule), so a drink // missing from the feed must never drop off the site — it just goes un-enriched. const mergeCocktails = (drinks) => { const live = {}; (drinks || []).forEach((dr) => { if (dr && dr.name) live[normDrink(dr.name)] = dr; }); const merged = COCKTAILS.map((base) => { const dr = live[normDrink(base.name)]; if (!dr) return base; // Once a drink is published in Marqii, Marqii is the source of truth for // everything the guest reads: name, price, ingredients and photo. The // stand-in copy/photo below is only for drinks the bar hasn't entered yet, // so it must not survive the merge. const liveDesc = (dr.ingredients || "").trim(); return { ...base, name: dr.name, price: dr.price || base.price, desc: liveDesc || base.desc, image: dr.image || "", // no Marqii photo yet → card falls back to the local placeholder }; }); // Anything Marqii lists that has no hand-tuned entry is a genuinely new // cocktail — synthesize a tile for it and append after the designed ones. const known = new Set(COCKTAILS.map((c) => normDrink(c.name))); (drinks || []).forEach((dr, i) => { if (!dr || !dr.name) return; const key = normDrink(dr.name); if (known.has(key)) return; known.add(key); merged.push({ name: dr.name, price: dr.price || "15", color: COCKTAIL_TILE_COLORS[i % COCKTAIL_TILE_COLORS.length], desc: dr.ingredients, tag: deriveTag(dr.ingredients), image: dr.image || "", }); }); return merged; }; // Menu-style capitalization, applied at render time only. Both our stand-in // copy and Marqii's live text are written in running-text case ("bourbon, // Aperol, pineapple juice"), which reads like a chopped-off sentence on a tile. // The stored strings stay lowercase so the bot can quote them mid-sentence — // only the tile capitalizes each comma-separated ingredient. const capitalizeIngredients = (s) => (s || "") .split(",") .map((part) => part.replace(/\S/, (ch) => ch.toUpperCase())) .join(","); // Featured cocktail tile — reused for the desktop featured card and the mobile swipe carousel. const CocktailCard = ({ c }) => (
{c.tag} ${c.price}
{c.name} { // Marqii photo failed → try the local placeholder, then the default. const ph = placeholderFor(c.name); const next = ph && !e.currentTarget.src.endsWith(ph) ? ph : "assets/maitai.jpg"; if (!e.currentTarget.src.endsWith(next)) e.currentTarget.src = next; }} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", border: "3px solid var(--ink)", borderRadius: "18px", boxShadow: "0 16px 32px -10px rgba(0,0,0,0.35)", display: "block", }} />

{c.name}

{capitalizeIngredients(c.desc)}

); // Mobile-only infinite carousel built on a transform-based track. We translate // the track ourselves instead of using native overflow scrolling, so the loop // "teleport" can never fight the browser's momentum — no flicker on fast swipes. const CocktailCarousel = ({ list = COCKTAILS }) => { const viewportRef = React.useRef(null); const trackRef = React.useRef(null); React.useEffect(() => { const viewport = viewportRef.current; const track = trackRef.current; if (!viewport || !track) return; let step = 0, w = 0, base = 0, pos = 0, raf = 0; // Fold any position back into the middle copy's window. Content repeats every // `w`, so the equivalent position is visually identical — this is the seamless // loop, and because we apply it to a transform there's no native scroll to jar. const wrap = (p) => { if (w <= 0) return p; const lo = -2 * w; return lo + ((((p - lo) % w) + w) % w); }; const render = () => { track.style.transform = `translate3d(${wrap(pos)}px,0,0)`; }; const measure = () => { const cards = track.querySelectorAll(".pr-cocktail-card"); if (cards.length < list.length + 1) return; step = cards[1].offsetLeft - cards[0].offsetLeft; w = step * list.length; base = (viewport.clientWidth - cards[0].offsetWidth) / 2; // centers the active tile if (!pos) pos = base - list.length * step; // start on the middle copy pos = wrap(pos); render(); }; // ---- drag + flick-to-snap ---- // mode: "idle" → nothing; "pending" → touch down, axis not yet decided; // "drag" → locked to a horizontal swipe. We never capture the pointer, so a // vertical gesture stays with the browser and the page scrolls normally. let mode = "idle", startX = 0, startY = 0, startPos = 0, lastX = 0, lastT = 0, vel = 0; const animateTo = (target) => { if (raf) cancelAnimationFrame(raf); const tick = () => { pos += (target - pos) * 0.18; // exponential ease toward the snap point if (Math.abs(target - pos) < 0.5) { pos = wrap(target); render(); raf = 0; return; } render(); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); }; const onDown = (e) => { if (raf) { cancelAnimationFrame(raf); raf = 0; } mode = "pending"; pos = wrap(pos); startX = lastX = e.clientX; startY = e.clientY; startPos = pos; lastT = e.timeStamp; vel = 0; }; const onMove = (e) => { if (mode === "idle") return; if (mode === "pending") { const dx = e.clientX - startX, dy = e.clientY - startY; if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return; // wait until the intent is clear if (Math.abs(dy) >= Math.abs(dx)) { mode = "idle"; return; } // vertical → let the page scroll mode = "drag"; // horizontal → it's ours } const dt = e.timeStamp - lastT; if (dt > 0) vel = (e.clientX - lastX) / dt; // px per ms lastX = e.clientX; lastT = e.timeStamp; pos = startPos + (e.clientX - startX); render(); if (e.cancelable) e.preventDefault(); }; const onUp = () => { if (mode !== "drag") { mode = "idle"; return; } mode = "idle"; const projected = pos + vel * 160; // glide a little past the release point const k = Math.round((base - projected) / step); animateTo(base - k * step); // snap to the nearest centered tile }; measure(); const settle = setTimeout(measure, 300); // re-measure once layout/images settle const onResize = () => measure(); track.addEventListener("pointerdown", onDown); window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); window.addEventListener("pointercancel", onUp); window.addEventListener("resize", onResize); return () => { clearTimeout(settle); if (raf) cancelAnimationFrame(raf); track.removeEventListener("pointerdown", onDown); window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); window.removeEventListener("pointercancel", onUp); window.removeEventListener("resize", onResize); }; }, [list]); const loop = [...list, ...list, ...list]; // Color the tiles by position (not by drink) so no two neighbors ever match. // 5 colors evenly divide the 10-drink list, so the loop stays seamless. const TILE_COLORS = ["var(--coral)", "var(--teal)", "var(--accent-2)", "var(--jungle)", "var(--gold-deep)"]; return (
{loop.map((d, i) => ( ))}
← swipe for the good stuff →
); }; const Cocktails = () => { // Live cocktails from Marqii (via /api/drinks), merged over the COCKTAILS // design table; starts from it so the section never flashes empty. const [list, setList] = useStateS(COCKTAILS); const [active, setActive] = useStateS(0); React.useEffect(() => { let alive = true; fetch("/api/drinks") .then((r) => r.json()) .then((d) => { if (alive && d && Array.isArray(d.drinks) && d.drinks.length) setList(mergeCocktails(d.drinks)); }) .catch(() => {}); return () => { alive = false; }; }, []); const c = list[active] || list[0]; return (
02 — From the bar

Meet the bots.

Ten house signature cocktails, all $15. Happy hour 12–5pm — home of the $5 Mai Tai. Late night from 9pm: $12 cocktails & $10 shots.

{/* Desktop: clickable list + featured tile */}
{/* List */}
{list.map((d, i) => ( ))}
{/* Mobile: infinite swipe carousel of the same tiles */}
); }; // ========== KARAOKE ========== const SONGS = [ { num: "001", title: "Don't Stop Believin'", who: "everyone, eventually" }, { num: "047", title: "Sweet Caroline", who: "the bachelorette party" }, { num: "108", title: "Dancing Queen", who: "table 4" }, { num: "212", title: "Bohemian Rhapsody", who: "the brave" }, { num: "303", title: "Wonderwall", who: "the guy with the guitar" }, { num: "451", title: "I Will Survive", who: "after the breakup" }, { num: "509", title: "Mr. Brightside", who: "millennials" }, { num: "808", title: "Aloha 'Oe", who: "the regulars" }, ]; const Karaoke = () => { const [queue, setQueue] = useStateS(["Don't Stop Believin'", "Sweet Caroline"]); const [now, setNow] = useStateS(0); const add = t => !queue.includes(t) && setQueue(q => [...q, t]); const skip = () => setNow(n => (n + 1) % Math.max(queue.length, 1)); return (
03 — The mic is yours

Pick a
song.
Be the show.

Thousands of songs. A loaded crowd. Throw one on the queue and we'll call you up.

{/* Now playing screen */}
▶ NOW PLAYING ● LIVE
{queue[now] || "—"}
UP NEXT: {queue[(now + 1) % queue.length] || "your song?"}
{/* Song book */}
Song book · Vol. 47 {queue.length} in queue
{SONGS.map(s => { const queued = queue.includes(s.title); return ( ); })}
DEMO ONLY — REQUEST YOUR REAL SONG FROM THE BARTENDER
); }; // ========== PIZZA ========== const PIZZA_ORDER_URL = "https://pizzaparadiso.toast.site/order"; // Cards cycle through the brand palette — the Marqii feed has no per-item color. const PIZZA_COLORS = ["var(--coral)", "var(--yellow)", "var(--jungle)", "var(--teal)", "var(--gold-deep)", "var(--coral-deep)"]; // Shown instantly and used if the live Marqii feed is unavailable. const FALLBACK_PIZZAS = [ { name: "Margherita", description: "olive oil, candied garlic, tomato, basil pesto, mozzarella, balsamic glaze", image: "assets/pizza-margherita.jpg" }, { name: "Maui Wowie", description: "herb-tomato, mozzarella-provolone, ham, real pineapple", image: "assets/pizza-hawaiian.jpg" }, { name: "Greek Pizza", description: "kalamata olives, red onion, gyro meat, feta, tomato, tzatziki, fresh mint", image: "assets/pizza-greek.jpg" }, { name: "Meat Supreme", description: "pepperoni, mozzarella-provolone, ground beef, bacon, sausage", image: "assets/pizza-meat.jpg" }, ]; const Pizza = () => { // Live menu from Marqii (via /api/menu); starts from fallback so it never flashes empty. const [pizzas, setPizzas] = useStateS(FALLBACK_PIZZAS); React.useEffect(() => { let alive = true; fetch("/api/menu") .then(r => r.json()) .then(d => { if (alive && d && Array.isArray(d.pizzas) && d.pizzas.length) setPizzas(d.pizzas); }) .catch(() => {}); return () => { alive = false; }; }, []); return (
03 — From the kitchen

And then there's
the food.

Pineapple Robot is connected to Pizza Paradiso next door — gourmet thin-crust pizza, fresh kabobs, and Mediterranean comfort food.

Order online ↗
{pizzas.slice(0, 10).map((p, i) => ( { e.currentTarget.style.transform = "translate(-3px, -3px)"; e.currentTarget.style.boxShadow = "9px 9px 0 var(--ink)"; }} onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "6px 6px 0 var(--ink)"; }} >
{p.image ? ( {p.name} { e.currentTarget.style.display = "none"; }} /> ) : null}
{p.name}
Order online ↗
))}
12″ & 14″ pies · build-your-own from $23.25 · gluten-free crust available · tap a pizza to order
See the full menu →
); }; // ========== PRIVATE EVENTS ========== const PRIVATE = [ { title: "Reserve the lounge", sub: "The whole tiki lounge, just your crew. Private karaoke, all night." }, { title: "Birthdays & bachelorettes", sub: "Bring the singers. We bring the mics, the mai tais, and the confetti energy." }, { title: "Catering by Pizza Paradiso", sub: "Wood-fired pizza, fresh kabobs & Mediterranean spreads from next door." }, ]; // ========== CONTACT ========== // Its own brown section between "Book the bar" and the sister-brands marquee. const ContactForm = () => { const [sent, setSent] = useStateS(false); return (
05 — Contact us

Drop us a line.

{sent ? (
🍍
Mahalo!

WE'LL GET BACK TO YOU FAST.

) : (
{ e.preventDefault(); setSent(true); }} style={{ display: "grid", gap: 20 }}>