// "The problem with hiring help": old way vs the BlueMoso way. Same copy and
// layout as the partner booking pages (book.bluemoso.com), sized to match the
// homepage's other sections.
const OLD_WAY = [
  'Leads sit in your inbox until you get to them.',
  'You cannot find anyone good, or anyone you would trust with the logins.',
  'You tried help before. The work came back wrong, or not at all.',
  'Training someone took longer than doing it yourself.',
];
const NEW_WAY = [
  'A kickoff call that maps what comes off your plate first.',
  'We search and vet, then shortlist two to five. You pick who to hire.',
  'A team lead on the day to day, and an executive above that.',
  'We match for judgment, and write the processes so you do not have to.',
];

function OldNewWay() {
  const X = <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6M9 9l6 6" /></svg>;
  const C = <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m8.5 12.5 2.5 2.5 4.5-5.5" /></svg>;
  return (
    <section id="problem" className="bm-on">
      <style>{`
        .bm-on { background: var(--paper); padding: 84px max(32px, calc((100% - 1040px) / 2)); text-align: center; }
        .bm-on-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-on-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 16px; }
        .bm-on-h2 em { font-style: normal; color: var(--blue); }
        .bm-on-lead { font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 62ch; margin: 0 auto; }
        .bm-on-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; text-align: left; }
        .bm-on-col { border-radius: 18px; padding: 28px 30px; }
        .bm-on-old { border: 1px dashed var(--line); }
        .bm-on-new { background: var(--ink); color: #fff; }
        .bm-on-label { font-family: 'Outfit', sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; color: var(--ink-muted); }
        .bm-on-new .bm-on-label { color: var(--blue-mid); }
        .bm-on-head { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; color: var(--ink); }
        .bm-on-new .bm-on-head { color: #fff; }
        .bm-on-col ul { list-style: none; padding: 0; margin: 0; }
        .bm-on-col li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; font-size: 15px; line-height: 1.5; }
        .bm-on-old li { color: var(--ink-soft); }
        .bm-on-new li { color: rgba(255,255,255,.9); }
        .bm-on-col li svg { flex-shrink: 0; margin-top: 1px; }
        .bm-on-old li svg { color: var(--coral); }
        .bm-on-new li svg { color: var(--blue-mid); }
        @media (max-width: 860px) { .bm-on { padding: 58px 20px; } .bm-on-h2 { font-size: 30px; } .bm-on-lead { font-size: 16px; } }
        @media (max-width: 600px) { .bm-on-grid { grid-template-columns: 1fr; } .bm-on-col { padding: 24px 22px; } }
      `}</style>
      <div className="bm-on-eyebrow">The problem with hiring help</div>
      <h2 className="bm-on-h2">Hiring help shouldn't be <em>another thing on your plate.</em></h2>
      <p className="bm-on-lead">We help you find the right match, and set them up for success.</p>
      <div className="bm-on-grid">
        <div className="bm-on-col bm-on-old">
          <div className="bm-on-label">The old way</div>
          <div className="bm-on-head">Everything still runs through you.</div>
          <ul>{OLD_WAY.map((t) => <li key={t}>{X}<span>{t}</span></li>)}</ul>
        </div>
        <div className="bm-on-col bm-on-new">
          <div className="bm-on-label">The BlueMoso way</div>
          <div className="bm-on-head">Matched, managed, yours.</div>
          <ul>{NEW_WAY.map((t) => <li key={t}>{C}<span>{t}</span></li>)}</ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OldNewWay });
