const problemStyles = {
  wrap: { padding: 'var(--section-y) 32px' },
  inner: { maxWidth: 1280, margin: '0 auto' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 28 },
  h2: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em',
    fontWeight: 600, color: 'var(--ink)',
    maxWidth: 900, marginBottom: 56,
  },
  italic: { fontWeight: 700, color: 'var(--blue)' },
  grid: {
    display: 'grid', gridTemplateColumns: '1fr 1fr',
    gap: 40,
    borderTop: '1px solid var(--line)',
    paddingTop: 56,
  },
  col: {
    padding: 32,
    borderRadius: 16,
  },
  colLeft: { background: 'transparent', border: '1px dashed var(--line)' },
  colRight: { background: 'var(--ink)', color: 'var(--paper)' },
  colTitle: { fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20, fontWeight: 500, opacity: 0.88 },
  colHead: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.02em',
    marginBottom: 24,
  },
  list: { listStyle: 'none', padding: 0, margin: 0 },
  item: {
    display: 'flex', alignItems: 'flex-start', gap: 12,
    padding: '14px 0',
    borderTop: '1px solid var(--line-soft)',
    fontSize: 15, lineHeight: 1.45,
  },
  itemDark: { borderTop: '1px solid rgba(255,255,255,0.08)' },
  marker: {
    flexShrink: 0, marginTop: 4,
    width: 16, height: 16,
  },
};

function Problem() {
  const bad = [
    'Post a job. Get 200 unqualified applicants.',
    'Interview for weeks. Onboard. Hope it sticks.',
    'VA quits. Start over from scratch.',
    'No backup. No continuity. No manager but you.',
  ];
  const good = [
    'A kickoff call, we learn your business, style, and stack.',
    'We match from our vetted roster, not an open queue.',
    'A working pair, with a backup VA already briefed.',
    'A dedicated manager running QA, coverage, and pace.',
  ];
  return (
    <section style={problemStyles.wrap} className="reveal bm-section">
      <div style={problemStyles.inner}>
        <div className="mono" style={problemStyles.eyebrow}>The problem with hiring help</div>
        <h2 className="serif" style={problemStyles.h2}>
          Hiring help shouldn't be another thing on your plate. We help you <span style={problemStyles.italic}>find the right match</span>, and set them up for success.
        </h2>
        <div style={problemStyles.grid} className="bm-problem-grid">
          <div style={{ ...problemStyles.col, ...problemStyles.colLeft }}>
            <div style={{ ...problemStyles.colTitle, color: 'var(--ink-muted)' }}>The old way</div>
            <div style={problemStyles.colHead}>Posting, sifting, praying.</div>
            <ul style={problemStyles.list}>
              {bad.map(t => (
                <li key={t} style={problemStyles.item}>
                  <svg style={problemStyles.marker} viewBox="0 0 16 16" fill="none">
                    <circle cx="8" cy="8" r="7" stroke="var(--ink-muted)" strokeWidth="1.2"/>
                    <path d="M5 5l6 6M11 5l-6 6" stroke="var(--ink-muted)" strokeWidth="1.2" strokeLinecap="round"/>
                  </svg>
                  <span style={{ color: 'var(--ink-soft)' }}>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ ...problemStyles.col, ...problemStyles.colRight }}>
            <div style={{ ...problemStyles.colTitle, color: 'var(--sand)' }}>The BlueMoso way</div>
            <div style={problemStyles.colHead}>Matched, managed, yours.</div>
            <ul style={problemStyles.list}>
              {good.map(t => (
                <li key={t} style={{ ...problemStyles.item, ...problemStyles.itemDark }}>
                  <svg style={problemStyles.marker} viewBox="0 0 16 16" fill="none">
                    <circle cx="8" cy="8" r="7" stroke="var(--sand)" strokeWidth="1.2"/>
                    <path d="M5 8l2 2 4-4" stroke="var(--sand)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem });