// DefinitionSection.jsx — Quiet definition spread, no heavy bg

const DefinitionSection = () => (
  <section style={{ background: '#fafaf7', padding: '72px 32px' }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr 1.4fr',
      gap: 80, alignItems: 'start',
      borderTop: '1px solid rgba(26,26,26,0.10)',
      paddingTop: 64,
    }} className="two-col">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="eyebrow tag">A note on the name</div>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontVariationSettings: "'opsz' 144",
          fontSize: 'clamp(40px, 5vw, 72px)',
          color: '#1a1a1a',
          letterSpacing: '-0.03em',
          lineHeight: 1,
          fontWeight: 400,
        }}>co·Li·ber·ate</div>
        <div style={{
          fontFamily: "'Fraunces', serif",
          fontStyle: 'italic', fontWeight: 300,
          fontSize: 16, color: '#6b6b66',
        }}>/ kəˌlɪbəˈreɪt /  verb</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {[
          { n: '1', text: <>A fusion of <em>co-create</em> and <em>liberate</em>.</> },
          { n: '2', text: 'To jointly engage in the act of setting free.' },
          { n: '3', text: 'The ongoing process of creating, transforming, or transitioning toward freedom, independence, and empowerment.' },
        ].map((item, i) => (
          <div key={item.n} style={{
            display: 'grid',
            gridTemplateColumns: '40px 1fr',
            gap: 24, alignItems: 'baseline',
            padding: '16px 0',
            borderTop: i === 0 ? 'none' : '1px solid rgba(26,26,26,0.08)',
          }}>
            <span style={{
              fontFamily: "'Fraunces', serif",
              fontVariationSettings: "'opsz' 144",
              fontStyle: 'italic',
              fontSize: 20, color: '#9a9a93',
            }}>{item.n}</span>
            <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 19, color: '#1a1a1a',
              lineHeight: 1.55, margin: 0, fontWeight: 300,
            }}>{item.text}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { DefinitionSection });