// Minimal CV — static, light, and document-like.
// All visuals are inline SVG. Reads like a typeset academic page.

function MinimalCV() {
  const [hoveredExperience, setHoveredExperience] = React.useState(null);

  const T = {
    bg: '#fbfaf7',
    paper: '#fffefa',
    ink: '#1a1714',
    muted: 'rgba(26,23,20,0.55)',
    soft: 'rgba(26,23,20,0.78)',
    line: 'rgba(26,23,20,0.18)',
    fine: 'rgba(26,23,20,0.08)',
    accent: '#9a3a1a',
  };

  const openExternal = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const LinkButton = ({ url, children, style = {}, label }) => (
    <button
      type="button"
      aria-label={label || (typeof children === 'string' ? children : 'Open link')}
      onClick={() => openExternal(url)}
      style={{
        background: 'transparent',
        border: 0,
        padding: 0,
        color: T.accent,
        cursor: 'pointer',
        font: 'inherit',
        letterSpacing: 'inherit',
        textAlign: 'left',
        ...style,
      }}
    >
      {children}
    </button>
  );

  // Static, decorative phase-portrait illustration. Two attractors, hand-laid arrows.
  const Diagram = () => (
    <svg viewBox="0 0 600 240" style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <marker id="vd-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M0,0 L10,5 L0,10 z" fill={T.muted} />
        </marker>
        <marker id="vd-arrow-acc" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M0,0 L10,5 L0,10 z" fill={T.accent} />
        </marker>
      </defs>
      <rect x="0" y="0" width="600" height="240" fill={T.paper} />
      {/* light grid */}
      {Array.from({ length: 24 }).map((_, i) => (
        <line key={'gx' + i} x1={i * 25} y1="0" x2={i * 25} y2="240" stroke={T.fine} />
      ))}
      {Array.from({ length: 10 }).map((_, i) => (
        <line key={'gy' + i} x1="0" y1={i * 25} x2="600" y2={i * 25} stroke={T.fine} />
      ))}
      {/* attractors */}
      <circle cx="130" cy="120" r="6" fill={T.muted} />
      <circle cx="470" cy="120" r="7" fill={T.accent} />
      <text x="130" y="148" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={T.muted} textAnchor="middle">v_drift</text>
      <text x="470" y="148" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={T.accent} textAnchor="middle">v_comply</text>
      {/* trajectory curves — three sample paths */}
      <path d="M 140 60 C 200 60, 350 80, 460 116" fill="none" stroke={T.accent} strokeWidth="1.2" markerEnd="url(#vd-arrow-acc)" />
      <path d="M 140 120 C 220 120, 350 122, 460 121" fill="none" stroke={T.accent} strokeWidth="1.2" markerEnd="url(#vd-arrow-acc)" />
      <path d="M 140 180 C 220 180, 340 170, 460 128" fill="none" stroke={T.accent} strokeWidth="1.2" markerEnd="url(#vd-arrow-acc)" />
      {/* dashed un-steered drift */}
      <path d="M 300 90 C 240 100, 180 110, 140 118" fill="none" stroke={T.muted} strokeWidth="1" strokeDasharray="3 3" markerEnd="url(#vd-arrow)" />
      <path d="M 300 150 C 240 145, 180 130, 140 122" fill="none" stroke={T.muted} strokeWidth="1" strokeDasharray="3 3" markerEnd="url(#vd-arrow)" />
      {/* token dots */}
      {[[120, 50], [180, 78], [260, 70], [350, 78], [430, 100], [520, 116],
        [140, 200], [220, 192], [310, 170], [400, 140], [480, 124]].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="2" fill={T.ink} opacity="0.6" />
        ))}
      {/* axis label */}
      <text x="300" y="226" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={T.muted} textAnchor="middle" letterSpacing="2">
        ACTIVATION SPACE — A 2D PROJECTION
      </text>
    </svg>
  );

  const H = ({ num, children }) => (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 12,
      borderBottom: `1px solid ${T.line}`, paddingBottom: 8, marginBottom: 16,
    }}>
      <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.accent }}>{num}</span>
      <h2 style={{ fontFamily: '"Source Serif 4", Georgia, serif', fontWeight: 500, fontSize: 18, color: T.ink, margin: 0, letterSpacing: '0.01em' }}>{children}</h2>
    </div>
  );

  return (
    <div style={{
      background: T.bg, color: T.ink, minHeight: '100%',
      fontFamily: '"Source Serif 4", Georgia, serif',
    }}>
      <main style={{ maxWidth: 840, margin: '0 auto', padding: '88px 64px 72px' }}>
        {/* Hero — single static block */}
        <div style={{ marginBottom: 48 }}>
          <div style={{
            fontFamily: '"Noto Serif KR", serif', fontSize: 13, letterSpacing: '0.12em',
            color: T.muted, marginBottom: 14,
          }}>강민재</div>
          <h1 style={{
            fontFamily: '"Playfair Display", "Source Serif 4", Georgia, serif', fontWeight: 800,
            fontSize: 40, lineHeight: 1.08, letterSpacing: '0',
            margin: 0, color: T.accent,
          }}>
            Kang Minjae
          </h1>
          <p style={{
            fontSize: 16, lineHeight: 1.5, color: T.soft, margin: '16px 0 0', maxWidth: '100%',
          }}>
            {BIO_FIRST[0].replace('Prof. Jaehyung Kim.', '')}
            <LinkButton url={PROFILE.advisorUrl} style={{ color: T.ink, textDecoration: 'underline', textDecorationColor: T.line, textUnderlineOffset: 3 }}>
              Prof. Jaehyung Kim
            </LinkButton>.
          </p>
          {BIO_FIRST.slice(1).map((p, i) => (
            <p key={i} style={{
              fontSize: 16, lineHeight: 1.5, color: T.soft, margin: '6px 0 0', maxWidth: '100%',
            }}>
              {p}
            </p>
          ))}
          <div style={{
            marginTop: 18, display: 'flex', gap: 16, fontSize: 13, color: T.muted,
            fontFamily: '"JetBrains Mono", monospace', letterSpacing: '0.04em',
          }}>
            <LinkButton url={PROFILE.links.scholar}>scholar ↗</LinkButton>
            <LinkButton url={PROFILE.links.github}>github ↗</LinkButton>
            <LinkButton url={PROFILE.links.linkedin}>linkedin ↗</LinkButton>
            <LinkButton url={'mailto:' + PROFILE.emails[0]}>email ↗</LinkButton>
          </div>
        </div>

        {/*
        Diagram
        <figure style={{ margin: '0 0 56px' }}>
          <div style={{ border: `1px solid ${T.line}`, background: T.paper }}>
            <Diagram />
          </div>
          <figcaption style={{
            fontFamily: '"Source Serif 4", Georgia, serif', fontStyle: 'italic',
            fontSize: 13, color: T.muted, marginTop: 8, lineHeight: 1.5,
          }}>
            Fig. 1 — With a steering vector added to the residual stream, token trajectories that would
            otherwise drift (dashed) are nudged toward the compliance direction.
          </figcaption>
        </figure>
        */}

        {/* News */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 1">News</H>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
            {NEWS.map((n, i) => (
              <li key={i} style={{
                padding: '10px 0', borderBottom: i < NEWS.length - 1 ? `1px solid ${T.fine}` : 'none',
                display: 'grid', gridTemplateColumns: '92px 1fr', gap: 18, alignItems: 'baseline',
              }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.muted }}>{n.date}</span>
                <span
                  style={{ color: T.soft, fontSize: 15, lineHeight: 1.55 }}
                  dangerouslySetInnerHTML={{
                    __html: n.text
                      .replace(/\*\*(.+?)\*\*/g, '<strong style="color:' + T.ink + ';font-weight:500">$1</strong>')
                      .replace(/\*(.+?)\*/g, '<em>$1</em>'),
                  }}
                />
              </li>
            ))}
          </ol>
        </section>

        {/* Research */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 2">Research interests</H>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
            {RESEARCH_INTERESTS.map((r, i) => (
              <li key={i} style={{
                padding: '10px 0', borderBottom: i < RESEARCH_INTERESTS.length - 1 ? `1px solid ${T.fine}` : 'none',
                display: 'grid', gridTemplateColumns: '30px 1fr', gap: 12,
              }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.muted }}>{String(i + 1).padStart(2, '0')}.</span>
                <div>
                  <span style={{ color: T.ink, fontWeight: 500 }}>{r.title}.</span>{' '}
                  <span style={{ color: T.soft, fontSize: 15 }}>{r.body}</span>
                </div>
              </li>
            ))}
          </ol>
        </section>

        {/* Publications */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 3">Publications</H>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
            {PUBS.map((p, i) => (
              <li key={p.id} style={{
                padding: '12px 0', borderBottom: i < PUBS.length - 1 ? `1px solid ${T.fine}` : 'none',
                display: 'grid', gridTemplateColumns: '30px 1fr 80px', gap: 12, alignItems: 'baseline',
              }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.muted }}>[{PUBS.length - i}]</span>
                <div>
                  <span style={{ color: T.ink, fontSize: 15, lineHeight: 1.4 }}>
                    {p.title}
                    {(p.links || []).map((l, j) => (
                      <LinkButton
                        key={j}
                        url={l.url}
                        label={`Open ${l.label}`}
                        style={{
                          marginLeft: 7,
                          color: T.accent,
                          fontFamily: '"JetBrains Mono", monospace',
                          fontSize: 10,
                          verticalAlign: '1px',
                        }}
                      >
                        ↗
                      </LinkButton>
                    ))}
                  </span>
                  <div style={{ fontSize: 12, color: T.muted, marginTop: 3, fontStyle: 'italic' }}>
                    {p.authors.map((a, authorIndex) => {
                      const name = p.id === 'rstiefel' && authorIndex < 2 ? `${a}*` : a;
                      return a === 'Minjae Kang'
                        ? <strong key={a} style={{ color: T.soft, fontStyle: 'normal' }}>{name}</strong>
                        : name;
                    }).reduce((acc, b, idx) => idx === 0 ? [b] : [...acc, ', ', b], [])}
                  </div>
                </div>
                <div style={{
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: '0.04em',
                  color: T.muted, textAlign: 'right',
                }}>
                  {p.venue} {p.year}
                </div>
              </li>
            ))}
          </ol>
        </section>

        {/* Experience */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 4">Experience</H>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
            {EXPERIENCE.map((x, i) => (
              <li key={i} style={{
                padding: '12px 0', borderBottom: i < EXPERIENCE.length - 1 ? `1px solid ${T.fine}` : 'none',
                display: 'grid', gridTemplateColumns: '160px 1fr', gap: 18, position: 'relative',
              }}
                onMouseEnter={() => setHoveredExperience(i)}
                onMouseLeave={() => setHoveredExperience(null)}
              >
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.muted }}>{x.when}</span>
                <div>
                  <span style={{ color: T.ink, fontWeight: 500 }}>{x.org}.</span>{' '}
                  <span style={{ color: T.soft, fontStyle: 'italic' }}>{x.role}.</span>
                </div>
                {x.summary && hoveredExperience === i && (
                  <div style={{
                    position: 'absolute',
                    left: 172,
                    top: -22,
                    maxWidth: 470,
                    padding: '8px 10px',
                    border: `1px solid ${T.line}`,
                    borderRadius: 6,
                    background: T.paper,
                    color: T.soft,
                    fontSize: 12.5,
                    lineHeight: 1.35,
                    boxShadow: '0 10px 24px rgba(26,23,20,0.10)',
                    zIndex: 3,
                  }}>
                    {x.summary}
                    <span style={{
                      position: 'absolute',
                      left: 18,
                      bottom: -6,
                      width: 10,
                      height: 10,
                      background: T.paper,
                      borderRight: `1px solid ${T.line}`,
                      borderBottom: `1px solid ${T.line}`,
                      transform: 'rotate(45deg)',
                    }} />
                  </div>
                )}
              </li>
            ))}
          </ol>
        </section>

        {/* Education */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 5">Education</H>
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
            {EDUCATION.map((e, i) => (
              <li key={i} style={{
                padding: '12px 0', borderBottom: i < EDUCATION.length - 1 ? `1px solid ${T.fine}` : 'none',
                display: 'grid', gridTemplateColumns: '160px 1fr', gap: 18,
              }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.muted }}>{e.when}</span>
                <div>
                  <span style={{ color: T.ink, fontWeight: 500 }}>{e.school}.</span>{' '}
                  <span style={{ color: T.soft }}>{e.degree}.</span>
                  {e.note && <div style={{ fontSize: 13, color: T.muted, fontStyle: 'italic', marginTop: 2 }}>{e.note}</div>}
                </div>
              </li>
            ))}
          </ol>
        </section>

        {/* Academic services */}
        <section style={{ marginBottom: 48 }}>
          <H num="§ 6">Academic Services</H>
          {ACADEMIC_SERVICES.map((group) => (
            <div key={group.category} style={{ padding: '8px 0 0' }}>
              <div style={{ fontSize: 15, color: T.ink, fontWeight: 600, marginBottom: 8 }}>
                {group.category}
              </div>
              <ul style={{ margin: 0, paddingLeft: 16 }}>
                {group.items.map((item) => (
                  <li key={item.title} style={{ color: T.soft, fontSize: 13.5, lineHeight: 1.65, paddingLeft: 4 }}>
                    <LinkButton
                      url={item.url}
                      style={{ color: T.soft, fontWeight: 400, textDecoration: 'none' }}
                    >
                      {item.title}
                    </LinkButton>
                    : {item.years}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </section>

        <section style={{ marginBottom: 36 }}>
          <H num="§ 7">Contact</H>
          <p style={{ fontSize: 15, lineHeight: 1.58, color: T.soft, margin: 0 }}>
            Email me at{' '}
            <LinkButton url={'mailto:' + PROFILE.emails[0]} style={{ textDecoration: 'underline', textUnderlineOffset: 3 }}>{PROFILE.emails[0]}</LinkButton>
            {' '}or{' '}
            <LinkButton url={'mailto:' + PROFILE.emails[1]} style={{ textDecoration: 'underline', textUnderlineOffset: 3 }}>{PROFILE.emails[1]}</LinkButton>.
            <br />
            I'm always happy to discuss anything related to LLMs.
          </p>
        </section>

        <footer style={{
          marginTop: 56, paddingTop: 16, borderTop: `1px solid ${T.line}`,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: '0.06em',
          color: T.muted, display: 'flex', justifyContent: 'space-between',
        }} />
      </main>
    </div>
  );
}

Object.assign(window, { MinimalCV });
