// sections.jsx — VENTI in Airbnb listing detail pattern const { useState: useState_S, useEffect: useEffect_S } = React; // ─── Top Nav (Airbnb style) ──────────────────────────────────── function TopNav({ t, lang, setLang }) { return (
VENTI
{["en","pt","es"].map((l) => ( ))}
); } // ─── Hero: Listing title row + photo grid ───────────────────── function HeroListing({ t }) { const photos = [ "assets/photos/house-pool-hero.jpeg", "assets/photos/deck-pool-day.jpeg", "assets/photos/living-day.jpeg", "assets/photos/bedroom-pool-view.jpeg", "assets/photos/sunset-kites-sun.jpeg", ]; return (
{/* Title row */}
Ilha do Guajirú · Ceará, Brasil

{t.listing.title}

{/* Photo grid */}
{photos.map((src, i) => (
))}
); } // ─── Listing detail (the main 2-col below the hero) ─────────── function ListingDetail({ t }) { return (
{/* LEFT column */}
{/* Subtitle + meta + rating */}

{t.listing.subtitle}

{t.listing.meta} · {t.listing.rating} · {t.listing.reviewsCount}
{/* Highlights */}
VENTI Kite Homes
{t.highlights.hostTitle}
{t.highlights.hostSub}
{t.highlights.rows.map((h, i) => (

{h.title}

{h.body}

))}
{/* About this place */}

{t.about.title}

{t.about.p1}

{t.about.p2}

{/* Sleeping arrangements */}

{t.sleeping.title}

{t.sleeping.beds.map((b, i) => (

{b.name}

{b.detail}

))}
{/* What this place offers */}

{t.amenitiesList.title}

{t.amenitiesList.items.map((a, i) => (
{a.label}
))}
{/* RIGHT column — Reservation card */}
); } // Date input: shows custom display text, native picker opens on click function DateField({ value, onChange, min, placeholder }) { const ref = React.useRef(); const fmt = (s) => { if (!s) return ""; const [y, m, d] = s.split("-"); return `${d}/${m}/${y}`; }; const open = () => { try { ref.current.showPicker(); } catch(_) { ref.current.focus(); } }; return (
{value ? fmt(value) : placeholder}
); } // ─── Animated number (rolls to the new value, NumberFlow-style) ── function AnimatedNumber({ value, format }) { const [display, setDisplay] = useState_S(value); const displayRef = React.useRef(value); const rafRef = React.useRef(0); useEffect_S(() => { const from = displayRef.current; const to = value; if (from === to) return; const duration = 420; const start = performance.now(); cancelAnimationFrame(rafRef.current); const tick = (now) => { const p = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic const current = Math.round(from + (to - from) * eased); displayRef.current = current; setDisplay(current); if (p < 1) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [value]); return {format ? format(display) : display}; } // ─── Reservation Card (custom Airbnb-style → Lodgify checkout) ── function ReservationCard({ t }) { const [checkin, setCheckin] = useState_S(""); const [checkout, setCheckout] = useState_S(""); const [guests, setGuests] = useState_S("2"); const nights = checkin && checkout ? Math.max(0, Math.round((new Date(checkout) - new Date(checkin)) / 86400000)) : 0; const total = nights * LODGIFY_PRICE_PER_NIGHT; const fmt = (n) => "$" + n.toLocaleString("en-US"); const nightsWord = t.reservation.breakdown[0][0].split(" ").pop(); const guestUnit = t.reservation.guestsValue.split(" ").slice(1).join(" "); const today = new Date().toISOString().split("T")[0]; const handleReserve = (e) => { e.preventDefault(); window.open(buildLodgifyURL(checkin, checkout, guests), "_blank"); }; return ( ); } // ─── Rating block (the big 64px moment) ─────────────────────── function RatingBlock({ t }) { return (
{t.listing.rating}
{t.reviews.tag}
{t.reviews.sub}
{t.reviews.categories.map(([k, v], i) => (
{k}
{v.toFixed(1)}
))}
{/* Review excerpts */}
{t.reviews.items.map((r, i) => (
{r.name.charAt(0)}
{r.name}
{r.from} · {r.date}
·{r.stayLength}

"{r.text}"

))}
); } // ─── Map / Where you'll be ──────────────────────────────────── function MapBlock({ t }) { return (
{t.coords?.title || t.location.title}
{t.coords?.value || "02° 48′ S · 39° 56′ W"}
{t.location.caption}
{t.location.sub}
); } // ─── Things to know ────────────────────────────────────────── function ThingsToKnow({ t }) { return (

{t.know.title}

{t.know.columns.map((c, i) => (

{c.title}

    {c.items.map((it, j) =>
  • {it}
    • )}
))}
); } // ─── Other houses (3 property cards) ───────────────────────── function OtherHouses({ t }) { const goToOverview = () => window.open(LODGIFY_BASE_URL + "/en/overview", "_blank", "noopener"); return (

{t.others.title}

{t.others.sub}

{t.others.list.map((h, i) => (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); goToOverview(); } }} >
{h.title} {h.badge && {h.badge}}
{h.title} {h.rating}
{h.sub}
{h.dates}
{h.price} {h.priceUnit}
))}
); } // ─── Footer (Airbnb style) ──────────────────────────────────── function Footer({ t }) { return ( ); } // ─── Sticky bottom bar (mobile) ─────────────────────────────── function StickyBottomBar({ t }) { return (
{t.reservation.price} {t.reservation.unit}
{t.listing.rating} ★ · {t.listing.reviewsCount}
{t.reservation.cta}
); } // ─── Helpers ────────────────────────────────────────────────── function StarIcon({ size = 12 }) { return ( ); } const highlightIcons = { pool: '', kite: '', home: '', key: '', }; const amenityIcons = { pool: highlightIcons.pool, wifi: '', ac: '', kitchen: '', tv: '', parking: '', kite: highlightIcons.kite, bath: '', shower: '', default: '', }; Object.assign(window, { TopNav, HeroListing, ListingDetail, ReservationCard, RatingBlock, MapBlock, ThingsToKnow, OtherHouses, Footer, StickyBottomBar }); // ─── Pillars (numbered concept block) ───────────────────────── function PillarsBlock({ t }) { if (!t.pillars) return null; return (
{t.pillars.eyebrow}

{t.pillars.headline}

{t.pillars.items.map((p, i) => (
{p.num}
{p.title}

{p.body}

))}
); } const WA_NUMBER = "59899347428"; const TOCHAT_WIDGET_ID = "whatapp-people-widget-f02ef37e-18c9-4363-afc7-8b2f3c10086e"; const LODGIFY_BASE_URL = "https://venti-brasil.lodgify.com"; const LODGIFY_CHECKOUT_URL = "https://checkout.lodgify.com/venti-brasil/en/#/807174"; const LODGIFY_PRICE_PER_NIGHT = 270; function buildLodgifyURL(arrival, departure, guests) { if (arrival && departure) { const params = new URLSearchParams(); params.set("arrival", arrival); params.set("departure", departure); if (guests) params.set("adults", String(guests)); return LODGIFY_CHECKOUT_URL + "?" + params.toString(); } return LODGIFY_BASE_URL + "/en/overview"; } function openWhatsApp(message) { window.open("https://wa.me/" + WA_NUMBER + "?text=" + encodeURIComponent(message), "_blank"); } function openChatWidget() { // Try clicking the tochat.be floating button rendered by their script const widget = document.getElementById(TOCHAT_WIDGET_ID); if (widget) { const btn = widget.querySelector("button") || widget.parentElement?.querySelector("button[class*='wpp'], button[class*='tochat'], button[class*='float']"); if (btn) { btn.click(); return; } // Some versions use a sibling element as trigger const sibling = widget.previousElementSibling || widget.nextElementSibling; if (sibling && sibling.tagName !== "SCRIPT") { sibling.click(); return; } } // Fallback: open WhatsApp directly openWhatsApp("Hola! Me interesa saber más sobre VENTI Kite Homes."); } // ─── Contact block (tochat.be widget inline) ────────────────── function ContactBlock({ t }) { if (!t.contact) return null; const c = t.contact; React.useEffect(() => { const PLACEHOLDER = "tochat-inline-placeholder"; const moveAndOpen = () => { const widget = document.getElementById(TOCHAT_WIDGET_ID); const placeholder = document.getElementById(PLACEHOLDER); if (!widget || !placeholder) return false; if (widget.parentNode === placeholder) return true; placeholder.appendChild(widget); // Programmatically open the widget (click the main trigger button) const btn = widget.querySelector(".chatwith-mainbutton"); if (btn) btn.click(); return true; }; if (!moveAndOpen()) { const timers = [200, 600, 1200, 2500].map(d => setTimeout(moveAndOpen, d)); return () => timers.forEach(clearTimeout); } }, []); return (
{c.eyebrow}

{c.headline}

{c.sub}

{c.meta.map(([k, v], i) => (
{k} {v}
))}
); } // ─── Editorial Hero (display headline + overlapping image) ─── function EditorialHero({ t, layout = "overlap", photo = "assets/photos/house-pool-hero.jpeg" }) { if (!t.hero) return null; const h = t.hero; return (
{h.eyebrow}

{h.headline}

{h.imageMeta}
{h.imageMeta}

{h.copy}

{h.cta} {h.ctaSecondary}
); } Object.assign(window, { EditorialHero, PillarsBlock, ContactBlock }); // ─── Place block ("El Lugar") ───────────────────────────────── function PlaceBlock({ t }) { if (!t.place) return null; const p = t.place; return (
{p.eyebrow}

{p.headline}

{p.cards.map((c, i) => (

{c.title}

{c.body}

))}
{p.stats.map((s, i) => (
{s.num}
{s.label}
))}
); } // ─── Benefits grid (6 motivos) ──────────────────────────────── const benefitIconSet = { wind: , kite: , buggy: , shield: , pool: , house: , }; function BenefitsBlock({ t }) { if (!t.benefits) return null; const b = t.benefits; return (
{b.eyebrow}

{b.headline}

{b.sub}

{b.items.map((it, i) => (
{benefitIconSet[it.icon] || benefitIconSet.house}

{it.title}

{it.body}

))}
); } // ─── Partners strip ────────────────────────────────────────── function PartnersStrip({ t }) { if (!t.partners) return null; const p = t.partners; return (
{p.label}
{p.list.map((it, i) => ( {it.name} ))}
); } Object.assign(window, { PlaceBlock, BenefitsBlock, PartnersStrip }); // ─── FAQ accordion ─────────────────────────────────────────── function FAQBlock({ t }) { if (!t.faq) return null; const f = t.faq; const [open, setOpen] = useState_S(0); return (
{f.eyebrow}

{f.headline}

{f.sub}

{f.items.map((it, i) => (
{it.a}
))}
); } // ─── Final CTA (dramatic full-bleed) ───────────────────────── function FinalCTA({ t }) { if (!t.finalCta) return null; const fc = t.finalCta; return (
{fc.eyebrow}

{fc.headline}

{fc.sub}

{fc.ctaPrimary} {fc.ctaSecondary}
{fc.meta.map((m, i) => ( {i > 0 && } {m} ))}
); } Object.assign(window, { FAQBlock, FinalCTA });