// Origin.jsx — editorial origin story. Two-column: vertical label + scholarly prose.
const Origin = () => {
  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: '1px solid var(--ld-line)',
  }}>
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : 'minmax(180px, 1fr) minmax(0, 3fr)',
      gap: isMobile ? 32 : 'clamp(48px, 8vw, 120px)',
      alignItems: 'start',
    }}>
      {/* Left rail — vertical label */}
      <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
        <div className="eyebrow-gold" style={{ marginBottom: 18 }}>I.</div>
        <div style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontVariantCaps: 'all-small-caps',
          letterSpacing: '0.12em',
          fontSize: 22,
          fontWeight: 400,
          color: 'var(--ld-navy)',
          lineHeight: 1.2,
        }}>
          On the Founding
        </div>
        <hr className="rule-gold" style={{ marginTop: 20, width: 36 }} />
      </div>

      {/* Right column — editorial prose */}
      <div style={{ maxWidth: 720 }}>
        <p style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontWeight: 400,
          fontSize: isMobile ? 'clamp(18px, 4.6vw, 22px)' : 'clamp(26px, 2.5vw, 34px)',
          lineHeight: 1.4,
          color: 'var(--ld-navy)',
          margin: 0,
          textWrap: 'pretty',
        }}>
          The Art of Living Digitally<sup style={{ fontSize: '0.5em', verticalAlign: 'super' }}>™</sup>
          {' '}began as a concept — one item on a list left on the bathroom
          floor. It was born during a long conversation between a daughter
          and her mother, centered on the idea of an online marketplace
          woven into a cultural learning space. At the time, the concept
          was foreign. eCommerce was only beginning to take hold as the
          preferred way to shop. The daughter was just beginning to scale
          an online beverage company. But just as time moves forward, as
          communities shift and generations evolve, concepts evolve too.
          That list on the bathroom floor would turn out to be the last
          list she would ever share with her mother.
        </p>

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

        <p style={{
          fontFamily: 'Montserrat, sans-serif',
          fontSize: isMobile ? 15 : 17,
          lineHeight: 1.8,
          color: 'var(--ld-ink-2)',
          marginTop: 0,
          marginBottom: isMobile ? 22 : 28,
        }}>
          That conversation grew feet to walk, and kept walking. It moved,
          first, into the Founder's work in Title IX and in diversity and
          inclusion training. The question of who is permitted to feel at
          home inside a system has always endured. After laying aside the
          development of a native app for DEI training, the Founder
          participated in the Beta Group for{' '}
          <span style={{ fontStyle: 'italic', color: 'var(--ld-navy)' }}>
            Jenna Sonard's AI Society
          </span>
          . It became an early, working laboratory and blueprint for what
          digital citizenship inside a closed community could become.
        </p>

        <p style={{
          fontFamily: 'Montserrat, sans-serif',
          fontSize: isMobile ? 15 : 17,
          lineHeight: 1.8,
          color: 'var(--ld-ink-2)',
          margin: 0,
        }}>
          What emerged was not a static course catalogue. It was an
          institution built, in part, to keep a promise. The Art of Living
          Digitally<sup style={{ fontSize: '0.6em' }}>™</sup> holds the
          position that digital literacy is not a skill to be acquired in
          passing, but an inheritance — one earned, taught, and lived at
          the intersection of literacy, lifestyle, and access.
        </p>
      </div>
    </div>

    {/* Pull quote with archival photograph — full width, side-by-side on desktop, stacked on mobile */}
    <div className="container" style={{ marginTop: isMobile ? 'clamp(56px, 10vw, 96px)' : 'clamp(96px, 12vw, 160px)' }}>
      <figure style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: isMobile ? 32 : 'clamp(48px, 6vw, 96px)',
        alignItems: 'center',
        margin: 0,
      }}>
        {/* Left — archival photograph */}
        <div style={{
          position: 'relative',
          background: 'var(--ld-pearl-100)',
          padding: isMobile ? 16 : 'clamp(20px, 2.5vw, 36px)',
          boxShadow: '0 24px 60px rgba(13,27,61,0.12), 0 6px 12px rgba(13,27,61,0.08)',
          border: '1px solid rgba(13,27,61,0.08)',
        }}>
          <img
            src="assets/founding-photo.jpeg"
            alt="Two figures walking toward a plantation bell beneath Spanish moss"
            style={{
              width: '100%', height: 'auto', display: 'block',
              filter: 'sepia(0.05)',
            }}
          />
        </div>

        {/* Right — pull quote */}
        <div>
          <div className="eyebrow-gold" style={{ marginBottom: 24 }}>
            From the Founding Note
          </div>
          <hr className="rule-gold" style={{ width: 36, marginBottom: 32 }} />
          <blockquote style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontWeight: 400,
            fontSize: isMobile ? 'clamp(20px, 5vw, 26px)' : 'clamp(24px, 2.6vw, 34px)',
            lineHeight: 1.4,
            color: 'var(--ld-navy)',
            margin: 0,
            textWrap: 'pretty',
          }}>
            The institution was built to make permanent what began as a
            conversation — that a culture is what people inherit when skills
            and lifestyle are taught together.
          </blockquote>
        </div>
      </figure>
    </div>
  </section>
  );
};

window.Origin = Origin;
