/* global React, PortraitBig, HeroCharacter, CharMini, PxIcon, TechBadge */

// ---------- HOME ----------
function SectionHome({ go }) {
  // Rotating taglines — type each line, keep previous lines, then reset
  const lines = [
    "> Hey, I'm Sion — a Full Stack Web Developer.",
    "> I ship end-to-end: React, TS, Node, C#, .NET, Go, Postgres.",
    "> Studying AI every single day — and putting it to work.",
    "> Into AI Agent Workflows & multi-agent orchestration.",
    "> I build with LLMs, then share what I learn — openly.",
  ];
  const [done, setDone] = React.useState([]); // finished lines
  const [current, setCurrent] = React.useState('');
  const [cycle, setCycle] = React.useState(0);

  React.useEffect(() => {
    let cancelled = false;
    let idx = 0;
    let finishedLines = [];

    const typeLine = () => {
      if (cancelled) return;
      if (idx >= lines.length) {
        // all lines typed — hold, then clear & restart
        setTimeout(() => {
          if (cancelled) return;
          setDone([]);
          setCurrent('');
          setCycle(c => c + 1);
        }, 3600);
        return;
      }
      const full = lines[idx];
      let i = 0;
      const tick = () => {
        if (cancelled) return;
        i++;
        setCurrent(full.slice(0, i));
        if (i < full.length) setTimeout(tick, 26);
        else {
          finishedLines = [...finishedLines, full];
          setDone(finishedLines);
          setCurrent('');
          idx++;
          setTimeout(typeLine, 520);
        }
      };
      tick();
    };
    const startT = setTimeout(typeLine, 120);
    return () => { cancelled = true; clearTimeout(startT); };
  }, [cycle]);

  return (
    <div className="section">
      <div className="tag"><span>◆</span> HOME / main.sh</div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 280px', gap:24, alignItems:'center', marginTop: 12}}>
        <div>
          <h1 className="hero-title">
            SION <span className="accent">JEON</span><br/>
            <span style={{fontSize:'22px', color:'var(--text-dim)', fontFamily:'VT323, monospace', letterSpacing:'0.06em'}}>
              &lt; FULL&nbsp;STACK&nbsp;WEB&nbsp;DEVELOPER /&gt;
            </span>
          </h1>
          <div className="hero-sub" style={{minHeight: 160, display:'flex', flexDirection:'column', gap:4}}>
            {done.map((l, i) => (
              <div key={i} style={{color:'var(--text-dim)'}}>{l}</div>
            ))}
            {current && (
              <div className="cursor-caret" style={{color:'var(--text)'}}>{current}</div>
            )}
          </div>

          <div style={{display:'flex', gap:14, marginTop: 18, flexWrap:'wrap'}}>
            <button className="btn" onClick={() => go('contact')}>
              <span>▶</span> LET'S TALK
            </button>
            <button className="btn ghost" onClick={() => go('projects')}>
              <span>◎</span> SEE PROJECTS
            </button>
          </div>
        </div>

        <div className="hero-stage">
          <HeroCharacter size={240}/>
        </div>
      </div>

      <div className="pxline" style={{marginTop: 40}}>
        <span className="ln"></span>
        <span>■ WHAT I'M ABOUT</span>
        <span className="ln"></span>
      </div>

      <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:14}}>
        <div className="panel">
          <div style={{fontFamily:'Press Start 2P, monospace', fontSize:10, color:'var(--accent)', letterSpacing:'0.08em', marginBottom: 10}}>▸ BUILD</div>
          <div style={{fontSize:18, color:'var(--text)', lineHeight:1.4}}>Full-stack web apps, end to end.</div>
          <div style={{fontSize:15, color:'var(--text-mute)', marginTop: 6}}>React / TS / Node / Go / Postgres</div>
        </div>
        <div className="panel">
          <div style={{fontFamily:'Press Start 2P, monospace', fontSize:10, color:'var(--accent-2)', letterSpacing:'0.08em', marginBottom: 10}}>▸ LEARN</div>
          <div style={{fontSize:18, color:'var(--text)', lineHeight:1.4}}>Studying AI every single day.</div>
          <div style={{fontSize:15, color:'var(--text-mute)', marginTop: 6}}>Papers, models, prompt patterns, tools</div>
        </div>
        <div className="panel">
          <div style={{fontFamily:'Press Start 2P, monospace', fontSize:10, color:'var(--accent-3)', letterSpacing:'0.08em', marginBottom: 10}}>▸ SHARE</div>
          <div style={{fontSize:18, color:'var(--text)', lineHeight:1.4}}>Applying AI & sharing what I learn.</div>
          <div style={{fontSize:15, color:'var(--text-mute)', marginTop: 6}}>Posts, demos, open-source snippets</div>
        </div>
      </div>

      <div className="pxline" style={{marginTop: 36}}>
        <span className="ln"></span>
        <span>■ CURRENTLY EXPLORING</span>
        <span className="ln"></span>
      </div>

      <div className="panel" style={{display:'flex', gap:18, alignItems:'center'}}>
        <div style={{width:64, height:64, flexShrink:0}}>
          <CharMini size={64}/>
        </div>
        <div className="bubble" style={{flex:1}}>
          <div style={{fontSize:18, color:'var(--text)', lineHeight:1.45}}>
            Deep-diving into <span style={{color:'var(--accent)'}}>AI Agent Workflows</span> and <span style={{color:'var(--accent-2)'}}>AI Orchestration</span> — designing multi-agent systems that actually ship.
          </div>
          <div style={{fontSize:15, color:'var(--text-mute)', marginTop:4}}>Last study log · today · "tool-calling patterns for long-horizon tasks"</div>
        </div>
      </div>

      <div className="grid g-4" style={{gap:14, marginTop: 18}}>
        <div className="stat"><div className="k">EXP</div><div className="v">2+ YR</div></div>
        <div className="stat"><div className="k">AI STUDY</div><div className="v" style={{fontSize:12}}>DAILY</div></div>
        <div className="stat"><div className="k">SHIPPED</div><div className="v">1 PROJ</div></div>
        <div className="stat"><div className="k">COFFEE</div><div className="v">∞</div></div>
      </div>

      <div className="ticker" style={{marginTop: 30}}>
        <div className="ticker-track">
          {[...Array(2)].flatMap((_, k) => (
            ['REACT','TYPESCRIPT','NODE.JS','GO','POSTGRES','LLM','AGENTS','ORCHESTRATION','LANGCHAIN','RAG','MCP','VECTOR DB','DOCKER','AWS','PYTHON','GIT']
              .map((t, i) => (
                <span key={`${k}-${i}`} className="tag-pill">
                  <span style={{width:14, height:14, background:'var(--accent)'}}></span>
                  {t}
                </span>
              ))
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- ABOUT ----------
function SectionAbout() {
  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">02</span>
        <h1>ABOUT ME</h1>
      </div>

      <div className="about-grid">
        <div>
          <p style={{fontSize:19, lineHeight:1.55, color:'var(--text-dim)', marginTop:0}}>
            C# / .NET developer by day, indie hacker by night — building AI products after hours.
          </p>
          <ul style={{fontSize:19, lineHeight:1.6, color:'var(--text-dim)', paddingLeft: 20, margin:'10px 0 0'}}>
            <li>Grew an AI-focused audience to <span style={{color:'var(--accent)'}}>5K+ followers</span> in 6 months.</li>
            <li>Built a <span style={{color:'var(--accent-2)'}}>Dubai-style chewy cookie map</span> — 37 cafes onboarded across the US &amp; Canada, 1,000+ monthly users.</li>
            <li>Love turning ideas into real products and validating them with users.</li>
          </ul>

          <div className="pxline" style={{marginTop: 26}}>
            <span>■ STATS</span><span className="ln"></span>
          </div>

          <div className="grid g-3" style={{gap:10}}>
            <div className="stat"><div className="k">LOCATION</div><div className="v" style={{fontSize:10}}>ORANGE CO, USA</div></div>
            <div className="stat"><div className="k">CLASS</div><div className="v" style={{fontSize:12}}>FULL STACK</div></div>
            <div className="stat"><div className="k">LEVEL</div><div className="v">LV.42</div></div>
            <div className="stat"><div className="k">HP</div><div className="v" style={{fontSize:12, color:'var(--good)'}}>████████</div></div>
            <div className="stat"><div className="k">MP</div><div className="v" style={{fontSize:12, color:'var(--accent-2)'}}>███████░</div></div>
            <div className="stat"><div className="k">EXP</div><div className="v" style={{fontSize:12, color:'var(--accent-3)'}}>██████░░</div></div>
          </div>
        </div>

        <div>
          <div className="panel" style={{padding:0, overflow:'hidden', background:'var(--bg-deep)'}}>
            <div style={{padding: 8, borderBottom:'2px solid var(--line)', display:'flex', justifyContent:'space-between', fontSize:12, color:'var(--text-mute)', fontFamily:'JetBrains Mono, monospace'}}>
              <span>sion.character.png</span>
              <span>32×32</span>
            </div>
            <div style={{aspectRatio:'1/1', display:'grid', placeItems:'center', background:'linear-gradient(135deg, rgba(167,139,250,0.08), rgba(34,211,238,0.08))', position:'relative'}}>
              {/* dotted grid bg */}
              <div style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px)', backgroundSize:'12px 12px', pointerEvents:'none'}}></div>
              <PortraitBig size={260}/>
            </div>
            <div style={{padding:10, borderTop:'2px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span className="mono" style={{color:'var(--text-mute)'}}>sprite · idle</span>
              <div style={{display:'flex', gap:4}}>
                <span style={{width:8, height:8, background:'var(--good)'}}></span>
                <span style={{width:8, height:8, background:'var(--accent)'}}></span>
                <span style={{width:8, height:8, background:'var(--accent-3)'}}></span>
              </div>
            </div>
          </div>

          <div className="panel" style={{marginTop: 14}}>
            <div style={{fontFamily:'Press Start 2P, monospace', fontSize:9, color:'var(--text-mute)', letterSpacing:'0.08em', marginBottom: 8}}>■ LINKS</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              <div style={{display:'flex', justifyContent:'space-between', borderBottom:'2px dashed var(--line-soft)', paddingBottom:8}}>
                <span style={{color:'var(--text-dim)'}}>GITHUB</span>
                <a href="https://github.com/jeonsion" target="_blank" rel="noopener noreferrer">github.com/jeonsion</a>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', borderBottom:'2px dashed var(--line-soft)', paddingBottom:8}}>
                <span style={{color:'var(--text-dim)'}}>LINKEDIN</span>
                <a href="https://www.linkedin.com/in/sion-jeon" target="_blank" rel="noopener noreferrer">in/sion-jeon</a>
              </div>
              <div style={{display:'flex', justifyContent:'space-between'}}>
                <span style={{color:'var(--text-dim)'}}>EMAIL</span>
                <a href="mailto:a24349663@gmail.com">a24349663@gmail.com</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- EXPERIENCE ----------
function SectionExperience() {
  const rows = [
    { date: 'JUL 2024 — NOW', co: 'NMSI, INC', role: 'WEB DEVELOPER', loc: 'BREA, CA',
      detail: 'Full-stack web development on production systems.' },
    { date: 'JAN 2023 — JUL 2024', co: 'WEB AGENCY', role: 'FREELANCE WEB DEV', loc: 'SEOUL, KR',
      detail: 'Delivered client websites and web applications as a freelance developer.' },
    { date: 'JUN 2022 — JAN 2024', co: 'UBIQUITOUS COMPUTING LAB', role: 'INTERN (SCH UNIV.)', loc: 'SEOUL, KR',
      detail: 'Research internship at Soonchunhyang University — robotics, IoT-ROS, and behavior design.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">03</span>
        <h1>EXPERIENCE</h1>
      </div>

      <div className="panel" style={{padding:'6px 10px'}}>
        <div style={{display:'grid', gridTemplateColumns:'200px 180px 1fr 140px 40px', gap:14, padding:'10px 12px', fontFamily:'Press Start 2P, monospace', fontSize:8, color:'var(--text-mute)', letterSpacing:'0.08em', borderBottom:'2px solid var(--line)'}}>
          <div>DATE</div><div>COMPANY</div><div>ROLE</div><div style={{textAlign:'right'}}>LOCATION</div><div></div>
        </div>
        {rows.map((r, i) => (
          <React.Fragment key={i}>
            <div className="row" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="date">{r.date}</span>
              <span className="where">{r.co}</span>
              <span className="role">{r.role}</span>
              <span className="loc">{r.loc}</span>
              <span className="plus">{open === i ? '−' : '+'}</span>
            </div>
            {open === i && (
              <div style={{padding:'0 20px 16px 220px', color:'var(--text-dim)', fontSize:18, borderBottom:'2px dashed var(--line-soft)'}}>
                <div className="bubble" style={{display:'inline-block', maxWidth:600}}>
                  {r.detail}
                </div>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ---------- PROJECTS ----------
function SectionProjects() {
  const projects = [
    { t: 'DUBAI CHEWY COOKIE MAP', meta: '2025 · SOLO · USA', desc: 'Production full-stack map for cafes across North America.', chips:[['NEXT','c'],['PG','p'],['MAPS','y']], grad:['#22d3ee','#a78bfa'], icon:'proj',
      url: 'https://dujjoncu.com',
      goal: 'Help users discover Dubai Chewy Cookie cafes across the US and Canada via geolocation search and map clustering.',
      stack: ['Next.js','TypeScript','PostgreSQL','Google Maps API','Vercel'],
      lessons: ['Map clustering needs careful tuning per zoom level.','Geolocation UX fails loudly without permission-state handling.','Production deploys benefit from previewable feature branches.'],
      result: ['Deployed and operating in production.','Expanded to 37 registered cafes across California, Georgia, New York, and Canada as of March 2026.'] },
  ];
  const [open, setOpen] = React.useState(null);

  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">04</span>
        <h1>PROJECTS</h1>
      </div>
      <div style={{fontSize:16, color:'var(--text-mute)', marginBottom: 14}}>
        <span className="kbd">↵</span> click a card for details
      </div>

      <div className="grid g-3">
        {projects.map((p, i) => (
          <div key={i} className="pcard" onClick={() => setOpen(i)}>
            <div className="thumb" style={{background:`linear-gradient(135deg, ${p.grad[0]}, ${p.grad[1]})`, display:'grid', placeItems:'center', position:'relative'}}>
              <div style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px)', backgroundSize:'8px 8px'}}></div>
              <div style={{background:'rgba(10,10,26,0.6)', padding:12, border:'2px solid rgba(255,255,255,0.3)'}}>
                <PxIcon type={p.icon} color="#ffffff" size={36}/>
              </div>
              <div style={{position:'absolute', top:6, left:6, fontFamily:'Press Start 2P, monospace', fontSize:8, color:'rgba(0,0,0,0.6)', background:'rgba(255,255,255,0.9)', padding:'3px 5px'}}>
                PROJECT.{String(i+1).padStart(2,'0')}
              </div>
            </div>
            <div className="body">
              <div className="ptitle">{p.t}</div>
              <div className="pmeta">{p.meta}</div>
              <div style={{color:'var(--text-dim)', fontSize:17, marginTop:4}}>{p.desc}</div>
              <div className="chips">
                {p.chips.map((c, k) => <span key={k} className={`chip ${c[1]}`}>{c[0]}</span>)}
              </div>
              {p.url && (
                <a
                  href={p.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={e => e.stopPropagation()}
                  style={{marginTop:8, fontSize:15, color:'var(--accent-2)'}}
                >
                  {p.url.replace(/^https?:\/\//,'')} →
                </a>
              )}
            </div>
          </div>
        ))}
      </div>

      {open !== null && (
        <div className="pmodal-back" onClick={() => setOpen(null)}>
          <div className="pmodal" onClick={e => e.stopPropagation()}>
            <div className="pmodal-head" style={{background:`linear-gradient(135deg, ${projects[open].grad[0]}, ${projects[open].grad[1]})`}}>
              <div style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(0,0,0,0.15) 1px, transparent 1px)', backgroundSize:'8px 8px'}}></div>
              <div style={{position:'relative', display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
                <div>
                  <div style={{fontFamily:'Press Start 2P, monospace', fontSize:9, color:'rgba(0,0,0,0.7)', background:'rgba(255,255,255,0.9)', padding:'4px 6px', display:'inline-block'}}>
                    PROJECT.{String(open+1).padStart(2,'0')}
                  </div>
                  <div style={{fontFamily:'Press Start 2P, monospace', fontSize:18, color:'#fff', marginTop:10, textShadow:'2px 2px 0 rgba(0,0,0,0.4)'}}>{projects[open].t}</div>
                  <div style={{fontSize:16, color:'rgba(255,255,255,0.9)', marginTop:4}}>{projects[open].meta}</div>
                </div>
                <button className="pmodal-x" onClick={() => setOpen(null)}>×</button>
              </div>
            </div>
            <div className="pmodal-body">
              <div style={{fontSize:18, color:'var(--text)', marginBottom: 18}}>{projects[open].desc}</div>
              {projects[open].url && (
                <div className="pdetail"><div className="plabel" style={{color:'var(--accent-2)'}}>▸ LIVE SITE</div>
                  <a href={projects[open].url} target="_blank" rel="noopener noreferrer" style={{fontSize:18}}>{projects[open].url.replace(/^https?:\/\//,'')}</a>
                </div>
              )}
              <div className="pdetail"><div className="plabel" style={{color:'var(--accent)'}}>▸ GOAL</div><div className="pvalue">{projects[open].goal}</div></div>
              <div className="pdetail"><div className="plabel" style={{color:'var(--accent-2)'}}>▸ TECH STACK</div>
                <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                  {projects[open].stack.map((s, i) => <span key={i} className="chip y">{s}</span>)}
                </div>
              </div>
              <div className="pdetail"><div className="plabel" style={{color:'var(--accent-3)'}}>▸ LESSONS LEARNED</div>
                <ul className="plist">{projects[open].lessons.map((l, i) => <li key={i}>{l}</li>)}</ul>
              </div>
              <div className="pdetail"><div className="plabel" style={{color:'var(--accent-4)'}}>▸ RESULT</div>
                <ul className="plist">{projects[open].result.map((l, i) => <li key={i}>{l}</li>)}</ul>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ---------- SKILLS ----------
function SectionSkills() {
  const data = [
    { group: 'LANGUAGES / FRAMEWORKS', items: [
      { name: 'C# / .NET',   lv: 18, tech: 'ts' },
      { name: 'TYPESCRIPT',  lv: 17, tech: 'ts' },
      { name: 'JAVASCRIPT',  lv: 18, tech: 'node' },
      { name: 'PYTHON',      lv: 14, tech: 'py' },
      { name: 'NODE.JS',     lv: 16, tech: 'node' },
      { name: 'FASTAPI',     lv: 13, tech: 'py' },
    ]},
    { group: 'FRONT-END', items: [
      { name: 'HTML',        lv: 19, tech: 'react' },
      { name: 'CSS',         lv: 18, tech: 'react' },
    ]},
    { group: 'DATABASES', items: [
      { name: 'MSSQL',       lv: 17, tech: 'pg' },
      { name: 'POSTGRESQL',  lv: 16, tech: 'pg' },
      { name: 'MONGODB',     lv: 14, tech: 'pg' },
      { name: 'RDBMS',       lv: 16, tech: 'pg' },
    ]},
    { group: 'CLOUD / DEVOPS', items: [
      { name: 'AWS',         lv: 14, tech: 'aws' },
      { name: 'AZURE',       lv: 14, tech: 'aws' },
      { name: 'DOCKER',      lv: 15, tech: 'docker' },
      { name: 'VERCEL',      lv: 15, tech: 'docker' },
      { name: 'GIT',         lv: 18, tech: 'git' },
    ]},
  ];
  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">05</span>
        <h1>SKILLS</h1>
      </div>

      <div className="grid g-2" style={{gridTemplateColumns:'1fr 1fr'}}>
        {data.map((g, i) => (
          <div key={i} className="panel">
            <div style={{fontFamily:'Press Start 2P, monospace', fontSize:10, color:'var(--accent)', letterSpacing:'0.08em', marginBottom: 14}}>
              ▸ {g.group}
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {g.items.map((s, j) => (
                <div key={j} className="skill">
                  <div className="skill-head">
                    <span style={{display:'flex', alignItems:'center', gap:10, color:'var(--text)'}}>
                      <TechBadge tech={s.tech} size={20}/>
                      {s.name}
                    </span>
                    <span className="mono" style={{color:'var(--text-mute)'}}>LV {s.lv}/20</span>
                  </div>
                  <div className="skill-bar">
                    {Array.from({length:20}).map((_, k) => (
                      <div key={k} className={`seg ${k < s.lv ? 'on' : ''}`}></div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- PUBLICATIONS ----------
function SectionPublications() {
  const items = [
    { y:'2024', t:'FlexBE-based Robot Behavior Design for IoT-ROS Robot Mission Execution', src:'Korean Institute of Information Scientists and Engineers · Jun 1, 2024' },
    { y:'2023', t:'Disaster Response Mobility Platform Using SLAM and Object Detection', src:'Korean Institute of Information Scientists and Engineers · Jun 1, 2023' },
  ];
  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">06</span>
        <h1>PUBLICATIONS</h1>
      </div>
      <div className="panel">
        {items.map((p, i) => (
          <div key={i} className="pub">
            <span className="year">{p.y}</span>
            <div>
              <div className="ttl">{p.t}</div>
              <div className="src">{p.src}</div>
            </div>
            <span></span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- CONTACT ----------
function SectionContact() {
  return (
    <div className="section">
      <div className="section-head">
        <span className="eyebrow">07</span>
        <h1>CONTACT</h1>
      </div>

      <p style={{fontSize:19, color:'var(--text-dim)', marginTop:0, lineHeight:1.55}}>
        Are you interested in my portfolio and want to talk with me?
      </p>
      <p style={{fontSize:19, color:'var(--text-dim)', lineHeight:1.55}}>
        Reach out via email or any of the links below — I'll reply as soon as I can.
      </p>

      <div className="panel" style={{marginTop: 20, maxWidth: 560}}>
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{color:'var(--text-mute)'}}>EMAIL</span>
            <a href="mailto:a24349663@gmail.com">a24349663@gmail.com</a>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', borderTop:'2px dashed var(--line-soft)', paddingTop:12}}>
            <span style={{color:'var(--text-mute)'}}>GITHUB</span>
            <a href="https://github.com/jeonsion" target="_blank" rel="noopener noreferrer">github.com/jeonsion</a>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', borderTop:'2px dashed var(--line-soft)', paddingTop:12}}>
            <span style={{color:'var(--text-mute)'}}>LINKEDIN</span>
            <a href="https://www.linkedin.com/in/sion-jeon" target="_blank" rel="noopener noreferrer">in/sion-jeon</a>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', borderTop:'2px dashed var(--line-soft)', paddingTop:12}}>
            <span style={{color:'var(--text-mute)'}}>TIMEZONE</span>
            <span className="mono" style={{color:'var(--text)'}}>PST · UTC-8</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', borderTop:'2px dashed var(--line-soft)', paddingTop:12}}>
            <span style={{color:'var(--text-mute)'}}>REPLY</span>
            <span style={{color:'var(--good)'}}>&lt; 48H</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Sections = {
  home: SectionHome,
  about: SectionAbout,
  experience: SectionExperience,
  projects: SectionProjects,
  skills: SectionSkills,
  publications: SectionPublications,
  contact: SectionContact,
};