/* KayaCore marketing kit — primitives & shared bits */

function KcLogo({ height = 30, theme = 'dark' }) {
  const kaya = theme === 'dark' ? 'var(--slate-50)' : 'var(--slate-900)';
  const core = theme === 'dark' ? 'var(--violet-400)' : 'var(--violet-600)';
  const mark = theme === 'dark' ? 'var(--violet-500)' : 'var(--violet-600)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width={height * 1.04} height={height} viewBox="0 0 48 48" fill="none" aria-label="KayaCore">
        <g stroke={mark} strokeWidth="4.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M15 11 V37" /><path d="M15 24 L33 11.5" /><path d="M15 24 L33 36.5" />
        </g>
        <g fill={mark}>
          <circle cx="15" cy="24" r="4.2" /><circle cx="33.2" cy="11.6" r="3.1" /><circle cx="33.2" cy="36.4" r="3.1" />
        </g>
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: height * 0.62, letterSpacing: '-0.02em', lineHeight: 1 }}>
        <span style={{ color: kaya }}>Kaya</span><span style={{ color: core }}>Core</span>
      </span>
    </span>
  );
}

function Eyebrow({ children, style }) {
  return <div className="kc-eyebrow" style={style}>{children}</div>;
}

function Button({ children, variant = 'primary', size = 'md', icon, onClick, style }) {
  const base = {
    fontFamily: 'var(--font-sans)', fontWeight: 600, borderRadius: 10,
    border: '1px solid transparent', cursor: 'pointer', display: 'inline-flex',
    alignItems: 'center', gap: 8, transition: 'all var(--dur) var(--ease-out)',
    fontSize: size === 'lg' ? 16 : 15, padding: size === 'lg' ? '14px 24px' : '11px 20px',
    lineHeight: 1, whiteSpace: 'nowrap',
  };
  const variants = {
    primary: { background: 'var(--accent)', color: '#fff', boxShadow: '0 10px 26px -12px var(--glow-violet)' },
    secondary: { background: 'var(--surface)', color: 'var(--fg)', borderColor: 'var(--border-strong)' },
    ghost: { background: 'transparent', color: 'var(--fg-muted)' },
  };
  const [hover, setHover] = React.useState(false);
  const hov = hover ? (variant === 'primary'
    ? { background: 'var(--accent-hover)', transform: 'translateY(-1px)' }
    : { borderColor: 'var(--accent-border)', color: 'var(--fg)' }) : {};
  return (
    <button style={{ ...base, ...variants[variant], ...hov, ...style }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick}>
      {children}{icon && <KcIcon name={icon} size={size === 'lg' ? 19 : 17} style={{ transition: 'transform var(--dur) var(--ease-out)', transform: hover ? 'translateX(3px)' : 'none' }} />}
    </button>
  );
}

function IconChip({ name, active = false, size = 40 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: size * 0.28, flex: 'none',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: active ? 'var(--accent)' : 'var(--accent-tint)',
      border: `1px solid ${active ? 'transparent' : 'var(--accent-border)'}`,
      color: active ? '#fff' : 'var(--accent)',
      transition: 'all var(--dur) var(--ease-out)',
    }}>
      <KcIcon name={name} size={size * 0.5} stroke={1.8} />
    </span>
  );
}

function Badge({ children, tone = 'accent' }) {
  const tones = {
    accent: { background: 'var(--accent-tint)', color: 'var(--accent)', border: '1px solid var(--accent-border)' },
    neutral: { background: 'var(--surface)', color: 'var(--fg-muted)', border: '1px solid var(--border)' },
    ok: { background: 'rgba(52,211,153,0.12)', color: 'var(--success)', border: '1px solid rgba(52,211,153,0.3)' },
  };
  return (
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.04em',
      textTransform: 'uppercase', padding: '5px 10px', borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', gap: 6, ...tones[tone],
    }}>{children}</span>
  );
}

/* Decorative: faint node grid + corner violet bloom for hero/feature fields */
function NodeGrid({ fade = '50% 0%', opacity = 0.05 }) {
  return <div aria-hidden="true" style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: `linear-gradient(rgba(255,255,255,${opacity}) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,${opacity}) 1px, transparent 1px)`,
    backgroundSize: '40px 40px',
    WebkitMaskImage: `radial-gradient(120% 90% at ${fade}, #000 30%, transparent 75%)`,
    maskImage: `radial-gradient(120% 90% at ${fade}, #000 30%, transparent 75%)`,
  }} />;
}

function Bloom({ at = '80% -10%', size = '640px 360px', color = 'var(--glow-violet)', o = 1 }) {
  return <div aria-hidden="true" style={{
    position: 'absolute', inset: 0, pointerEvents: 'none', opacity: o,
    background: `radial-gradient(${size} at ${at}, ${color}, transparent 65%)`,
  }} />;
}

Object.assign(window, { KcLogo, Eyebrow, Button, IconChip, Badge, NodeGrid, Bloom });