// QBClone — Positioning ("with / without") section
const Positioning = () => {
  const withList = [
    { t: 'Modern cloud performance',   d: 'Reports in milliseconds, not minutes.' },
    { t: 'Enterprise scalability',     d: 'Multi-million-row files. No degradation.' },
    { t: 'Rich accounting functionality', d: 'Inventory, classes, sales orders, custom fields — the full Desktop feature set.' },
    { t: 'Unlimited users',            d: 'Real-time multi-cursor. No file locking.' },
    { t: 'Unlimited companies',        d: 'One login, one workspace, infinite books.' },
    { t: 'Open integrations',          d: 'REST + Webhooks + MCP. Wire it into anything.' },
    { t: 'AI-ready architecture',      d: 'Every transaction has structured context. AI can actually use it.' },
    { t: 'Your choice of hosting',     d: 'Cloud, on-prem, self-hosted — or all three.' },
  ];
  const withoutList = [
    { t: 'QuickBooks Desktop slowness',     d: 'No more 47-second reports on a 50k-row file.' },
    { t: 'QuickBooks Online limitations',   d: 'No more "you can\'t do that here, try Desktop."' },
    { t: 'Intuit subscription lock-in',     d: 'No more pay-forever-or-lose-your-books.' },
    { t: 'Per-company licensing',           d: 'No more separate seats for each entity.' },
    { t: 'Per-user licensing',              d: 'No more "sorry, your accountant needs their own login."' },
    { t: 'Annual upgrade cycles',           d: 'No more sunset windows. No more migration weekends.' },
    { t: 'Proprietary file formats',        d: 'No more .QBW. No more held-hostage data.' },
    { t: 'Surprise price hikes',            d: 'There is no price. It\'s free.' },
  ];
  return (
    <section className="qb-section alt" id="product" data-screen-label="03 Positioning">
      <div className="qb-container">
        <div className="qb-section-head">
          <div className="qb-eyebrow"><span className="dot">●</span>QBClone positioning</div>
          <h2 className="qb-display qb-display-lg" style={{ marginTop: 18 }}>
            The best of QuickBooks Desktop<br/>
            and QuickBooks Online — <span className="qb-italic">without their problems.</span>
          </h2>
        </div>

        <div className="pos-grid">
          <div className="pos-col yes">
            <div className="pos-col-h">QBClone is built to deliver</div>
            <ul className="pos-list yes">
              {withList.map((it, i) => (
                <li key={i}>
                  <span className="ic">✓</span>
                  <div><strong>{it.t}.</strong> <span className="qb-muted">{it.d}</span></div>
                </li>
              ))}
            </ul>
          </div>
          <div className="pos-col no">
            <div className="pos-col-h">Without any of</div>
            <ul className="pos-list no">
              {withoutList.map((it, i) => (
                <li key={i}>
                  <span className="ic">−</span>
                  <div><strong>{it.t}.</strong> <span className="qb-muted">{it.d}</span></div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Positioning });