// sanctuaries.jsx — editorial statement for CAJE sanctuaries (no inventory, upon request)

function SanctuariesPage({ navigate, gridDensity, accent, openDetail }) {
  const ref = useReveal();
  const isMobile = useIsMobile();

  const typologies = [
    { k: 'Private Residences', v: 'Villas, estates, compounds — held in full, staffed privately.' },
    { k: 'Clubs & Memberships', v: 'Annexes, quiet rooms, and houses opened by name only.' },
    { k: 'Historic Venues', v: 'Palazzi, châteaux, monasteries, private gardens.' },
    { k: 'Voyage', v: 'Yachts, charter aviation, and private rail, arranged without remark.' },
    { k: 'Encampments', v: 'Desert, mountain, and coastal assemblies built for the week.' },
    { k: 'Unlisted', v: 'Houses held by families; residences without an address.' },
  ];

  return (
    <div ref={ref} className="page">
      {/* Header */}
      <section style={{ padding: isMobile ? '130px 0 70px' : '200px 0 120px' }}>
        <div className="container">
          <div className="reveal" style={{ marginBottom: 32 }}>
            <Eyebrow num="I" label="Sanctuaries · Upon Request" />
          </div>
          <h1 className="display reveal reveal-delay-1" style={{
            fontSize: 'clamp(44px, 9vw, 128px)', lineHeight: 0.98, maxWidth: 1280,
          }}>
            <em>Anywhere</em> in the world,<br />
            <span style={{ fontStyle: 'normal', fontWeight: 300 }}>and nothing on the page.</span>
          </h1>
          <p className="body-lede reveal reveal-delay-2" style={{ marginTop: 48, maxWidth: 720 }}>
            We keep no public directory, no list, no standing inventory. Every residence, club, and venue is sourced to the specific note of your request — and held, when we commit to it, in full.
          </p>
        </div>
      </section>

      {/* Full-bleed image statement */}
      <section style={{ position: 'relative', height: isMobile ? '60vh' : '70vh', minHeight: isMobile ? 420 : 560, overflow: 'hidden' }}>
        <img src={IMG.hero[0]} alt="" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          filter: 'saturate(0.72) contrast(1.04) brightness(0.82)',
          animation: 'kenburns-long 22s ease-in-out forwards',
        }} />
        <style>{`@keyframes kenburns-long { from{transform: scale(1.02)} to{transform: scale(1.14)} }`}</style>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(17,17,17,0.25) 0%, rgba(17,17,17,0.55) 100%)' }} />
        <div className="container" style={{
          position: 'relative', height: '100%',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          paddingBottom: isMobile ? 48 : 80, color: '#F5F0E6',
        }}>
          <div className="reveal" style={{ maxWidth: 900 }}>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 6vw, 64px)', color: '#F5F0E6', lineHeight: 1.1 }}>
              <em>“Tell us what you would like to feel,</em><br />
              and we will find the walls for it.”
            </h2>
            <div className="micro" style={{ marginTop: 32, color: accent, fontSize: 10 }}>
              — The standing invitation
            </div>
          </div>
        </div>
      </section>

      {/* Typologies we source */}
      <section style={{ padding: isMobile ? '70px 0' : '180px 0 120px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 24 : 80, marginBottom: isMobile ? 40 : 80 }}>
            <div className="reveal">
              <Eyebrow num="II" label="What we source" />
            </div>
            <div className="reveal reveal-delay-1">
              <h3 className="display" style={{ fontSize: 'clamp(28px, 5vw, 52px)', lineHeight: 1.12 }}>
                A partial <em>vocabulary</em> — descriptive, not exhaustive.
              </h3>
            </div>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : (gridDensity === 'airy' ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)'),
            gap: 1,
            background: 'rgba(17,17,17,0.12)',
            border: '1px solid rgba(17,17,17,0.12)',
          }}>
            {typologies.map((t, idx) => (
              <div key={t.k} className="reveal" style={{
                transitionDelay: `${idx * 0.06}s`,
                background: 'var(--ivory)',
                padding: isMobile ? '36px 28px 40px' : '48px 40px 52px',
              }}>
                <div className="numeral" style={{ fontSize: 15, color: accent, marginBottom: 18 }}>
                  {['I','II','III','IV','V','VI'][idx]}
                </div>
                <h4 className="display" style={{ fontSize: 30, fontStyle: 'italic', marginBottom: 14 }}>{t.k}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.7, color: '#3a3a3a' }}>{t.v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process — since there's no catalogue, show what the dialogue looks like */}
      <section style={{ padding: isMobile ? '70px 0' : '140px 0', background: 'var(--ivory-deep)' }}>
        <div className="container">
          <div className="reveal" style={{ textAlign: 'center', marginBottom: isMobile ? 44 : 72 }}>
            <Eyebrow num="III" label="The Dialogue" align="center" />
            <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 72px)', marginTop: 28 }}>
              How a <em>sourcing</em> unfolds.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: isMobile ? 28 : 40 }}>
            {[
              ['01', 'Letter', 'Begin with a note — in your own words — of what you would like to feel, and for whom.'],
              ['02', 'Audience', 'A private call. We listen; we ask what has already been imagined, and what must not be.'],
              ['03', 'Proposal', 'A selection of possibilities — each held in confidence, each sourced to the request.'],
              ['04', 'Commission', 'The house, the week, the company is set. The standard does not move.'],
            ].map(([n, k, v], idx) => (
              <div key={n} className="reveal" style={{ transitionDelay: `${idx * 0.08}s` }}>
                <div className="numeral" style={{ fontSize: 42, color: accent, lineHeight: 1, marginBottom: 20 }}>{n}</div>
                <div style={{ width: 36, height: 1, background: accent, opacity: 0.7, marginBottom: 22 }} />
                <h4 className="display" style={{ fontSize: 28, fontStyle: 'italic', marginBottom: 14 }}>{k}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.7, color: '#3a3a3a' }}>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '70px 0 90px' : '140px 0 180px' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="reveal">
            <h2 className="display" style={{ fontSize: 'clamp(34px, 5.5vw, 84px)', maxWidth: 1000, margin: '0 auto' }}>
              Tell us what you are <em>looking for</em>.
            </h2>
            <p className="body-lede" style={{ margin: '28px auto 48px', maxWidth: 560 }}>
              We reply to every letter within three days.
            </p>
            <CTA onClick={() => navigate('inquiry')} dark>Begin the Dialogue</CTA>
          </div>
        </div>
      </section>
    </div>
  );
}

// Detail view retained as a no-op pass-through (never invoked now that openDetail is unused)
function SanctuaryDetail({ s, close, navigate, accent }) {
  React.useEffect(() => { if (close) close(); }, []);
  return null;
}

Object.assign(window, { SanctuariesPage, SanctuaryDetail });