// Round 2 — Services (outcome-led), Destinations (reordered, no specialty tags), // Comparator (all-in vs. surgery-only + dollar savings), FAQ function Services({ copy }) { const s = copy.services; return (

{s.eyebrow}

{s.title}

{s.items.map((it, i) => (

{it.t}

{it.outcome}

))}

); } // City icons — thin gold lines, 1.25 stroke, 56×56 viewBox. function DestIcon({ name, color = '#C9A961' }) { const props = { width: 56, height: 56, viewBox: '0 0 56 56', fill: 'none', stroke: color, strokeWidth: 1.25, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'peaks') { return ( ); } if (name === 'palm' || name === 'waves') { // Minimalist palm tree — same gold stroke / 1.25 weight as siblings return ( ); } if (name === 'bloom') { return ( ); } // sun (also catches legacy 'valley') return ( ); } function Destinations({ copy }) { const d = copy.destinations; const cream = '#F5F1EA'; const gold = '#C9A961'; // Track viewport for responsive grid (1 col mobile, 2 tablet, 4 desktop) const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280); React.useEffect(() => { const onR = () => setW(window.innerWidth); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); const cityCols = w < 768 ? '1fr' : (w < 1024 ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))'); return (

{/* Header — editorial, generous */}

{d.eyebrow}

{d.title}

{d.sub}

{/* Flight-times subhead — centered, discreet, mono caps */}

{/* Card grid — 4 columns desktop, 2 tablet, 1 mobile */}

{d.items.map((c, i) => (

{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'rgba(201,169,97,0.55)'; e.currentTarget.style.boxShadow = '0 16px 40px -24px rgba(27,54,97,0.25)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = 'rgba(27,54,97,0.10)'; e.currentTarget.style.boxShadow = ''; }} > {/* Icon + Mood — aligned on the same row */}

{c.mood}

{/* City name */}

{c.city}

{/* Practical data — definition list */}

{row.k}: {row.v}

{/* Ideal for — gold-accented pill row */}

Ideal for

{c.fit}

{/* Ambiance note */}

{c.note}

))}

{/* Footnote */}

Your concierge will recommend the city that best fits your procedure · Four Colombian cities total

); } // Comparator — all-inclusive vs. surgery-only, savings in absolute dollars (midpoint) function Comparator({ copy }) { const c = copy.comparator; const items = copy.procedures; const [idx, setIdx] = React.useState(0); const [animKey, setAnimKey] = React.useState(0); const current = items[idx]; React.useEffect(() => { setAnimKey(k => k + 1); }, [idx]); const fmt = (r) => { const f = (n) => n < 10 && n % 1 !== 0 ? `$${(n * 1000).toLocaleString()}` : `$${n}K`; return `${f(r[0])} – ${f(r[1])}`; }; const mid = (r) => (r[0] + r[1]) / 2; const savingsMid = Math.round((mid(current.us) - mid(current.sanna)) * 1000); const globalMax = Math.max(...items.map(it => it.us[1])); const sannaRatio = mid(current.sanna) / globalMax; const usRatio = mid(current.us) / globalMax; return (

{c.eyebrow}

{c.title}

{c.sub}

{/* Picker */}

{c.pick}

{items.map((it, i) => ( ))}

{/* Headline savings */}

{c.saveLabel}

Save ${savingsMid.toLocaleString()}.

on {current.t.toLowerCase()} · midpoint comparison

{/* Bars */}

Board-certified surgeons · Licensed Colombian clinics · End-to-end concierge coordination

); } function CostBar({ tag, tagSub, range, ratio, accent, animKey }) { return (

{tag}

{tagSub}

{range}

); } function IncludedList({ heading, items, tone }) { const mark = tone === 'good' ? '+' : '—'; const col = tone === 'good' ? TOKENS.color.navy : TOKENS.color.inkMute; return (

{heading}

{items.map((it, i) => (

{mark} {it}

))}

); } function FAQ({ copy }) { const f = copy.faq; const [open, setOpen] = React.useState(0); return (

{f.eyebrow}

{f.title}

{f.items.map((it, i) => { const isOpen = open === i; return (

{it.a}

); })}

); } Object.assign(window, { Services, Destinations, Comparator, FAQ });