// The Luxehotels 100 (/100) — the flagship ranked list.
// The Pantheon (1–10) as feature entries; Icons / Collection / Connoisseur's
// Cut (11–100) as a typographic index with tier openers.
const { useState: useState100, useEffect: useEffect100, useMemo: useMemo100 } = React;
// Rough USD so the rate-band filter can compare across listed formats
// ("From ~$750", "From ~EUR 1,500", "Four figures", "All-inclusive ~$1,800-3,500 pp").
function usdOf(from) {
if (!from) return null;
const s = String(from);
if (/four figures/i.test(s)) return 1800;
if (/highest rates/i.test(s)) return 3000;
const m = s.match(/(EUR|CHF|\$|£)\s?([\d,]+)/);
if (!m) return null;
const fx = { EUR: 1.1, CHF: 1.15, '$': 1, '£': 1.3 }[m[1]] || 1;
return parseInt(m[2].replace(/,/g, ''), 10) * fx;
}
const BANDS = [
{ key: 'under1k', label: 'Under $1,000', test: v => v !== null && v < 1000 },
{ key: '1to2.5k', label: '$1,000–2,500', test: v => v !== null && v >= 1000 && v <= 2500 },
{ key: 'over2.5k', label: 'Over $2,500', test: v => v !== null && v > 2500 },
];
const HOW_TO_USE = [
['Match the property to the trip, not the rank.', 'The top of this list is a menu, not a queue. Design and food in a city: Cheval Blanc Paris, Rosewood Hong Kong, Bulgari Tokyo. Romance and seclusion: Passalacqua, Aman Venice, Le Sirenuse. A barefoot reset: Soneva Fushi or Nihi Sumba. Safari: Singita Sabi Sand or andBeyond Bateleur Camp. A first icon: Raffles Singapore, Claridge\'s, Hotel du Cap.'],
['Book to a timeline.', 'For the scarcest properties — Passalacqua at 24 rooms, Giraffe Manor at 12, Casa Maria Luigia at 12 — reserve nine to twelve months ahead. Safari camps need twelve months for migration season, July through October in the Mara. Most Amalfi and Riviera icons close roughly November through March.'],
['Use a Virtuoso or Amex Fine Hotels & Resorts advisor.', 'The same room booked through a preferred-partner agent typically adds an upgrade, daily breakfast, a resort or spa credit, and flexible check-in at no extra cost. On a four-figure nightly rate, that is free money.'],
['Verify before you commit.', 'Copacabana Palace\'s annex is closed until October 2026. Atlantis The Royal paused several marquee restaurants in 2026. If you are booking for a specific room category or restaurant, confirm it is operating.'],
['Where luxury is heading.', 'Three trends run through this list. Food is now the deciding dimension at the top, with three-star kitchens inside hotels from Paris to Bangkok. Scarcity beats scale — the fastest risers are properties with fewer than fifty keys. And the branded-residence model, from LVMH\'s Maisons to Aman\'s members clubs, is quietly reshaping what a hotel even is.'],
];
function The100Page({ anchor }) {
const ranked = useMemo100(() => window.getRanked100(), []);
const regions = useMemo100(() => [...new Set(ranked.map(p => p.region))].sort(), [ranked]);
const [drawerOpen, setDrawerOpen] = useState100(false);
const [region, setRegion] = useState100(null);
const [archetype, setArchetype] = useState100(null);
const [band, setBand] = useState100(null);
const filtering = region || archetype || band;
const visible = useMemo100(() => ranked.filter(p =>
(!region || p.region === region) &&
(!archetype || p.archetype === archetype) &&
(!band || BANDS.find(b => b.key === band).test(usdOf(p.from)))
), [ranked, region, archetype, band]);
const features = visible.filter(p => p.rank <= 10);
const index = visible.filter(p => p.rank > 10);
const pantheon = window.TIERS[0];
const indexTiers = window.TIERS.slice(1)
.map(t => ({ ...t, rows: index.filter(p => p.rank >= t.from && p.rank <= t.to) }))
.filter(t => t.rows.length > 0);
// Sticky mini-folio: current position in the list.
const [currentRank, setCurrentRank] = useState100(null);
useEffect100(() => {
if (!('IntersectionObserver' in window)) return;
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) setCurrentRank(parseInt(e.target.dataset.rank, 10)); });
}, { rootMargin: '-40% 0px -55% 0px', threshold: 0 });
document.querySelectorAll('[data-rank]').forEach(el => io.observe(el));
return () => io.disconnect();
}, [visible.length]);
// Deep link: #/100/{rank} scrolls to that entry.
useEffect100(() => {
if (!anchor) return;
const el = document.getElementById(`no-${anchor}`);
if (el) setTimeout(() => el.scrollIntoView({ block: 'center' }), 60);
}, [anchor]);
const chip = (active, onClick, label) => (
);
return (
One hundred properties, twelve dimensions, zero sponsored placements.
We synthesized seven authoritative sources — The World's 50 Best,
La Liste, Travel + Leisure, Condé Nast Traveler, Forbes Travel Guide
and the Michelin Keys — then corrected their city bias with editorial
judgment. No property paid for inclusion or position; where a hotel
falls short of perfection, we say so.{' '}
How we score →