// about.jsx — About / The Collective page

function AboutPage({ navigate, accent }) {
  const ref = useReveal();
  const isMobile = useIsMobile();
  return (
    <div ref={ref} className="page">
      {/* Header */}
      <section style={{ position: 'relative', padding: isMobile ? '130px 0 70px' : '200px 0 100px', minHeight: isMobile ? 'auto' : '80vh', display: 'flex', alignItems: 'center' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr', gap: isMobile ? 44 : 100, alignItems: 'center' }}>
            <div>
              <div className="reveal"><Eyebrow num="I" label="The Collective" /></div>
              <h1 className="display reveal reveal-delay-1" style={{
                fontSize: 'clamp(46px, 9vw, 120px)', lineHeight: 0.96, marginTop: 32,
              }}>
                Small, <em>private</em>,<br />
                <span style={{ fontStyle: 'normal', fontWeight: 300 }}>and quietly</span> <em>at work</em>.
              </h1>
              <p className="body-lede reveal reveal-delay-2" style={{ marginTop: 40, maxWidth: 560 }}>
                CAJE is not an agency. It is a discreet partnership of practitioners — design, architecture, logistics, curation — that takes on a limited number of commissions a season, and no more.
              </p>
            </div>
            <div className="reveal reveal-delay-1" style={{ aspectRatio: '3/4', order: isMobile ? -1 : 0 }}>
              <KBImage src={IMG.hero[3]} alt="" ratio="3/4" />
            </div>
          </div>
        </div>
      </section>

      {/* What we do — honest, in our own words */}
      <section style={{ padding: isMobile ? '70px 0' : '140px 0', background: 'var(--ivory-deep)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 80 }}>
            <div className="reveal">
              <Eyebrow num="II" label="What we do" />
            </div>
            <div className="reveal reveal-delay-1">
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.4vw, 60px)', lineHeight: 1.15 }}>
                We source the <em>unsourceable</em>, and compose the days that unfold inside it.
              </h2>
              <p style={{ marginTop: 40, fontSize: 15.5, lineHeight: 1.85, color: '#3a3a3a', maxWidth: 680 }}>
                A private residence on a coastline kept off the register. A club whose doors are opened by name only. A palazzo, a monastery, a vineyard at harvest — held for a week, staffed, provisioned, and attended to the final detail. We do not publish what we have access to. We listen, and we find it.
              </p>
              <p style={{ marginTop: 24, fontSize: 15.5, lineHeight: 1.85, color: '#3a3a3a', maxWidth: 680 }}>
                Every engagement is <em>bespoke</em>, every location <em>by request</em>. There is no catalogue, no list, no standing inventory to browse — the work begins when you tell us what you would like to feel.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Charter — the one part we'll keep */}
      <section style={{ padding: isMobile ? '70px 0' : '140px 0', background: '#111', color: '#F5F0E6' }}>
        <div className="container">
          <div className="reveal" style={{ marginBottom: isMobile ? 44 : 72 }}>
            <Eyebrow num="III" label="A Quiet Charter" />
            <h2 className="display" style={{ fontSize: 'clamp(34px, 5vw, 72px)', marginTop: 28, color: '#F5F0E6', maxWidth: 900 }}>
              We hold to <em>five disciplines</em>.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(5, 1fr)', gap: isMobile ? 28 : 32 }}>
            {[
              ['Discretion', 'No client, no location, no arrangement leaves the collective without consent.'],
              ['Proportion', 'More is rarely better. Fewer, finer, is almost always the answer.'],
              ['Provenance', 'Every element — every bloom, every cloth — is traced to its maker.'],
              ['Patience', 'We begin six months in; twelve is customary; eighteen is not uncommon.'],
              ['Presence', 'A principal from CAJE remains on the ground, unseen, until the final guest has gone.'],
            ].map(([k, v], i) => (
              <div key={k} className="reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
                <div className="numeral" style={{ fontSize: 24, color: accent, marginBottom: 12 }}>
                  {['I','II','III','IV','V'][i]}
                </div>
                <div style={{ width: 32, height: 1, background: accent, opacity: 0.7, marginBottom: 20 }} />
                <h3 className="display" style={{ fontSize: 28, fontStyle: 'italic', color: '#F5F0E6', marginBottom: 14 }}>{k}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.7, color: 'rgba(245,240,230,0.7)' }}>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Reach */}
      <section style={{ padding: isMobile ? '70px 0' : '160px 0' }}>
        <div className="container">
          <div className="reveal" style={{ marginBottom: isMobile ? 44 : 72, textAlign: 'center' }}>
            <Eyebrow num="IV" label="Reach" align="center" />
            <h2 className="display" style={{ fontSize: 'clamp(34px, 5vw, 72px)', marginTop: 28 }}>
              Without a <em>fixed address</em>.
            </h2>
            <p className="body-lede" style={{ margin: '28px auto 0', maxWidth: 620 }}>
              We do not keep a public office. Our practitioners convene where the work is — a commission may begin in one hemisphere and unfold in another. Every engagement is arranged by appointment, anywhere in the world.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 24, maxWidth: 1100, margin: '0 auto' }}>
            {[
              { k: 'Continents Served', v: 'All six inhabited' },
              { k: 'Commissions / Season', v: 'XII, no more' },
              { k: 'Advance Notice', v: 'VI to XVIII months' },
              { k: 'Address', v: 'Upon request' },
            ].map((a, idx) => (
              <div key={a.k} className="reveal" style={{ transitionDelay: `${idx * 0.08}s`, borderTop: `1px solid ${accent}`, paddingTop: 22 }}>
                <div className="micro" style={{ fontSize: 10, color: '#6B6257', marginBottom: 14 }}>{a.k}</div>
                <div className="display" style={{ fontSize: 22, fontStyle: 'italic' }}>{a.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '20px 0 90px' : '40px 0 180px' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="reveal">
            <h2 className="display" style={{ fontSize: 'clamp(38px, 5.5vw, 84px)' }}>
              Shall we <em>begin</em>?
            </h2>
            <div style={{ marginTop: 48 }}>
              <CTA onClick={() => navigate('inquiry')} dark>Begin the Dialogue</CTA>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });