// Shared components for dentaltourismreview.com const { useState, useEffect, useMemo } = React; const { destinations, procedures, clinics, reviews, forumThreads, concierges, featuredCombos } = window.DTR_DATA; const fmtUSD = (n) => '$' + n.toLocaleString('en-US'); const Stars = ({ value, size = 13 }) => { const full = Math.floor(value); const half = value - full >= 0.5; return ( {'★'.repeat(full)}{half ? '⯨' : ''}{'☆'.repeat(5 - full - (half?1:0))} ); }; const Tag = ({ children, variant = '', dot = false }) => ( {dot && } {children} ); const Mark = () => ✚; const Wordmark = ({ size = 24, color = 'var(--ink)' }) => ( dentaltourismreview.com ); const Nav = ({ route, navigate }) => { const [tab, setTab] = useState('all'); return (
{e.preventDefault();navigate('home');}} style={{textDecoration:'none'}}> {e.preventDefault();navigate('write');}} className="btn btn-ghost btn-sm" style={{textDecoration:'none'}}> + Write a review {e.preventDefault();navigate('account');}} style={{textDecoration:'none'}}> JD
{/* Region tabs — second row */}
{[['all','All destinations'],['mx','Mexican dental tourism'],['latam','Latin America'],['europe','Europe'],['asia','Asia'],['emerging','Emerging']].map(([k,l]) => ( ))}
); }; // Real photo destinations — Unsplash CDN (public domain hotlinkable URLs) const DEST_PHOTOS = { tijuana: 'https://images.unsplash.com/photo-1583414913768-94c5c1b46cdf?w=1200&q=80&auto=format&fit=crop', 'tijuana-alt': 'https://images.unsplash.com/photo-1518105779142-d975f22f1b0a?w=1200&q=80&auto=format&fit=crop', cancun: 'https://images.unsplash.com/photo-1552074284-5e88ef1aef18?w=1200&q=80&auto=format&fit=crop', 'cancun-alt': 'https://images.unsplash.com/photo-1510097467424-192d713fd8b2?w=1200&q=80&auto=format&fit=crop', bangkok: 'https://images.unsplash.com/photo-1508009603885-50cf7c579365?w=1200&q=80&auto=format&fit=crop', 'bangkok-alt': 'https://images.unsplash.com/photo-1563492065599-3520f775eeed?w=1200&q=80&auto=format&fit=crop', budapest: 'https://images.unsplash.com/photo-1541849546-216549ae216d?w=1200&q=80&auto=format&fit=crop', 'budapest-alt': 'https://images.unsplash.com/photo-1551867633-194f125bddfa?w=1200&q=80&auto=format&fit=crop', sanjose: 'https://images.unsplash.com/photo-1518509562904-e7ef99cddc85?w=1200&q=80&auto=format&fit=crop', 'sanjose-alt': 'https://images.unsplash.com/photo-1580500550469-7e7e7e7e7e7e?w=1200&q=80&auto=format&fit=crop', // Clinic / interior shots 'clinic-modern':'https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=1200&q=80&auto=format&fit=crop', 'clinic-chair': 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?w=1200&q=80&auto=format&fit=crop', 'clinic-team': 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=1200&q=80&auto=format&fit=crop', }; const DestinationArt = ({ id, height = 240 }) => { const photo = DEST_PHOTOS[id]; if (photo) { return (
{id}
); } // fallback to SVG art return
; }; const Footer = () => ( ); // The Ledger: side-by-side US vs. abroad cost comparison const Ledger = ({ procedure, destination, dark = true }) => { const usPrice = procedure.usPrice; const abroad = procedure.abroadAvg; const flight = destination.flightHrs.includes('Drive') ? 0 : destination.flightHrs.includes('3') ? 380 : destination.flightHrs.includes('5') ? 540 : destination.flightHrs.includes('9') ? 720 : 1200; const hotel = destination.flightHrs.includes('17') ? 1568 : destination.flightHrs.includes('Drive') ? 320 : 580; const food = destination.flightHrs.includes('17') ? 800 : 380; const totalAbroad = abroad + flight + hotel + food; const savings = usPrice - totalAbroad; return (
Option A · The status quo
{procedure.name} at home
{procedure.name}{fmtUSD(usPrice)}
Time off work1–2 days
Vacation—
Total{fmtUSD(usPrice)}
Option B · {destination.name}
{procedure.name} + a trip
{procedure.name} ({destination.name}){fmtUSD(abroad)}
Round-trip flight{flight === 0 ? 'Drive' : fmtUSD(flight)}
Hotel · {destination.flightHrs.includes('17') ? '14 nights' : '4 nights'}{fmtUSD(hotel)}
Food + excursions{fmtUSD(food)}
Total{fmtUSD(totalAbroad)}
You save
{fmtUSD(Math.max(0, savings))}+ a {destination.flightHrs.includes('17') ? '16-day' : '4-day'} trip
); }; // Destination "postcard" card used in grids const DestinationCard = ({ d, navigate, compact = false }) => ( {e.preventDefault();navigate('destination',d.id);}} style={{display:'block',textDecoration:'none',color:'var(--ink)'}}>
{d.region}
SAVE {d.avgSavings}%
{d.name}
{!compact &&
{d.tagline}
}
{d.rating} · {d.reviewCount.toLocaleString()} reviews {d.clinicCount} clinics
); // Clinic row card const ClinicCard = ({ c, navigate, showDest = true }) => { const dest = destinations.find(d => d.id === c.destinationId); return ( {e.preventDefault();navigate('clinic',c.id);}} style={{display:'block',textDecoration:'none',color:'var(--ink)'}}>
{showDest &&
{dest.name} · {dest.region}
}
{c.name}
{c.blurb}
{c.specialties.slice(0,3).map(s => {s})}
{c.rating}
{c.reviewCount} reviews
From {fmtUSD(Math.min(...c.priceList.map(p=>p[1])))}
 ); }; // Trip-report excerpt card const TripReportCard = ({ r, navigate }) => { const dest = destinations.find(d => d.id === r.destinationId); const clinic = clinics.find(c => c.id === r.clinicId); return ( {e.preventDefault();navigate('review',r.id);}} style={{display:'block',textDecoration:'none',color:'var(--ink)'}}>
{r.initials}
{r.author} · {r.location}
{r.date} · {r.procedure}
"{r.title}"

{r.body.split('\n')[0]}

{dest.name} · {clinic?.name.split(' ·')[0] || ''} SAVED {fmtUSD(r.wouldHaveSpent - r.spent)}
); }; const SectionHead = ({ num, eyebrow, title, lead, action }) => (
{num}
{eyebrow}

{title}

{lead &&

{lead}

}
{action}
); Object.assign(window, { Nav, Footer, DestinationArt, DestinationCard, ClinicCard, TripReportCard, Ledger, Stars, Tag, Mark, Wordmark, SectionHead, fmtUSD });