// 2-column problem section. Left = 2x2 emoji card grid; right = headline + paragraph + CTA.
function Problem() {
  const cards = [
    { emoji: '⏱️', title: 'Hours Lost Monthly',  body: 'Time chasing transactions is time not spent running your business.' },
    { emoji: '📊', title: 'Decisions On Bad Data', body: 'Bad numbers lead to costly mistakes, higher tax bills, and missed opportunities.' },
    { emoji: '📅', title: 'Tax Season Chaos',      body: 'Scrambled records mean a stressful, expensive scramble every April.' },
    { emoji: '🔍', title: 'No Real Visibility',    body: "You don't know your real profit or where the money goes." },
  ];

  return (
    <section style={{ background: '#ffffff', padding: '100px 32px' }}>
      <div className="ck-problem-grid" style={{
        maxWidth: 1280, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      }}>
        {/* Left: 2x2 grid */}
        <div className="ck-problem-cards-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="ck-problem-eyebrow-mobile" style={{
            gridColumn: '1 / -1',
            fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#3F8074',
          }}>THE REAL COST OF MESSY BOOKS</div>
          {cards.map(c => (
            <div key={c.title} style={{
              background: '#f3f1ed', borderRadius: 16,
              padding: '28px 28px 30px', display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ fontSize: 28, lineHeight: 1 }}>{c.emoji}</div>
              <div style={{ fontSize: 17, fontWeight: 700, color: '#163F34', letterSpacing: '-0.01em' }}>{c.title}</div>
              <div style={{ fontSize: 14, color: '#345048', lineHeight: 1.55 }}>{c.body}</div>
            </div>
          ))}
        </div>
        {/* Right: copy + CTA */}
        <div>
          <div className="ck-problem-eyebrow-desktop" style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: '#3F8074', marginBottom: 16,
          }}>THE REAL COST OF MESSY BOOKS</div>
          <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.75rem)', fontWeight: 700, color: '#163F34', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            Most service business owners are running blind.
          </h2>
          <div style={{ fontSize: 16, color: '#345048', lineHeight: 1.7, marginTop: 24 }}>
            <p style={{ margin: '0 0 16px' }}>You're great at running your business — you're not supposed to be a bookkeeper too.</p>
            <p style={{ margin: '0 0 16px' }}>But messy books mean missed deductions, bad pricing, tax surprises, and cash flow you can't predict.</p>
            <p style={{ margin: 0 }}>Clean books fix that: clear numbers, smarter decisions, and no more dreading your finances.</p>
          </div>
          <a href="contact.html" className="ck-btn-primary" style={{
            display: 'inline-block', marginTop: 32,
            background: '#3F8074', color: '#fff', textDecoration: 'none', border: '1.5px solid #3F8074',
            padding: '10px 28px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
            transition: 'background .2s, color .2s, border-color .2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
          >Book A Free Call</a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Problem });