// Header, Footer, Icon, Button — IDISMAN website primitives
const Icon = ({ name, size = 16, invert }) => (
  <img src={`assets/icons/${name}-16.svg`} width={size} height={size} alt=""
    style={{ display: 'inline-block', verticalAlign: 'middle', filter: invert ? 'invert(1)' : 'none' }} />
);

const Button = ({ variant = 'primary', size = 'md', icon, iconRight, children, onClick }) => {
  const [h, setH] = React.useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
    fontFamily: 'var(--font-sans)', fontWeight: 600, transition: 'all 120ms var(--ease-std)',
    height: size === 'lg' ? 56 : 40, padding: size === 'lg' ? '0 28px' : '0 16px',
    fontSize: size === 'lg' ? 18 : 14, borderRadius: size === 'lg' ? 999 : 6, border: '1px solid',
  };
  const v = {
    primary: { background: h ? 'var(--gray-700)' : 'var(--fg1)', color: 'var(--bg)', borderColor: h ? 'var(--gray-700)' : 'var(--fg1)' },
    secondary: { background: h ? 'var(--bg-subtle)' : 'var(--bg)', color: 'var(--fg1)', borderColor: h ? 'var(--gray-400)' : 'var(--border)' },
    ghost: { background: h ? 'var(--bg-muted)' : 'transparent', color: 'var(--fg1)', borderColor: 'transparent' },
  }[variant];
  const inv = variant === 'primary';
  return (
    <button style={{ ...base, ...v }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} onClick={onClick}>
      {icon && <Icon name={icon} invert={inv} />}{children}{iconRight && <Icon name={iconRight} invert={inv} />}
    </button>
  );
};

const GITHUB_URL = 'https://github.com/pangyoanoangyo';

const Header = ({ page, go }) => {
  const links = [['home', 'Home'], ['projects', 'Projects'], ['career', 'Career'], ['contact', 'Contact']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 10, background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 40px', height: 64, display: 'flex', alignItems: 'center', gap: 32 }}>
        <a onClick={() => go('home')} style={{ cursor: 'pointer', font: '900 22px var(--font-sans)', letterSpacing: '-0.06em' }}>
          IDISMAN<span style={{ color: 'var(--gray-400)' }}>.</span>
        </a>
        <nav style={{ display: 'flex', gap: 4 }}>
          {links.map(([k, l]) => (
            <a key={k} onClick={() => go(k)} style={{
              cursor: 'pointer', padding: '8px 12px', borderRadius: 6, fontSize: 14, fontWeight: page === k ? 600 : 500,
              color: page === k ? 'var(--fg1)' : 'var(--fg2)', background: page === k ? 'var(--bg-muted)' : 'transparent',
            }}>{l}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <Button variant="secondary" icon="mark-github" onClick={() => window.open(GITHUB_URL)}>GitHub</Button>
          <Button onClick={() => go('contact')}>Contact</Button>
        </div>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer style={{ background: 'var(--gray-950)', color: '#fff', padding: '96px 40px 40px' }}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
      <div style={{ font: '900 clamp(80px,14vw,200px)/0.85 var(--font-sans)', letterSpacing: '-0.06em' }}>
        IDISMAN<span style={{ color: 'var(--gray-600)' }}>.</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--gray-800)', font: '13px var(--font-mono)', color: 'var(--gray-500)' }}>
        <span>© 2026 김상필 · idisman.co.kr</span>
        <span>Built with Mona Sans & Pretendard</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Icon, Button, Header, Footer, GITHUB_URL });