// Problem.jsx
function Problem() {
  const title = ['Growth', 'exposes', 'broken', 'systems.'];
  const bullets = [
    { n: '01', text: 'The tools don\u2019t talk to each other.' },
    { n: '02', text: 'Data lives everywhere \u2014 but nowhere useful.' },
    { n: '03', text: 'Follow-ups slip. Handoffs break.' },
    { n: '04', text: 'Leadership makes decisions on gut instead of data.' },
    { n: '05', text: 'Every new hire needs a week to find anything.' },
  ];
  return (
    <section className="problem" id="services">
      <div className="wrap">
        <div className="problem__grid">
          <div>
            <div className="eyebrow reveal">The friction</div>
            <h2 className="problem__title reveal reveal-1">
              {title.map((w, i) => (
                <span className="crack" key={i}>{w} </span>
              ))}
            </h2>
          </div>
          <ul className="problem__bullets">
            {bullets.map((b, i) => (
              <li key={b.n} className={`reveal reveal-${(i % 3) + 1}`}>
                <span className="num">{b.n}</span>
                <span>{b.text}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;