// QBClone — Frustration: interactive 3-way comparison
const COMPARE_DATA = {
  desktop: {
    label: 'QuickBooks Desktop',
    sub: 'Slow. Heavy. Legacy.',
    badge: 'SLOW',
    badgeCls: 'slow',
    pains: [
      { ic: 'x',    t: 'Painfully slow on large company files', d: 'Reports lock up. Year-end closes drag for hours.' },
      { ic: 'x',    t: 'Struggles in multi-user environments',  d: 'Locks, conflicts, and the dreaded H505 errors.' },
      { ic: 'warn', t: 'Expensive hosting setups',              d: 'You pay for the software AND the Right Networks-style hosting.' },
      { ic: 'warn', t: 'Constant maintenance & upgrades',       d: 'Annual desktop upgrades. Sunset windows. Migrations.' },
      { ic: 'x',    t: 'Crashes get worse over time',           d: 'File bloat. Performance degrades month over month.' },
      { ic: 'warn', t: 'Feels like outdated legacy software',   d: 'A UI from 2008 in a 2026 world.' },
    ],
    metrics: [
      { lbl: 'Report load time',  val: '47s',   cls: 'bad',  meta: '50k transactions · p95' },
      { lbl: 'Concurrent users',  val: '~5',    cls: 'bad',  meta: 'before lock contention' },
      { lbl: 'Annual cost',       val: '$1,940',cls: 'warn', meta: 'Enterprise + hosting' },
      { lbl: 'Companies',         val: '1',     cls: 'warn', meta: 'per install · extra license each' },
    ],
    bar: { lbl: 'Time to open a P&L', pct: 92, cls: 'slow', read: '47.0s' },
  },
  online: {
    label: 'QuickBooks Online',
    sub: 'Limited. Restricted. Locked-in.',
    badge: 'LIMITED',
    badgeCls: 'limited',
    pains: [
      { ic: 'x',    t: 'Missing many Desktop features',         d: 'Inventory assemblies. Class tracking nuance. Sales orders.' },
      { ic: 'warn', t: 'Limited reporting capabilities',        d: 'Memorized reports. Custom field reporting. Forget it.' },
      { ic: 'x',    t: 'Restricted workflows',                  d: 'You do it Intuit\'s way. There is no other way.' },
      { ic: 'x',    t: 'Weak multi-company functionality',      d: 'Each company = a separate subscription, separate login.' },
      { ic: 'warn', t: 'Limited customization',                 d: 'Templates, fields, screens — all on rails.' },
      { ic: 'warn', t: 'Slower for accounting power users',     d: 'Click. Click. Click. Click. Save. Reload.' },
      { ic: 'x',    t: 'Forces subscription pricing',           d: 'Monthly forever. Price hikes every year.' },
    ],
    metrics: [
      { lbl: 'Custom report depth', val: 'Shallow', cls: 'warn', meta: 'no full SQL access' },
      { lbl: 'Companies per seat',  val: '1',       cls: 'warn', meta: '+ $90/mo each' },
      { lbl: 'Annual cost (Advanced)', val: '$2,760', cls: 'bad',  meta: '$235/mo · escalating' },
      { lbl: 'Export your data',    val: 'Hard',    cls: 'warn', meta: 'Intuit owns the format' },
    ],
    bar: { lbl: 'Custom report flexibility', pct: 28, cls: 'warn', read: '28%' },
  },
  qbclone: {
    label: 'QBClone',
    sub: 'Modern. AI-native. Free.',
    badge: 'FREE FOREVER',
    badgeCls: 'ok',
    pains: [
      { ic: 'ok', t: 'Fast on million-row files',           d: 'Modern columnar engine. Reports in under a second.' },
      { ic: 'ok', t: 'Unlimited concurrent users',          d: 'Real-time collaboration. No file locking. Ever.' },
      { ic: 'ok', t: 'Unlimited companies on one login',    d: 'One workspace. Switch between books with ⌘K.' },
      { ic: 'ok', t: 'Full Desktop-grade functionality',    d: 'Inventory, classes, sales orders, custom fields, the works.' },
      { ic: 'ok', t: 'Reports that go as deep as you want', d: 'Templated, custom, raw-SQL, exportable. Your books, your queries.' },
      { ic: 'ok', t: 'AI-native from day one',              d: 'Reconcile, categorize, ask questions in English. Drives Claude Code or Codex.' },
      { ic: 'ok', t: 'Your hosting — cloud, on-prem, edge', d: 'Run it on us, on AWS, on a Mac mini in the back office.' },
      { ic: 'ok', t: 'Free. Forever. No subscription.',     d: 'The full product. Funded by optional managed hosting, not by you.' },
    ],
    metrics: [
      { lbl: 'Report load time',  val: '0.6s',  cls: 'good', meta: '50k transactions · p95' },
      { lbl: 'Concurrent users',  val: '∞',     cls: 'good', meta: 'live multi-cursor' },
      { lbl: 'Annual cost',       val: '$0',    cls: 'good', meta: 'forever · self-host or cloud' },
      { lbl: 'Companies',         val: '∞',     cls: 'good', meta: 'unlimited · one login' },
    ],
    bar: { lbl: 'Time to open a P&L', pct: 4, cls: 'fast', read: '0.6s' },
  },
};

const Frustration = () => {
  const order = ['desktop', 'online', 'qbclone'];
  const [active, setActive] = React.useState('desktop');
  const data = COMPARE_DATA[active];

  // auto-advance on first view, then stop
  const autoRef = React.useRef({ idx: 0, started: false, timer: null });
  React.useEffect(() => {
    if (autoRef.current.started) return;
    const node = document.getElementById('compare');
    if (!node) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(en => {
        if (en.isIntersecting && !autoRef.current.started) {
          autoRef.current.started = true;
          autoRef.current.timer = setInterval(() => {
            autoRef.current.idx = (autoRef.current.idx + 1) % order.length;
            if (autoRef.current.idx === 2) {
              clearInterval(autoRef.current.timer);
            }
            setActive(order[autoRef.current.idx]);
          }, 2600);
        }
      });
    }, { threshold: 0.3 });
    obs.observe(node);
    return () => { obs.disconnect(); if (autoRef.current.timer) clearInterval(autoRef.current.timer); };
  }, []);

  return (
    <section className="qb-section" id="compare" data-screen-label="02 Compare">
      <div className="qb-container">
        <div className="qb-section-head">
          <div className="qb-eyebrow"><span className="dot">●</span>Why QBClone exists</div>
          <h2 className="qb-display qb-display-lg" style={{ marginTop: 18 }}>
            QuickBooks Desktop is <span className="qb-italic">slow.</span><br/>
            QuickBooks Online is <span className="qb-italic">incomplete.</span>
          </h2>
          <p className="qb-body-lg">
            For two decades businesses have been forced to choose between old-and-slow or new-and-limited. We built the third option — pick a tab to see what we mean.
          </p>
        </div>

        <div className="cmp">
          <div className="cmp-tabs" role="tablist">
            {order.map((k) => {
              const it = COMPARE_DATA[k];
              const isQb = k === 'qbclone';
              return (
                <button
                  key={k}
                  role="tab"
                  aria-selected={active === k}
                  className={`cmp-tab ${isQb ? 'qb' : ''} ${active === k ? 'is-active' : ''}`}
                  onClick={() => setActive(k)}
                >
                  <div className={`badge ${it.badgeCls}`}>{it.badge}</div>
                  <div className="name">
                    {it.label}
                    <span className="sub">{it.sub}</span>
                  </div>
                </button>
              );
            })}
          </div>

          <div className="cmp-body">
            <div className="cmp-list" key={active}>
              <div className="cmp-list-head">
                {active === 'qbclone' ? 'What you get' : "What's wrong"}
                <span style={{ float: 'right', color: 'var(--ink-40)', fontFamily: 'var(--font-mono)', letterSpacing: 0, textTransform: 'none' }}>
                  {data.pains.length} items
                </span>
              </div>
              {data.pains.map((p, i) => (
                <div key={i} className="cmp-item fade-in" style={{ animationDelay: `${i * 40}ms` }}>
                  <span className={`ic ${p.ic}`}>{p.ic === 'ok' ? '✓' : (p.ic === 'warn' ? '!' : '×')}</span>
                  <div>
                    <div className="t">{p.t}</div>
                    <div className="d">{p.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="cmp-visual" key={'v-' + active}>
              <div>
                <div className="cmp-visual-head">
                  <h4>By the numbers</h4>
                  <span className="qb-mono">benchmark · same 50k-tx file</span>
                </div>
                <div className="cmp-metrics">
                  {data.metrics.map((m, i) => (
                    <div key={i} className="cmp-metric">
                      <div className="lbl">{m.lbl}</div>
                      <div className={`val ${m.cls}`}>{m.val}</div>
                      <div className="meta">{m.meta}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="cmp-bar">
                <div className="cmp-bar-lbl">
                  <span>{data.bar.lbl}</span>
                  <span className="qb-mono" style={{ letterSpacing: 0, textTransform: 'none' }}>{data.bar.read}</span>
                </div>
                <div className="cmp-bar-track">
                  <div className={`cmp-bar-fill ${data.bar.cls}`} style={{ width: data.bar.pct + '%' }}></div>
                </div>
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  marginTop: 8, font: '400 11px var(--font-mono)', color: 'var(--ink-40)'
                }}>
                  <span>fast</span><span>slow</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <p className="qb-mono" style={{ marginTop: 18, textAlign: 'center', color: 'var(--ink-40)' }}>
          Tabs auto-advance once · click any tab to compare
        </p>
      </div>
    </section>
  );
};

Object.assign(window, { Frustration });