/* Sybilhunt website — kit-local primitives.
   These mirror the design-system components in /components so the kit
   renders standalone (the compiled _ds_bundle.js is built post-turn).
   All styling uses the real design tokens from styles.css. */

function Logo({ size = 28, showWordmark = true, onClick }) {
  return (
    <span onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.3, cursor: onClick ? 'pointer' : 'default' }}>
      <img src="assets/logo-octopus.png" alt="Sybilhunt" style={{ width: size * 1.5, height: size * 1.5, objectFit: 'contain', flex: 'none', mixBlendMode: 'multiply' }} />
      {showWordmark && (
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size * 0.74, letterSpacing: '-0.02em', color: 'var(--text-strong)', lineHeight: 1 }}>
          Sybil<span style={{ color: 'var(--signal-500)' }}>hunt</span>
        </span>
      )}
    </span>
  );
}

function Button({ variant = 'primary', size = 'md', fullWidth = false, disabled = false, leftIcon, rightIcon, onClick, style = {}, children }) {
  const sizes = { sm: { padding: '0 16px', height: 36, fontSize: 14 }, md: { padding: '0 22px', height: 46, fontSize: 15 }, lg: { padding: '0 30px', height: 56, fontSize: 17 } };
  const variants = {
    primary: { background: 'var(--signal-500)', color: 'var(--text-on-signal)', border: '1px solid transparent', boxShadow: '0 8px 30px var(--signal-glow)' },
    secondary: { background: 'transparent', color: 'var(--text-strong)', border: '1px solid var(--border-strong)' },
    ghost: { background: 'transparent', color: 'var(--text-body)', border: '1px solid transparent' },
    danger: { background: 'var(--coral-500)', color: 'var(--coral-ink)', border: '1px solid transparent', boxShadow: '0 8px 28px var(--coral-glow)' },
  };
  const s = sizes[size], v = variants[variant];
  return (
    <button type="button" disabled={disabled} onClick={onClick}
      style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, width: fullWidth ? '100%' : 'auto', height: s.height, padding: s.padding, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: s.fontSize, letterSpacing: '-0.01em', lineHeight: 1, borderRadius: 'var(--radius-pill)', cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.45 : 1, transition: 'transform var(--dur-fast) var(--ease-out), filter var(--dur-fast)', whiteSpace: 'nowrap', ...v, ...style }}
      onMouseDown={(e) => { if (!disabled) e.currentTarget.style.transform = 'scale(0.97)'; }}
      onMouseUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
      onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.filter = 'brightness(1.07)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.filter = 'none'; e.currentTarget.style.transform = 'scale(1)'; }}>
      {leftIcon && <span style={{ display: 'inline-flex', fontSize: '1.15em' }}>{leftIcon}</span>}
      {children}
      {rightIcon && <span style={{ display: 'inline-flex', fontSize: '1.15em' }}>{rightIcon}</span>}
    </button>
  );
}

function Badge({ tone = 'neutral', size = 'md', dot = false, style = {}, children }) {
  const tones = {
    neutral: { bg: 'color-mix(in oklab, var(--ink-300) 14%, transparent)', fg: 'var(--text-muted)', dotc: 'var(--ink-300)' },
    signal: { bg: 'color-mix(in oklab, var(--signal-500) 16%, transparent)', fg: 'var(--signal-400)', dotc: 'var(--signal-500)' },
    live: { bg: 'color-mix(in oklab, var(--coral-500) 16%, transparent)', fg: 'var(--coral-300)', dotc: 'var(--coral-500)' },
    info: { bg: 'color-mix(in oklab, var(--cyan-500) 15%, transparent)', fg: 'var(--cyan-300)', dotc: 'var(--cyan-500)' },
    gold: { bg: 'color-mix(in oklab, var(--gold-500) 16%, transparent)', fg: 'var(--gold-400)', dotc: 'var(--gold-500)' },
  };
  const t = tones[tone];
  const isLive = tone === 'live' || tone === 'signal';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: size === 'sm' ? '3px 9px' : '5px 12px', borderRadius: 'var(--radius-pill)', background: t.bg, color: t.fg, fontFamily: 'var(--font-mono)', fontSize: size === 'sm' ? 11 : 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', lineHeight: 1, boxShadow: (isLive && dot) ? `0 0 16px color-mix(in oklab, ${t.dotc} 55%, transparent), inset 0 0 0 1px color-mix(in oklab, ${t.dotc} 35%, transparent)` : 'none', ...style }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: t.dotc, boxShadow: isLive ? `0 0 6px ${t.dotc}, 0 0 12px ${t.dotc}` : 'none', animation: isLive ? 'sh-pulse 1.6s var(--ease-in-out) infinite' : 'none' }} />}
      {children}
    </span>
  );
}

function Card({ padding = 24, interactive = false, glow = false, style = {}, children, ...rest }) {
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding, boxShadow: glow ? 'var(--glow-signal)' : 'var(--inset-hairline), var(--shadow-md)', transition: 'transform var(--dur-base) var(--ease-out), border-color var(--dur-base)', ...style }}
      onMouseEnter={interactive ? (e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.transform = 'translateY(-3px)'; } : undefined}
      onMouseLeave={interactive ? (e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.transform = 'translateY(0)'; } : undefined}
      {...rest}>{children}</div>
  );
}

function Avatar({ src, name = '', size = 48, ring = false, style = {} }) {
  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: size, height: size, borderRadius: '50%', flex: 'none', background: 'var(--surface-raised)', border: ring ? '2px solid var(--signal-500)' : '1px solid var(--border-subtle)', boxShadow: ring ? '0 0 0 4px color-mix(in oklab, var(--signal-500) 14%, transparent)' : 'none', overflow: 'hidden', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: size * 0.36, color: 'var(--text-muted)', ...style }}>
      {src ? <img src={src} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : initials}
    </span>
  );
}

function Stat({ value, label, sublabel, tone = 'default', align = 'left', style = {} }) {
  const colors = { default: 'var(--text-strong)', signal: 'var(--signal-400)', gold: 'var(--gold-400)', coral: 'var(--coral-300)' };
  return (
    <div style={{ textAlign: align, ...style }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(34px, 5vw, 64px)', lineHeight: 1, letterSpacing: '-0.02em', color: colors[tone], fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      {label && <div className="sh-overline" style={{ marginTop: 10 }}>{label}</div>}
      {sublabel && <div style={{ marginTop: 6, color: 'var(--text-muted)', fontSize: 14 }}>{sublabel}</div>}
    </div>
  );
}

function Countdown({ deadline, size = 'md', tone = 'coral', style = {} }) {
  const target = React.useMemo(() => new Date(deadline).getTime(), [deadline]);
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
  const diff = Math.max(0, target - now);
  const units = [['days', Math.floor(diff / 86400000)], ['hrs', Math.floor((diff % 86400000) / 3600000)], ['min', Math.floor((diff % 3600000) / 60000)], ['sec', Math.floor((diff % 60000) / 1000)]];
  const dims = size === 'lg' ? { box: 78, num: 36, gap: 12 } : size === 'sm' ? { box: 44, num: 20, gap: 6 } : { box: 58, num: 26, gap: 9 };
  const accent = tone === 'signal' ? 'var(--signal-400)' : 'var(--coral-300)';
  return (
    <div style={{ display: 'flex', gap: dims.gap, ...style }}>
      {units.map(([label, val]) => (
        <div key={label} style={{ minWidth: dims.box, padding: '12px 8px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: dims.num, color: accent, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{String(val).padStart(2, '0')}</div>
          <div className="sh-overline" style={{ marginTop: 6, fontSize: 10 }}>{label}</div>
        </div>
      ))}
    </div>
  );
}

function PartnerChip({ name, category, accent = 'var(--signal-500)', logoUrl = null, muted = false, onClick = null, style = {} }) {
  const mono = name ? name.replace(/[^A-Za-zА-Яа-я0-9]/g, '').slice(0, 2).toUpperCase() : '?';
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', cursor: onClick ? 'pointer' : 'default', transition: 'border-color var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)', ...style }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.transform = 'translateY(-2px)'; if (onClick) e.currentTarget.style.boxShadow = '0 8px 22px rgba(0,0,0,0.08)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
      <span style={{ width: 40, height: 40, flex: 'none', borderRadius: 10, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: logoUrl ? 'var(--surface-raised)' : `color-mix(in oklab, ${muted ? 'var(--ink-400)' : accent} 18%, var(--surface-raised))`, color: muted ? 'var(--text-faint)' : accent, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, border: `1px solid color-mix(in oklab, ${muted ? 'var(--ink-400)' : accent} 30%, transparent)`, overflow: 'hidden' }}>
        {logoUrl ? <img src={logoUrl} alt={name} style={{ width: '80%', height: '80%', objectFit: 'contain', filter: muted ? 'grayscale(1)' : 'none', opacity: muted ? 0.7 : 1 }} onError={(e) => { e.currentTarget.style.display='none'; e.currentTarget.parentNode.innerText = mono; }} /> : mono}
      </span>
      <span style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--text-strong)', lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        {category && <div className="sh-overline" style={{ marginTop: 4, fontSize: 10 }}>{category}</div>}
      </span>
      {onClick && <span aria-hidden="true" style={{ flex: 'none', color: 'var(--text-faint)', fontSize: 18, lineHeight: 1 }}>→</span>}
    </div>
  );
}

function Dialog({ open, onClose, title, eyebrow, width = 'min(70vw, 920px)', footer, children }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape' && onClose) onClose(); }
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, background: 'var(--scrim)', backdropFilter: 'blur(var(--blur-backdrop))', WebkitBackdropFilter: 'blur(var(--blur-backdrop))', animation: 'sh-dlg-fade var(--dur-base) var(--ease-out)' }}>
      <div onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true"
        style={{ position: 'relative', width, maxWidth: 920, maxHeight: '84vh', overflowY: 'auto', background: 'var(--surface-panel)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl), var(--glow-signal-sm)', padding: 'clamp(28px, 4vw, 52px)', animation: 'sh-dlg-pop var(--dur-slow) var(--ease-bounce)' }}>
        <button onClick={onClose} aria-label="Закрыть" style={{ position: 'absolute', top: 18, right: 18, width: 38, height: 38, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', cursor: 'pointer', background: 'var(--surface-card)', color: 'var(--text-muted)', border: '1px solid var(--border-subtle)', fontSize: 18, lineHeight: 1 }}>×</button>
        {eyebrow && <div className="sh-overline" style={{ marginBottom: 12 }}>{eyebrow}</div>}
        {title && <h2 style={{ fontSize: 'clamp(26px, 3.4vw, 40px)', marginBottom: 22, paddingRight: 40 }}>{title}</h2>}
        <div style={{ color: 'var(--text-body)', fontSize: 16, lineHeight: 1.65 }}>{children}</div>
        {footer && <div style={{ marginTop: 32 }}>{footer}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Button, Badge, Card, Avatar, Stat, Countdown, PartnerChip, Dialog });