// Frame 1 — Stage 1 in action. Promotion card inside a chat whose shape calls for a Project.

const Frame1 = () => {
  return (
    <div className="app" id="frame-1">
      <Sidebar variant="chat" activeChat="vendor"/>
      <div className="chat">
        <ChatHeader title="Vendor eval, Q2 platform" model="Claude Sonnet 4.7"/>
        <div className="chat-body">
          <div className="messages">

            <UserMsg>
              What does ACME's MSA say about termination for convenience? Does the 90-day window apply to all tiers or just Enterprise?
            </UserMsg>

            <AsstMsg withActions>
              <p>
                <DocRef name="ACME Proposal.pdf"/> treats termination for convenience differently by tier. The 90-day notice window only applies to <strong>Enterprise</strong> and <strong>Scale</strong> tiers (§8.2). On Growth, either party can terminate on <strong>30 days</strong>' notice with a prorated refund of prepaid fees.
              </p>
              <p>
                Two things to watch on the Enterprise tier:
              </p>
              <ul>
                <li>Termination fees kick in if you leave before month 18 — 25% of the remaining commitment.</li>
                <li>Data egress is time-boxed to 45 days post-termination, which is tighter than what Vendra and Northstar offer (both 90).</li>
              </ul>
              <p>
                Want me to line up the three MSAs on termination terms specifically, or keep focused on pricing?
              </p>
            </AsstMsg>

            {/* The promotion card — outlined, one shade off from chat bg, no left stripe (option 3 selected) */}
            <div className="promo" id="promo-1">
              <div className="promo-card">
                <div className="promo-icon">
                  <Icon name="folder"/>
                </div>
                <div className="promo-content">
                  <div className="promo-head">This is starting to look like a Project.</div>
                  <div className="promo-body">
                    You've referenced 3 files across 20 messages. Promoting keeps the files, memory, and this chat together, and opens parallel and collaborative Agents for the comparison work.
                  </div>
                  <div className="promo-signals">
                    <span className="signal"><Icon name="file-text"/> 3 files referenced</span>
                    <span className="signal"><Icon name="messages"/> 20 messages</span>
                    <span className="signal"><Icon name="clock"/> 2h active</span>
                  </div>
                  <div className="promo-actions">
                    <button className="btn btn-primary">
                      <Icon name="folder" size={13}/> Promote to Project
                    </button>
                    <button className="btn btn-ghost">Not now</button>
                  </div>
                </div>
                <button className="promo-close"><Icon name="x" size={14}/></button>
                <span className="promo-dismiss">Stop suggesting this for this chat</span>
              </div>
            </div>

          </div>
        </div>
        <Composer placeholder="Reply to Claude…"/>
      </div>
    </div>
  );
};

window.Frame1 = Frame1;