// QBClone — AI Band (dark)
const AiBand = () => {
  const [step, setStep] = React.useState(0);
  const steps = [
    { user: 'Why is October margin down from September?', a: 'October margin is 37.3%, down 2.4pp from September (39.7%). Driver: flour costs ↑18% after Bay Mills price update on Oct 4.', ok: 'Found 1 cause · drafted vendor email · ready to send' },
    { user: 'Reconcile last week\'s Stripe deposits, please.', a: '47 of 49 deposits matched on amount + date. 2 deposits need review (mismatched fees). Drafted journal entries for review.', ok: '47 matched · 2 flagged · 0 errors' },
    { user: 'Close the books for September across all 12 companies.', a: 'All 12 entities closed. AR reviewed, accruals posted, lock dates set to 09/30. Variance report exported to Drive.', ok: '12 companies · 4m 18s · closed clean' },
  ];

  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % steps.length), 4200);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="ai-band" id="ai" data-screen-label="04 AI">
      <div className="qb-container">
        <div className="ai-band-inner">
          <div>
            <div className="qb-eyebrow"><span className="dot" style={{ color: 'var(--qb-accent)' }}>●</span>AI-first books</div>
            <h2 className="qb-display qb-display-lg" style={{ marginTop: 18 }}>
              Books that talk back. <br/>
              <span className="qb-italic">In English.</span>
            </h2>
            <p className="qb-body-lg" style={{ marginTop: 18, color: 'rgba(245,242,239,0.7)', maxWidth: 520 }}>
              QBClone is the first general ledger designed for the agent era. Every row, every account, every transaction has structured context an LLM can actually reason about — so you can categorize, reconcile, draft, close, and ask, in plain language.
            </p>
            <div className="ai-band-points">
              {[
                { h: 'Built for agents',  d: 'First-class MCP server. Wire it into Claude Code, Codex, or your own agent in a single line.' },
                { h: 'Drafts, not magic', d: 'AI proposes. You approve. Every action has an audit trail.' },
                { h: 'Multi-company aware', d: 'Ask one question; it answers across every entity you have access to.' },
                { h: 'Yours to extend',   d: 'Open schema, open API, open prompts. Customize the agent for your firm.' },
              ].map((it, i) => (
                <div className="it" key={i}>
                  <div className="h"><span className="dot"></span>{it.h}</div>
                  <div className="d">{it.d}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 36, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a className="qb-btn qb-btn-accent" href="dashboard.html">Try the AI assistant <span className="arr">→</span></a>
              <a className="qb-btn" href="#" style={{ background: 'transparent', color: '#F5F2EF', border: '1px solid rgba(245,242,239,0.2)' }}>Read the MCP spec</a>
            </div>
          </div>

          <div className="ai-chat" aria-live="polite">
            <div className="ai-chat-head">
              <div className="t"><span className="star">✦</span> QBClone AI · Maple &amp; Co.</div>
              <div className="meta">claude-sonnet · 7 tools · live</div>
            </div>
            <div key={step}>
              <div className="ai-msg user">
                <span className="av">JC</span>
                <div className="b">{steps[step].user}</div>
              </div>
              <div className="ai-msg assist">
                <span className="av">✦</span>
                <div className="b">
                  {steps[step].a}
                  <div className="ok-line">✓ {steps[step].ok}</div>
                </div>
              </div>
            </div>
            <div className="ai-chat-input">
              <span className="ph">Ask anything about your books…</span>
              <span className="send">→</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AiBand });