/* Pain — numbered list of "Stuck on …" lines, with a centred pull quote
   underneath. Edit the items array to change the list copy. */

const Pain = () => {
  const items = [
    "trading your hours for money.",    
    "answering the same DMs over and over.",
    "1-on-1 calls that drain you and don't scale.",    
    "giving your best frameworks away for free in IG captions.",
    "managing a chaotic Whatsapp group and sending messy links.",
  ];

  return (
    <section className="pain">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">THE REAL TALK</div>
          <h2>You've got so much value to give. <span className="it">But you're stuck.</span></h2>
        </div>

        <div className="pain-list">
          {items.map((t, i) => (
            <div key={i} className="pain-row">
              <span className="pain-num">{String(i+1).padStart(2,'0')}</span>
              <span className="pain-text">
                <span className="pain-text-em">Stuck</span> on {t}
              </span>
            </div>
          ))}
        </div>

        <div className="pain-pull">
          Your audience already trusts you. They're <span className="pain-pull-em">ready to pay</span> for the full transformation, but you need a place to put it all.
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.Pain = Pain;