// 05 Network — the hero. Four directions of the visualization.

const NetworkTab = () => (
  <div>
    <SectionLead
      eyebrow="05 / network — hero feature"
      title="Four directions for the ecosystem map"
      sub="Goal: replace the HvA-style flat circle with something exploratory, immersive, and meaningful. Each direction encodes the same data; tested side-by-side here so we can pick a primary."
    />

    {/* Force-directed atlas */}
    <div className="frame-grid cols-2">
      <Frame title="A — Force-directed atlas with cluster halos" tag="primary candidate">
        <Browser title="h2learn.app/network">
          <NetworkChrome>
            <ForceAtlas/>
          </NetworkChrome>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> reads like an atlas; clusters legible at any zoom. <b>Risk:</b> mechanics need polish to avoid hairball at full scale.</div>
      </Frame>

      <Frame title="B — Concentric / orbital layout" tag="ecosystem rings">
        <Browser title="h2learn.app/network?layout=orbit">
          <NetworkChrome>
            <OrbitalLayout/>
          </NetworkChrome>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> encodes ecosystem position (research → bridge → practice) on the radius. <b>Risk:</b> rigid; less expressive for ad-hoc exploration.</div>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="C — Focus mode: one stakeholder at the centre" tag="ego-network">
        <Browser title="h2learn.app/network?focus=sara-arif">
          <NetworkChrome>
            <FocusMode/>
          </NetworkChrome>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> personal, immediate “my neighbourhood”. <b>Use as:</b> default landing into network from a profile.</div>
      </Frame>

      <Frame title="D — Anti-duplication / cluster review" tag="curator + alert mode">
        <Browser title="h2learn.app/network?mode=anti-dup">
          <NetworkChrome modeLabel="ANTI-DUPLICATION">
            <AntiDup/>
          </NetworkChrome>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Strength:</b> answers “who’s solving the same thing?” at a glance. Edges are pulsing red dashes.</div>
      </Frame>
    </div>

    {/* Side panel + path view */}
    <div className="frame-grid cols-2 mt-4">
      <Frame title="Node detail drawer + relationship explanation" tag="interaction">
        <Browser title="h2learn.app/network">
          <div className="row gap-2" style={{minHeight: 360}}>
            <div className="sketch-box thin grid-paper flex-1" style={{minHeight: 360, position:'relative', overflow:'hidden'}}>
              <svg viewBox="0 0 460 360" style={{width:'100%', height:'100%'}}>
                {/* light scatter behind */}
                {Array.from({length: 26}).map((_,i)=> {
                  const x=20+Math.random()*420, y=20+Math.random()*320;
                  return <circle key={i} cx={x} cy={y} r={2+Math.random()*3} fill="#1c5fbf" opacity={0.25}/>;
                })}
                <Edge x1={140} y1={180} x2={250} y2={180} kind="comp" strength={3.5} glow/>
                <Node x={140} y={180} kind="me" r={18} label="You · Sara"/>
                <Node x={250} y={180} kind="project" r={16} label="HYDRO-NL" glow/>
                <Node x={120} y={90}  kind="person" r={11} label="Liesbeth K."/>
                <Node x={210} y={90}  kind="domain" r={9} label="Membranes"/>
                <Node x={70}  y={250} kind="person" r={10} label="Bram J."/>
                <Node x={300} y={300} kind="org"    r={12} label="GreenLab"/>
                <Edge x1={140} y1={180} x2={120} y2={90} kind="sim" strength={2.4}/>
                <Edge x1={140} y1={180} x2={210} y2={90} kind="sim" strength={1.6} dashed/>
                <Edge x1={140} y1={180} x2={70} y2={250} kind="dup" strength={2}/>
                <Edge x1={250} y1={180} x2={300} y2={300} kind="bridge" strength={2}/>
              </svg>
              <div style={{position:'absolute', top:8, left:8}}>
                <div className="row gap-1 pill-row"><Pill className="muted">force</Pill><Pill className="muted">circle</Pill><Pill className="muted">cluster</Pill></div>
              </div>
            </div>
            <div className="col gap-2" style={{width:240}}>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Selected · Project</div>
                <div className="hand-title" style={{fontSize:18}}>HYDRO-NL Pilot</div>
                <div className="ui xsmall muted-text">TRL 5 · NL · 7 members</div>
                <div className="pill-row mt-2"><Pill className="warn">complementary 88%</Pill></div>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Why connected to you</div>
                <ul className="ui xsmall" style={{paddingLeft:16, fontFamily:'Inter', margin:'6px 0 0'}}>
                  <li>Their <b>need</b>: membrane durability data</li>
                  <li>Your <b>offer</b>: membrane test method</li>
                  <li>Shared subdomain: PEM</li>
                  <li>Method overlap: LCA</li>
                </ul>
                <Btn className="accent" style={{marginTop:8}}>Open match →</Btn>
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Show shortest path</div>
                <div className="ui xsmall mt-1"><b>You → Liesbeth → HYDRO-NL</b></div>
                <div className="ui xsmall muted-text">2 hops · via Membranes domain</div>
              </div>
            </div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Filters &amp; relationship-type toggles" tag="control surface">
        <Browser title="h2learn.app/network">
          <div className="row gap-2">
            <div className="col gap-2" style={{width:170}}>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Show</div>
                {['Person','Project','Org','Domain','Method','Challenge','Bottleneck','Uncertainty'].map((t,i)=>(
                  <div key={t} className="check-row mt-1"><span className={'box ' + (i<5?'on':'')}/> <span className="ui xsmall">{t}</span></div>
                ))}
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Relationship</div>
                {[['Similarity','#1c5fbf'],['Complementarity','#d96b2c'],['Anti-dup','#c33a3a'],['Bridge','#2a8a5c'],['Method transfer','#7a6cf0'],['Shared uncertainty','#c9a227']].map(([t,c],i)=>(
                  <div key={t} className="check-row mt-1"><span className={'box ' + (i<3?'on':'')} style={i<3?{background:c}:{}}/> <span className="ui xsmall">{t}</span></div>
                ))}
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Strength ≥</div>
                <div className="row gap-1 mt-1">{[0.2,0.4,0.6,0.8].map(v=> <Pill key={v} className={v===0.4?'accent':''} style={{fontSize:11}}>{v}</Pill>)}</div>
              </div>
            </div>
            <div className="sketch-box thin grid-paper flex-1" style={{minHeight:330, position:'relative'}}>
              <svg viewBox="0 0 380 320" style={{width:'100%', height:'100%'}}>
                {[[60,80,'pj'],[120,40,'p'],[200,70,'p'],[260,40,'d'],[330,90,'p'],[300,170,'pj'],[230,200,'p'],[150,180,'me'],[80,210,'p'],[60,270,'o'],[170,260,'pj'],[280,260,'p'],[330,200,'d']].map(([x,y,k],i)=>{
                  const colors = {p:'#1c5fbf',pj:'#d96b2c',o:'#2a8a5c',d:'#b14fa6',me:'#1a1a1a'};
                  return <circle key={i} cx={x} cy={y} r={k==='me'?11:6} fill={colors[k]} stroke="#1a1a1a" strokeWidth="1"/>
                })}
                {[[150,180,60,80],[150,180,120,40],[150,180,200,70],[150,180,300,170],[150,180,230,200],[150,180,80,210],[150,180,170,260],[200,70,260,40],[300,170,330,200],[300,170,280,260],[60,80,60,270]].map(([x1,y1,x2,y2],i)=>(
                  <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={i%4===0?'#d96b2c':'#1c5fbf'} strokeWidth={1+Math.random()*2} opacity="0.7"/>
                ))}
              </svg>
              <div className="ui xsmall muted-text" style={{position:'absolute', bottom:6, right:8}}>62 nodes · 134 edges · zoom 1.0×</div>
            </div>
          </div>
          <Note style={{marginTop:10}}>Toggle <b>Anti-dup</b> on → red dashed edges only. Toggle <b>Bridge</b> on → only cross-cluster edges. The graph stays meaningful at any filter combination.</Note>
        </Browser>
      </Frame>
    </div>

    {/* Need-Offer + Path */}
    <div className="frame-grid cols-2 mt-4">
      <Frame title="Need-Offer Sankey-like map" tag="alt view">
        <Browser title="h2learn.app/network?mode=need-offer">
          <div className="sketch-box thin p-3" style={{minHeight: 320}}>
            <svg viewBox="0 0 600 300" style={{width:'100%', height:'100%'}}>
              {/* needs side */}
              <text x="80" y="20" fontFamily="Caveat" fontSize="18" fontWeight="700">Needs</text>
              <text x="500" y="20" fontFamily="Caveat" fontSize="18" fontWeight="700">Offers</text>
              {[
                ['Durability data',60, 'Membrane test method',60],
                ['Test bench',110, 'Lab access',120],
                ['Curriculum module',160, 'Teaching package',180],
                ['Industry partner',210, 'Pilot site',240],
                ['LCA expertise',260, 'LCA practitioner',280],
              ].map(([n,y1,o,y2],i) => (
                <g key={i}>
                  <rect x="20" y={y1-10} width="140" height="20" fill="#fde2cf" stroke="#1a1a1a"/>
                  <text x="30" y={y1+4} fontFamily="Inter" fontSize="11">{n}</text>
                  <rect x="440" y={y2-10} width="150" height="20" fill="#dceaff" stroke="#1a1a1a"/>
                  <text x="450" y={y2+4} fontFamily="Inter" fontSize="11">{o}</text>
                  <path d={`M160,${y1} C300,${y1} 300,${y2} 440,${y2}`} stroke="#d96b2c" strokeWidth={2+Math.random()*2} fill="none" opacity="0.7"/>
                </g>
              ))}
            </svg>
          </div>
          <div className="ui xsmall muted-text mt-2">Hover a flow → highlights both stakeholders. Strength = thickness.</div>
        </Browser>
      </Frame>

      <Frame title="Shortest path between two stakeholders" tag="path mode">
        <Browser title="h2learn.app/network?path=sara,bram">
          <div className="sketch-box thin grid-paper p-3" style={{minHeight: 280, position:'relative'}}>
            <svg viewBox="0 0 600 240" style={{width:'100%', height:'100%'}}>
              <Node x={60} y={120} r={16} kind="me" label="You · Sara"/>
              <Node x={200} y={80} r={11} kind="domain" label="PEM"/>
              <Node x={340} y={140} r={11} kind="person" label="Liesbeth"/>
              <Node x={480} y={100} r={14} kind="project" label="HYDRO-NL"/>
              <Node x={540} y={170} r={12} kind="person" label="Bram"/>
              <Edge x1={60} y1={120} x2={200} y2={80} kind="sim" strength={3.5} glow/>
              <Edge x1={200} y1={80} x2={340} y2={140} kind="sim" strength={3.5} glow/>
              <Edge x1={340} y1={140} x2={480} y2={100} kind="comp" strength={3.5} glow/>
              <Edge x1={480} y1={100} x2={540} y2={170} kind="bridge" strength={3.5} glow/>
              {/* faint background nodes */}
              {Array.from({length:14}).map((_,i)=>(
                <circle key={i} cx={60+Math.random()*500} cy={20+Math.random()*200} r="3" fill="#bdbab0"/>
              ))}
            </svg>
          </div>
          <div className="row gap-2 mt-2 ui xsmall">
            <Pill className="accent">4 hops</Pill>
            <span>via PEM → Liesbeth → HYDRO-NL → Bram</span>
            <span className="muted-text">· total strength 0.78</span>
          </div>
        </Browser>
      </Frame>
    </div>
  </div>
);

const NetworkChrome = ({modeLabel, children}) => (
  <div>
    <div className="row between mb-2" style={{alignItems:'center'}}>
      <div className="row gap-2" style={{alignItems:'center'}}>
        <div className="row gap-1 pill-row">
          <Pill className="accent">Force</Pill><Pill>Circle</Pill><Pill>Cluster</Pill><Pill>Map</Pill>
        </div>
        <span className="ui xsmall muted-text">layout</span>
      </div>
      <div className="row gap-2"><Pill className="muted">Search node</Pill>{modeLabel && <Pill className="warn">{modeLabel}</Pill>}<Pill>Save view</Pill></div>
    </div>
    {children}
  </div>
);

const ForceAtlas = () => (
  <div className="sketch-box thin grid-paper" style={{minHeight: 360, position:'relative', overflow:'hidden'}}>
    <svg viewBox="0 0 600 360" style={{width:'100%', height:'100%'}}>
      <defs>
        <radialGradient id="ng-c1"><stop offset="0%" stopColor="#1c5fbf" stopOpacity="0.32"/><stop offset="100%" stopColor="#1c5fbf" stopOpacity="0"/></radialGradient>
        <radialGradient id="ng-c2"><stop offset="0%" stopColor="#d96b2c" stopOpacity="0.28"/><stop offset="100%" stopColor="#d96b2c" stopOpacity="0"/></radialGradient>
        <radialGradient id="ng-c3"><stop offset="0%" stopColor="#2a8a5c" stopOpacity="0.28"/><stop offset="100%" stopColor="#2a8a5c" stopOpacity="0"/></radialGradient>
        <radialGradient id="ng-c4"><stop offset="0%" stopColor="#b14fa6" stopOpacity="0.25"/><stop offset="100%" stopColor="#b14fa6" stopOpacity="0"/></radialGradient>
      </defs>
      <circle cx="160" cy="140" r="120" fill="url(#ng-c1)"/>
      <circle cx="430" cy="120" r="100" fill="url(#ng-c2)"/>
      <circle cx="460" cy="260" r="110" fill="url(#ng-c3)"/>
      <circle cx="220" cy="290" r="80"  fill="url(#ng-c4)"/>
      <text x="160" y="40" textAnchor="middle" fontFamily="Caveat" fontSize="18" fill="#1c5fbf">Production / Materials</text>
      <text x="430" y="32" textAnchor="middle" fontFamily="Caveat" fontSize="18" fill="#d96b2c">Projects / Pilots</text>
      <text x="490" y="335" textAnchor="middle" fontFamily="Caveat" fontSize="18" fill="#2a8a5c">Orgs / Bridges</text>
      <text x="220" y="345" textAnchor="middle" fontFamily="Caveat" fontSize="18" fill="#b14fa6">Education / Domains</text>

      {/* nodes */}
      {Array.from({length: 60}).map((_,i)=> {
        // distribute around clusters
        const cluster = i % 4;
        const cx = [160,430,460,220][cluster], cy = [140,120,260,290][cluster];
        const a = Math.random()*Math.PI*2, r = 20 + Math.random()*70;
        const x = cx + Math.cos(a)*r, y = cy + Math.sin(a)*r;
        const colors = ['#1c5fbf','#d96b2c','#2a8a5c','#b14fa6'];
        const sz = 3 + Math.random()*4;
        return <circle key={i} cx={x} cy={y} r={sz} fill={colors[cluster]} stroke="#1a1a1a" strokeWidth="0.6" opacity={0.85}/>;
      })}
      {/* edges */}
      {Array.from({length: 50}).map((_,i)=> {
        const x1=80+Math.random()*440, y1=40+Math.random()*280;
        const x2=80+Math.random()*440, y2=40+Math.random()*280;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#1a1a1a" strokeWidth={0.4} opacity={0.18}/>;
      })}
      {/* you */}
      <circle cx="240" cy="180" r="14" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="2"/>
      <text x="240" y="206" textAnchor="middle" fontFamily="Caveat" fontSize="13">You</text>
      {/* recommended highlights */}
      <line x1="240" y1="180" x2="180" y2="120" stroke="#1c5fbf" strokeWidth="3" opacity="0.85"/>
      <line x1="240" y1="180" x2="420" y2="100" stroke="#d96b2c" strokeWidth="3" opacity="0.85"/>
      <line x1="240" y1="180" x2="220" y2="290" stroke="#b14fa6" strokeWidth="3" opacity="0.85"/>
    </svg>
    <div style={{position:'absolute', bottom:6, right:8}} className="ui xsmall muted-text">248 nodes · 4 clusters · zoom 0.8×</div>
  </div>
);

const OrbitalLayout = () => (
  <div className="sketch-box thin grid-paper" style={{minHeight: 360, position:'relative', overflow:'hidden'}}>
    <svg viewBox="0 0 600 360" style={{width:'100%', height:'100%'}}>
      {[60,110,160,210].map((r,i)=>(
        <circle key={i} cx="300" cy="180" r={r} fill="none" stroke="#cfcabc" strokeDasharray="3 4" strokeWidth="1"/>
      ))}
      <text x="300" y="184" textAnchor="middle" fontFamily="Caveat" fontSize="14">core</text>
      {/* ring labels */}
      <text x="300" y="34" textAnchor="middle" fontFamily="Caveat" fontSize="13" fill="#8a8780">research</text>
      <text x="300" y="80" textAnchor="middle" fontFamily="Caveat" fontSize="13" fill="#8a8780">bridge</text>
      <text x="300" y="130" textAnchor="middle" fontFamily="Caveat" fontSize="13" fill="#8a8780">practice</text>
      <text x="300" y="345" textAnchor="middle" fontFamily="Caveat" fontSize="13" fill="#8a8780">policy</text>

      {/* nodes scattered on rings */}
      {Array.from({length: 50}).map((_,i)=> {
        const ring = [60,110,160,210][i%4];
        const a = (i/50)*Math.PI*2;
        const x = 300 + Math.cos(a)*ring, y = 180 + Math.sin(a)*ring;
        const colors = ['#1c5fbf','#d96b2c','#2a8a5c','#b14fa6'];
        return <circle key={i} cx={x} cy={y} r={4} fill={colors[i%4]} stroke="#1a1a1a" strokeWidth="0.6"/>;
      })}
      {/* you on ring 2 */}
      <circle cx={300+Math.cos(0.6)*110} cy={180+Math.sin(0.6)*110} r="9" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="1.6"/>
      {/* radial highlights */}
      {[0.6,0.62,0.65].map((a,i)=>{
        const x1 = 300+Math.cos(a)*60, y1=180+Math.sin(a)*60;
        const x2 = 300+Math.cos(a-0.05)*210, y2=180+Math.sin(a-0.05)*210;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#d96b2c" strokeWidth="1" opacity="0.5"/>;
      })}
    </svg>
  </div>
);

const FocusMode = () => (
  <div className="sketch-box thin grid-paper" style={{minHeight: 360, position:'relative', overflow:'hidden'}}>
    <svg viewBox="0 0 600 360" style={{width:'100%', height:'100%'}}>
      {/* you in centre */}
      <circle cx="300" cy="180" r="32" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="2"/>
      <text x="300" y="184" textAnchor="middle" fontFamily="Caveat" fontSize="16" fontWeight="700">You</text>
      {/* 1-hop ring */}
      {Array.from({length: 8}).map((_,i)=>{
        const a = (i/8)*Math.PI*2; const x=300+Math.cos(a)*120, y=180+Math.sin(a)*120;
        const kinds = ['person','project','person','org','domain','person','project','method'];
        const colors = {person:'#1c5fbf', project:'#d96b2c', org:'#2a8a5c', domain:'#b14fa6', method:'#7a6cf0'};
        return <g key={i}>
          <line x1="300" y1="180" x2={x} y2={y} stroke={colors[kinds[i]]} strokeWidth={1.5+Math.random()*2} opacity="0.75"/>
          <circle cx={x} cy={y} r={11} fill="#fff" stroke={colors[kinds[i]]} strokeWidth="1.8"/>
        </g>;
      })}
      {/* 2-hop ring */}
      {Array.from({length: 18}).map((_,i)=>{
        const a = (i/18)*Math.PI*2 + 0.2; const x=300+Math.cos(a)*200, y=180+Math.sin(a)*200;
        return <circle key={i} cx={x} cy={y} r="5" fill="#1c5fbf" opacity="0.7"/>;
      })}
      <text x="300" y="30" textAnchor="middle" fontFamily="Caveat" fontSize="14" fill="#8a8780">2nd-degree neighbours</text>
      <text x="300" y="350" textAnchor="middle" fontFamily="Caveat" fontSize="14" fill="#8a8780">your local ecosystem</text>
    </svg>
  </div>
);

const AntiDup = () => (
  <div className="sketch-box thin grid-paper" style={{minHeight: 360, position:'relative', overflow:'hidden'}}>
    <svg viewBox="0 0 600 360" style={{width:'100%', height:'100%'}}>
      {/* clusters showing duplication */}
      <ellipse cx="180" cy="140" rx="100" ry="60" fill="#fcdcdc" stroke="#c33a3a" strokeWidth="1.2" strokeDasharray="4 4"/>
      <text x="180" y="80" textAnchor="middle" fontFamily="Caveat" fontSize="16" fill="#c33a3a">Membrane durability protocols ×3 teams</text>
      <ellipse cx="430" cy="220" rx="110" ry="60" fill="#fcdcdc" stroke="#c33a3a" strokeWidth="1.2" strokeDasharray="4 4"/>
      <text x="430" y="170" textAnchor="middle" fontFamily="Caveat" fontSize="16" fill="#c33a3a">Curriculum module: Hydrogen safety ×2</text>
      <ellipse cx="320" cy="320" rx="80" ry="34" fill="#fde2cf" stroke="#d96b2c" strokeWidth="1.2" strokeDasharray="4 4"/>
      <text x="320" y="335" textAnchor="middle" fontFamily="Caveat" fontSize="14" fill="#d96b2c">Pilot data sharing pattern</text>

      {/* nodes inside clusters */}
      {[
        [150,130],[180,160],[210,135], // cluster 1
        [400,210],[440,220],[460,235], // cluster 2
        [300,318],[330,322],[348,318]  // cluster 3
      ].map(([x,y],i)=>(
        <g key={i}>
          <circle cx={x} cy={y} r="6" fill="#1c5fbf" stroke="#1a1a1a"/>
        </g>
      ))}
      {/* dashed red edges between duplicates */}
      <line x1="150" y1="130" x2="180" y2="160" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
      <line x1="180" y1="160" x2="210" y2="135" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
      <line x1="150" y1="130" x2="210" y2="135" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
      <line x1="400" y1="210" x2="440" y2="220" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
      <line x1="440" y1="220" x2="460" y2="235" stroke="#c33a3a" strokeWidth="2" strokeDasharray="4 3"/>
    </svg>
    <div className="sketch-box p-2" style={{position:'absolute', top:8, right:8, width:170, background:'rgba(255,255,255,0.95)'}}>
      <div className="ui xsmall uppercase">Anti-dup mode</div>
      <div className="ui xsmall muted-text mt-1">3 clusters detected · 8 stakeholders</div>
      <Btn className="accent" style={{marginTop:6}}>Send introduction →</Btn>
    </div>
  </div>
);

window.NetworkTab = NetworkTab;
