// Pineapple Robot — full hi-fi site, premium tiki-bar feel const { useState, useEffect, useRef } = React; // ========== NAV ========== const Nav = () => { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); // Lock body scroll while drawer is open useEffect(() => { if (menuOpen) { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; } }, [menuOpen]); // Close drawer on resize past mobile breakpoint useEffect(() => { const onResize = () => { if (window.innerWidth > 720) setMenuOpen(false); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const links = [ { label: "Cocktails", href: "#cocktails" }, { label: "Pizza Paradiso", href: "https://pizzaparadiso.com", external: true }, { label: "Private Events", href: "#events" }, { label: "Visit Us", href: "#visit" }, ]; const closeAnd = (fn) => () => { setMenuOpen(false); fn && fn(); }; return ( <> {/* Mobile drawer — rendered as sibling of nav so its position:fixed is relative to the viewport, not the nav (the nav uses backdrop-filter which would otherwise become its containing block) */}
{links.map(l => ( {l.label} ))}
Order food ↗
); }; // Small pineapple glyph for the nav corner const PineappleMark = ({ size = 32 }) => ( ); // ========== HERO ========== const Hero = ({ heroLayout, copyTone }) => { const [singing, setSinging] = useState(false); // Auto-fade back to idle ~4s after activation useEffect(() => { if (!singing) return; const id = setTimeout(() => setSinging(false), 4000); return () => clearTimeout(id); }, [singing]); const headlines = { chill: ["Eat.", "Sip.", "Sing."], hype: ["Drink.", "Sing.", "Be heard."], poetic: ["Aloha,", "neon", "soul."], }; const subs = { chill: "A late-night tiki bar in Honokowai. Karaoke nightly, cocktails by the sea, pizza under the same roof.", hype: "West Maui's loudest karaoke bar. Tiki cocktails 'til 1:30 AM. Pizza Paradiso under the same roof. You're already family.", poetic: "A small bar with a big voice. Tropical drinks, late-night songs, slices of paradise — all in one place on the west side of Maui.", }; const lines = headlines[copyTone] || headlines.hype; const sub = subs[copyTone] || subs.hype; return (
★ Honokowai · Maui · Open Daily ★

{lines[0]}
{lines[1]}
{lines[2]}

{sub}

See the drink menu →
{heroLayout !== "stacked" && (
)}
{/* Bottom marquee */}
{Array.from({ length: 4 }).map((_, i) => (
Karaoke nightly · 9pm – 1:30am Happy Hour 12 – 5 Mai Tai Mondays Open 7 days
))}
); }; const Diamond = () => ( ); // ========== HERO VIDEO ========== // Square hero video — looping karaoke-night clip. object-fit: cover crops the // 3:2 source to the square frame. // // Deliberately NO poster image: this slot shows the video and nothing else. // The frame carries the site's ink background so the box reads as part of the // design while the first frame decodes, rather than flashing white. // // header-video.mp4 is a 960x640 encode of the 1620x1080 original // (header-video.mov, kept in the repo but excluded from deploys via // .vercelignore). `cover` scales by HEIGHT here since the source is wider than // the square, so 640px of height covers the 520px slot with nothing upscaled — // don't re-encode below 520px tall or the on-screen lyrics go soft. // // AUTOPLAY — this must never show a play button. Four layers, because no // single one holds everywhere: // // 1. The file itself has NO AUDIO TRACK. WebKit treats a silent video like // an animated GIF, which is its most permissive autoplay class — more // permissive than a muted video that still carries audio. Re-encodes must // keep `-an` or this protection is lost. // 2. muted/playsInline/autoplay set as DOM *properties*, not just JSX // attributes — iOS reads the property. // 3. Relentless retry: every media event, every visibility/focus change, // scrolling into view, and a slow poll. Also the first user gesture // ANYWHERE on the page (tap, scroll, key) — so the video starts from the // user touching anything at all, never from finding a play control. // 4. If playback still hasn't advanced after ~1.6s, fade in // assets/header-loop.webp — an animated WebP of the same clip. Animated // images are exempt from every autoplay policy, so the frame keeps moving // even in iOS Low Power Mode, Low Data Mode, and locked-down in-app // browsers, where the OS refuses