/* Product mocks — minimal, single-focus, Vantel-style */

/* ---------- COI SYSTEM — just the holder ---------- */
const MockCOI = () => (
  <div className="mini coi-mini">
    <div className="mini-head">
      <span><span className="dot"/>Certificate of Insurance</span>
      <span>ACORD 25</span>
    </div>
    <div>
      <div className="label">Certificate Holder</div>
      <div className="holder-name">Port Authority of Boston</div>
      <div className="holder-addr">1 Seaport Blvd, Boston, MA 02210</div>
      <div className="accent-bar"/>
      <div className="label">Insured</div>
      <div style={{fontSize:16, fontWeight:500, color:'var(--ink)', marginTop:4}}>Meridian Logistics LLC</div>
    </div>
    <div style={{display:'flex', gap:8, marginTop:4}}>
      <span className="mini-tag"><Icon name="check" size={10}/> Holder verified</span>
      <span className="mini-tag" style={{background:'var(--card)', color:'var(--muted)', borderColor:'var(--line)'}}>Auto-renew · Dec 27</span>
    </div>
  </div>
);

/* ---------- QUOTE COMPARE — side-by-side w/ winner ---------- */
const MockQuotes = () => {
  const rows = [
    { lbl: "Per Occurrence", a: "$2M",     b: "$5M" },
    { lbl: "Premium",        a: "$94,200", b: "$84,989" },
    { lbl: "Deductible",     a: "$25,000", b: "$10,000" },
    { lbl: "Product Recall", a: "—",        b: "Included", recall: true },
  ];
  return (
    <div className="mini qc-mini">
      <div className="mini-head">
        <span><span className="dot"/>Quote Comparison · Hartwell Mfg</span>
        <span>2 carriers</span>
      </div>

      <div className="qc-cols">
        <div className="qc-col">
          <div className="qc-col-head">
            <div className="logo">TR</div>
            <div>
              <div className="name">Travelers</div>
              <div className="sub">Quote · 04/18</div>
            </div>
          </div>
          {rows.map((r,i) => (
            <div key={i} className="qc-row">
              <div className="lbl">{r.lbl}</div>
              <div className={`val${r.recall ? ' muted' : ''}`}>{r.a}</div>
            </div>
          ))}
        </div>

        <div className="qc-col best">
          <div className="qc-best-tag"><Icon name="spark" size={10}/> Best fit</div>
          <div className="qc-col-head">
            <div className="logo accent">CH</div>
            <div>
              <div className="name">Chubb</div>
              <div className="sub">Quote · 04/17</div>
            </div>
          </div>
          {rows.map((r,i) => (
            <div key={i} className="qc-row">
              <div className="lbl">{r.lbl}</div>
              <div className={`val accent${r.recall ? ' bold' : ''}`}>{r.b}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ---------- POLICY CHECK — concise checks ---------- */
const MockPolicy = () => (
  <div className="mini pol-mini">
    <div className="mini-head">
      <span><span className="dot"/>Binder Check · Atlas Food Group</span>
      <span>214 points</span>
    </div>

    <div style={{display:'flex', gap:10, alignItems:'center'}}>
      <span className="mini-tag" style={{background:'color-mix(in oklab, var(--success) 18%, transparent)', color:'var(--success)', borderColor:'color-mix(in oklab, var(--success) 30%, transparent)'}}><Icon name="check" size={10}/> 198 match</span>
      <span className="mini-tag" style={{background:'color-mix(in oklab, var(--warn) 22%, transparent)', color:'var(--warn)', borderColor:'color-mix(in oklab, var(--warn) 35%, transparent)'}}>13 review</span>
    </div>

    <div>
      <div className="check">
        <span className="ic ok"><Icon name="check" size={14}/></span>
        <span className="lbl">Coverage parts &amp; limits</span>
        <span className="meta">26/26</span>
      </div>
      <div className="check">
        <span className="ic ok"><Icon name="check" size={14}/></span>
        <span className="lbl">Endorsements (AI · waiver · P&amp;NC)</span>
        <span className="meta">47/47</span>
      </div>
      <div className="check">
        <span className="ic warn"><Icon name="flag" size={14}/></span>
        <span className="lbl">Wind/Hail deductible — needs review</span>
        <span className="meta">2% TIV</span>
      </div>
      <div className="check">
        <span className="ic ok"><Icon name="check" size={14}/></span>
        <span className="lbl">Outstanding certificates</span>
        <span className="meta">83/83</span>
      </div>
    </div>
  </div>
);

/* ---------- CONTRACT REVIEW — single clause + AI row ---------- */
const MockContract = () => (
  <div className="mini con-mini">
    <div className="mini-head">
      <span><span className="dot"/>Lease · Article 7 · Insurance</span>
      <span>p.14 of 47</span>
    </div>

    <div className="clause">
      Tenant shall maintain Commercial General Liability of <em>$2M / $4M</em>, name Port Authority as Additional Insured on a <em>primary &amp; non-contributory</em> basis, and carry Umbrella coverage of <em>$10M</em>.
    </div>

    <div className="ai-row">
      <span style={{width:28, height:28, borderRadius:8, background:'var(--accent)', color:'var(--bg)', display:'grid', placeItems:'center', flexShrink:0}}>
        <Icon name="sparkle" size={14}/>
      </span>
      <span style={{flex:1}}>
        <b>6 obligations extracted.</b> 4 satisfied. Umbrella increase &amp; CG 20 37 endorsement drafted.
      </span>
    </div>
  </div>
);

/* ---------- OUTLOOK — single email + AI panel ---------- */
const MockOutlook = () => (
  <div className="mini ol-mini" style={{padding:0, overflow:'hidden'}}>
    {/* Outlook ribbon */}
    <div className="ol-ribbon">
      <div className="ol-ribbon-left">
        <span className="ol-logo">
          <svg width="22" height="22" viewBox="0 0 32 32" fill="none" aria-hidden="true">
            <rect x="2" y="6" width="20" height="20" rx="2" fill="#0078D4"/>
            <path d="M12 11c-2.4 0-4 2.2-4 5s1.6 5 4 5 4-2.2 4-5-1.6-5-4-5zm0 8.2c-1.3 0-2.2-1.4-2.2-3.2 0-1.8.9-3.2 2.2-3.2 1.3 0 2.2 1.4 2.2 3.2 0 1.8-.9 3.2-2.2 3.2z" fill="#fff"/>
            <rect x="22" y="10" width="8" height="12" fill="#0078D4"/>
            <path d="M22 10l4 3 4-3v9h-8z" fill="#50D9FF"/>
          </svg>
          <span>Outlook</span>
        </span>
        <span className="ol-folder">Inbox · BrokerStudio</span>
      </div>
      <div className="ol-ribbon-right">
        <span className="mini-tag" style={{background:'color-mix(in oklab, #0078D4 12%, var(--card))', color:'#0078D4', borderColor:'color-mix(in oklab, #0078D4 28%, var(--line))'}}>
          Add-in connected
        </span>
      </div>
    </div>

    <div style={{padding:'22px 26px 26px', display:'flex', flexDirection:'column', gap:14}}>
      <div className="msg">
        <div className="from">
          <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
            <span style={{width:22, height:22, borderRadius:999, background:'linear-gradient(140deg,#0078D4,#50D9FF)', display:'inline-block'}}/>
            Port Authority — Legal
          </span>
          <span style={{float:'right', textTransform:'none', letterSpacing:0, color:'var(--muted)'}}>9:38 AM</span>
        </div>
        <div style={{fontSize:15, fontWeight:600, letterSpacing:'-0.01em', color:'var(--ink)', marginBottom:6, marginTop:8}}>Meridian Logistics · Lease + insurance reqs</div>
        <div style={{color:'var(--muted)', fontSize:13}}>Attached is the executed lease (47 pp). Please confirm insurance compliance by EOW.</div>
      </div>

      <div className="ai-card">
        <h6><Icon name="sparkle" size={12}/> BrokerStudio · suggested actions</h6>
        <div style={{fontSize:13, color:'var(--ink)', lineHeight:1.5}}>
          Contract parsed. <b>6 insurance obligations</b> matched against Meridian's in-force policies.
        </div>
        <div className="actions">
          <button className="primary">Issue COI</button>
          <button>Draft reply</button>
          <button>Open contract review</button>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { MockCOI, MockQuotes, MockPolicy, MockContract, MockOutlook });