// Screens 6 + 7 — Identity reveal, Deal assembly (tab-aware, no per-screen header)

function Screen6_Reveal({ role, onNext }) {
  const p = PROFILES[role];
  const cp = COUNTERPARTIES[role];
  const [youOpted, setYouOpted] = React.useState(false);
  const [themOpted, setThemOpted] = React.useState(false);
  const [revealed, setRevealed] = React.useState(false);

  React.useEffect(() => {
    if (youOpted && !themOpted) {
      const t = setTimeout(() => setThemOpted(true), 1200);
      return () => clearTimeout(t);
    }
  }, [youOpted, themOpted]);

  React.useEffect(() => {
    if (youOpted && themOpted && !revealed) {
      const t = setTimeout(() => setRevealed(true), 800);
      return () => clearTimeout(t);
    }
  }, [youOpted, themOpted, revealed]);

  const OptCard = ({ side, opted, name, callsign, role, onOpt, mirror }) => (
    <div style={{
      background: opted ? 'var(--paper)' : 'var(--ink)',
      color: opted ? 'var(--ink)' : 'var(--paper)',
      border: `1px solid ${opted ? 'var(--line-2)' : 'var(--ink)'}`,
      padding: '28px 28px 22px', position: 'relative', minHeight: 280,
      display: 'flex', flexDirection: 'column',
      transition: 'all 500ms cubic-bezier(.2,.6,.2,1)',
      textAlign: mirror ? 'right' : 'left',
    }}>
      <CornerTicks color={opted ? 'var(--ink-4)' : 'var(--paper-3)'} />
      <div className="mono-lbl" style={{ color: opted ? 'var(--ink-3)' : 'rgba(247,245,239,0.5)' }}>{side}</div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', margin: '20px 0' }}>
        <div className="mono" style={{ fontSize: 14, color: opted ? 'var(--ink-2)' : 'rgba(247,245,239,0.75)', marginBottom: 8, letterSpacing: '0.08em' }}>{callsign}</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.15, letterSpacing: '-0.01em', minHeight: 62 }}>
          {opted ? <span className="fade-row">{name}</span> :
            <span className="redacted" style={{ display: 'inline-block', background: 'rgba(247,245,239,0.15)', color: 'rgba(247,245,239,0.15)', padding: '2px 8px', width: '82%' }}>████████ ███████</span>}
        </div>
        <div className="mono-lbl" style={{ marginTop: 6, color: opted ? 'var(--ink-3)' : 'rgba(247,245,239,0.5)' }}>{role}</div>
      </div>
      {onOpt && !opted && (
        <button className="mf-btn accent" onClick={onOpt}>◉ Opt in to reveal identity</button>
      )}
      {opted && (
        <div className="fade-row" style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: mirror ? 'flex-end' : 'flex-start', padding: '8px 0', borderTop: '1px solid var(--line)' }}>
          <svg width="14" height="14" viewBox="0 0 14 14">
            <circle cx="7" cy="7" r="6" fill="var(--ok)" />
            <path d="M4 7 L6 9 L10 5" stroke="#fff" strokeWidth="1.5" fill="none" />
          </svg>
          <span className="mono-lbl" style={{ color: 'var(--ok)' }}>opted in</span>
        </div>
      )}
    </div>
  );

  return (
    <div className="mf-screen-inner">
      <div style={{ maxWidth: 640, marginBottom: 24 }}>
        <h2 style={{ fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 400, margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          Neither side is revealed without the other’s consent.
        </h2>
        <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.6, margin: 0 }}>
          MarketForge holds identity in escrow through matching and narrative generation. Reveal only occurs when both parties opt in — protecting pipeline, pricing, and confidentiality on both sides.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 80px 1fr', gap: 12, alignItems: 'stretch', marginBottom: 20 }}>
        <OptCard side="YOU" opted={youOpted} name={p.name} callsign={p.callsign} role={p.role} onOpt={() => setYouOpted(true)} />
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
          <div style={{ width: 2, flex: 1, background: revealed ? 'var(--accent)' : 'repeating-linear-gradient(var(--ink-4) 0, var(--ink-4) 4px, transparent 4px, transparent 10px)', transition: 'background 400ms' }} />
          <div style={{ width: 44, height: 44, borderRadius: '50%', background: revealed ? 'var(--accent)' : 'var(--paper-2)', border: `2px solid ${revealed ? 'var(--accent)' : 'var(--line-2)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 500ms', boxShadow: revealed ? '0 0 0 8px rgba(194,65,12,0.15)' : 'none' }}>
            {revealed ? <svg width="22" height="22" viewBox="0 0 22 22"><path d="M5 11 L9 15 L17 7" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" /></svg>
              : <svg width="18" height="18" viewBox="0 0 18 18"><rect x="4" y="8" width="10" height="7" fill="none" stroke="var(--ink-3)" strokeWidth="1.4" /><path d="M6 8 V6 a3 3 0 0 1 6 0 V8" fill="none" stroke="var(--ink-3)" strokeWidth="1.4" /></svg>}
          </div>
          <div style={{ width: 2, flex: 1, background: revealed ? 'var(--accent)' : 'repeating-linear-gradient(var(--ink-4) 0, var(--ink-4) 4px, transparent 4px, transparent 10px)', transition: 'background 400ms' }} />
        </div>
        <OptCard side="THEM" opted={themOpted} name={cp.revealedName} callsign={cp.callsign} role={cp.role} mirror />
      </div>

      <div style={{ textAlign: 'center', marginBottom: 8, minHeight: 20, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: revealed ? 'var(--accent)' : 'var(--ink-4)' }}>
        {!youOpted && 'awaiting your consent'}
        {youOpted && !themOpted && 'counterparty considering · 2.4s'}
        {revealed && '◆ mutual reveal complete — proceed to deal assembly'}
      </div>

      {revealed && (
        <div className="fade-row" style={{ display: 'flex', justifyContent: 'center' }}>
          <button className="mf-btn primary" onClick={onNext}>Assemble deal brief →</button>
        </div>
      )}

      <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        {[
          ['Identity escrow', 'Names, logos and locations are held server-side, encrypted at rest, and released only on mutual consent.'],
          ['Reveal ledger',   'Every opt-in is signed and timestamped. Either party can revoke before deal assembly begins.'],
          ['Withdrawal',      'Either side may un-reveal within 24h if no deal has been countersigned. All derived artifacts are purged.'],
        ].map(([t, b]) => (
          <div key={t} style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: '14px 16px' }}>
            <div className="mono-lbl" style={{ marginBottom: 4 }}>{t}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55 }}>{b}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- Screen 7 — deal brief ------------------

function Screen7_Deal({ role, onRestart, activeTab }) {
  if (activeTab === 'clauses')   return <div className="mf-screen-inner"><DealExtras_Clauses /></div>;
  if (activeTab === 'approvals') return <div className="mf-screen-inner"><DealExtras_Approvals /></div>;
  if (activeTab === 'risk')      return <div className="mf-screen-inner"><DealExtras_Risk /></div>;

  const d = DEALS[role];

  return (
    <div className="mf-screen-inner">
      <div style={{ background: 'var(--paper)', border: '1px solid var(--line-2)', padding: 0 }}>
        <div style={{ padding: '24px 32px 18px', borderBottom: '1px solid var(--line)', background: 'var(--paper-2)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <div>
            <MFLogo />
            <h1 style={{ fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 400, margin: '10px 0 4px', letterSpacing: '-0.01em' }}>Deal brief</h1>
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{d.title} · assembled 2026-04-22</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="mono-lbl">Between</div>
            {d.parties.map(p => <div key={p} style={{ fontFamily: 'var(--serif)', fontSize: 13, marginTop: 2 }}>{p}</div>)}
          </div>
        </div>

        <div style={{ padding: '22px 32px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 32 }}>
          <div>
            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.1 Scope</div>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink)', margin: '0 0 20px', textWrap: 'pretty' }}>{d.scope}</p>

            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.2 Timeline</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: '1px solid var(--line)', marginBottom: 20 }}>
              {[['Kickoff', d.timeline.kickoff], ['FAI due', d.timeline.fai], ['Delivery', d.timeline.delivery]].map(([k, v], i) => (
                <div key={k} style={{ padding: '12px 14px', borderRight: i < 2 ? '1px solid var(--line)' : 'none' }}>
                  <div className="mono-lbl">{k}</div>
                  <div className="mono" style={{ fontSize: 12.5, fontWeight: 500, marginTop: 3 }}>{v}</div>
                </div>
              ))}
            </div>

            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.3 Facilitators</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
              {d.facilitators.map(f => (
                <div key={f.role} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', padding: '10px 12px', background: 'var(--paper-2)', border: '1px solid var(--line)' }}>
                  <div><div className="mono-lbl">{f.role}</div><div style={{ fontSize: 12.5, marginTop: 3, fontWeight: 500 }}>{f.party}</div></div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>{f.note}</div>
                </div>
              ))}
            </div>

            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.6 Milestone schedule</div>
            <table className="data-tbl" style={{ marginBottom: 8 }}>
              <thead><tr><th style={{width:38}}>#</th><th>Milestone</th><th style={{width:120}}>Owner</th><th style={{width:110}}>Date</th><th style={{width:90}}>Gate</th></tr></thead>
              <tbody>
                {[
                  ['M1','PO issued + kickoff call','Buyer','2026-04-30','procurement'],
                  ['M2','Material release','Shop','2026-05-06','QA'],
                  ['M3','First article cut','Shop','2026-05-20','—'],
                  ['M4','FAI inspection (AS9102)','Inspector','2026-05-27','quality'],
                  ['M5','FAI approval','Buyer','2026-05-30','quality'],
                  ['M6','Production run','Shop','2026-06-12','—'],
                  ['M7','Final delivery','Shop → Buyer','2026-06-18','escrow'],
                ].map((r,i) => (
                  <tr key={i}>
                    <td className="mono" style={{color:'var(--accent)'}}>{r[0]}</td>
                    <td style={{fontWeight:500}}>{r[1]}</td>
                    <td>{r[2]}</td>
                    <td className="mono" style={{fontSize:11}}>{r[3]}</td>
                    <td><span className="chip ghost" style={{fontSize:9}}>{r[4]}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>

            <div className="mono-lbl" style={{ marginBottom: 6, marginTop: 24 }}>§ 7.8 Mutual Value Drivers</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
              {d.valueDrivers.map((vd, i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '12px', background: 'var(--paper)', border: '1px solid var(--line)', alignItems: 'flex-start' }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" style={{ flexShrink: 0, marginTop: 2 }}>
                    <path d="M12 2 L22 12 L12 22 L2 12 Z" fill="none" stroke="var(--accent)" strokeWidth="2" />
                    <circle cx="12" cy="12" r="4" fill="var(--accent)" />
                  </svg>
                  <div>
                    <div className="mono-lbl" style={{ color: 'var(--ink)' }}>{vd.party}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 4 }}>{vd.outcome}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.4 Pricing</div>
            <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '18px 18px 16px', marginBottom: 20, position: 'relative' }}>
              <CornerTicks color="var(--paper-3)" />
              <div className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)', marginBottom: 4 }}>Unit</div>
              <div className="mono" style={{ fontSize: 20, fontWeight: 500, marginBottom: 12 }}>{d.pricing.unit}</div>
              <div style={{ borderTop: '1px solid rgba(247,245,239,0.15)', paddingTop: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
                  <span className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)' }}>Total</span>
                  <span className="mono" style={{ fontSize: 12.5 }}>{d.pricing.total}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
                  <span className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)' }}>Terms</span>
                  <span className="mono" style={{ fontSize: 12.5 }}>{d.pricing.terms}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)' }}>Escrow</span>
                  <span className="mono" style={{ fontSize: 12.5 }}>Brex · 4182</span>
                </div>
              </div>
            </div>

            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.5 Documents</div>
            <div style={{ border: '1px solid var(--line)', marginBottom: 20 }}>
              {d.documents.map((doc, i) => (
                <div key={doc} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderTop: i > 0 ? '1px solid var(--line)' : 'none' }}>
                  <svg width="12" height="14" viewBox="0 0 12 14">
                    <path d="M1 1 L8 1 L11 4 L11 13 L1 13 Z" fill="none" stroke="var(--ink-3)" strokeWidth="1" />
                    <line x1="3" y1="6" x2="9" y2="6" stroke="var(--ink-3)" strokeWidth="0.8" />
                    <line x1="3" y1="9" x2="9" y2="9" stroke="var(--ink-3)" strokeWidth="0.8" />
                  </svg>
                  <span className="mono" style={{ fontSize: 11.5, color: 'var(--ink-2)', flex: 1 }}>{doc}</span>
                  <span className="mono-lbl" style={{ color: 'var(--ink-4)' }}>pdf</span>
                </div>
              ))}
            </div>

            <div className="mono-lbl" style={{ marginBottom: 6 }}>§ 7.7 Escrow & payment</div>
            <div style={{ border: '1px solid var(--line)', background: 'var(--paper-2)', padding: 12, marginBottom: 20 }}>
              {[
                ['On FAI acceptance','20%','$14,720'],
                ['On 50% delivery',  '30%','$22,080'],
                ['On final acceptance','50%','$36,800'],
              ].map((r,i) => (
                <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 60px 100px', padding:'6px 0', borderTop: i>0 ? '1px dashed var(--line)' : 'none', fontSize: 12 }}>
                  <span>{r[0]}</span>
                  <span className="mono" style={{color:'var(--ink-3)'}}>{r[1]}</span>
                  <span className="mono" style={{textAlign:'right'}}>{r[2]}</span>
                </div>
              ))}
            </div>

            <div style={{ padding: '12px 14px', background: 'var(--ok-soft)', border: '1px solid rgba(31,107,66,0.25)', borderLeft: '3px solid var(--ok)' }}>
              <div className="mono-lbl" style={{ color: 'var(--ok)', marginBottom: 4 }}>◆ mutually viable</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>
                Both parties cleared capability, certification, and commercial thresholds. No contingent clauses remain on the twin.
              </div>
            </div>
          </div>
        </div>

        <div style={{ padding: '14px 32px', background: 'var(--paper-2)', borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span className="mono-lbl">Status</span>
          <span className="chip ok"><span className="dot" /> ready to countersign</span>
          <span className="chip info"><span className="dot" /> escrow armed</span>
          <span className="chip ghost">demo · not binding</span>
          <span style={{ flex: 1 }} />
          <button className="mf-btn ghost" onClick={onRestart}>↺ Restart simulation</button>
          <button className="mf-btn primary">Download brief ↓</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Screen6_Reveal, Screen7_Deal });
