// AccessHero.jsx — ACCESS page hero. Editorial-warm reading-room.
const AccessHero = () => {
  const isMobile = useIsMobile();
  return (
  <section style={{
    position: 'relative',
    background: 'var(--ld-pearl-50)',
    paddingTop: isMobile ? 'clamp(56px, 12vw, 120px)' : 'clamp(96px, 14vw, 200px)',
    paddingBottom: isMobile ? 'clamp(40px, 9vw, 100px)' : 'clamp(64px, 10vw, 140px)',
    overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', right: 'clamp(24px, 6vw, 96px)', top: 'clamp(24px, 6vw, 96px)',
      color: 'var(--ld-gold)', opacity: 0.18, fontSize: 32,
    }}>✦</div>

    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : 'minmax(160px, 1fr) minmax(0, 3fr)',
      gap: isMobile ? 28 : 'clamp(48px, 8vw, 120px)',
      alignItems: 'start',
    }}>
      {/* Left rail — masthead label */}
      <div>
        <div className="eyebrow-gold" style={{ marginBottom: 16 }}>The Journal</div>
        <hr className="rule-gold" style={{ width: 36, marginBottom: 24 }} />
        <div className="smallcap-display" style={{ fontSize: 18, color: 'var(--ld-navy)', lineHeight: 1.25 }}>
          The Reading Room
        </div>
      </div>

      {/* Right column — masthead title + statement */}
      <div style={{ maxWidth: 760 }}>
        <h1 style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontWeight: 300,
          fontSize: isMobile ? 'clamp(56px, 18vw, 96px)' : 'clamp(72px, 11vw, 168px)',
          lineHeight: 0.92,
          letterSpacing: '-0.025em',
          color: 'var(--ld-navy)',
          margin: 0,
          textTransform: 'uppercase',
        }}>
          ACCESS
          <sup style={{ fontSize: '0.18em', verticalAlign: 'super', marginLeft: 6,
            fontFamily: 'Montserrat, sans-serif', fontWeight: 500, letterSpacing: 0,
            color: 'var(--ld-gold)' }}>™</sup>
        </h1>

        <hr style={{ border: 'none', borderTop: '1px solid var(--ld-gold)', width: 80, margin: isMobile ? '28px 0' : '40px 0' }} />

        <p style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontStyle: 'italic',
          fontWeight: 400,
          fontSize: isMobile ? 'clamp(17px, 4.6vw, 22px)' : 'clamp(22px, 2.4vw, 30px)',
          lineHeight: 1.45,
          color: 'var(--ld-navy)',
          margin: 0,
          textWrap: 'balance',
          maxWidth: 640,
        }}>
          It is the written record of the Art of Living Digitally™; it gathers
          essays on digital literacy, lifestyle, and the cultures that hold
          them together.
        </p>
      </div>
    </div>
  </section>
  );
};

window.AccessHero = AccessHero;