// Frame 2 — Promoted Project with memory panel + secondary promotion.

const MemTier = ({ label, count, children, defaultOpen = true }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className={"mem-tier" + (open ? "" : " collapsed")}>
      <div className="mem-tier-head" onClick={() => setOpen(o => !o)} style={{cursor:'pointer'}}>
        <span className="tier-label">{label}</span>
        <span className="tier-count">{count}</span>
        <span className="mem-tier-chev" style={{marginLeft:6}}><Icon name="chevron-down" size={12}/></span>
      </div>
      <div className="mem-tier-body">{children}</div>
    </div>
  );
};

const MemLine = ({ children, added }) => (
  <div className={"mem-line" + (added ? " added" : "")}>
    <span className="mem-dot"/>
    <span className="mem-line-text">{children}</span>
    <button className="edit-btn"><Icon name="edit" size={11}/></button>
  </div>
);

const Frame2 = () => {
  return (
    <div className="app has-right wide" id="frame-2">
      <Sidebar variant="project" activeProjectChild="main"/>

      <div className="chat">
        <ChatHeader
          breadcrumb={["Q2 Vendor Eval", "Compare pricing & security"]}
          model="Claude Sonnet 4.7"
          showRailToggle
        />
        <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>
              <p>
                <DocRef name="ACME Proposal.pdf"/> treats termination differently by tier. The 90-day notice window only applies to <strong>Enterprise</strong> and <strong>Scale</strong> tiers. On Growth, either party can terminate on 30 days' notice with a prorated refund.
              </p>
              <p>
                Termination fee on Enterprise: 25% of remaining commitment if you leave before month 18. Data egress is 45 days post-termination — tighter than Vendra/Northstar at 90.
              </p>
            </AsstMsg>

            <UserMsg>
              How does that compare against Vendra and Northstar on the indemnification caps?
            </UserMsg>

            <AsstMsg withActions>
              <p>
                All three cap liability at the <strong>prior 12 months of fees</strong>, but the carve-outs differ:
              </p>
              <ul>
                <li><DocRef name="ACME Proposal.pdf"/> — no cap for breach of confidentiality, gross negligence, or IP indemnity (standard).</li>
                <li><DocRef name="Vendra Proposal.pdf"/> — 2× fees for IP indemnity specifically. Unusual. Worth flagging to Legal.</li>
                <li><DocRef name="Northstar Proposal.pdf"/> — uncapped for confidentiality and IP; also uncapped for <em>willful misconduct</em>, which is broader than ACME.</li>
              </ul>
              <p>
                On balance, Vendra's indemnification position is the weakest of the three for a security-sensitive deal.
              </p>
            </AsstMsg>

            {/* Secondary promotion — next rung */}
            <div className="promo" id="promo-2">
              <div className="promo-card">
                <div className="promo-icon">
                  <Icon name="sparkles"/>
                </div>
                <div className="promo-content">
                  <div className="promo-head">Want to run this in parallel, or bring in a review team?</div>
                  <div className="promo-body">
                    Spawn parallel Agents on independent threads (pricing model, security review, draft recommendation), or open a collaborative team of PM, Legal, and Security Agents to debate and return a ranked recommendation.
                  </div>
                  <div className="promo-actions">
                    <button className="btn btn-primary">
                      <Icon name="users" size={13}/> Open review team
                    </button>
                    <button className="btn btn-outline">
                      <Icon name="git-branch" size={13}/> Run in parallel
                    </button>
                    <button className="btn btn-ghost">Not now</button>
                  </div>
                </div>
                <button className="promo-close"><Icon name="x" size={14}/></button>
              </div>
            </div>

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

      <aside className="rail">
        <div className="rail-head">
          <div>
            <div className="rail-title">Project memory</div>
            <div className="rail-title-sub">Auto-built from this project · editable</div>
          </div>
          <button className="icon-btn"><Icon name="sliders" size={14}/></button>
        </div>

        <MemTier label="About you" count="1">
          <MemLine>
            Works on strategic deals at a mid-market SaaS company. Prefers crisp exec-summary framing over long rationales.
          </MemLine>
        </MemTier>

        <MemTier label="This project" count="3">
          <MemLine>Evaluating three vendors — ACME, Vendra, Northstar — for Q2 platform decision.</MemLine>
          <MemLine>Decision needed by Friday, Apr 24. Exec review Thursday PM.</MemLine>
          <MemLine>Priority order: <strong>security posture &gt; price &gt; onboarding speed</strong>.</MemLine>
        </MemTier>

        <MemTier label="This chat" count="1">
          <MemLine>Currently comparing contract terms (termination, indemnification).</MemLine>
        </MemTier>

        <div style={{marginTop:'auto', fontSize:11, color:'var(--ink-faint)', paddingTop:12, lineHeight:1.4}}>
          Memory persists across chats in this project. <span style={{color:'var(--accent)', textDecoration:'underline', textUnderlineOffset:2, cursor:'pointer'}}>Learn more</span>
        </div>
      </aside>
    </div>
  );
};

window.Frame2 = Frame2;