// ProcessSection.jsx — Editorial: open layout for the three pillars

const ProcessSection = ({ onNavigate, bookingUrl }) => {
  const pillars = [
  {
    num: '01',
    tag: 'Positioning',
    title: 'Articulate your offer so the right people get it immediately.',
    body: 'Your offer is probably already good. The question is whether someone who\'s never heard of you can read three sentences and think "this is exactly what I need." We make sure your positioning works for a cold LinkedIn audience, not just the people who already know who you are and what you do.'
  },
  {
    num: '02',
    tag: 'Content',
    title: 'Show up as yourself and attract clients who are already aligned.',
    body: 'We help you create content that reflects how you think, builds trust with your ideal client over time, and does a lot of the heavy lifting before any conversation even starts. This helps people know, like, trust, and ultimately decide to start working with you.'
  },
  {
    num: '03',
    tag: 'Conversation',
    title: 'Go from stranger to booked call without the awkward pitch.',
    body: 'We show you how to move from a connection request to a one-on-one conversation in a way that fits how you actually communicate. You\'ll know what to say, what to skip, and how to turn a good conversation into a call that feels like a natural next step for both of you.',
    highlight: true
  }];


  return (
    <section style={{ background: '#fafaf7', padding: '48px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'end', marginBottom: 48
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="eyebrow tag">The Life-First Growth OS</div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.4vw, 80px)',
              color: '#1a1a1a',
              margin: 0,
              maxWidth: 560
            }}>3 pillars to create your first or next client on LinkedIn.</h2>
          </div>
          <p style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 19, color: '#2a2a26', lineHeight: 1.6,
            fontWeight: 400, maxWidth: 500, paddingBottom: 6
          }}>
            Most people pour time into content and profile tweaks instead of focusing on what actually creates clients. <em style={{ color: '#1a1a1a' }}>Conversation is the strategy.</em> Positioning and content support it.
          </p>
        </div>

        {/* Editorial 3-column */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48,
          marginBottom: 96
        }} className="three-col">
          {pillars.map((p, i) =>
          <div key={i} style={{
            display: 'flex', flexDirection: 'column', gap: 16,
            paddingTop: 32,
            borderTop: '1px solid rgba(26,26,26,0.18)'
          }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span style={{
                fontFamily: "'Fraunces', serif",
                fontVariationSettings: "'opsz' 144",
                fontSize: 22, color: '#9a9a93',
                fontStyle: 'italic', fontWeight: 300
              }}>{p.num}</span>
                <span className="eyebrow">{p.tag}</span>
              </div>
              <h3 style={{
              fontSize: 'clamp(22px, 2.2vw, 30px)',
              color: '#1a1a1a',
              margin: 0,
              lineHeight: 1.15,
              letterSpacing: '-0.02em'
            }}>{p.title}</h3>
              {p.highlight &&
            <p style={{
              fontFamily: "'Fraunces', serif",
              fontStyle: 'italic',
              fontSize: 14, color: '#7a8a64',
              marginTop: 4, lineHeight: 1.5
            }}>This is the part that actually creates clients.</p>
            }
              <p style={{
              fontFamily: "'Geist', sans-serif",
              fontSize: 15, color: '#3a3a36', lineHeight: 1.7,
              fontWeight: 300, margin: 0
            }}>{p.body}</p>
            </div>
          )}
        </div>

        {/* Promise — full-bleed strip */}
        <div style={{
          position: 'relative',
          left: 'calc(-50vw + 50%)',
          width: '100vw',
          background: '#ecebe5',
          marginTop: 40,
          marginBottom: 36
        }}>
          <div style={{
            maxWidth: 1200, margin: '0 auto',
            padding: '56px 32px',
            display: 'grid', gridTemplateColumns: '1fr 2fr',
            gap: 48, alignItems: 'start'
          }} className="two-col">
            <div className="eyebrow tag">OUR "YOU CAN'T FAIL" GUARANTEE</div>
            <div>
              <p style={{
                fontFamily: "'Fraunces', serif",
                fontStyle: 'italic',
                fontSize: 'clamp(24px, 2.6vw, 36px)',
                color: '#1a1a1a',
                lineHeight: 1.25,
                letterSpacing: '-0.015em',
                fontWeight: 400,
                maxWidth: 720,
                margin: 0
              }}>"Make your investment back or we'll keep working with you, for free until you do."</p>
              <p style={{
                fontFamily: "'Geist', sans-serif",
                fontSize: 15, color: '#3a3a36', lineHeight: 1.7,
                fontWeight: 300, margin: '20px 0 0',
                maxWidth: 560
              }}>If you follow and implement our process and don't make back at least your initial investment, we'll keep working with you at no additional cost until you do. That's how much we believe in what we've built and the clients we invite to work with us.</p>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 36 }}>
          <a href={bookingUrl} target="_blank" rel="noopener noreferrer" className="btn-primary">
            Book an intro call
          </a>
        </div>
      </div>
    </section>);

};

Object.assign(window, { ProcessSection });