// The Cover (/) — a magazine cover plus a table of contents. Not a landing page.
const { useMemo: useMemoCv } = React;

function CoverPage() {
  const P = window.PROPERTIES;
  const top = P.slice(0, 4);
  const numberOne = P[0];
  // "New entry": the highest-ranked recent opening outside the Pantheon.
  const newEntry = P.find(p => p.rank > 10 && p.opened >= 2022) || P[10];
  const featuredDest = window.DESTINATIONS[0]; // deepest chapter in the atlas

  const CYCLE = 9; // seconds per slide — §3.6: 8–10s
  const toc = [
    { no: '01', href: '#/100', title: 'The Luxehotels 100', note: `The world's best hotels, ranked. ${window.EDITION} Edition` },
    { no: '02', href: `#/hotels/${numberOne.id}`, title: `№ 1 — ${numberOne.name}`, note: `${numberOne.destination} · scored ${numberOne.score}/100` },
    { no: '03', href: `#/destinations/${featuredDest.id}`, title: `Chapter: ${featuredDest.name}`, note: `${featuredDest.region} · ${featuredDest.count} properties reviewed` },
    { no: '04', href: '#/destinations', title: 'The Atlas', note: `${window.DESTINATIONS.length} destinations, every review indexed` },
    { no: '05', href: '#/methodology', title: 'How we score', note: 'Twelve dimensions, no placement sold, ever' },
  ];

  return (
    <div data-screen-label="01 The Cover">
      {/* ————— The cover ————— */}
      <section style={{ height: '100vh', minHeight: 680, position: 'relative', background: 'var(--plate)', color: 'var(--paper-on-plate)', overflow: 'hidden' }}>
        {top.map((p, i) => (
          <div key={p.id} className="cover-slide"
            style={{ animation: `coverFade ${CYCLE * top.length}s ease-in-out ${i * CYCLE}s infinite`, background: p.tint }}>
            <div className="plate-img plate-grain" style={{ position: 'absolute', inset: 0 }}>
              <div className="slow-zoom" style={{ position: 'absolute', inset: 0, background: p.tint }}>
                {p.image && (
                  <img src={p.image} alt="" aria-hidden="true"
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={e => { e.currentTarget.style.display = 'none'; }} />
                )}
              </div>
            </div>
          </div>
        ))}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,12,0.42) 0%, rgba(10,10,12,0.08) 42%, rgba(10,10,12,0.58) 100%)' }} />
        <div className="container" style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 72 }}>
          <h1 className="display-cover" style={{ margin: 0, color: 'var(--paper)', letterSpacing: '0.04em' }}>LUXEHOTELS</h1>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', marginTop: 36, borderTop: '1px solid rgba(250,250,247,0.28)', paddingTop: 28 }}>
            <p className="standfirst" style={{ margin: 0, maxWidth: '34ch', color: 'var(--paper-on-plate)', fontSize: 'clamp(18px, 2vw, 24px)' }}>
              The 100 Best Hotels in the World — <span className="num">{window.EDITION}</span> Edition.
            </p>
            <a href="#/100" className="utility"
              style={{ fontSize: 13, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--paper)', border: '1px solid rgba(250,250,247,0.5)', padding: '16px 32px', transition: 'background 250ms ease, color 250ms ease' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--paper)'; e.currentTarget.style.color = 'var(--ink)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--paper)'; }}>
              Read the list
            </a>
          </div>
        </div>
      </section>

      {/* ————— Table of contents ————— */}
      <section style={{ paddingTop: 'var(--section)' }}>
        <div className="container">
          <Eyebrow accent>In this issue</Eyebrow>
          <h2 className="display-l" style={{ margin: '24px 0 56px' }}>Contents</h2>
          <div style={{ borderTop: '1px solid var(--ink)' }}>
            {toc.map(item => (
              <a key={item.no} href={item.href} className="toc-row">
                <span className="rank-numeral num" style={{ fontSize: 22 }}>{item.no}</span>
                <span style={{ fontFamily: 'var(--display)', fontSize: 'clamp(22px, 2.4vw, 32px)', fontVariationSettings: "'opsz' 90" }}>{item.title}</span>
                <span className="caption toc-note">{item.note}</span>
                <span aria-hidden="true" style={{ color: 'var(--folio)' }}>→</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ————— Three featured stories, stacked editorially ————— */}
      <section style={{ paddingTop: 'var(--section)' }}>
        <div className="container">
          <Eyebrow accent>Featured</Eyebrow>

          {/* Story 1 — the № 1 */}
          <Reveal>
            <a href={`#/hotels/${numberOne.id}`} className="feature-entry fe-grid align-end" style={{ padding: '56px 0 72px', borderBottom: '1px solid var(--hairline)' }}>
            <div className="fe-img">
              <Plate tint={numberOne.tint} src={numberOne.image} alt={numberOne.alt} ratio="ar-32" caption={`${numberOne.name} · ${numberOne.location}`} credit={numberOne.credit} />
            </div>
            <div className="fe-txt">
              <Eyebrow>№ 1 · {numberOne.destination}</Eyebrow>
              <h3 className="display-l" style={{ margin: '18px 0 20px' }}>{numberOne.name}</h3>
              <p className="standfirst" style={{ margin: 0, maxWidth: '42ch' }}>{numberOne.label}</p>
              <span className="utility link" style={{ display: 'inline-block', marginTop: 28, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>The № 1 review</span>
            </div>
            </a>
          </Reveal>

          {/* Story 2 — a destination chapter, flipped */}
          <Reveal>
            <a href={`#/destinations/${featuredDest.id}`} className="feature-entry fe-grid flip align-end" style={{ padding: '72px 0', borderBottom: '1px solid var(--hairline)' }}>
            <div className="fe-txt">
              <Eyebrow>Chapter · {featuredDest.region}</Eyebrow>
              <h3 className="display-l" style={{ margin: '18px 0 20px' }}>{featuredDest.name}</h3>
              <p className="standfirst" style={{ margin: 0, maxWidth: '42ch' }}>
                {featuredDest.count} properties reviewed, ranked and argued over. Where to sleep when the destination itself is the reason you came.
              </p>
              <span className="utility link" style={{ display: 'inline-block', marginTop: 28, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Read the chapter</span>
            </div>
            <div className="fe-img">
              <Plate tint={featuredDest.tint} ratio="ar-32" caption={`${featuredDest.name}, ${featuredDest.region}`} credit="Imagery pending" />
            </div>
            </a>
          </Reveal>

          {/* Story 3 — the new entry */}
          <Reveal>
            <a href={`#/hotels/${newEntry.id}`} className="feature-entry fe-grid align-end" style={{ padding: '72px 0' }}>
            <div className="fe-img">
              <Plate tint={newEntry.tint} src={newEntry.image} alt={newEntry.alt} ratio="ar-32" caption={`${newEntry.name} · ${newEntry.location}`} credit={newEntry.credit} />
            </div>
            <div className="fe-txt">
              <Eyebrow accent>New to the list · № {newEntry.rank}</Eyebrow>
              <h3 className="display-l" style={{ margin: '18px 0 20px' }}>{newEntry.name}</h3>
              <p className="standfirst" style={{ margin: 0, maxWidth: '42ch' }}>{newEntry.label}</p>
              <span className="utility link" style={{ display: 'inline-block', marginTop: 28, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Why it made the {window.EDITION} list</span>
            </div>
            </a>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CoverPage });