// Methodology (/methodology) — the credibility engine.
// The sources, the twelve dimensions, archetype weightings, cadence, pledge.

const DIM_NOTES = [
  'Anticipation without surveillance. The brief, the training, the recovery from error.',
  'Scale, light, materials under the hand — and whether the room wins the hour after arrival.',
  'Sourcing, breakfast honesty, whether the restaurants would survive outside the hotel.',
  'Program depth and practitioner quality, not marble volume.',
  'The building as argument — massing, procession, relationship to land and light.',
  'What the address alone is worth: access, outlook, and what is outside the door.',
  'Who else is there, and whether you notice. Acoustic and social privacy.',
  'The staging of the first hour, and whether the property could exist anywhere else.',
  'Pools, grounds, courts, clubs, cellars — what the property owns beyond its rooms.',
  'The machine: timing, housekeeping, the thousand invisible handoffs, year after year.',
  'Audited practice, not brochure language. Energy, water, labor, community.',
  'What the rate actually buys at this tier. Expensive is fine; unjustified is not.',
];

// Archetype weighting: how the twelve dimensions tilt per property type.
const WEIGHTS = [
  ['City hotel', 'Service, Food & beverage and Consistency lead; Facilities discounted where the city provides them.'],
  ['Palace & heritage', 'Design & architecture, Arrival & sense of place and Rooms lead; Sustainability held to full weight.'],
  ['Beach & island', 'Arrival & sense of place, Exclusivity and Facilities lead; Location judged by setting, not access.'],
  ['Safari & wild', 'Arrival & sense of place and Exclusivity dominate; Rooms weighted below the mean — the land is the suite.'],
  ['Mountain & desert', 'Consistency and Spa & wellness lead — the elements audit everything; Arrival close behind.'],
  ['Country estate', 'Facilities, Food & beverage and Sense of place lead; scale-dependent dimensions normalized.'],
];

const SOURCES = [
  ["The World's 50 Best Hotels", '2025 list and extended 51–100'],
  ['La Liste', '2026 Top Hotels, algorithmic aggregate'],
  ['Travel + Leisure', "World's Best Awards, reader-scored"],
  ['Condé Nast Traveler', "Readers' Choice Awards"],
  ['Forbes Travel Guide', 'Five-Star ratings, inspector-led'],
  ['Michelin Keys', '2025 global selection'],
  ['Luxehotels editors', 'Anonymous stays, own-way paid'],
];

function MethodologyPage() {
  return (
    <div data-screen-label="04 Methodology">
      <ChapterOpener eyebrow="The masthead's promise" title="How we score.">
        <p className="prose" style={{ margin: 0, fontSize: 19 }}>
          The Luxehotels Score is a composite out of one hundred, built from
          twelve dimensions weighted by property archetype. We synthesize the
          seven most credible external signals in hospitality, then correct
          them with editorial judgment — expert-voted lists overweight city
          hotels, since panels stay disproportionately in cities; we restore
          the island, safari and coastal icons that define the category. What
          follows is the entire method. There is no other input, and no way to
          buy a point of it.
        </p>
      </ChapterOpener>

      {/* The sources */}
      <section className="container" style={{ paddingTop: 96 }}>
        <Eyebrow accent>I — The sources we synthesize</Eyebrow>
        <div style={{ borderTop: '1px solid var(--ink)', marginTop: 32 }}>
          {SOURCES.map(([name, note], i) => (
            <div key={name} className="method-row">
              <span className="rank-numeral num" style={{ fontSize: 21 }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontFamily: 'var(--display)', fontSize: 23 }}>{name}</span>
              <span className="prose method-note" style={{ fontSize: 15.5, color: 'var(--folio)', margin: 0 }}>{note}</span>
            </div>
          ))}
        </div>
        <p className="caption" style={{ marginTop: 20, maxWidth: '68ch' }}>
          External signals set the field; the editors set the order. Divergence
          from any single source is deliberate, and argued in the reviews.
        </p>
      </section>

      {/* The twelve dimensions */}
      <section className="container" style={{ paddingTop: 'var(--section)' }}>
        <Eyebrow accent>II — The twelve dimensions</Eyebrow>
        <div style={{ borderTop: '1px solid var(--ink)', marginTop: 32 }}>
          {window.DIMS_12.map((d, i) => (
            <div key={d} className="method-row">
              <span className="rank-numeral num" style={{ fontSize: 21 }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontFamily: 'var(--display)', fontSize: 23 }}>{d}</span>
              <span className="prose method-note" style={{ fontSize: 15.5, color: 'var(--folio)', margin: 0 }}>{DIM_NOTES[i]}</span>
            </div>
          ))}
        </div>
        <p className="caption" style={{ marginTop: 20 }}>
          Six of the twelve publish as the sub-scores on every review — {window.SUBSCORES.join(', ')} — each a weighted pair of dimensions.
          Every profile also flags its framework standouts: the dimensions where the property leads the world.
        </p>
      </section>

      {/* Archetype weightings */}
      <section className="container" style={{ paddingTop: 'var(--section)' }}>
        <Eyebrow accent>III — Archetype weightings</Eyebrow>
        <p className="prose" style={{ marginTop: 28, fontSize: 17 }}>
          A safari camp and a Kowloon tower should not be scored with the same
          ruler. Every property is assigned one of six archetypes, and the
          twelve dimensions are re-weighted accordingly before the composite
          is computed. Rankings compare the scores, never the raw dimensions.
        </p>
        <div style={{ borderTop: '1px solid var(--ink)', marginTop: 40 }}>
          {WEIGHTS.map(([a, note]) => (
            <div key={a} className="weights-row">
              <span style={{ fontFamily: 'var(--display)', fontSize: 21 }}>{a}</span>
              <span className="prose" style={{ fontSize: 15.5, color: 'var(--folio)', margin: 0 }}>{note}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Cadence + rates */}
      <section className="container" style={{ paddingTop: 'var(--section)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 64 }}>
          <div>
            <Eyebrow accent>IV — Cadence</Eyebrow>
            <p className="prose" style={{ marginTop: 24, fontSize: 16.5 }}>
              The 100 is re-ranked once a year as a new edition; this is the{' '}
              <span className="num">{window.EDITION}</span> Edition. Between
              editions, positions only move on a revisit — never on press
              releases, renovations we haven't slept through, or awards from
              other bodies. Ranks are stable and citable within an edition;
              historical editions are preserved, never rewritten.
            </p>
          </div>
          <div>
            <Eyebrow accent>V — A note on rates</Eyebrow>
            <p className="prose" style={{ marginTop: 24, fontSize: 16.5 }}>
              Nightly figures at this tier swing hard by season and are starting
              points, not fixed prices. Several icons do not publish rack rates
              at all. Where a rate appears on a review, treat it as the door,
              not the bill.
            </p>
          </div>
        </div>
      </section>

      {/* Independence pledge */}
      <section style={{ marginTop: 'var(--section)', background: 'var(--plate)', color: 'var(--paper-on-plate)', padding: 'var(--s-10) 0' }}>
        <div className="container-text">
          <Eyebrow style={{ color: 'rgba(250,250,247,0.55)' }}>VI — The independence pledge</Eyebrow>
          <p className="display-s display-italic" style={{ marginTop: 28, marginBottom: 0, color: 'var(--paper)' }}>
            No property paid for inclusion or position — and none ever will.
            We accept no hosted stays, no commissions on inclusion, and no
            advertising from ranked properties. Where a hotel falls short of
            perfection, we say so, at the same size as the praise.
          </p>
          <p className="caption" style={{ color: 'rgba(250,250,247,0.55)', marginTop: 36 }}>
            Signed, the editors · Luxehotels — The 100, {window.EDITION} Edition
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MethodologyPage });