// /links — linktree-style hub. Avatar + name + motto + quick-row + stacked link list.
// Each link row plays a typed-terminal effect on hover/touch.

const SOCIALS = [
  { k: 'github', label: 'GitHub', handle: 'Lorakszak', url: 'https://github.com/Lorakszak' },
  { k: 'youtube', label: 'YouTube', handle: '@lorakszak', url: 'https://www.youtube.com/@lorakszak' },
  { k: 'instagram', label: 'Instagram', handle: '@lorakszak', url: 'https://www.instagram.com/lorakszak/' },
  { k: 'tiktok', label: 'TikTok', handle: '@lorakszak', url: 'https://www.tiktok.com/@lorakszak' },
  { k: 'x', label: 'X (Twitter)', handle: '@Lorakszak', url: 'https://x.com/Lorakszak' },
  { k: 'threads', label: 'Threads', handle: '@lorakszak', url: 'https://www.threads.com/@lorakszak' },
  { k: 'linkedin', label: 'LinkedIn', handle: 'lorakszak', url: 'https://www.linkedin.com/in/lorakszak/' },
  { k: 'civitai', label: 'Civitai', handle: 'Lorakszak', url: 'https://civitai.com/user/Lorakszak' },
];

const ICON_PATHS = {
  github: 'M12 .3a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1.1-.8.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.4-.5-1.5.1-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.2.9 2.3v3.4c0 .3.2.7.8.6A12 12 0 0012 .3',
  youtube: 'M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 00.5 6.2 31 31 0 000 12a31 31 0 00.5 5.8 3 3 0 002.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.8zM9.6 15.6V8.4l6.4 3.6-6.4 3.6z',
  instagram: 'M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4 1 .5.4.8.8 1 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-1 1.4-.4.5-.8.8-1.4 1-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-1-.5-.4-.8-.8-1-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 1-1.4.4-.5.8-.8 1.4-1 .4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zM12 0C8.7 0 8.3 0 7.1.1 5.8.1 4.9.3 4.1.6c-.8.3-1.6.7-2.3 1.4C1.1 2.7.7 3.5.4 4.3.1 5.1-.1 6 0 7.3 0 8.5 0 8.9 0 12s0 3.5.1 4.7c.1 1.3.3 2.2.6 3 .3.8.7 1.6 1.4 2.3.7.7 1.5 1.1 2.3 1.4.8.3 1.7.5 3 .6 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.3-.1 2.2-.3 3-.6.8-.3 1.6-.7 2.3-1.4.7-.7 1.1-1.5 1.4-2.3.3-.8.5-1.7.6-3 .1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c-.1-1.3-.3-2.2-.6-3-.3-.8-.7-1.6-1.4-2.3C21.3 1.1 20.5.7 19.7.4c-.8-.3-1.7-.5-3-.6C15.5 0 15.1 0 12 0zm0 5.8a6.2 6.2 0 100 12.4 6.2 6.2 0 000-12.4zm0 10.2a4 4 0 110-8 4 4 0 010 8zm6.4-11.8a1.4 1.4 0 100 2.8 1.4 1.4 0 000-2.8z',
  tiktok: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
  x: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z',
  threads: 'M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.523-8.482C5.845 1.205 8.598.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.781 3.631 2.695 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291 1.077-.062 2.087-.014 3.02.142-.124-.747-.375-1.339-.75-1.764-.515-.586-1.31-.883-2.36-.89h-.029c-.844 0-1.99.232-2.721 1.32L7.32 7.62c.98-1.454 2.568-2.256 4.471-2.256h.046c3.184.02 5.082 1.969 5.27 5.366.108.046.216.094.32.144 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z',
  linkedin: 'M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z',
  civitai: 'M4 4H15V7.5H7.5V16.5H15V20H4ZM17.5 4H21V20H17.5Z',
};

const Icon = ({ k, size = 18 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{ flexShrink: 0 }}>
    <path d={ICON_PATHS[k]} />
  </svg>
);

// Single stacked link row. Hover/touch types `$ open <url>` then `> redirecting...`.
const LinkRow = ({ s }) => {
  const T = window.TOKENS;
  const [hover, setHover] = React.useState(false);
  const cmd = `$ open ${s.url}`;
  const out = `> redirecting...`;
  const full = cmd + '\n' + out;

  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!hover) { setN(0); return; }
    const t = setInterval(() => setN(v => v < full.length ? v + 1 : v), 18);
    return () => clearInterval(t);
  }, [hover]);

  const cmdShown = full.slice(0, n).split('\n')[0] || '';
  const outShown = full.slice(0, n).split('\n')[1] || '';

  return (
    <a
      href={s.url}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onTouchStart={() => setHover(true)}
      className={hover ? 'glitching' : ''}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        textDecoration: 'none', color: T.fg,
        background: hover ? T.bgSunken : T.bgRaised,
        border: `1px solid ${hover ? T.fgGhost : T.fgFaint}`,
        borderLeft: `2px solid ${hover ? T.accent : T.fgFaint}`,
        padding: '14px 16px', marginBottom: 10,
        position: 'relative',
        transition: 'background .15s, border-color .15s',
        cursor: 'pointer',
        height: 60, minHeight: 60, maxHeight: 60,
        boxSizing: 'border-box', overflow: 'hidden',
      }}
    >
      <div style={{
        color: hover ? T.fg : T.fgMid,
        transition: 'color .15s',
        display: 'flex', alignItems: 'center',
      }}>
        <Icon k={s.k} size={20} />
      </div>

      <div style={{ flex: 1, minWidth: 0, overflow: 'hidden', height: 32, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {!hover ? (
          <React.Fragment>
            <div className="glitch-line" data-text={s.label} style={{
              fontSize: 14, fontWeight: 700, color: T.fg, letterSpacing: '0.02em',
            }}>{s.label}</div>
            <div style={{ fontSize: 11, color: T.fgDim, marginTop: 2 }}>{s.handle}</div>
          </React.Fragment>
        ) : (
          <div style={{
            fontSize: 11, lineHeight: 1.4, fontFamily: T.mono,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            <div style={{ color: T.fg }}>
              {cmdShown}
              {n < cmd.length && <span style={{
                display: 'inline-block', width: 7, height: 11, background: T.fg,
                verticalAlign: '-1px', marginLeft: 2, animation: 'caretBlink 1s steps(1,end) infinite',
              }} />}
            </div>
            <div style={{ color: T.fgMid }}>
              {outShown}
              {n >= cmd.length + 1 && n < full.length && <span style={{
                display: 'inline-block', width: 7, height: 11, background: T.fgMid,
                verticalAlign: '-1px', marginLeft: 2, animation: 'caretBlink 1s steps(1,end) infinite',
              }} />}
            </div>
          </div>
        )}
      </div>

      <div style={{
        fontSize: 14, color: hover ? T.accent : T.fgGhost,
        transition: 'color .15s', flexShrink: 0,
      }}>↗</div>
    </a>
  );
};

const QuickRow = () => {
  const T = window.TOKENS;
  const [hi, setHi] = React.useState(null);
  return (
    <div style={{
      display: 'flex', justifyContent: 'center', gap: 18,
      paddingBottom: 8, flexWrap: 'wrap',
    }}>
      {SOCIALS.map((s, i) => (
        <a
          key={s.k}
          href={s.url}
          target="_blank"
          rel="noopener noreferrer"
          onMouseEnter={() => setHi(i)}
          onMouseLeave={() => setHi(null)}
          title={s.label}
          style={{
            color: hi === i ? T.fg : T.fgMid,
            transition: 'color .15s, transform .15s',
            transform: hi === i ? 'translateY(-2px)' : 'none',
            display: 'inline-flex',
          }}
        >
          <Icon k={s.k} size={20} />
        </a>
      ))}
    </div>
  );
};

const ShareButton = () => {
  const T = window.TOKENS;
  const [state, setState] = React.useState(null); // 'shared' | 'copied' | null
  const [hover, setHover] = React.useState(false);

  const onShare = async (e) => {
    e.preventDefault();
    const url = window.location.origin + '/links';
    const data = {
      title: 'Karol Roszak - Lorakszak',
      text: 'all my socials in one place',
      url,
    };
    try {
      if (navigator.share) {
        await navigator.share(data);
        setState('shared');
      } else {
        await navigator.clipboard.writeText(url);
        setState('copied');
      }
    } catch (err) {
      try {
        await navigator.clipboard.writeText(url);
        setState('copied');
      } catch (_) { /* clipboard blocked */ }
    }
    setTimeout(() => setState(null), 1800);
  };

  const label = state === 'copied' ? '✓ COPIED'
    : state === 'shared' ? '✓ SHARED'
      : '↗ SHARE';

  return (
    <span
      onClick={onShare}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        cursor: 'pointer',
        color: state || hover ? T.accent : T.fgGhost,
        border: `1px solid ${state || hover ? T.accent : T.fgFaint}`,
        padding: '5px 10px',
        fontSize: 9, letterSpacing: '0.3em',
        transition: 'color .15s, border-color .15s',
        userSelect: 'none',
      }}
    >
      {label}
    </span>
  );
};

const LinksPage = () => {
  const T = window.TOKENS;
  const [glitch, setGlitch] = React.useState(false);
  React.useEffect(() => {
    const t = setInterval(() => {
      setGlitch(true);
      setTimeout(() => setGlitch(false), 420);
    }, 6000);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{
      minHeight: '100vh', position: 'relative', zIndex: 1,
      padding: '120px 16px 120px', maxWidth: 540, margin: '0 auto',
      fontFamily: T.mono, color: T.fg,
    }}>
      <style>{`
        @keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
        @keyframes ringPulseLinks {
          0%,100% { box-shadow: 0 0 0 2px ${T.fgFaint}, 0 0 24px rgba(240,240,240,0); }
          50%     { box-shadow: 0 0 0 2px ${T.accent}, 0 0 24px rgba(240,240,240,0.18); }
        }
      `}</style>

      <div style={{
        border: `1px solid ${T.fgFaint}`,
        background: 'transparent',
        position: 'relative',
      }}>
        {/* corner brackets */}
        <div style={{ position: 'absolute', top: 8, left: 8, fontSize: 9, color: T.fgGhost, letterSpacing: '0.3em' }}>┌──</div>
        <div style={{ position: 'absolute', top: 8, right: 8, fontSize: 9, color: T.fgGhost, letterSpacing: '0.3em' }}>──┐</div>
        <div style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 9, color: T.fgGhost, letterSpacing: '0.3em' }}>└──</div>
        <div style={{ position: 'absolute', bottom: 8, right: 8, fontSize: 9, color: T.fgGhost, letterSpacing: '0.3em' }}>──┘</div>

        {/* header */}
        <div className={glitch ? 'glitching' : ''} style={{ textAlign: 'center', padding: '32px 20px 24px' }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            marginBottom: 28, fontSize: 10, letterSpacing: '0.4em', color: T.fgGhost,
          }}>
            <span style={{ color: T.accent }}>◉ LIVE</span>
            <ShareButton />
          </div>

          <div
            style={{
              width: 104, height: 104, borderRadius: '50%',
              margin: '0 auto 18px',
              background: '#000',
              backgroundImage: 'url(site/assets/avatar.jpg)',
              backgroundSize: 'cover', backgroundPosition: 'center',
              border: `2px solid ${T.fgFaint}`,
              animation: 'ringPulseLinks 4s ease-in-out infinite',
            }}
          />

          <div className="glitch-line" data-text="KAROL ROSZAK - LORAKSZAK" style={{
            fontSize: 18, fontWeight: 800, letterSpacing: '0.08em',
            color: T.fg, marginBottom: 8,
          }}>
            KAROL ROSZAK - LORAKSZAK
          </div>

          <div style={{
            fontSize: 12, color: T.fgMid, fontStyle: 'italic',
            letterSpacing: '0.05em', marginBottom: 22,
          }}>
            // don't talk about it, be about it.
          </div>

          <QuickRow />
        </div>

        {/* link list */}
        <div style={{ padding: '8px 16px 20px' }}>
          {SOCIALS.map(s => <LinkRow key={s.k} s={s} />)}
        </div>

        {/* CTA to /connect */}
        <div style={{
          padding: '12px 20px 24px', textAlign: 'center',
          fontSize: 11, color: T.fgDim, letterSpacing: '0.05em',
        }}>
          Want to talk?{' '}
          <span
            onClick={() => window.navigate('/connect')}
            style={{ color: T.fg, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}
          >
            /connect
          </span>
        </div>

        {/* footer */}
        <div style={{
          textAlign: 'center', padding: '16px 20px 28px',
          fontSize: 11, color: T.fgDim, letterSpacing: '0.2em',
          borderTop: `1px solid ${T.fgFaint}`,
        }}>
          <div style={{ color: T.fg, marginBottom: 6, fontWeight: 700 }}>SUIT YOURSELF.</div>
          <div style={{ fontSize: 10, color: T.fgGhost }}>// lorakszak.com</div>
        </div>
      </div>
    </div>
  );
};

window.LinksPage = LinksPage;