// Property page (/hotels/{slug}) — the feature story.
// Opener → the editors' review → the Verdict block → practical panel → continue reading.
const { useState: useStatePr, useEffect: useEffectPr, useMemo: useMemoPr } = React;

function PropertyPage({ propertyId }) {
  const p = window.PROPERTIES.find(x => x.id === propertyId) || window.PROPERTIES[0];
  const review = useMemoPr(() => window.getReview(p), [p.id]);
  const plates = useMemoPr(() => window.getPlates(p), [p.id]);
  const caveat = useMemoPr(() => window.getCaveat(p), [p.id]);
  const ranked = window.isRanked(p);

  const [dimsOpen, setDimsOpen] = useStatePr(false);
  const [practicalOpen, setPracticalOpen] = useStatePr(false);

  // The signature motion: score settles in with a short mask-reveal.
  const [verdictRef, verdictIn] = useInView(0.35);

  const prev = ranked ? window.PROPERTIES.find(x => x.rank === p.rank - 1) : null;
  const next = ranked && p.rank < 100 ? window.PROPERTIES.find(x => x.rank === p.rank + 1) : null;
  const related = window.getRelated(p, 2);

  useEffectPr(() => { setDimsOpen(false); setPracticalOpen(false); }, [p.id]);

  const [lead, ...rest] = review.paras;

  return (
    <article data-screen-label={`03 Feature — ${p.name}`}>
      {/* ————— Opener ————— */}
      <header style={{ height: '92vh', minHeight: 640, position: 'relative', color: 'var(--paper)' }}>
        <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={p.alt || p.name} fetchPriority="high"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
                onError={e => { e.currentTarget.style.display = 'none'; }} />
            )}
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,12,0.38) 0%, transparent 38%, rgba(10,10,12,0.62) 100%)' }} />
        <div className="container" style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 64 }}>
          <div className="eyebrow" style={{ color: 'var(--paper-on-plate)', display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <span className="num">{ranked ? `№ ${p.rank}` : 'Reviewed'}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{p.category} — {p.location}</span>
            <SaveControl id={p.id} dark />
          </div>
          <h1 className="display-xl" style={{ margin: '20px 0 0', color: 'var(--paper)', maxWidth: '16ch' }}>{p.name}</h1>
          <p className="standfirst" style={{ margin: '26px 0 0', maxWidth: '58ch', color: 'var(--paper-on-plate)', fontSize: 'clamp(17px, 1.6vw, 22px)' }}>
            {window.getStandfirst(p)}
          </p>
        </div>
      </header>
      <div className="container photo-caption caption" style={{ paddingTop: 10 }}>
        <span>{plates[0].caption}</span><span className="credit" style={{ opacity: 0.7 }}>{plates[0].credit}</span>
      </div>

      {/* ————— The review — the editors' own copy ————— */}
      <div className="container-text" style={{ paddingTop: 96 }}>
        <h2 className="eyebrow" style={{ color: 'var(--verdict)', margin: '0 0 28px' }}>The Review · {window.EDITION} Edition</h2>
        <p className="prose dropcap" style={{ fontSize: 19 }}>{lead}</p>
      </div>

      {/* Editorial inset — 4:5 vertical, offset */}
      <div className="container" style={{ margin: '72px auto' }}>
        <div className="grid-12">
          <div style={{ gridColumn: 'span 5' }}>
            <Plate tint={plates[1].tint} ratio="ar-45" caption={plates[1].caption} credit={plates[1].credit} />
          </div>
          <div style={{ gridColumn: 'span 4 / -1', alignSelf: 'end' }}>
            <Plate tint={plates[2].tint} ratio="ar-32" caption={plates[2].caption} credit={plates[2].credit} />
          </div>
        </div>
      </div>

      <div className="container-text">
        {rest[0] && <p className="prose">{rest[0]}</p>}
        <PullQuote>{review.pullquote}</PullQuote>
        {rest[1] && <p className="prose">{rest[1]}</p>}
      </div>

      {/* Full-bleed spread — the release valve */}
      <div style={{ margin: '96px 0 0' }}>
        <Plate tint={plates[3].tint} height="72vh" zoom />
        <div className="container photo-caption caption" style={{ paddingTop: 10 }}>
          <span>{plates[3].caption}</span>
          <span className="credit" style={{ opacity: 0.7 }}>{plates[3].credit}</span>
        </div>
      </div>

      {/* ————— The Verdict block — signature component ————— */}
      <section ref={verdictRef} style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--hairline)', marginTop: 96, padding: '88px 0' }}>
        <div className="container verdict-grid">
          <div>
            <Eyebrow accent>The Luxehotels Score · {window.EDITION} Edition</Eyebrow>
            <div className={'mask-reveal' + (verdictIn ? ' in' : '')} style={{ marginTop: 28 }}>
              {ranked && <RankNumeral rank={p.rank} size="clamp(88px, 10vw, 168px)" />}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: ranked ? 16 : 0 }}>
                <span className="num" style={{ fontFamily: 'var(--display)', fontSize: 'clamp(56px, 6vw, 88px)', color: 'var(--verdict)', lineHeight: 0.9 }}>{p.score}</span>
                <span className="caption">/100</span>
              </div>
            </div>
            {p.accolades.length > 0 && (
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 40 }}>
                {p.accolades.map(a => <AccoladeBadge key={a} label={a} />)}
              </div>
            )}
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 12 }}>
              <ArchetypeTag>{p.category}</ArchetypeTag>
            </div>
            <div className="caption num" style={{ marginTop: 32 }}>
              {[p.from, p.rooms].filter(Boolean).join(' · ')}
            </div>
          </div>

          <div>
            <SubScoreBars sub={p.sub} animate={verdictIn} />
            <p className="caption" style={{ marginTop: 20 }}>
              Framework standouts: <span style={{ color: 'var(--verdict)' }}>{p.standouts.join(' · ')}</span>
            </p>
            <button onClick={() => setDimsOpen(o => !o)} aria-expanded={dimsOpen} className="utility link-quiet"
              style={{ marginTop: 16, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              {dimsOpen ? 'Hide' : 'See'} the twelve-dimension breakdown {dimsOpen ? '↑' : '↓'}
            </button>
            {dimsOpen && (
              <div style={{ marginTop: 28, borderTop: '1px solid var(--ink)' }}>
                {window.DIMS_12.map((d, i) => (
                  <div key={d} style={{ display: 'grid', gridTemplateColumns: '1fr 56px', gap: 16, alignItems: 'baseline', padding: '11px 0', borderBottom: '1px solid var(--hairline)' }}>
                    <span className="utility" style={{ fontSize: 13, color: p.standouts.some(s => (s === 'Sense of Place' ? 'Arrival & sense of place' : s) === d || d.startsWith(s)) ? 'var(--verdict)' : 'var(--folio)' }}>{d}</span>
                    <span className="num" style={{ fontFamily: 'var(--display)', fontSize: 17, textAlign: 'right' }}>{p.dims[i].toFixed(1)}</span>
                  </div>
                ))}
              </div>
            )}

            {/* Editorial honesty — on every property */}
            <div style={{ marginTop: 56 }}>
              <Eyebrow accent>What we don't love</Eyebrow>
              <p className="prose" style={{ marginTop: 18, marginBottom: 0, fontSize: 17, color: 'var(--ink)' }}>{caveat}</p>
              <p className="caption" style={{ marginTop: 20 }}>
                No hotel is perfect. We publish every caveat, including for № 1.{' '}
                <a href="#/methodology" className="link">Our editorial policy</a>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ————— Practical panel — product furniture, on intent ————— */}
      <section className="container" style={{ paddingTop: 40, paddingBottom: 40, borderBottom: '1px solid var(--hairline)' }}>
        <button onClick={() => setPracticalOpen(o => !o)} aria-expanded={practicalOpen} className="utility"
          style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          <span>The practical details</span>
          <span style={{ transition: 'transform 250ms', transform: practicalOpen ? 'rotate(45deg)' : 'none', fontSize: 15 }}>+</span>
        </button>
        {practicalOpen && (
          <div style={{ paddingTop: 36 }}>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {p.chips.map(c => <ArchetypeTag key={c}>{c}</ArchetypeTag>)}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 40, paddingTop: 36 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Where</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 22 }}>{p.location}</div>
              </div>
              {p.opened && (
                <div>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>Since</div>
                  <div className="num" style={{ fontFamily: 'var(--display)', fontSize: 22 }}>{p.opened}</div>
                </div>
              )}
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Booking</div>
                <a className="utility link" style={{ fontSize: 13 }} href="#" onClick={e => e.preventDefault()} title="Outbound booking link — affiliate wiring pending">
                  Direct with the hotel →
                </a>
              </div>
            </div>
            <p className="caption" style={{ marginTop: 28, maxWidth: '68ch' }}>
              Rates at this tier swing hard by season and are starting points, not
              fixed prices. Book scarce properties nine to twelve months out, and
              use a Virtuoso or Amex FHR advisor — the same room typically adds an
              upgrade, breakfast and a credit at no extra cost.
            </p>
          </div>
        )}
      </section>

      {/* ————— Continue reading ————— */}
      <section className="container" style={{ paddingTop: 88 }}>
        {ranked && (prev || next) && (
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 24, paddingBottom: 64, flexWrap: 'wrap' }}>
            {prev ? (
              <a href={`#/hotels/${prev.id}`} className="link-quiet" style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                <span className="rank-numeral num" style={{ fontSize: 22 }}>← № {prev.rank}</span>
                <span style={{ fontFamily: 'var(--display)', fontSize: 20 }}>{prev.name}</span>
              </a>
            ) : <span />}
            {next ? (
              <a href={`#/hotels/${next.id}`} className="link-quiet" style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--display)', fontSize: 20 }}>{next.name}</span>
                <span className="rank-numeral num" style={{ fontSize: 22 }}>№ {next.rank} →</span>
              </a>
            ) : <span />}
          </div>
        )}
        <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 40 }}>
          <Eyebrow accent>If you like this, read</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 48, marginTop: 40 }}>
            {related.map(r => (
              <a key={r.id} href={`#/hotels/${r.id}`} className="feature-entry" style={{ display: 'grid', gap: 18 }}>
                <Plate tint={r.tint} src={r.image} alt={r.alt} ratio="ar-1610" caption={`${r.name} · ${r.location}`} credit={r.credit} />
                <div>
                  <Eyebrow>{window.isRanked(r) ? `№ ${r.rank} · ` : ''}{r.destination}</Eyebrow>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 28, marginTop: 10 }}>{r.name}</div>
                  <p className="caption" style={{ fontFamily: 'var(--body)', fontStyle: 'italic', fontSize: 15, marginTop: 8, marginBottom: 0 }}>{r.oneLiner}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </article>
  );
}

Object.assign(window, { PropertyPage });