// GrowthOptionsSection.jsx — Two ways to work with us: Growth Circle vs Growth Lab

const GrowthOptionsSection = () => {
  const options = [
  {
    name: 'The Growth Circle (TGC)',
    fit: 'You want your LinkedIn system built and run for you so you can stay focused on everything else. Your clients are getting great results, but your pipeline still leans too heavily on referrals. You\'re ready to move fast!',
    duration: '6 months in an intimate circle (max 3)',
    footer: { type: 'text', label: 'Invitation only.' }
  },
  {
    name: 'The Growth Lab (TGL)',
    fit: 'You want to create clients on LinkedIn at your own pace, but still want our expertise, live weekly accountability, and clear next steps so things keep moving forward consistently.',
    duration: '6 months in an intimate lab (max 5)',
    footer: { type: 'link', label: 'Learn more', href: 'https://coliberate.ventures/thegrowthlab' }
  }];


  return (
    <section style={{ background: '#fafaf7', padding: '64px 32px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 40 }}>
          <div className="eyebrow tag">Two ways to work with us</div>
          <h2 style={{
            fontSize: 'clamp(42px, 5.67vw, 84px)',
            color: '#1a1a1a',
            margin: 0
          }}>The Growth Circle <em>+</em><br />The Growth Lab.</h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
          marginBottom: 24
        }} className="two-col">
          {options.map((opt, i) =>
          <div key={i} style={{
            background: 'rgba(130, 146, 112, 0.08)',
            border: '1px solid rgba(130, 146, 112, 0.25)',
            borderRadius: 4,
            padding: '40px 40px',
            display: 'flex',
            flexDirection: 'column',
            gap: 24
          }}>
              <h3 style={{
              fontFamily: "'Fraunces', serif",
              fontVariationSettings: "'opsz' 144",
              fontSize: 24, color: '#1a1a1a',
              fontWeight: 500,
              letterSpacing: '-0.02em',
              margin: 0
            }}>{opt.name}</h3>

              <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 16, color: '#3a3a36', lineHeight: 1.7,
              fontWeight: 300, margin: 0
            }}>{opt.fit}</p>

              <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 24 }}>
                <p style={{
                fontFamily: "'Geist', sans-serif",
                fontSize: 16, color: '#1a1a1a', lineHeight: 1.5,
                fontWeight: 400, margin: 0,
                paddingTop: 16,
                borderTop: '1px solid rgba(130, 146, 112, 0.25)'
              }}>{opt.duration}</p>

                {opt.footer.type === 'text' ?
              <p style={{
                fontFamily: "'Geist', sans-serif",
                fontSize: 16, color: '#7a6435',
                letterSpacing: '0.01em',
                fontWeight: 800, margin: 0,
                lineHeight: 1,
                padding: '17px 0'
              }}>{opt.footer.label}</p> :

              <a href={opt.footer.href} className="btn-secondary" style={{ alignSelf: 'flex-start', paddingLeft: 0 }}>
                    {opt.footer.label}
                  </a>
              }
              </div>
            </div>
          )}
        </div>

        <div style={{ borderTop: '1px solid rgba(26,26,26,0.18)' }}></div>
      </div>
    </section>);

};

Object.assign(window, { GrowthOptionsSection });