/* jacques-chat.jsx — single Q&A, fixed container size */

const JacquesChat = () => {
  return (
    <div className="chat-window">
      <div className="chat-header">
        <span className="av">J</span>
        <span>Jacques · thinking partner</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.1em' }}>
          BRIEF: ALCOHOL_MODERATION
        </span>
      </div>
      <div className="chat-body" data-comment-anchor="53b40f08b0-div-13-7">
        <div className="bubble-msg user">
          Go deep on premiumization. What's the tension?
        </div>
        <div className="bubble-msg jacques">
          Drinkers want craft-level sophistication, but they're <strong>questioning the price</strong>. "Glorified juice" shows up across 14% of mocktail conversations — almost always paired with a cocktail-price comparison. The premium they'll pay is real; the premium they'll forgive isn't.
        </div>
      </div>
      <div className="chat-input-row">
        <span style={{ flex: 1 }}>Ask Jacques anything about the data…</span>
        <span className="send-btn">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4">
            <line x1="3" y1="12" x2="20" y2="12" />
            <polyline points="14,6 20,12 14,18" />
          </svg>
        </span>
      </div>
    </div>);

};

window.JacquesChat = JacquesChat;