// 00 SYSTEM tab — vision, IA, data model, matching pipeline. Diagram-heavy.

const SystemTab = () => (
  <div>
    <SectionLead
      eyebrow="00 / system"
      title="Product vision, information architecture &amp; data flow"
      sub="Before any pixel: the conceptual scaffolding. What the product is, what data it produces, how relationships are derived, and how every screen ties back to the database. Read this first."
    />

    {/* Vision band */}
    <div className="frame-grid cols-3" style={{marginBottom: 24}}>
      <Frame title="What it is" tag="vision">
        <Note>A lightweight, human-in-the-loop matchmaker for the hydrogen learning ecosystem — discovery + matching, not a heavy platform.</Note>
        <div className="mt-3 col gap-2 ui small">
          <div><b>NOT:</b> survey clone · CRM · social network · decorative graph</div>
          <div><b>IS:</b> guided profiling → structured DB → explainable matches → graph exploration</div>
        </div>
      </Frame>
      <Frame title="Who it's for" tag="users">
        <div className="pill-row">
          <Pill>Researchers</Pill><Pill>PhD candidates</Pill><Pill>Lecturers</Pill>
          <Pill>Project leads</Pill><Pill>Innovation mgrs</Pill><Pill>Industry actors</Pill>
          <Pill>Public sector</Pill><Pill>Bridge-builders</Pill>
          <Pill className="dashed">Curators (admin)</Pill>
        </div>
      </Frame>
      <Frame title="6 match types" tag="logic">
        <div className="col gap-2 small">
          <div className="row gap-2"><Pill className="accent">Similarity</Pill><span className="muted-text ui">overlap of domains/methods</span></div>
          <div className="row gap-2"><Pill className="warn">Complementarity</Pill><span className="muted-text ui">need ↔ offer</span></div>
          <div className="row gap-2"><Pill style={{background:'#c33a3a',color:'#fff',borderColor:'#c33a3a'}}>Anti-duplication</Pill><span className="muted-text ui">same blocker, parallel work</span></div>
          <div className="row gap-2"><Pill style={{background:'#2a8a5c',color:'#fff',borderColor:'#2a8a5c'}}>Bridge</Pill><span className="muted-text ui">cross-sector connector</span></div>
          <div className="row gap-2"><Pill style={{background:'#7a6cf0',color:'#fff',borderColor:'#7a6cf0'}}>Method transfer</Pill><span className="muted-text ui">your method, their problem</span></div>
          <div className="row gap-2"><Pill style={{background:'#c9a227',color:'#fff',borderColor:'#c9a227'}}>Shared uncertainty</Pill><span className="muted-text ui">co-learning</span></div>
        </div>
      </Frame>
    </div>

    {/* Information architecture */}
    <Frame title="Information architecture" tag="sitemap" style={{marginBottom: 24}}>
      <svg viewBox="0 0 1100 380" style={{width:'100%', height:'auto'}}>
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="#3a3a3a"/>
          </marker>
        </defs>
        {/* root */}
        <rect x="470" y="10" width="160" height="46" rx="10" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="1.6"/>
        <text x="550" y="32" textAnchor="middle" fontFamily="Caveat" fontSize="22" fontWeight="700">H2Learn app</text>
        <text x="550" y="48" textAnchor="middle" fontFamily="Inter" fontSize="10" fill="#666">root</text>

        {/* major branches */}
        {[
          ['Landing',         60,  120],
          ['Auth',            210, 120],
          ['Onboarding Q.',  360, 120],
          ['Dashboard',       510, 120],
          ['Discovery',       660, 120],
          ['Network',         810, 120],
          ['Admin',           960, 120],
        ].map(([l,x,y]) => (
          <g key={l}>
            <line x1="550" y1="56" x2={x+60} y2={y} stroke="#3a3a3a" strokeWidth="1.2"/>
            <rect x={x} y={y} width="120" height="34" rx="8" fill="#fbfaf6" stroke="#1a1a1a" strokeWidth="1.4"/>
            <text x={x+60} y={y+22} textAnchor="middle" fontFamily="Kalam" fontSize="14">{l}</text>
          </g>
        ))}
        {/* sub branches under each */}
        {[
          [60, ['Pitch','Modules','Login']],
          [210,['Sign in','Sign up','SSO']],
          [360,['Identity','Knowledge','Project','Challenges','Bottlenecks','Uncertainty','Evidence','Review']],
          [510,['My profile','Completion','Recent matches','Saved','Settings']],
          [660,['Search','Filters','Cards','Compare','Saved views']],
          [810,['Force','Cluster','Focus','Path','Anti-dup','Need-Offer']],
          [960,['Review queue','Taxonomy','Matches','Health']],
        ].map(([x, items]) => (
          <g key={x}>
            {items.map((item, i) => (
              <g key={item}>
                <line x1={x+60} y1="154" x2={x+60} y2={170 + i*20 - 4} stroke="#bdbab0" strokeWidth="1"/>
                <line x1={x+60} y1={170 + i*20 - 4} x2={x+30} y2={170 + i*20 - 4} stroke="#bdbab0" strokeWidth="1"/>
                <text x={x+26} y={170 + i*20} textAnchor="end" fontFamily="Inter" fontSize="11" fill="#3a3a3a">{item}</text>
              </g>
            ))}
          </g>
        ))}
      </svg>
    </Frame>

    {/* Data pipeline */}
    <Frame title="Data pipeline — questionnaire → relationships → graph" tag="how it works" style={{marginBottom: 24}}>
      <svg viewBox="0 0 1100 240" style={{width:'100%'}}>
        {[
          ['1','Questionnaire',60, 'Identity / Knowledge / Project /\nChallenges / Bottlenecks / Uncertainty / Evidence', '#fff7cc'],
          ['2','Normalize',230, 'Map answers → entities & tags\n(taxonomy-controlled)', '#fbfaf6'],
          ['3','Profile signals',400, 'Weighted fingerprint\nNeeds / Offers vectors', '#fbfaf6'],
          ['4','Compare',570, 'Cosine · Jaccard · need↔offer\nbridge · centrality', '#fbfaf6'],
          ['5','Relationship edges',740, 'type · strength · evidence\nexplainable signals', '#fbfaf6'],
          ['6','Graph + matches',910, 'Network view\n+ ranked match list', '#dceaff'],
        ].map(([n,t,x,sub,bg]) => (
          <g key={n}>
            <rect x={x} y="60" width="160" height="120" rx="10" fill={bg} stroke="#1a1a1a" strokeWidth="1.6"/>
            <circle cx={x+22} cy="80" r="14" fill="#1a1a1a"/>
            <text x={x+22} y="85" textAnchor="middle" fontFamily="Caveat" fontSize="20" fontWeight="700" fill="#fff">{n}</text>
            <text x={x+44} y="86" fontFamily="Caveat" fontSize="20" fontWeight="700">{t}</text>
            {sub.split('\n').map((s, i) => (
              <text key={i} x={x+12} y={108 + i*14} fontFamily="Inter" fontSize="10.5" fill="#3a3a3a">{s}</text>
            ))}
            {x < 910 && (
              <g>
                <path d={`M${x+160},120 C${x+185},100 ${x+185},140 ${x+225},120`} stroke="#d96b2c" strokeWidth="1.6" fill="none" markerEnd="url(#arr2)"/>
              </g>
            )}
          </g>
        ))}
        <defs>
          <marker id="arr2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="#d96b2c"/>
          </marker>
        </defs>
        <text x="550" y="220" textAnchor="middle" fontFamily="Caveat" fontSize="18" fill="#3a3a3a">human-in-the-loop · transparent · explainable · re-runnable</text>
      </svg>
    </Frame>

    {/* Conceptual data model */}
    <div className="frame-grid cols-2" style={{marginBottom: 24}}>
      <Frame title="Conceptual data model" tag="entities">
        <svg viewBox="0 0 540 420" style={{width:'100%'}}>
          {/* entities laid out */}
          {[
            ['User',         50, 30,  '#fff7cc'],
            ['PersonProfile',180, 30, '#dceaff'],
            ['Organization',360, 30, '#d8efe2'],
            ['Project',      270,120, '#fde2cf'],
            ['KnowledgeDomain', 50,200,'#f0e0ee'],
            ['Subdomain',    180,200, '#f0e0ee'],
            ['ExpertiseTag', 310,200, '#f0e0ee'],
            ['Method',       430,200, '#e3e0fa'],
            ['Challenge',     30,310, '#fcdcdc'],
            ['Bottleneck',   140,310, '#e3e3e3'],
            ['Uncertainty',  255,310, '#fbeec1'],
            ['Need',         360,310, '#fde2cf'],
            ['Offer',        450,310, '#dceaff'],
            ['EvidenceAnchor', 30,380, '#fff7cc'],
            ['Match',        185,380, '#dceaff'],
            ['RelationshipEdge', 320,380, '#dceaff'],
          ].map(([n,x,y,bg]) => (
            <g key={n}>
              <rect x={x} y={y} width="115" height="36" rx="6" fill={bg} stroke="#1a1a1a" strokeWidth="1.4"/>
              <text x={x+57.5} y={y+22} textAnchor="middle" fontFamily="Inter" fontSize="11" fontWeight="600">{n}</text>
            </g>
          ))}
          {/* relationships (subset, schematic) */}
          {[
            [107,30,237,30,'has'],
            [237,48,300,120,'works on'],
            [237,48,360,30,'@'],
            [237,48,107,200,'expert in'],
            [237,48,367,200,'tag'],
            [237,48,487,200,'uses'],
            [237,48,87,310,'faces'],
            [237,48,197,310,'blocked by'],
            [237,48,312,310,'navigates'],
            [237,48,417,310,'needs'],
            [237,48,507,310,'offers'],
            [237,48,87,380,'evidence'],
            [237,48,242,380,'matched'],
            [237,48,377,380,'edge'],
          ].map(([x1,y1,x2,y2,l],i) => (
            <g key={i}>
              <path d={`M${x1},${y1} Q ${(x1+x2)/2},${(y1+y2)/2 - 10} ${x2},${y2}`}
                    stroke="#9a978d" strokeWidth="1" fill="none" strokeDasharray="2 3"/>
            </g>
          ))}
        </svg>
        <div className="ui xsmall muted-text mt-2">Schematic — not a full ER diagram. Spine: <b>PersonProfile</b> connects to everything; <b>RelationshipEdge</b> stores derived links (type, strength, signals, explanation).</div>
      </Frame>

      <Frame title="Questionnaire → DB mapping" tag="extraction">
        <table className="ui small" style={{width:'100%', borderCollapse:'collapse', fontFamily:'Inter'}}>
          <thead>
            <tr style={{borderBottom:'1.4px solid #1a1a1a'}}>
              <th style={{textAlign:'left', padding:'6px 4px'}}>Questionnaire item</th>
              <th style={{textAlign:'left', padding:'6px 4px'}}>Maps to</th>
              <th style={{textAlign:'left', padding:'6px 4px'}}>Used in</th>
            </tr>
          </thead>
          <tbody>
            {[
              ['Q: Primary role','PersonProfile.role','filtering · clustering'],
              ['Q: Hydrogen value-chain','PersonProfile.valueChain[]','first-layer cluster'],
              ['Q: Knowledge domains (≤5)','HAS_DOMAIN','cosine sim'],
              ['Q: Subdomains (≤7)','HAS_SUBDOMAIN','fingerprint'],
              ['Q: Expertise weighting (100 pts)','SUBDOMAIN.weight','weighted similarity'],
              ['Q: Methods used','USES Method','method-transfer'],
              ['Q: Output/evidence','EvidenceAnchor','trust score'],
              ['Q: Project stage / TRL','Project.stage / .trl','project compatibility'],
              ['Q: Current challenge','FACES Challenge','anti-dup'],
              ['Q: Main bottleneck','HAS_BOTTLENECK','anti-dup · need'],
              ['Q: Uncertainty','NAVIGATES Uncertainty','co-learning'],
              ['Q: Cross-sector orientation','PersonProfile.bridgeScore','bridge match'],
              ['Q: Visibility preference','PersonProfile.visibility','privacy gating'],
            ].map((r,i) => (
              <tr key={i} style={{borderBottom:'1px dashed #cfcabc'}}>
                <td style={{padding:'5px 4px', fontFamily:'Kalam'}}>{r[0]}</td>
                <td style={{padding:'5px 4px'}}><code style={{fontSize:11}}>{r[1]}</code></td>
                <td style={{padding:'5px 4px', color:'#8a8780'}}>{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Frame>
    </div>

    {/* Matching algorithms */}
    <Frame title="Matching algorithms — explainable, not black-box" tag="formulas" style={{marginBottom: 24}}>
      <div className="frame-grid cols-3">
        {[
          {n:'Weighted similarity', f:'cosine(weighted subdomain vectors)', use:'who works on the same things, in the same proportion'},
          {n:'Category overlap', f:'Jaccard(domains) · Jaccard(methods) · Jaccard(sectors)', use:'who shares a vocabulary'},
          {n:'Need ↔ Offer', f:'count(needsᵢ ∩ offersⱼ) + reverse', use:'practical complementarity, the highest-value match'},
          {n:'Project compatibility', f:'distance(stage, TRL, scale, application)', use:'projects ready to talk to each other'},
          {n:'Anti-duplication', f:'sim(challenges) × sim(bottlenecks) > τ', use:'two teams hitting the same wall'},
          {n:'Shared uncertainty', f:'overlap(uncertainty domains) · planning horizon', use:'co-learning candidates'},
          {n:'Bridge detection', f:'high cross-sector ties / low intra-cluster only', use:'connectors who knit the ecosystem'},
          {n:'Method transfer', f:'A.method ∩ B.challengeNeedsMethod', use:'one person\'s tool is another\'s missing piece'},
          {n:'Centrality', f:'betweenness · degree · eigenvector', use:'graph health; spotlight hubs &amp; isolates'},
        ].map(a => (
          <div key={a.n} className="sketch-box p-3">
            <div className="hand-title" style={{fontSize:18}}>{a.n}</div>
            <code className="ui" style={{fontSize:11, background:'#fff7cc', padding:'2px 6px', borderRadius:3, display:'inline-block', marginTop:4}}>{a.f}</code>
            <div className="ui small muted-text mt-2">{a.use}</div>
          </div>
        ))}
      </div>
      <Note style={{marginTop:14, maxWidth:840}}>Every edge stores: <b>source · target · type · strength (0–1) · signals[] · explanation · confidence · curator-reviewed?</b> The explanation is shown verbatim in the “Why this match” panel — no black box.</Note>
    </Frame>

    {/* Visual semantics legend */}
    <Frame title="Network visual semantics — encoding cheat sheet" tag="design system / graph">
      <div className="frame-grid cols-2">
        <div>
          <div className="ui small bold mb-2 uppercase">Node encoding</div>
          <div className="col gap-2">
            <div className="row gap-2" style={{alignItems:'center'}}>
              <span className="legend-chip"><span className="swatch" style={{background:'#1c5fbf'}}/>Person</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#d96b2c'}}/>Project</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#2a8a5c'}}/>Organization</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#b14fa6'}}/>Domain</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#7a6cf0'}}/>Method</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#c33a3a'}}/>Challenge</span>
              <span className="legend-chip"><span className="swatch" style={{background:'#c9a227'}}/>Uncertainty</span>
            </div>
            <div className="ui small muted-text mt-2">Size = profile completeness · centrality. Glow = recommended match. Halo = newly added.</div>
          </div>
        </div>
        <div>
          <div className="ui small bold mb-2 uppercase">Edge encoding</div>
          <svg viewBox="0 0 380 130" style={{width:'100%', maxWidth:420}}>
            <line x1="20" y1="20" x2="120" y2="20" stroke="#1c5fbf" strokeWidth="3.5"/>
            <text x="135" y="24" fontFamily="Inter" fontSize="11">strong similarity</text>
            <line x1="20" y1="48" x2="120" y2="48" stroke="#1c5fbf" strokeWidth="1.4"/>
            <text x="135" y="52" fontFamily="Inter" fontSize="11">weak similarity</text>
            <line x1="20" y1="76" x2="120" y2="76" stroke="#d96b2c" strokeWidth="2.5"/>
            <text x="135" y="80" fontFamily="Inter" fontSize="11">complementarity</text>
            <line x1="20" y1="104" x2="120" y2="104" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
            <text x="135" y="108" fontFamily="Inter" fontSize="11">anti-duplication (alert)</text>

            <line x1="220" y1="20" x2="320" y2="20" stroke="#2a8a5c" strokeWidth="2.5"/>
            <text x="225" y="38" fontFamily="Inter" fontSize="11">bridge</text>
            <line x1="220" y1="56" x2="320" y2="56" stroke="#7a6cf0" strokeWidth="2"/>
            <text x="225" y="74" fontFamily="Inter" fontSize="11">method transfer</text>
            <line x1="220" y1="92" x2="320" y2="92" stroke="#c9a227" strokeWidth="2" strokeDasharray="2 3"/>
            <text x="225" y="110" fontFamily="Inter" fontSize="11">shared uncertainty</text>
          </svg>
        </div>
      </div>
    </Frame>
  </div>
);
window.SystemTab = SystemTab;