// 03 Dashboard & Profile — three layout directions

const DashboardTab = () => (
  <div>
    <SectionLead
      eyebrow="03 / dashboard &amp; profile"
      title="The logged-in home, the public profile, and where matches surface"
      sub="Three layout directions for the dashboard. Each must answer: what data do I have, what relationships were found, what should I do next?"
    />

    <div className="frame-grid cols-2">
      <Frame title="A — Two-column command center" tag="dashboard option 1">
        <Browser title="h2learn.app/home">
          <div className="row gap-2" style={{minHeight: 360}}>
            {/* sidebar */}
            <div className="sketch-box thin p-2" style={{width: 110}}>
              <div className="hand-title" style={{fontSize:18}}>Sara A.</div>
              <div className="ui xsmall muted-text">Lecturer-researcher</div>
              <Squiggle style={{margin:'8px 0'}}/>
              <div className="col gap-1 ui xsmall">
                {['Home','My profile','Matches','Saved','Network','Settings'].map((m,i)=> (
                  <div key={m} className={'p-2 ' + (i===0 ? 'sketch-box ink-fill' : '')} style={{borderRadius:6, fontFamily:'Kalam', fontSize:13}}>{m}</div>
                ))}
              </div>
            </div>
            {/* main */}
            <div className="col gap-2 flex-1">
              <div className="sketch-box p-3 fill">
                <div className="row between" style={{alignItems:'baseline'}}>
                  <div className="hand-title" style={{fontSize:20}}>Welcome back, Sara</div>
                  <Pill className="accent">12 new matches</Pill>
                </div>
                <div className="row gap-3 mt-2 ui xsmall">
                  <span><b>Profile:</b> 86% complete</span>
                  <span>·</span>
                  <span><b>Visibility:</b> all relevant users</span>
                  <span>·</span>
                  <span className="accent2-text">Add 2 evidence anchors → +14% match power</span>
                </div>
              </div>
              <div className="frame-grid cols-2" style={{gap:8}}>
                <div className="sketch-box p-2">
                  <div className="ui xsmall uppercase">Top matches</div>
                  {['Liesbeth K. · 92% similarity','Project HYDRO-NL · complementary','Bram J. · shared bottleneck'].map(m=>(
                    <div key={m} className="row gap-2 mt-2" style={{alignItems:'center'}}>
                      <div className="sketch-box thin" style={{width:28,height:28,borderRadius:14}}/>
                      <div className="ui xsmall flex-1">{m}</div>
                      <Btn>view</Btn>
                    </div>
                  ))}
                </div>
                <div className="sketch-box p-2">
                  <div className="ui xsmall uppercase">Anti-duplication alert</div>
                  <Note style={{marginTop:6}}><b>2 teams</b> are working on membrane durability protocols — overlap with your project.</Note>
                  <Btn className="accent" style={{marginTop:8}}>See cluster →</Btn>
                </div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Your fingerprint</div>
                <div className="row gap-1 mt-2">
                  {[['PEM',40],['Catalyst',25],['Membrane',20],['SOEC',10],['Mat. char.',5]].map(([n,v]) => (
                    <div key={n} style={{flex:v, height:36, background:'#1c5fbf', opacity:0.3+v/80, border:'1px solid #1a1a1a', display:'flex', alignItems:'flex-end', padding:4}}>
                      <span className="ui xsmall" style={{color:'#fff', fontSize:10}}>{n} {v}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> orientation in one glance. <b>Risk:</b> dense; needs whitespace in hi-fi.</div>
      </Frame>

      <Frame title="B — Feed of insights" tag="dashboard option 2">
        <Browser title="h2learn.app/home">
          <div className="row gap-2" style={{alignItems:'flex-start'}}>
            <div className="col gap-2 flex-1">
              <div className="hand-title" style={{fontSize:22}}>What the system found about your work this week</div>
              <div className="ui xsmall muted-text">Insight cards — actionable, not a notification dump.</div>
              {[
                {kind:'similarity', t:'A close cognitive neighbour appeared', body:'Liesbeth K. (TU Delft) shares 4/5 of your top subdomains with similar weights.', cta:'Open match'},
                {kind:'comp', t:'Your offer matches a stuck team', body:'Project HYDRO-NL needs membrane durability data — your evidence is a fit.', cta:'Send a signal'},
                {kind:'dup', t:'Possible duplication detected', body:'2 teams are running similar pilot protocols. Cluster review available.', cta:'See cluster'},
                {kind:'bridge', t:'You may be a bridge', body:'You are one of 3 actors connecting Education and Industry around hydrogen safety.', cta:'View bridge graph'},
              ].map((c,i)=> (
                <div key={i} className="sketch-box p-3 row gap-3" style={{alignItems:'flex-start'}}>
                  <div className={'sketch-box ' + (c.kind==='similarity'?'hatch-blue':c.kind==='comp'?'hatch-orange':c.kind==='dup'?'hatch-dark':'hatch-green')}
                       style={{width:48, height:48, flexShrink:0, borderRadius:8}}/>
                  <div className="col flex-1">
                    <div className="hand-title" style={{fontSize:18}}>{c.t}</div>
                    <div className="ui small">{c.body}</div>
                    <div className="row gap-2 mt-2"><Btn className="accent">{c.cta}</Btn><Btn>Dismiss</Btn></div>
                  </div>
                </div>
              ))}
            </div>
            <div className="col gap-2" style={{width:170}}>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Profile</div><div className="hand-title" style={{fontSize:24}}>86%</div><div className="ui xsmall muted-text">+14% available</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">In your area</div><div className="hand-title" style={{fontSize:24}}>248</div><div className="ui xsmall muted-text">peers · 41 active</div></div>
              <div className="sketch-box p-2"><div className="ui xsmall uppercase">Your bridges</div><div className="hand-title" style={{fontSize:24}}>3</div><div className="ui xsmall muted-text">cross-sector</div></div>
            </div>
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> immediately conveys “the system is finding things”. <b>Risk:</b> feed-fatigue if poorly tuned.</div>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="C — Map-first dashboard" tag="dashboard option 3 — atlas">
        <Browser title="h2learn.app/home">
          <div style={{position:'relative', height:340, borderRadius:6, overflow:'hidden'}} className="grid-paper">
            <svg viewBox="0 0 600 340" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
              <defs>
                <radialGradient id="d-c1"><stop offset="0%" stopColor="#1c5fbf" stopOpacity="0.35"/><stop offset="100%" stopColor="#1c5fbf" stopOpacity="0"/></radialGradient>
                <radialGradient id="d-c2"><stop offset="0%" stopColor="#d96b2c" stopOpacity="0.35"/><stop offset="100%" stopColor="#d96b2c" stopOpacity="0"/></radialGradient>
                <radialGradient id="d-c3"><stop offset="0%" stopColor="#2a8a5c" stopOpacity="0.32"/><stop offset="100%" stopColor="#2a8a5c" stopOpacity="0"/></radialGradient>
              </defs>
              <circle cx="170" cy="160" r="120" fill="url(#d-c1)"/>
              <circle cx="380" cy="100" r="100" fill="url(#d-c2)"/>
              <circle cx="430" cy="240" r="120" fill="url(#d-c3)"/>
              {/* You node */}
              <circle cx="200" cy="170" r="10" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="2"/>
              <text x="200" y="195" textAnchor="middle" fontFamily="Caveat" fontSize="14">You</text>
              {/* peers */}
              {[[150,140,'P'],[180,200,'P'],[230,150,'P'],[260,180,'P'],[110,170,'P'],[330,90,'pj'],[370,140,'pj'],[420,260,'O'],[450,210,'O'],[300,250,'P']].map(([x,y,k],i)=> (
                <circle key={i} cx={x} cy={y} r="5" fill={k==='P'?'#1c5fbf':k==='pj'?'#d96b2c':'#2a8a5c'} opacity="0.85"/>
              ))}
              {/* edges to user */}
              {[[150,140],[180,200],[230,150],[260,180],[330,90],[370,140]].map(([x,y],i)=>(
                <line key={i} x1="200" y1="170" x2={x} y2={y} stroke="#1c5fbf" strokeWidth={i<2?2.5:1.2} opacity="0.6"/>
              ))}
            </svg>
            {/* floating panels */}
            <div className="sketch-box p-2" style={{position:'absolute', top:12, left:12, width:170}}>
              <div className="hand-title" style={{fontSize:16}}>Sara A.</div>
              <div className="ui xsmall muted-text">3 clusters · 12 new matches</div>
            </div>
            <div className="sketch-box p-2" style={{position:'absolute', bottom:12, right:12, width:200}}>
              <div className="ui xsmall uppercase">Hovered</div>
              <div className="hand-title" style={{fontSize:16}}>Project HYDRO-NL</div>
              <div className="ui xsmall muted-text">complementary · 88%</div>
              <Btn className="accent" style={{marginTop:6}}>Why? →</Btn>
            </div>
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> signature feel; orientation = spatial. <b>Risk:</b> hides KPIs; better as a secondary mode.</div>
      </Frame>

      <Frame title="Public stakeholder profile" tag="profile page">
        <Browser title="h2learn.app/p/sara-arif">
          <div className="row between" style={{alignItems:'flex-start'}}>
            <div className="row gap-3" style={{alignItems:'center'}}>
              <div className="sketch-box thin" style={{width:64,height:64,borderRadius:32}}/>
              <div className="col">
                <div className="hand-title" style={{fontSize:24}}>Sara Arif</div>
                <div className="ui small">Lecturer-researcher · UvA · Hydrogen production</div>
                <div className="row gap-2 mt-1"><Pill>NL · NW</Pill><Pill className="accent">visible</Pill><Pill className="dashed">Bridge</Pill></div>
              </div>
            </div>
            <div className="row gap-2"><Btn>Save</Btn><Btn className="accent">Send signal</Btn></div>
          </div>
          <Squiggle style={{margin:'12px 0'}}/>
          <div className="row gap-3">
            <div className="col flex-2 gap-2">
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Fingerprint</div>
                <div className="row gap-1 mt-2">
                  {[['PEM',40],['Catalyst',25],['Membrane',20],['SOEC',10],['Mat.',5]].map(([n,v])=>(
                    <div key={n} style={{flex:v, height:30, background:'#1c5fbf', opacity:0.3+v/80, border:'1px solid #1a1a1a'}}/>
                  ))}
                </div>
                <div className="row gap-3 mt-1 ui xsmall muted-text"><span>PEM 40</span><span>Catalyst 25</span><span>Membrane 20</span><span>+ 2 more</span></div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Methods · Evidence</div>
                <div className="pill-row mt-2">{['LCA','TEA','Lab exp.','CFD'].map(t=><Pill key={t}>{t}</Pill>)}</div>
                <div className="ui xsmall muted-text mt-2">12 publications · 1 patent · ORCID linked</div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Active project</div>
                <div className="hand-title" style={{fontSize:16}}>GreenH2-PEM Pilot</div>
                <div className="ui xsmall muted-text">TRL 5 · NL · 3 partners</div>
              </div>
            </div>
            <div className="col flex-1 gap-2" style={{minWidth:160}}>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Needs</div>
                <div className="pill-row mt-2">{['Long-term durability data','Industrial test bench'].map(t=><Pill key={t} className="warn">{t}</Pill>)}</div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Offers</div>
                <div className="pill-row mt-2">{['Membrane test method','Curriculum module'].map(t=><Pill key={t} style={{background:'#2a8a5c',color:'#fff',borderColor:'#2a8a5c'}}>{t}</Pill>)}</div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Common with you</div>
                <div className="ui xsmall mt-1">3 shared subdomains · 2 shared methods</div>
                <Btn className="accent" style={{marginTop:6}}>Why we’re a match</Btn>
              </div>
            </div>
          </div>
        </Browser>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="Project profile page" tag="entity profile">
        <Browser title="h2learn.app/project/hydro-nl">
          <div className="row between" style={{alignItems:'flex-start'}}>
            <div className="col">
              <div className="hand-title" style={{fontSize:24}}>HYDRO-NL Pilot</div>
              <div className="ui small">University consortium · 2024–2027</div>
              <div className="row gap-2 mt-2"><Pill style={{background:'#d96b2c',color:'#fff',borderColor:'#d96b2c'}}>Project</Pill><Pill>TRL 5</Pill><Pill>Pilot scale</Pill><Pill>NL</Pill></div>
            </div>
            <Btn className="accent">Connect</Btn>
          </div>
          <div className="frame-grid cols-2 mt-3" style={{gap:8}}>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Stage</div><div className="hand-title" style={{fontSize:18}}>Pilot demonstration</div></div>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Application</div><div className="hand-title" style={{fontSize:18}}>Industrial heat</div></div>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Partners</div><div className="ui small">3 universities · 2 industry · 1 public body</div></div>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Open need</div><div className="ui small accent2-text">Membrane durability evidence</div></div>
          </div>
          <Squiggle style={{margin:'12px 0'}}/>
          <div className="hand-title" style={{fontSize:18}}>Team &amp; matches</div>
          <div className="row gap-2 mt-2 pill-row">{['SaraA','BramJ','LiesbethK','+4'].map(p=><Pill key={p}>{p}</Pill>)}</div>
          <div className="ui xsmall muted-text mt-1">↳ 6 matched stakeholders outside the team · 2 anti-dup alerts</div>
        </Browser>
      </Frame>

      <Frame title="Organization profile" tag="entity profile">
        <Browser title="h2learn.app/org/uva">
          <div className="row gap-3" style={{alignItems:'center'}}>
            <div className="sketch-box thin" style={{width:60,height:60,borderRadius:8}}/>
            <div className="col">
              <div className="hand-title" style={{fontSize:24}}>University of Applied Sciences (UvA)</div>
              <div className="ui small muted-text">Amsterdam · Public · Higher education</div>
            </div>
          </div>
          <div className="frame-grid cols-3 mt-3" style={{gap:8}}>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">People</div><div className="hand-title" style={{fontSize:24}}>34</div></div>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Projects</div><div className="hand-title" style={{fontSize:24}}>11</div></div>
            <div className="sketch-box p-2"><div className="ui xsmall uppercase">Coverage</div><div className="hand-title" style={{fontSize:24}}>7 domains</div></div>
          </div>
          <div className="hand-title mt-3" style={{fontSize:18}}>Domain coverage</div>
          <div className="row gap-1 mt-2">
            {[['Production',38],['Storage',12],['Materials',18],['Education',24],['Policy',8]].map(([n,v])=> (
              <div key={n} style={{flex:v, height:36, background:'#b14fa6', opacity:0.3+v/60, border:'1px solid #1a1a1a'}}/>
            ))}
          </div>
          <div className="ui xsmall muted-text mt-1">Education = 24% — strong bridge institution between research &amp; practice.</div>
        </Browser>
      </Frame>
    </div>
  </div>
);
window.DashboardTab = DashboardTab;