// Doctrine.jsx — Skills + Lifestyle = Culture. Navy ground. Institutional gravity.
const Doctrine = () => {
  const isMobile = useIsMobile();
  return (
  <section data-ground="navy" style={{
    background: 'var(--ld-navy)',
    color: 'var(--ld-pearl-100)',
    paddingTop: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    paddingBottom: isMobile ? 'clamp(48px, 10vw, 120px)' : 'clamp(96px, 12vw, 180px)',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', left: '50%', top: 0,
      transform: 'translateX(-50%)',
      width: 1, height: 64,
      background: 'var(--ld-gold)',
    }} />

    <div className="container-narrow" style={{ textAlign: 'center' }}>
      <div className="eyebrow-gold" style={{ marginBottom: 18, color: 'var(--ld-gold)' }}>
        II. The Doctrine
      </div>
      <hr style={{ border: 'none', borderTop: '1px solid var(--ld-gold)', width: 36, margin: isMobile ? '0 auto 32px' : '0 auto 56px' }} />

      {/* The equation — display caps, generous */}
      <h2 style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontWeight: 300,
        fontSize: isMobile ? 'clamp(30px, 9vw, 52px)' : 'clamp(44px, 6vw, 84px)',
        lineHeight: 1.08,
        letterSpacing: '-0.01em',
        color: 'var(--ld-pearl-100)',
        margin: 0,
        textWrap: 'balance',
      }}>
        Skills <span style={{ color: 'var(--ld-gold)', fontWeight: 300 }}>+</span> Lifestyle
        <br />
        <span style={{ color: 'var(--ld-gold)', fontWeight: 300 }}>=</span>{' '}
        <em style={{ fontStyle: 'italic', fontWeight: 300 }}>Culture.</em>
      </h2>

      <p style={{
        fontFamily: 'Cormorant Garamond, serif',
        fontStyle: 'italic',
        fontSize: isMobile ? 17 : 22,
        lineHeight: 1.5,
        color: 'rgba(235,221,197,0.78)',
        maxWidth: 640,
        margin: isMobile ? '32px auto 0' : '48px auto 0',
        textWrap: 'balance',
      }}>
        The institution holds three terms in steady relation. They are not a
        sequence. They are a single condition.
      </p>
    </div>

    {/* Three columns on desktop, stacked on mobile */}
    <div className="container" style={{
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
      gap: isMobile ? 40 : 'clamp(40px, 5vw, 80px)',
      maxWidth: 1080,
      margin: isMobile ? '64px auto 0' : '120px auto 0',
      textAlign: 'left',
      paddingLeft: 'clamp(24px, 5vw, 80px)',
      paddingRight: 'clamp(24px, 5vw, 80px)',
    }}>
      {[
        {
          numeral: 'I.',
          term: 'Skills',
          def: 'The competencies of digital life — confidence with the instruments through which contemporary culture is read, written, and inherited.',
        },
        {
          numeral: 'II.',
          term: 'Lifestyle',
          def: 'The voice in which those competencies are spoken into daily life. How a person inhabits the digital, rather than what they merely use.',
        },
        {
          numeral: 'III.',
          term: 'Culture',
          def: 'The condition of digital life that emerges when skills and lifestyle are held together over time. A way of living, transmissible across generations.',
        },
      ].map((b) => (
        <div key={b.term}>
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontStyle: 'italic',
            fontWeight: 400,
            fontSize: 32,
            color: 'var(--ld-gold)',
            lineHeight: 1, marginBottom: 18,
          }}>{b.numeral}</div>
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontVariantCaps: 'all-small-caps',
            letterSpacing: '0.1em',
            fontWeight: 500,
            fontSize: 22,
            color: 'var(--ld-pearl-100)',
            marginBottom: 18,
            paddingBottom: 14,
            borderBottom: '1px solid rgba(201,162,74,0.5)',
          }}>{b.term}</div>
          <p style={{
            fontFamily: 'Montserrat, sans-serif',
            fontSize: 14,
            lineHeight: 1.85,
            color: 'rgba(235,221,197,0.72)',
            margin: 0,
          }}>{b.def}</p>
        </div>
      ))}
    </div>

    {/* Faint sparkle */}
    <div aria-hidden="true" style={{
      position: 'absolute', right: 'clamp(24px, 5vw, 80px)', bottom: 'clamp(24px, 5vw, 80px)',
      color: 'var(--ld-gold)', opacity: 0.25, fontSize: 22,
    }}>✦</div>
  </section>
  );
};

window.Doctrine = Doctrine;