// 04 Discovery Explorer — three layout directions

const ExplorerTab = () => (
  <div>
    <SectionLead
      eyebrow="04 / discovery explorer"
      title="Browse the ecosystem outside the graph"
      sub="Cards / rows / facets. Strong search. ‘Show similar / complementary / shared bottlenecks’ from any item."
    />

    <div className="frame-grid cols-2">
      <Frame title="A — Faceted list (CRM-feel, refined)" tag="explorer option 1">
        <Browser title="h2learn.app/discover">
          <div className="row gap-2" style={{minHeight: 380}}>
            <div className="sketch-box thin p-2" style={{width:170}}>
              <div className="ui xsmall uppercase">Filters</div>
              {[
                ['Entity', ['People','Projects','Orgs']],
                ['Role', ['Researcher','Educator','Industry']],
                ['Domain', ['Production','Storage','Safety','Education']],
                ['Methods', ['LCA','TEA','Lab','Modelling']],
                ['Stage / TRL', ['1–3','4–6','7–9']],
                ['Region', ['NW NL','NL','EU']],
              ].map(([g, opts]) => (
                <div key={g} className="mt-2">
                  <div className="ui xsmall bold uppercase">{g}</div>
                  <div className="col gap-1 mt-1 ui xsmall">
                    {opts.map((o,i)=>(
                      <div key={o} className="check-row"><span className={'box ' + (i===0?'on':'')}/> {o}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div className="col gap-2 flex-1">
              <div className="row gap-2" style={{alignItems:'center'}}>
                <div className="sketch-box thin p-2 flex-1"><FakeLine kind="thin" w="80%"/></div>
                <Btn>Sort: relevance</Btn>
                <Btn className="accent">Save view</Btn>
              </div>
              <div className="row gap-2 ui xsmall pill-row"><span>248 results</span><Pill className="dashed">Person</Pill><Pill className="dashed">Domain: Materials</Pill><Pill className="dashed">×</Pill></div>
              {[
                {n:'Liesbeth Klein', m:'92% similar', sub:'TU Delft · Membranes · PEM 38%'},
                {n:'Bram Janssen',   m:'shared bottleneck', sub:'TNO · Pilot ops · severity 4'},
                {n:'Project HYDRO-NL', m:'88% complementary', sub:'Consortium · TRL 5'},
                {n:'Nora Helmus',    m:'method transfer · digital twins', sub:'HvA · AI / simulation'},
                {n:'Org · GreenLab', m:'bridge org', sub:'cross-sector · 6 actors'},
              ].map((r,i)=>(
                <div key={i} className="sketch-box p-2 row gap-3" style={{alignItems:'center'}}>
                  <div className="sketch-box thin" style={{width:36, height:36, borderRadius:18}}/>
                  <div className="col flex-1">
                    <div className="hand-title" style={{fontSize:16}}>{r.n}</div>
                    <div className="ui xsmall muted-text">{r.sub}</div>
                  </div>
                  <Pill className={i===0?'accent':i===1?'warn':'muted'}>{r.m}</Pill>
                  <Btn>view</Btn>
                </div>
              ))}
            </div>
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> dense, fast scanning. <b>Risk:</b> can feel CRM if visuals stay flat — needs hi-fi treatment.</div>
      </Frame>

      <Frame title="B — Card gallery with fingerprint chips" tag="explorer option 2">
        <Browser title="h2learn.app/discover">
          <div className="row gap-2 mb-2" style={{alignItems:'center'}}>
            <div className="sketch-box thin p-2 flex-1"><FakeLine w="60%" kind="thin"/></div>
            <div className="row gap-1 pill-row">
              {['People','Projects','Orgs','Domains','Methods'].map((t,i)=><Pill key={t} className={i===0?'accent':''}>{t}</Pill>)}
            </div>
          </div>
          <div className="frame-grid cols-3" style={{gap:10}}>
            {[
              {n:'Liesbeth K.', dom:'Membranes', sim:92},
              {n:'Bram J.',     dom:'Pilot ops', sim:78},
              {n:'Nora H.',     dom:'Digital twins', sim:71},
              {n:'Iteke v.H.',  dom:'Cross-sector', sim:68},
              {n:'Lori D.V.',   dom:'Eco-systems', sim:64},
              {n:'Frank d.B.',  dom:'Policy', sim:58},
            ].map((c,i)=>(
              <div key={i} className="sketch-box p-2">
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <div className="sketch-box thin" style={{width:30,height:30,borderRadius:15}}/>
                  <div className="col">
                    <div className="hand-title" style={{fontSize:15}}>{c.n}</div>
                    <div className="ui xsmall muted-text">{c.dom}</div>
                  </div>
                </div>
                <div className="row gap-1 mt-2">
                  {[40,25,20,10,5].map((v,k)=>(
                    <div key={k} style={{flex:v, height:8, background:'#1c5fbf', opacity:0.3+k/8, border:'1px solid #1a1a1a'}}/>
                  ))}
                </div>
                <div className="row between mt-2 ui xsmall">
                  <span>{c.sim}% similar</span>
                  <span className="accent-text">view →</span>
                </div>
              </div>
            ))}
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> personable; fingerprint visible per card. <b>Risk:</b> lower density.</div>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="C — Matrix / heatmap (power user)" tag="explorer option 3">
        <Browser title="h2learn.app/discover/matrix">
          <div className="ui xsmall muted-text mb-2">Rows = your peers · Columns = subdomains · Cell intensity = expertise weight</div>
          <table style={{width:'100%', borderCollapse:'collapse', fontFamily:'Inter', fontSize:11}}>
            <thead>
              <tr>
                <th></th>
                {['PEM','Cat.','Membr.','SOEC','Mat.','LCA','TEA'].map(c=><th key={c} style={{transform:'rotate(-30deg)', height:50, width:46, textAlign:'left'}}>{c}</th>)}
              </tr>
            </thead>
            <tbody>
              {[
                ['Liesbeth K.', [40,30,20,5,5,0,0]],
                ['Bram J.',     [10,5,15,0,5,30,35]],
                ['Nora H.',     [25,10,15,5,0,20,25]],
                ['Iteke v.H.',  [0,0,5,0,0,20,15]],
                ['Lori D.V.',   [0,0,0,0,5,15,40]],
                ['Frank d.B.',  [10,0,5,0,0,30,30]],
              ].map(([n, vals],i)=>(
                <tr key={i} style={{borderTop:'1px solid var(--rule-soft)'}}>
                  <td style={{padding:4, fontFamily:'Kalam', fontSize:13}}>{n}</td>
                  {vals.map((v,j)=>(
                    <td key={j} style={{padding:0, height:30, width:46}}>
                      <div style={{height:'100%', width:'100%', background:`rgba(28,95,191,${v/50})`, border:'1px solid rgba(0,0,0,0.08)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Inter', fontSize:10, color: v>20?'#fff':'#1a1a1a'}}>
                        {v>0 ? v : ''}
                      </div>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
          <Note style={{marginTop:10}}>Toggle to <b>need ↔ offer</b> matrix, or <b>shared bottleneck</b> matrix. Click a cell → focused match.</Note>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> analyst superpower. <b>Risk:</b> intimidating — should be a mode, not the default.</div>
      </Frame>

      <Frame title="Search results — quick preview" tag="search">
        <Browser title="h2learn.app/search?q=membrane+durability">
          <div className="row gap-2" style={{alignItems:'center'}}>
            <div className="sketch-box thin p-2 flex-1">
              <span className="ui small">membrane durability</span>
            </div>
            <Pill>People (8)</Pill><Pill>Projects (3)</Pill><Pill>Domains (1)</Pill>
          </div>
          <div className="row gap-2 mt-3">
            <div className="col gap-2 flex-1">
              {[
                {kind:'Domain', n:'Membrane durability', sub:'12 contributors · 3 active projects'},
                {kind:'Person', n:'Liesbeth Klein', sub:'TU Delft · 38% weight on this'},
                {kind:'Project', n:'GreenH2-PEM Pilot', sub:'TRL 5 · 5 needs · 2 offers'},
              ].map((r,i)=>(
                <div key={i} className="sketch-box p-2 row gap-2" style={{alignItems:'center'}}>
                  <Pill className="muted">{r.kind}</Pill>
                  <div className="col flex-1"><div className="hand-title" style={{fontSize:16}}>{r.n}</div><div className="ui xsmall muted-text">{r.sub}</div></div>
                  <Btn>open</Btn>
                </div>
              ))}
            </div>
            <div className="sketch-box p-2" style={{width:200}}>
              <div className="ui xsmall uppercase">Preview</div>
              <div className="hand-title" style={{fontSize:18}}>Membrane durability</div>
              <div className="ui xsmall muted-text">Subdomain · under Production</div>
              <div className="row gap-1 mt-2 pill-row"><Pill className="dashed">12 ppl</Pill><Pill className="dashed">3 proj</Pill></div>
              <Btn className="accent" style={{marginTop:8}}>Open in Network →</Btn>
            </div>
          </div>
        </Browser>
      </Frame>
    </div>
  </div>
);
window.ExplorerTab = ExplorerTab;