// experiences.jsx — Experiences page (process, capabilities, editorial)

function ExperiencesPage({ navigate, accent }) {
  const ref = useReveal();
  const isMobile = useIsMobile();

  return (
    <div ref={ref} className="page">
      {/* Header */}
      <section style={{ padding: isMobile ? '130px 0 50px' : '180px 0 80px' }}>
        <div className="container">
          <div className="reveal"><Eyebrow num="I" label="Experiences" /></div>
          <h1 className="display reveal reveal-delay-1" style={{
            fontSize: 'clamp(44px, 9vw, 128px)', lineHeight: 0.98, marginTop: 24,
          }}>
            <span style={{ fontStyle: 'normal', fontWeight: 300 }}>What we make</span><br />
            <em>need not</em> be announced.
          </h1>
          <p className="body-lede reveal reveal-delay-2" style={{ marginTop: 48, maxWidth: 620 }}>
            Destination weddings, boutique galas, private assemblies, retreats, and pilgrimages —
            each composed from the first question: <em>what do you wish to feel remembered for?</em>
          </p>
        </div>
      </section>

      {/* Capability triptych */}
      <section style={{ padding: isMobile ? '40px 0' : '80px 0 40px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 4 }}>
            {[
              {
                title: 'Destination Weddings',
                img: IMG.portfolio.all[0].img,
                body: 'Three to five days, from rehearsal to recession. Celebrants, stationery, floral architecture, couture atelier coordination, and the quiet choreography of every moment between.',
                num: '01',
              },
              {
                title: 'Boutique Galas',
                img: IMG.portfolio.all[1].img,
                body: 'Salons, benefits, and assemblies of consequence. A single evening in which every element — from placement to the hour of the last glass — has been quietly considered.',
                num: '02',
              },
              {
                title: 'Private Assemblies',
                img: IMG.portfolio.all[3].img,
                body: 'Summits for private offices and family councils. An atmosphere for consequential conversation — held in rooms that do not appear in directories.',
                num: '03',
              },
              {
                title: 'Retreats & Pilgrimages',
                img: IMG.portfolio.all[6].img,
                body: 'Silent weeks, wellness journeys, and spiritual itineraries composed in partnership with guides of rare caliber. Deserts, monasteries, private islands.',
                num: '04',
              },
            ].map((c, idx) => (
              <div key={c.num} className="reveal" style={{
                position: 'relative', background: '#ECE5D6',
                transitionDelay: `${idx * 0.08}s`,
              }}>
                <div style={{ aspectRatio: '16/10' }}>
                  <KBImage src={c.img} alt={c.title} ratio="16/10" overlay={0.3} />
                </div>
                <div style={{
                  position: 'absolute', top: 24, left: 24,
                  color: '#F5F0E6',
                }}>
                  <span className="numeral" style={{ color: accent, fontSize: 13 }}>{c.num}</span>
                </div>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: isMobile ? '32px 24px' : '40px 36px', color: '#F5F0E6',
                  background: 'linear-gradient(180deg, transparent, rgba(17,17,17,0.75))',
                }}>
                  <h3 className="display" style={{ fontSize: isMobile ? 34 : 44, fontStyle: 'italic', color: '#F5F0E6' }}>{c.title}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.65, marginTop: 18, maxWidth: 520, color: 'rgba(245,240,230,0.82)', fontWeight: 300 }}>{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: isMobile ? '70px 0' : '160px 0 100px', background: 'var(--ivory-deep)' }}>
        <div className="container">
          <div className="reveal" style={{ textAlign: 'center', marginBottom: isMobile ? 48 : 96 }}>
            <Eyebrow num="II" label="The Method" align="center" />
            <h2 className="display" style={{ fontSize: 'clamp(34px, 5.2vw, 84px)', marginTop: 28, maxWidth: 900, margin: '28px auto 0' }}>
              Three movements, <em>one composition</em>.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 48 : 60 }}>
            {IMG.experiences.process.map((p, idx) => (
              <div key={p.num} className="reveal" style={{ transitionDelay: `${idx * 0.12}s` }}>
                <div style={{ aspectRatio: '4/5', marginBottom: 28 }}>
                  <KBImage src={p.img} alt={p.title} ratio="4/5" />
                </div>
                <div style={{ display: 'flex', gap: 14, alignItems: 'baseline', marginBottom: 14 }}>
                  <span className="numeral" style={{ fontSize: 36, color: accent }}>{p.num}</span>
                  <span style={{ height: 1, width: 36, background: accent, opacity: 0.7 }} />
                </div>
                <h3 className="display" style={{ fontSize: 44, fontStyle: 'italic', marginBottom: 18 }}>{p.title}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.75, color: '#3a3a3a' }}>{p.copy}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Continuum */}
      <section style={{ padding: isMobile ? '70px 0' : '160px 0' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: isMobile ? 40 : 80, alignItems: 'center' }}>
            <div className="reveal">
              <Eyebrow num="III" label="Continuum" />
              <h2 className="display" style={{ fontSize: 'clamp(34px, 5vw, 72px)', marginTop: 28, lineHeight: 1.05 }}>
                A year, <em>woven</em>.
              </h2>
              <p className="body-lede" style={{ marginTop: 32, maxWidth: 520 }}>
                For clients who move between our houses continuously — a single concierge, a single calendar, a single signature across continents and seasons.
              </p>
              <ul style={{ listStyle: 'none', marginTop: 36 }}>
                {[
                  'A single point of contact across seasons and continents',
                  'Private aviation & chauffeured transfers, arranged in advance',
                  'Residences sourced and held — anywhere in the world',
                  'Wardrobe handling & couture liaisons, quietly managed',
                  'Private curators for rooms closed to the public',
                ].map((it, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, padding: '14px 0', borderTop: '1px solid rgba(17,17,17,0.1)' }}>
                    <span style={{ color: accent, fontFamily: 'EB Garamond, serif', fontStyle: 'italic', fontSize: 13, minWidth: 28 }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ fontSize: 15, fontFamily: 'EB Garamond, serif', fontStyle: 'italic', color: '#111' }}>{it}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 40 }}>
                <CTA onClick={() => navigate('inquiry')}>On Invitation Only</CTA>
              </div>
            </div>
            <div className="reveal reveal-delay-1" style={{ aspectRatio: '3/4', order: isMobile ? -1 : 0 }}>
              <KBImage src={IMG.hero[1]} alt="Continuum" ratio="3/4" />
            </div>
          </div>
        </div>
      </section>

      {/* Quote */}
      <section style={{ padding: isMobile ? '70px 0' : '120px 0', background: '#111', color: '#F5F0E6' }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 1000, margin: '0 auto' }}>
          <div className="reveal">
            <p className="display" style={{
              fontSize: 'clamp(26px, 3.2vw, 42px)', color: '#F5F0E6', lineHeight: 1.35, fontStyle: 'italic',
            }}>
              To be served by CAJE is to forget that service exists. Everything simply <em style={{ color: accent }}>is</em>, precisely as you had quietly hoped it might be.
            </p>
            <div style={{ marginTop: 48 }}>
              <div className="micro" style={{ color: 'rgba(245,240,230,0.6)' }}>
                — A Principal · MMXXIV
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ExperiencesPage });