// 08 States & mobile — empty / loading / error / mobile network

const StatesTab = () => (
  <div>
    <SectionLead
      eyebrow="08 / states &amp; mobile"
      title="Empty, loading, error states · mobile adaptations"
      sub="The boring-but-critical states. Plus how the network and matches collapse to mobile."
    />

    <div className="frame-grid cols-3">
      <Frame title="Empty — no matches yet" tag="state">
        <Browser title="h2learn.app/matches">
          <div className="center" style={{flexDirection:'column', minHeight:240, padding:20, textAlign:'center'}}>
            <svg width="80" height="80" viewBox="0 0 80 80">
              <circle cx="40" cy="40" r="34" fill="none" stroke="#cfcabc" strokeWidth="1.6" strokeDasharray="3 4"/>
              <circle cx="40" cy="40" r="6" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="1.6"/>
            </svg>
            <div className="hand-title mt-3" style={{fontSize:18}}>The system needs a bit more from you</div>
            <div className="ui small muted-text mt-1">Add subdomains and at least one need or offer to unlock matches.</div>
            <Btn className="accent" style={{marginTop:10}}>Continue questionnaire</Btn>
          </div>
        </Browser>
      </Frame>

      <Frame title="Loading — graph computing" tag="state">
        <Browser title="h2learn.app/network">
          <div className="center" style={{flexDirection:'column', minHeight:240, padding:20}}>
            <svg width="80" height="80" viewBox="0 0 80 80">
              <circle cx="40" cy="40" r="32" fill="none" stroke="#cfcabc" strokeWidth="3"/>
              <circle cx="40" cy="40" r="32" fill="none" stroke="#1c5fbf" strokeWidth="3" strokeDasharray="60 200" strokeLinecap="round" transform="rotate(-90 40 40)"/>
            </svg>
            <div className="hand-title mt-3" style={{fontSize:18}}>Drawing your ecosystem…</div>
            <div className="ui xsmall muted-text mt-1">computing centrality · 1.4s</div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Error — something broke" tag="state">
        <Browser title="h2learn.app/network">
          <div className="center" style={{flexDirection:'column', minHeight:240, padding:20, textAlign:'center'}}>
            <div style={{fontSize:36}}>⚠</div>
            <div className="hand-title mt-2" style={{fontSize:18}}>Couldn’t load the graph</div>
            <div className="ui small muted-text mt-1">Cached data shown. Try again, or open the list view.</div>
            <div className="row gap-2 mt-3"><Btn className="accent">Retry</Btn><Btn>Open list</Btn></div>
          </div>
        </Browser>
      </Frame>
    </div>

    <div className="frame-grid cols-3 mt-4">
      <Frame title="Mobile — network + bottom sheet" tag="responsive">
        <div className="center"><Phone>
          <div className="ui xsmall uppercase muted-text">Network</div>
          <div className="hand-title" style={{fontSize:16}}>Your ecosystem</div>
          <div className="sketch-box thin grid-paper mt-2" style={{height:180, position:'relative'}}>
            <svg viewBox="0 0 240 180" style={{width:'100%', height:'100%'}}>
              {Array.from({length:18}).map((_,i)=>{
                const x=20+Math.random()*200, y=20+Math.random()*140;
                const c=['#1c5fbf','#d96b2c','#2a8a5c','#b14fa6'][i%4];
                return <circle key={i} cx={x} cy={y} r={3+Math.random()*3} fill={c} opacity="0.85"/>;
              })}
              <circle cx="120" cy="90" r="9" fill="#fff7cc" stroke="#1a1a1a" strokeWidth="1.6"/>
            </svg>
          </div>
          <div className="row gap-1 mt-2 pill-row">{['People','Projects','Orgs'].map((t,i)=><Pill key={t} className={i===0?'accent':''} style={{fontSize:11}}>{t}</Pill>)}</div>
          <div className="sketch-box p-2 mt-3">
            <div className="ui xsmall uppercase">Selected</div>
            <div className="hand-title" style={{fontSize:14}}>Liesbeth K.</div>
            <div className="ui xsmall muted-text">92% similar</div>
            <Btn className="accent" style={{marginTop:6, width:'100%', justifyContent:'center'}}>Why? →</Btn>
          </div>
        </Phone></div>
      </Frame>

      <Frame title="Mobile — match card" tag="responsive">
        <div className="center"><Phone>
          <div className="ui xsmall uppercase muted-text">Match · 1 of 12</div>
          <div className="hand-title mt-1" style={{fontSize:18}}>Sara × HYDRO-NL</div>
          <div className="row gap-1 mt-1 pill-row"><Pill className="warn" style={{fontSize:11}}>comp 88%</Pill></div>
          <div className="sketch-box p-2 mt-3">
            <div className="ui xsmall uppercase">Why</div>
            <ul className="ui xsmall" style={{paddingLeft:14, margin:'4px 0 0', fontFamily:'Inter'}}>
              <li>Your offer ↔ their need</li>
              <li>3/5 subdomains overlap</li>
              <li>TRL 5 fits your position</li>
            </ul>
          </div>
          <div className="col gap-2 mt-3">
            <Btn className="accent" style={{width:'100%', justifyContent:'center'}}>Send signal</Btn>
            <Btn style={{width:'100%', justifyContent:'center'}}>Save</Btn>
            <Btn style={{width:'100%', justifyContent:'center'}}>Skip</Btn>
          </div>
          <div className="ui xsmall muted-text center mt-3">swipe → next</div>
        </Phone></div>
      </Frame>

      <Frame title="Settings · privacy" tag="settings">
        <Browser title="h2learn.app/settings">
          <div className="hand-title" style={{fontSize:20}}>Visibility &amp; data</div>
          <div className="col gap-2 mt-3">
            <div className="sketch-box p-2 row between" style={{alignItems:'center'}}>
              <div className="col"><div className="hand-title" style={{fontSize:15}}>Profile visibility</div><div className="ui xsmall muted-text">Who can see your full profile</div></div>
              <div className="row gap-1 pill-row"><Pill className="accent">All</Pill><Pill>Community</Pill><Pill>Hidden</Pill></div>
            </div>
            <div className="sketch-box p-2 row between" style={{alignItems:'center'}}>
              <div className="col"><div className="hand-title" style={{fontSize:15}}>Appear in network graph</div><div className="ui xsmall muted-text">Anonymous mode replaces name with role</div></div>
              <Pill className="accent">on</Pill>
            </div>
            <div className="sketch-box p-2 row between" style={{alignItems:'center'}}>
              <div className="col"><div className="hand-title" style={{fontSize:15}}>Allow signals (introductions)</div><div className="ui xsmall muted-text">Other users can request to connect</div></div>
              <Pill className="accent">on</Pill>
            </div>
            <div className="sketch-box p-2">
              <div className="hand-title" style={{fontSize:15}}>Your data</div>
              <div className="ui xsmall muted-text">Export profile · Re-take questionnaire · Delete account</div>
              <div className="row gap-2 mt-2"><Btn>Export JSON</Btn><Btn>Re-take</Btn><Btn className="warn">Delete</Btn></div>
            </div>
          </div>
        </Browser>
      </Frame>
    </div>

    <Frame title="Handoff notes — for Claude Code" tag="implementation" style={{marginTop: 24}}>
      <div className="frame-grid cols-3">
        <div className="sketch-box p-3">
          <div className="hand-title" style={{fontSize:18}}>Stack</div>
          <ul className="ui xsmall" style={{paddingLeft:14, fontFamily:'Inter'}}>
            <li>Next.js 14 (app router) · TypeScript</li>
            <li>Tailwind + shadcn/ui · Inter + a serif display</li>
            <li>PostgreSQL · Prisma · Supabase auth</li>
            <li>Graph: react-force-graph (2D) · sigma.js fallback</li>
            <li>Server actions for matching pipeline</li>
          </ul>
        </div>
        <div className="sketch-box p-3">
          <div className="hand-title" style={{fontSize:18}}>Pipeline</div>
          <ul className="ui xsmall" style={{paddingLeft:14, fontFamily:'Inter'}}>
            <li>onSubmit → normalize → tag</li>
            <li>compute fingerprint vector + need/offer set</li>
            <li>pairwise scoring (limit to ≤5k)</li>
            <li>persist RelationshipEdge rows w/ explanation</li>
            <li>nightly recompute · on-demand recompute</li>
          </ul>
        </div>
        <div className="sketch-box p-3">
          <div className="hand-title" style={{fontSize:18}}>Open questions</div>
          <ul className="ui xsmall" style={{paddingLeft:14, fontFamily:'Inter'}}>
            <li>Taxonomy: imported skill framework vs hand-curated?</li>
            <li>Anonymous mode default on or opt-in?</li>
            <li>Curator approval blocking vs post-hoc?</li>
            <li>How are challenges/bottlenecks free-text vs tagged?</li>
            <li>Multi-language NL/EN?</li>
          </ul>
        </div>
      </div>
    </Frame>
  </div>
);
window.StatesTab = StatesTab;