// Homepage "Sound familiar?" pain points. Same six cards as the affiliate
// booking pages (book.bluemoso.com), so the message matches everywhere.
const PAIN_POINTS = [
  { icon: 'M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM4 21a8 8 0 0 1 16 0', title: '"Everything\'s you."', body: 'You answer every email, DM and invoice yourself, often at night or on weekends.' },
  { icon: 'M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z', title: 'Things are slipping.', body: "Leads go unanswered and emails get missed, because you can't get to them in time." },
  { icon: 'M12 2 3 6v6c0 5 3.8 9.3 9 10 5.2-.7 9-5 9-10V6l-9-4zM9 9l6 6M15 9l-6 6', title: "You've been burned before.", body: "You tried a VA, a freelancer or an agency, and it didn't work out." },
  { icon: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM17 8l5 5M22 8l-5 5', title: 'Your last help disappeared.', body: 'Someone stopped showing up, or left right after you finished training them.' },
  { icon: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3', title: "You can't find anyone good.", body: "You'd pay for help today, but you can't find someone you actually trust." },
  { icon: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01', title: "You don't know where to start.", body: 'You know you need help, but not what to hand off first.' },
];

function PainPoints() {
  return (
    <section id="sound-familiar" className="bm-pp">
      <style>{`
        .bm-pp { background: var(--paper-deep); padding: 84px max(32px, calc((100% - 1040px) / 2)); text-align: center; }
        .bm-pp-eyebrow { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
        .bm-pp-h2 { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -.025em; color: var(--ink); max-width: 900px; margin: 0 auto; }
        .bm-pp-h2 em { display: block; }
        .bm-pp-h2 em { font-style: normal; color: var(--blue); }
        .bm-pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; margin-top: 52px; text-align: left; }
        .bm-pp-item { border-top: 2px solid var(--blue-soft); padding-top: 20px; }
        .bm-pp-item h3 { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
        .bm-pp-item p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0; }
        @media (max-width: 860px) {
          .bm-pp { padding: 58px 20px; }
          .bm-pp-h2 { font-size: 30px; }
          .bm-pp-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 36px; }
        }
        @media (max-width: 600px) {
          .bm-pp-grid { grid-template-columns: 1fr; gap: 24px; }
        }
      `}</style>
      <div>
        <div className="bm-pp-eyebrow">Sound familiar?</div>
        <h2 className="bm-pp-h2">You started your business to grow it. <em>Not to run every part of it.</em></h2>
        <div className="bm-pp-grid">
          {PAIN_POINTS.map((p) => (
            <div key={p.title} className="bm-pp-item">
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PainPoints });