const fitStyles = {
  wrap: { padding: 'var(--section-y) 32px', background: 'var(--paper)' },
  inner: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 20 },
  h2: { fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, fontFamily: "'Outfit', system-ui, sans-serif", marginBottom: 20 },
  italic: { color: 'var(--blue)' },
  sub: { fontSize: 16, lineHeight: 1.55, color: 'var(--ink-muted)', marginBottom: 28 },
  list: { listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--line)' },
  item: { padding: '18px 0', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'flex-start', gap: 14, fontSize: 16, lineHeight: 1.45 },
  check: { flexShrink: 0, width: 22, height: 22, borderRadius: 11, background: 'var(--blue-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 },
};

function Fit({ copy }) {
  const c = copy || {};
  const eyebrow = c.eyebrow || 'Is this right for you?';
  const h2Lead = c.h2Lead || 'Built for busy people ready to';
  const h2Accent = c.h2Accent || 'get their time back.';
  const sub = c.sub || 'BlueMoso works best for busy professionals ready to delegate. We help you get your time back for family, focus, and the work that grows the business.';
  const items = (c.items && c.items.length) ? c.items : [
    'You\'re tired of being stretched thin across the business.',
    'You\'re past the validation phase, you have a proven offer.',
    'You\'d rather buy back time than manage a hiring pipeline.',
    'You\'re ready to delegate, not just to outsource.',
    'You value a long-term working relationship over a cheap transaction.',
    'You think in systems and want someone to help you build them.',
  ];
  return (
    <section style={fitStyles.wrap} className="reveal bm-section">
      <div style={fitStyles.inner} className="bm-fit-grid">
        <div>
          <div className="mono" style={fitStyles.eyebrow}>{eyebrow}</div>
          <h2 style={fitStyles.h2}>{h2Lead} <span style={fitStyles.italic}>{h2Accent}</span></h2>
          <p style={fitStyles.sub}>{sub}</p>
        </div>
        <ul style={fitStyles.list}>
          {items.map(t => (
            <li key={t} style={fitStyles.item}>
              <span style={fitStyles.check}><Icon name="check" size={12} color="var(--blue)" /></span>
              <span>{t}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Object.assign(window, { Fit });