// 02 Onboarding Questionnaire — guided flow with section progress + 4 question types

const OnboardingTab = () => (
  <div>
    <SectionLead
      eyebrow="02 / dynamic questionnaire"
      title="Guided profile construction — not a long form"
      sub="Step-based, section-progress, only a few questions visible at once. Multiple interaction patterns cover the seven blocks. Always shows: where you are, why this matters, what it produces."
    />

    {/* Flow overview */}
    <Frame title="Section flow + progress model" tag="UX spec" style={{marginBottom: 20}}>
      <svg viewBox="0 0 1000 110" style={{width:'100%'}}>
        {[
          ['1','Identity','#dceaff', 70],
          ['2','Knowledge','#fde2cf', 95],
          ['3','Project','#d8efe2', 85],
          ['4','Challenges','#fcdcdc', 70],
          ['5','Bottlenecks','#e3e3e3', 60],
          ['6','Uncertainty','#fbeec1', 50],
          ['7','Evidence','#f0e0ee', 40],
          ['✓','Review','#fff7cc', 0],
        ].map(([n,t,bg,m], i) => (
          <g key={i}>
            <rect x={20 + i*120} y="20" width="100" height="64" rx="10" fill={bg} stroke="#1a1a1a" strokeWidth="1.4"/>
            <circle cx={42 + i*120} cy="42" r="11" fill="#1a1a1a"/>
            <text x={42+i*120} y="46" textAnchor="middle" fontFamily="Caveat" fontSize="16" fontWeight="700" fill="#fff">{n}</text>
            <text x={62+i*120} y="46" fontFamily="Caveat" fontSize="17" fontWeight="700">{t}</text>
            <rect x={32+i*120} y="62" width="76" height="6" rx="3" fill="#fff" stroke="#1a1a1a" strokeWidth="1"/>
            {m > 0 && <rect x={32+i*120} y="62" width={76*m/100} height="6" rx="3" fill="#1c5fbf"/>}
            <text x={70+i*120} y="80" textAnchor="middle" fontFamily="Inter" fontSize="9" fill="#3a3a3a">{m > 0 ? m+'% complete' : 'auto'}</text>
            {i < 7 && <line x1={120 + i*120} y1="52" x2={140 + i*120} y2="52" stroke="#3a3a3a" strokeWidth="1.4"/>}
          </g>
        ))}
      </svg>
      <div className="row gap-3 mt-3 ui xsmall">
        <span><b>Save anytime.</b></span>
        <span>· Skippable except Identity Q1–Q4</span>
        <span>· Returnable from dashboard</span>
        <span>· Each answer shows <i className="accent-text">what it produces</i> in the database</span>
      </div>
    </Frame>

    {/* 4 question types showcased */}
    <div className="frame-grid cols-2">
      <Frame title="Step 1/7 — Identity (single-choice cards)" tag="Identity Q1–Q3">
        <Browser title="h2learn.app/onboarding/identity">
          <QuestionnaireShell step="1/7" section="Identity" subtitle="Who you are in this ecosystem">
            <div className="hand-title" style={{fontSize:22}}>My primary professional role is…</div>
            <div className="ui xsmall muted-text">Pick one — this is the strongest first identity filter.</div>
            <div className="frame-grid cols-3 mt-3" style={{gap:8}}>
              {['Professor / Lector','Lecturer / Educator','Researcher','Lecturer-researcher','Project / Programme mgr','Network coordinator','Policy / Public sector','Industry professional','Student / Early career','Other'].map((r,i) => (
                <div key={r} className={'sketch-box p-2 ' + (i===2 ? 'fill' : '')} style={{cursor:'pointer', position:'relative'}}>
                  <div className="hand" style={{fontSize:14, lineHeight:1.2}}>{r}</div>
                  {i===2 && <div style={{position:'absolute', top:6, right:6, width:14, height:14, borderRadius:999, background:'#1c5fbf'}}/>}
                </div>
              ))}
            </div>
            <div className="note mt-3"><b>Why this matters →</b> feeds role-based filtering &amp; first-layer clustering.</div>
            <ProgressFooter cur={1} max={11} section="Identity"/>
          </QuestionnaireShell>
        </Browser>
      </Frame>

      <Frame title="Step 2/7 — Knowledge (chips + nested taxonomy)" tag="K1–K3">
        <Browser title="h2learn.app/onboarding/knowledge">
          <QuestionnaireShell step="2/7" section="Knowledge" subtitle="What you actively contribute to">
            <div className="hand-title" style={{fontSize:20}}>Knowledge domains <span className="muted-text" style={{fontSize:13}}>(up to 5)</span></div>
            <div className="pill-row mt-2">
              {['Hydrogen production','Storage & transport','Conversion','Safety','Materials','Sensors','Digital twins / AI','Data engineering','Circularity','Policy','Business models','Education','Orchestration'].map((d,i) => (
                <Pill key={d} className={i<3 ? 'accent' : ''}>{d}{i<3 && ' ✓'}</Pill>
              ))}
            </div>
            <Squiggle style={{marginTop:14, marginBottom:10}}/>
            <div className="hand-title" style={{fontSize:18}}>Subdomains under <i className="accent-text">Hydrogen production</i></div>
            <div className="sketch-box p-2 mt-2" style={{background:'var(--paper-2)'}}>
              <div className="row gap-2" style={{alignItems:'center'}}>
                <span className="ui xsmall uppercase muted-text">search</span>
                <FakeLine w="60%" kind="thin"/>
              </div>
              <div className="pill-row mt-2">
                {['Alkaline electrolysis','PEM ✓','SOEC ✓','Catalyst design ✓','Membrane durability','Materials char.','Pilot operation'].map((s,i)=>(
                  <Pill key={s} className={s.endsWith('✓') ? 'accent' : 'dashed'}>{s}</Pill>
                ))}
              </div>
            </div>
            <div className="note mt-3"><b>Why this matters →</b> nested taxonomy creates the fingerprint vector — driver of cosine similarity.</div>
            <ProgressFooter cur={3} max={11} section="Knowledge"/>
          </QuestionnaireShell>
        </Browser>
      </Frame>

      <Frame title="Step 2/7 — Knowledge (weight allocation widget)" tag="K4 — fingerprint">
        <Browser title="h2learn.app/onboarding/knowledge">
          <QuestionnaireShell step="2/7" section="Knowledge" subtitle="Distribute 100 expertise points across your subdomains">
            <div className="hand-title" style={{fontSize:18}}>Allocate 100 points</div>
            <div className="ui xsmall muted-text">Drag the chips, or type a number. Total must be 100.</div>
            <div className="col gap-2 mt-3">
              {[['PEM electrolysis',40,'#1c5fbf'],['Catalyst design',25,'#1c5fbf'],['Membrane durability',20,'#1c5fbf'],['SOEC',10,'#1c5fbf'],['Materials char.',5,'#1c5fbf']].map(([n,v,c]) => (
                <div key={n} className="row gap-2" style={{alignItems:'center'}}>
                  <div className="ui small" style={{width:160, fontFamily:'Inter'}}>{n}</div>
                  <div className="sketch-box thin" style={{flex:1, height:18, padding:0, position:'relative', overflow:'hidden'}}>
                    <div style={{width: v+'%', height:'100%', background:c, opacity:0.65}}/>
                    <span className="hand-title" style={{position:'absolute', right:8, top:0, lineHeight:'18px', fontSize:14}}>{v}</span>
                  </div>
                  <span className="hand-title" style={{width:34, textAlign:'right', fontSize:16}}>{v}</span>
                </div>
              ))}
              <div className="row between mt-2 ui small">
                <span>Total</span><span className="bold">100 / 100 <span className="accent2-text">✓</span></span>
              </div>
            </div>
            <Note style={{marginTop:14}}>Your weighted “fingerprint” → vector for similarity matching. Same logic as HvA Fingerprint, but stronger.</Note>
            <ProgressFooter cur={4} max={11} section="Knowledge"/>
          </QuestionnaireShell>
        </Browser>
      </Frame>

      <Frame title="Step 4/7 — Challenges (segmented + 5-pt scale)" tag="Challenges">
        <Browser title="h2learn.app/onboarding/challenges">
          <QuestionnaireShell step="4/7" section="Challenges" subtitle="What problem are you currently solving?">
            <div className="hand-title" style={{fontSize:18}}>Describe the challenge in one line</div>
            <div className="sketch-box p-2 mt-2"><FakeLine w="80%"/><div className="ui xsmall muted-text mt-1">e.g. “Membrane degradation under variable load.”</div></div>

            <div className="hand-title mt-3" style={{fontSize:18}}>What layer is it?</div>
            <div className="row gap-2 mt-2">
              {['Technical','Educational','Organizational','Policy','Cross-disciplinary'].map((l,i) => (
                <Pill key={l} className={i===0 ? 'accent' : ''}>{l}</Pill>
              ))}
            </div>

            <div className="hand-title mt-3" style={{fontSize:18}}>How shared is this challenge?</div>
            <div className="ui xsmall muted-text">Likely also faced by others in the ecosystem</div>
            <div className="row gap-2 mt-2" style={{alignItems:'center'}}>
              {[1,2,3,4,5].map(n => (
                <div key={n} className={'sketch-box ' + (n===4 ? 'ink-fill' : '')} style={{width:36, height:36, borderRadius:18, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Caveat', fontSize:18, fontWeight:700, cursor:'pointer'}}>{n}</div>
              ))}
              <div className="ui xsmall muted-text" style={{marginLeft:10}}>1 unique → 5 widely shared</div>
            </div>

            <div className="hand-title mt-3" style={{fontSize:18}}>What resource is missing? <span className="muted-text" style={{fontSize:12}}>(creates a Need)</span></div>
            <div className="pill-row mt-2">{['Data','Method','Equipment','Partner','Funding','Evidence','Workforce'].map(t => <Pill key={t} className="dashed">+ {t}</Pill>)}</div>
            <Note style={{marginTop:12}}>“Missing resource” → automatically becomes a <b>Need</b>; matched against others’ Offers.</Note>
            <ProgressFooter cur={2} max={6} section="Challenges"/>
          </QuestionnaireShell>
        </Browser>
      </Frame>
    </div>

    {/* Review screen */}
    <div className="frame-grid cols-2 mt-4">
      <Frame title="Step 7/7 — Evidence anchors (optional)" tag="Evidence">
        <Browser title="h2learn.app/onboarding/evidence">
          <QuestionnaireShell step="7/7" section="Evidence" subtitle="Public anchors (optional, but boost trust score)">
            <div className="col gap-2">
              {[
                ['ORCID','0000-0002-9876-5432','#dceaff'],
                ['Google Scholar','scholar.google.com/citations?...','#fde2cf'],
                ['Institutional','research.hva.nl/persons/...','#d8efe2'],
                ['LinkedIn','linkedin.com/in/...','#dceaff'],
                ['Website','sara.example.org','#fff7cc'],
              ].map(([l,v,bg]) => (
                <div key={l} className="row gap-2" style={{alignItems:'center'}}>
                  <Pill style={{background:bg}}>{l}</Pill>
                  <div className="sketch-box thin" style={{flex:1, padding:'4px 8px', fontFamily:'Inter', fontSize:12, color:'#3a3a3a'}}>{v}</div>
                </div>
              ))}
            </div>
            <div className="hand-title mt-3" style={{fontSize:16}}>Representative outputs (≤ 3)</div>
            <div className="frame-grid cols-3 mt-2" style={{gap:6}}>
              {[1,2,3].map(i => (
                <div key={i} className="sketch-box p-2 dashed" style={{minHeight:60}}>
                  <FakeLine kind="thin" w="80%"/><FakeLine kind="thin muted" w="50%" style={{marginTop:4}}/>
                  <div className="ui xsmall muted-text mt-2">+ paste DOI / link</div>
                </div>
              ))}
            </div>
            <ProgressFooter cur={6} max={6} section="Evidence" final/>
          </QuestionnaireShell>
        </Browser>
      </Frame>

      <Frame title="Review &amp; submit" tag="final step">
        <Browser title="h2learn.app/onboarding/review">
          <div className="p-2">
            <div className="hand-title" style={{fontSize:22}}>Review your profile</div>
            <div className="ui small muted-text" style={{fontFamily:'Inter'}}>Edit any section before we build the database from your answers.</div>
            <div className="col gap-2 mt-3">
              {[
                ['Identity','Lecturer-researcher · Univ. of Applied Sciences · NL','complete'],
                ['Knowledge','3 domains · 5 subdomains · 100 pts allocated','complete'],
                ['Project','Lead, “GreenH2-PEM Pilot” · TRL 5','complete'],
                ['Challenges','Membrane degradation · cross-disciplinary','complete'],
                ['Bottlenecks','External · severity 4/5','complete'],
                ['Uncertainty','Long-term durability data','complete'],
                ['Evidence','ORCID + 2 papers','partial'],
              ].map(([s,sum,st]) => (
                <div key={s} className="sketch-box p-2 row gap-2 between" style={{alignItems:'center'}}>
                  <div className="col">
                    <div className="hand-title" style={{fontSize:16}}>{s}</div>
                    <div className="ui xsmall muted-text">{sum}</div>
                  </div>
                  <div className="row gap-2" style={{alignItems:'center'}}>
                    <Pill className={st==='complete' ? 'accent' : 'dashed'}>{st}</Pill>
                    <Btn>Edit</Btn>
                  </div>
                </div>
              ))}
            </div>
            <Note style={{marginTop:12}}>On submit → answers are normalized into entities, signals are computed, and the matching engine runs (≈ 4–8 sec).</Note>
            <div className="row gap-2 mt-3"><Btn className="accent">Build my profile &amp; find matches</Btn><Btn>Save draft</Btn></div>
          </div>
        </Browser>
      </Frame>
    </div>

    {/* Processing screen */}
    <div className="frame-grid cols-3 mt-4">
      <Frame title="Processing — building your database" tag="post-submit">
        <Browser title="h2learn.app/processing">
          <div className="center" style={{flexDirection:'column', minHeight:280, padding:20}}>
            <svg width="120" height="120" viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="44" fill="none" stroke="#cfcabc" strokeWidth="4"/>
              <circle cx="60" cy="60" r="44" fill="none" stroke="#1c5fbf" strokeWidth="4" strokeDasharray="180 280" strokeLinecap="round" transform="rotate(-90 60 60)"/>
              <text x="60" y="66" textAnchor="middle" fontFamily="Caveat" fontSize="22" fontWeight="700">62%</text>
            </svg>
            <div className="hand-title mt-3" style={{fontSize:20}}>Building your profile…</div>
            <div className="col gap-1 mt-3 ui small" style={{fontFamily:'Inter'}}>
              <div>✓ Normalizing answers → entities</div>
              <div>✓ Tagging subdomains via taxonomy</div>
              <div>↻ Computing fingerprint vector</div>
              <div className="muted-text">○ Comparing with 248 profiles</div>
              <div className="muted-text">○ Generating relationship edges</div>
              <div className="muted-text">○ Drafting your “Why this match” explanations</div>
            </div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Mobile — questionnaire step" tag="responsive">
        <div className="center"><Phone>
          <div className="ui xsmall uppercase muted-text">Step 5/7 · Bottlenecks</div>
          <div className="hand-title" style={{fontSize:18, marginTop:6}}>What blocks your work most?</div>
          <div className="col gap-2 mt-2">
            {['Funding cycles','Lack of partners','Missing data / evidence','Skills gap','Regulatory','Time / capacity'].map((b,i)=>(
              <div key={b} className={'sketch-box p-2 ' + (i===2 ? 'ink-fill' : '')}>
                <div className="hand" style={{fontSize:13}}>{b}</div>
              </div>
            ))}
          </div>
          <div className="hand-title mt-3" style={{fontSize:14}}>Severity</div>
          <div className="row gap-1 mt-1">{[1,2,3,4,5].map(n=>(
            <div key={n} className={'sketch-box ' + (n===4 ? 'ink-fill' : '')} style={{width:32,height:32,borderRadius:16, display:'flex',alignItems:'center',justifyContent:'center', fontFamily:'Caveat',fontSize:16, fontWeight:700}}>{n}</div>
          ))}</div>
          <div className="row gap-2 mt-3" style={{justifyContent:'space-between'}}>
            <Btn>Back</Btn><Btn className="accent">Next</Btn>
          </div>
          <div className="ui xsmall muted-text center mt-2">5 of 7 · Saved</div>
        </Phone></div>
      </Frame>

      <Frame title="Validation + autosave behavior" tag="micro-spec">
        <div className="col gap-3">
          <div className="sketch-box p-2">
            <div className="hand-title" style={{fontSize:16}}>Inline validation</div>
            <div className="ui xsmall muted-text">Errors next to field. Never block on optional fields.</div>
            <div className="sketch-box thin mt-2 p-2" style={{borderColor:'var(--warn)'}}>
              <FakeLine w="50%"/>
              <div className="ui xsmall" style={{color:'var(--warn)', marginTop:4}}>Total must be 100. You allocated 92.</div>
            </div>
          </div>
          <div className="sketch-box p-2">
            <div className="hand-title" style={{fontSize:16}}>Autosave</div>
            <div className="ui xsmall muted-text">Every change persists. Toast: “Saved · 2s ago”.</div>
            <div className="row gap-2 mt-2"><Pill className="accent">Saved · 2s ago</Pill><Pill className="muted">Resume from anywhere</Pill></div>
          </div>
          <div className="sketch-box p-2">
            <div className="hand-title" style={{fontSize:16}}>Skip / come back</div>
            <div className="ui xsmall muted-text">All non-Identity sections skippable; dashboard nudges to complete (with weight on matching power).</div>
          </div>
        </div>
      </Frame>
    </div>
  </div>
);

const QuestionnaireShell = ({step, section, subtitle, children}) => (
  <div>
    <div className="row between" style={{alignItems:'center'}}>
      <div className="col">
        <div className="ui xsmall uppercase muted-text">{step} · {section}</div>
        <div className="ui small muted-text" style={{fontFamily:'Inter'}}>{subtitle}</div>
      </div>
      <Pill className="muted">Saved · 2s ago</Pill>
    </div>
    <Squiggle style={{margin:'10px 0 12px'}}/>
    {children}
  </div>
);

const ProgressFooter = ({cur, max, section, final=false}) => (
  <div className="row between mt-3" style={{alignItems:'center'}}>
    <div className="ui xsmall muted-text">Question {cur} / {max} · {section}</div>
    <div className="row gap-2">
      <Btn>Back</Btn>
      <Btn className="accent">{final ? 'Continue → Review' : 'Next →'}</Btn>
    </div>
  </div>
);

window.OnboardingTab = OnboardingTab;