// 01 Landing & Auth — three landing directions + sign-in/up + welcome.

const LandingTab = () => (
  <div>
    <SectionLead
      eyebrow="01 / landing &amp; auth"
      title="Three landing directions, sign-in, welcome handoff"
      sub="Marketing surface is small (members onboard via invite), but it must communicate: this is a research-tech matchmaker, not a survey. Three distinct framings to compare."
    />

    <div className="frame-grid cols-3">
      <Frame title="A — Network-first hero" tag="visual primary">
        <Browser title="h2learn.app">
          <div style={{position:'relative', height: 220, border:'1px dashed var(--rule-soft)', borderRadius:6, overflow:'hidden'}}>
            <svg viewBox="0 0 320 220" style={{width:'100%', height:'100%'}}>
              {/* faint network */}
              {[[40,60],[80,40],[140,30],[200,50],[260,40],[280,90],[260,150],[200,180],[120,180],[60,160],[60,120],[160,110],[220,120]].map(([x,y],i)=>(
                <circle key={i} cx={x} cy={y} r="6" fill="#1c5fbf" opacity={0.5+Math.random()*0.5}/>
              ))}
              {[[40,60,80,40],[80,40,140,30],[140,30,200,50],[200,50,260,40],[260,40,280,90],[280,90,260,150],[260,150,200,180],[200,180,120,180],[120,180,60,160],[60,160,60,120],[60,120,40,60],[160,110,140,30],[160,110,80,40],[160,110,200,50],[160,110,220,120],[220,120,260,150],[160,110,120,180]].map(([x1,y1,x2,y2],i)=>(
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#1c5fbf" strokeWidth="0.7" opacity="0.35"/>
              ))}
            </svg>
            <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', justifyContent:'center', padding:18}}>
              <div className="hand-title" style={{fontSize:24, lineHeight:1.05}}>The hydrogen learning ecosystem,<br/>finally connected.</div>
              <div className="ui xsmall muted-text mt-2" style={{maxWidth:220}}>Build a profile. Discover relevant peers, projects, methods. Understand why.</div>
              <div className="row gap-2 mt-3"><Btn className="primary">Join the network</Btn><Btn>Sign in</Btn></div>
            </div>
          </div>
          <div className="row gap-2 mt-3 ui xsmall muted-text"><span>Discovery</span>·<span>Matching</span>·<span>Anti-dup</span>·<span>Network map</span></div>
          <div className="mt-3 sketch-box p-3">
            <div className="hand-title" style={{fontSize:18}}>How it works</div>
            <div className="row gap-2 mt-2 ui xsmall">
              <span>① Profile</span><Arrow w={28} h={14} d="M0,7 L20,7" /><span>② Match</span><Arrow w={28} h={14} d="M0,7 L20,7" /><span>③ Explore</span>
            </div>
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Trade-off:</b> beautiful, immediate. Risk = visitor doesn’t understand the value-prop without scrolling.</div>
      </Frame>

      <Frame title="B — Question-led" tag="copy primary">
        <Browser title="h2learn.app">
          <div className="p-3" style={{minHeight: 220}}>
            <div className="ui xsmall uppercase muted-text">For the hydrogen learning community</div>
            <div className="hand-title" style={{fontSize:26, lineHeight:1.1, marginTop:6}}>Who works on what you’re working on?</div>
            <div className="hand-title" style={{fontSize:22, lineHeight:1.1, opacity:0.55}}>Who needs what you can offer?</div>
            <div className="hand-title" style={{fontSize:22, lineHeight:1.1, opacity:0.35}}>Who’s hitting the same wall?</div>
            <div className="ui small mt-3" style={{fontFamily:'Inter'}}>A guided profile becomes a relationship database — one that <i>shows its reasoning</i>.</div>
            <div className="row gap-2 mt-3"><Btn className="accent">Start your profile</Btn><Btn>I have an account</Btn></div>
          </div>
          <div className="frame-grid cols-3 mt-2" style={{gap:8}}>
            {['Similarity','Complementarity','Anti-duplication'].map(t => (
              <div key={t} className="sketch-box p-2">
                <div className="hand-title" style={{fontSize:16}}>{t}</div>
                <div className="ui xsmall muted-text">explainable</div>
              </div>
            ))}
          </div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Trade-off:</b> instantly conveys product logic. Less visual punch — banks on copy.</div>
      </Frame>

      <Frame title="C — Atlas / map metaphor" tag="aspirational">
        <Browser title="h2learn.app">
          <div className="grid-paper" style={{height:140, position:'relative', borderRadius:6, border:'1px solid var(--rule-soft)'}}>
            <svg viewBox="0 0 320 140" style={{width:'100%', height:'100%'}}>
              <defs>
                <radialGradient id="cluster1" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#1c5fbf" stopOpacity="0.5"/><stop offset="100%" stopColor="#1c5fbf" stopOpacity="0"/></radialGradient>
                <radialGradient id="cluster2" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#d96b2c" stopOpacity="0.45"/><stop offset="100%" stopColor="#d96b2c" stopOpacity="0"/></radialGradient>
                <radialGradient id="cluster3" cx="50%" cy="50%" r="50%"><stop offset="0%" stopColor="#2a8a5c" stopOpacity="0.45"/><stop offset="100%" stopColor="#2a8a5c" stopOpacity="0"/></radialGradient>
              </defs>
              <circle cx="80" cy="70" r="50" fill="url(#cluster1)"/>
              <circle cx="200" cy="50" r="40" fill="url(#cluster2)"/>
              <circle cx="240" cy="100" r="46" fill="url(#cluster3)"/>
              {Array.from({length: 30}).map((_,i)=>{
                const x = 20 + Math.random()*280, y = 20 + Math.random()*100;
                return <circle key={i} cx={x} cy={y} r={1.5+Math.random()*2.5} fill="#1a1a1a" opacity={0.3+Math.random()*0.5}/>;
              })}
              <text x="60" y="68" fontFamily="Caveat" fontSize="14" fill="#1c5fbf">production</text>
              <text x="180" y="44" fontFamily="Caveat" fontSize="14" fill="#d96b2c">policy</text>
              <text x="225" y="106" fontFamily="Caveat" fontSize="14" fill="#2a8a5c">education</text>
            </svg>
          </div>
          <div className="hand-title mt-3" style={{fontSize:24}}>An atlas of who, what, and why.</div>
          <div className="ui small mt-2" style={{fontFamily:'Inter'}}>Zoom in on regions of expertise. Find your neighbours. Spot the bridges.</div>
          <div className="row gap-2 mt-3"><Btn className="primary">Explore the atlas</Btn><span className="sketch-pill muted">demo · read-only</span></div>
        </Browser>
        <div className="ui xsmall muted-text mt-2"><b>Trade-off:</b> strongest brand. Risk: visitor expects a real map; first-time users may feel lost.</div>
      </Frame>
    </div>

    {/* Auth + Welcome */}
    <div className="frame-grid cols-3 mt-4">
      <Frame title="Sign in" tag="auth">
        <Browser title="h2learn.app/auth">
          <div className="center" style={{flexDirection:'column', padding:20, minHeight:240}}>
            <div className="hand-title" style={{fontSize:22}}>Welcome back</div>
            <div className="sketch-box p-3 mt-3" style={{width:240}}>
              <div className="ui xsmall uppercase">Email</div>
              <FakeLine kind="thin" w="100%" style={{marginTop:6}}/>
              <div className="ui xsmall uppercase mt-3">Password</div>
              <FakeLine kind="thin" w="100%" style={{marginTop:6}}/>
              <Btn className="primary" style={{width:'100%', marginTop:14, justifyContent:'center'}}>Sign in</Btn>
              <div className="ui xsmall muted-text center mt-2" style={{justifyContent:'center'}}>or continue with SSO</div>
              <Btn style={{width:'100%', marginTop:6, justifyContent:'center'}}>SURF · ORCID · Google</Btn>
            </div>
            <div className="ui xsmall muted-text mt-3">No account? <span className="accent-text">Request invitation</span></div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Sign up — invite-aware" tag="auth">
        <Browser title="h2learn.app/join">
          <div className="p-2">
            <div className="hand-title" style={{fontSize:22}}>Create your account</div>
            <Note style={{marginTop:8}}>Curated network — invitations help quality. Apply or use a code.</Note>
            <div className="sketch-box p-3 mt-3">
              <div className="ui xsmall uppercase">Full name</div><FakeLine kind="thin" style={{marginTop:6}}/>
              <div className="ui xsmall uppercase mt-3">Institutional email</div><FakeLine kind="thin" style={{marginTop:6}}/>
              <div className="ui xsmall uppercase mt-3">Invite code <span className="muted-text">(optional)</span></div><FakeLine kind="thin" style={{marginTop:6}}/>
              <Btn className="primary" style={{width:'100%', marginTop:14, justifyContent:'center'}}>Create &amp; start questionnaire</Btn>
            </div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Welcome — handoff to questionnaire" tag="onboarding entry">
        <Browser title="h2learn.app/welcome">
          <div className="p-2">
            <div className="hand-title" style={{fontSize:22}}>Let’s build your profile, Sara.</div>
            <div className="ui small muted-text mt-2" style={{fontFamily:'Inter'}}>~12 minutes · save anytime · seven sections.</div>
            <div className="frame-grid cols-2 mt-3" style={{gap:8}}>
              {[
                ['1','Identity','who you are'],
                ['2','Knowledge','what you know'],
                ['3','Project','what you do'],
                ['4','Challenges','what you’re solving'],
                ['5','Bottlenecks','what blocks you'],
                ['6','Uncertainty','what you don’t know'],
                ['7','Evidence','your anchors'],
              ].map(([n,t,s]) => (
                <div key={n} className="sketch-box p-2">
                  <div className="row gap-2" style={{alignItems:'baseline'}}>
                    <span className="hand-title accent-text" style={{fontSize:18}}>{n}</span>
                    <span className="hand-title" style={{fontSize:16}}>{t}</span>
                  </div>
                  <div className="ui xsmall muted-text">{s}</div>
                </div>
              ))}
            </div>
            <div className="row gap-2 mt-3"><Btn className="accent">Begin</Btn><Btn>Skip — explore first</Btn></div>
          </div>
        </Browser>
      </Frame>
    </div>
  </div>
);
window.LandingTab = LandingTab;