// DifferentSection.jsx — Open editorial list, no card fills

const DifferentSection = ({ onNavigate }) => {
  const points = [
  {
    num: '01',
    title: 'Growth partners, not a lead-gen agency',
    body: 'We work as growth partners, taking a more holistic approach to helping you grow your business. In additional to LinkedIn client creation, we\'ll help you productize your offer, and optimize your sales process, and teach you how to grow a business that\'s actually sustainable so you can really live "life-first." '
  },
  {
    num: '02',
    title: 'We help you build trust, not just leads',
    body: 'How many times have you gotten a cold message from someone and gotten the ick? 🥴 Instead of extractive outreach, we help you start human-to-human conversations that actually feel good (to you and to potential clients).'
  },
  {
    num: '03',
    title: 'Done-for-you + done-with-you, NOT do-it-yourself',
    body: 'We create the strategy and set up the systems so you don\'t have to figure it out yourself. We also teach you the frameworks behind everything so you or your team can take it in-house whenever you\'re ready. As the most important part of your business, we believe client creation should never be fully outsourced. The key here is it\'s your choice!'
  },
  {
    num: '04',
    title: 'Life-first is our business model',
    body: 'After burning out early in her career, Diara built coLiberate around one non-negotiable: work should revolve around your life, not the other way around. We\'ll help you figure out what that actually looks like for you and build from there.'
  }];


  return (
    <section style={{ background: '#fafaf7', padding: '64px 32px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 56, alignItems: 'end', marginBottom: 28
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="eyebrow tag">What makes us different</div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.4vw, 80px)',
              color: '#1a1a1a',
              margin: 0,
              maxWidth: 560
            }}>The kind of partnership that <em>actually</em> makes a difference in your business.</h2>
          </div>
          <p style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 19, color: '#2a2a26', lineHeight: 1.6,
            fontWeight: 400, maxWidth: 500,
            paddingBottom: 6
          }}>Our signature program - The Growth Circle: Foundations - is a 6-month hands-on partnership, not a course or big group cohort. Each circle is carefully curated and consists of no more than 4 hand-selected clients so you get personalized attention and the added value of learning alongside other high-caliber consultants + coaches.

          </p>
        </div>

        {/* Editorial list */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {points.map((p, i) =>
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr 2fr',
            gap: 40,
            padding: '18px 0',
            borderTop: '1px solid rgba(26,26,26,0.10)',
            borderBottom: i === points.length - 1 ? '1px solid rgba(26,26,26,0.10)' : 'none',
            alignItems: 'start'
          }} className="three-col">
              <div style={{
              fontFamily: "'Fraunces', serif",
              fontVariationSettings: "'opsz' 144",
              fontSize: 28, color: '#9a9a93',
              fontStyle: 'italic', fontWeight: 300,
              letterSpacing: '-0.02em'
            }}>{p.num}</div>
              <h3 style={{
              fontSize: 'clamp(22px, 2.4vw, 32px)',
              color: '#1a1a1a',
              margin: 0,
              lineHeight: 1.15,
              letterSpacing: '-0.02em'
            }}>{p.title}</h3>
              <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 16, color: '#3a3a36', lineHeight: 1.7,
              fontWeight: 300, margin: 0, maxWidth: 540
            }}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { DifferentSection });