// 06 Match Detail — Why this match? + Compare profiles + Saved matches

const MatchTab = () => (
  <div>
    <SectionLead
      eyebrow="06 / match detail"
      title="‘Why this match?’ — explainability is the product"
      sub="Every recommendation must show its reasoning: which questionnaire answers, which signals, which strength. Three directions for the explanation panel + compare view + saved list."
    />

    <div className="frame-grid cols-2">
      <Frame title="A — Side-by-side explanation" tag="why panel · option 1">
        <Browser title="h2learn.app/match/sara-x-hydronl">
          <div className="row gap-2" style={{alignItems:'flex-start'}}>
            <div className="sketch-box p-2 flex-1">
              <div className="ui xsmall uppercase">You</div>
              <div className="hand-title" style={{fontSize:18}}>Sara Arif</div>
              <div className="row gap-1 pill-row mt-1">{['PEM 40','Catalyst 25','Membrane 20'].map(t=><Pill key={t}>{t}</Pill>)}</div>
              <div className="ui xsmall muted-text mt-2">Offers: membrane test method, curriculum</div>
            </div>
            <div className="center" style={{width: 50, alignSelf:'stretch', flexDirection:'column'}}>
              <Pill className="warn">88%</Pill>
              <div className="hand-title accent2-text" style={{fontSize:14, marginTop:6}}>compl.</div>
            </div>
            <div className="sketch-box p-2 flex-1">
              <div className="ui xsmall uppercase">Project</div>
              <div className="hand-title" style={{fontSize:18}}>HYDRO-NL</div>
              <div className="row gap-1 pill-row mt-1">{['PEM 35','Pilot 30','Materials 15'].map(t=><Pill key={t}>{t}</Pill>)}</div>
              <div className="ui xsmall muted-text mt-2">Needs: durability data, test bench</div>
            </div>
          </div>
          <Squiggle style={{margin:'12px 0'}}/>
          <div className="hand-title" style={{fontSize:18}}>Why we matched you</div>
          <div className="col gap-2 mt-2">
            {[
              ['Your offer ↔ their need','Membrane test method ↔ durability data','#d96b2c', 0.95],
              ['Subdomain overlap','PEM, Membrane (weights similar)','#1c5fbf', 0.78],
              ['Method overlap','Both use LCA','#7a6cf0', 0.6],
              ['Project compatibility','TRL 5 · pilot · NL','#2a8a5c', 0.7],
            ].map(([t,d,c,s],i)=>(
              <div key={i} className="sketch-box p-2 row gap-3" style={{alignItems:'center'}}>
                <div className="sketch-box thin" style={{width:32,height:32,borderRadius:16, background:c, opacity:0.8}}/>
                <div className="col flex-1">
                  <div className="hand-title" style={{fontSize:15}}>{t}</div>
                  <div className="ui xsmall">{d}</div>
                </div>
                <div className="col" style={{width:80}}>
                  <div className="sketch-box thin" style={{height:8, padding:0, overflow:'hidden'}}>
                    <div style={{width:(s*100)+'%', height:'100%', background:c, opacity:0.7}}/>
                  </div>
                  <div className="ui xsmall muted-text right">{Math.round(s*100)}%</div>
                </div>
              </div>
            ))}
          </div>
          <div className="row gap-2 mt-3"><Btn className="accent">Send signal</Btn><Btn>Save</Btn><Btn>Dismiss</Btn><Btn>Request curator review</Btn></div>
        </Browser>
      </Frame>

      <Frame title="B — Narrative explanation" tag="why panel · option 2">
        <Browser title="h2learn.app/match/sara-x-hydronl">
          <div className="hand-title" style={{fontSize:22}}>Sara × HYDRO-NL</div>
          <div className="row gap-2 mt-1"><Pill className="warn">Complementarity 88%</Pill><Pill className="dashed">system-generated</Pill></div>
          <Note style={{marginTop:12}}>This match is built around a clear <b>need ↔ offer</b> pairing reinforced by domain and method overlap.</Note>
          <div className="col gap-3 mt-3">
            <div>
              <div className="hand-title" style={{fontSize:16}}>1 · The core complementarity</div>
              <div className="ui small mt-1">HYDRO-NL declared a <i className="accent2-text">need for membrane durability data</i> in their challenge block. You declared <i className="accent-text">a membrane test method</i> as one of your offers. Strength: 0.95.</div>
            </div>
            <div>
              <div className="hand-title" style={{fontSize:16}}>2 · You speak the same language</div>
              <div className="ui small mt-1">3 of your top 5 subdomains (PEM, Membrane, Materials char.) appear in HYDRO-NL’s top 5 with similar weights — cosine similarity 0.78.</div>
            </div>
            <div>
              <div className="hand-title" style={{fontSize:16}}>3 · Project stage is right</div>
              <div className="ui small mt-1">HYDRO-NL is at TRL 5 (pilot demonstration). Your “translational / bridging” position fits — methods can be applied without scale-up.</div>
            </div>
          </div>
          <div className="row gap-2 mt-3"><Btn className="accent">Send signal</Btn><Btn>Open in network</Btn></div>
        </Browser>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="Compare two profiles" tag="diff view">
        <Browser title="h2learn.app/compare?a=sara&b=liesbeth">
          <div className="row gap-2">
            <div className="col flex-1 gap-2">
              <div className="sketch-box p-2"><div className="hand-title" style={{fontSize:18}}>Sara A.</div><div className="ui xsmall muted-text">Lecturer-researcher · UvA</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Domains</div><div className="pill-row mt-1">{['Production','Materials','Education'].map(t=><Pill key={t}>{t}</Pill>)}</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Methods</div><div className="pill-row mt-1">{['Lab','LCA','TEA'].map(t=><Pill key={t}>{t}</Pill>)}</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Bottleneck</div><div className="ui small">External · severity 4/5</div></div>
            </div>
            <div className="col flex-1 gap-2">
              <div className="sketch-box p-2"><div className="hand-title" style={{fontSize:18}}>Liesbeth K.</div><div className="ui xsmall muted-text">PI · TU Delft</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Domains</div><div className="pill-row mt-1">{['Production','Materials','Sensors'].map(t=><Pill key={t} className={t==='Sensors'?'warn':'accent'}>{t}</Pill>)}</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Methods</div><div className="pill-row mt-1">{['Lab','LCA','Modelling'].map(t=><Pill key={t} className={t==='Modelling'?'warn':'accent'}>{t}</Pill>)}</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Bottleneck</div><div className="ui small">External · severity 5/5 — same!</div></div>
            </div>
          </div>
          <div className="row gap-3 mt-2 center ui xsmall muted-text" style={{justifyContent:'center'}}>
            <span className="legend-chip"><span className="swatch" style={{background:'#1c5fbf'}}></span> shared</span>
            <span className="legend-chip"><span className="swatch" style={{background:'#d96b2c'}}></span> divergent (potential complementarity)</span>
          </div>
        </Browser>
      </Frame>

      <Frame title="Saved matches / your shortlist" tag="list">
        <Browser title="h2learn.app/saved">
          <div className="hand-title" style={{fontSize:22}}>Saved &amp; in-progress</div>
          <div className="row gap-2 mt-2"><Pill className="accent">All 14</Pill><Pill>People 9</Pill><Pill>Projects 4</Pill><Pill>Orgs 1</Pill></div>
          <div className="col gap-2 mt-3">
            {[
              {n:'HYDRO-NL Pilot', s:'open: signal sent · awaiting reply', t:'comp 88%', c:'#d96b2c'},
              {n:'Liesbeth Klein', s:'in conversation', t:'sim 92%', c:'#1c5fbf'},
              {n:'Bram Janssen', s:'shared bottleneck cluster', t:'anti-dup', c:'#c33a3a'},
              {n:'Nora Helmus', s:'saved · no action', t:'method transfer', c:'#7a6cf0'},
            ].map((r,i)=>(
              <div key={i} className="sketch-box p-2 row gap-3" style={{alignItems:'center'}}>
                <div className="sketch-box thin" style={{width:30,height:30,borderRadius:15, background:r.c, opacity:0.7}}/>
                <div className="col flex-1"><div className="hand-title" style={{fontSize:15}}>{r.n}</div><div className="ui xsmall muted-text">{r.s}</div></div>
                <Pill className={i===0?'warn':i===1?'accent':'muted'}>{r.t}</Pill>
                <Btn>open</Btn>
              </div>
            ))}
          </div>
        </Browser>
      </Frame>
    </div>
  </div>
);
window.MatchTab = MatchTab;