// AccessPhilosophy.jsx — what ACCESS is. Editorial-warm prose with framed portrait.
const AccessPhilosophy = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 10vw, 160px)',
    paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(80px, 10vw, 160px)',
    borderTop: '2px solid var(--ld-navy)',
  }}>
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : 'minmax(180px, 1fr) minmax(0, 3fr)',
      gap: isMobile ? 32 : 'clamp(48px, 8vw, 120px)',
      alignItems: 'start',
    }}>
      <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
        <div className="eyebrow-gold" style={{ marginBottom: 18 }}>I.</div>
        <div className="smallcap-display" style={{ fontSize: 22, color: 'var(--ld-navy)', lineHeight: 1.2 }}>
          On the Reading Room
        </div>
        <hr style={{ border: 'none', borderTop: '2px solid var(--ld-gold)', marginTop: 20, width: 56 }} />
      </div>

      {/* Right column — description + framed portrait, side-by-side on desktop, stacked on mobile */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.25fr) minmax(0, 1fr)',
        gap: isMobile ? 32 : 'clamp(40px, 5vw, 80px)',
        alignItems: 'center',
      }}>
        <div>
          <p style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontWeight: 400,
            fontSize: isMobile ? 'clamp(17px, 4.6vw, 22px)' : 'clamp(22px, 2.1vw, 30px)',
            lineHeight: 1.42,
            color: 'var(--ld-navy)',
            margin: 0,
            textWrap: 'pretty',
          }}>
            ACCESS<sup style={{ fontSize: '0.5em' }}>™</sup> is the
            institution's letter, sent quietly and read carefully. It is to
            lifestyle and pop culture in the digital community what a good
            summer library program is to a child's literacy for the upcoming
            school year. It treats them as a way of reading the world that
            deserves to be tended.
          </p>
        </div>

        {/* Right — framed editorial portrait */}
        <figure style={{
          margin: 0,
          background: 'var(--ld-pearl-100)',
          padding: isMobile ? 12 : 'clamp(16px, 2vw, 28px)',
          boxShadow: '0 24px 60px rgba(13,27,61,0.14), 0 6px 12px rgba(13,27,61,0.08)',
          border: '1px solid rgba(13,27,61,0.08)',
        }}>
          <img
            src="assets/access-portrait.png"
            alt="A young reader in an elevator carrying a bound volume — emblem of the Reading Room"
            style={{ width: '100%', height: 'auto', display: 'block' }}
          />
        </figure>
      </div>
    </div>

    {/* Heavier divider rule beneath the description block */}
    <div className="container" style={{ marginTop: isMobile ? 'clamp(48px, 9vw, 80px)' : 'clamp(72px, 9vw, 120px)' }}>
      <hr style={{
        border: 'none',
        borderTop: '2px solid var(--ld-navy)',
        width: 120,
        margin: '0 auto',
      }} />
    </div>
  </section>
  );
};

window.AccessPhilosophy = AccessPhilosophy;