// Shared primitives for direction artboards — wireframe vibe helpers.

// Yoube logo lockup (uses the existing wordmark/symbol). Keeps brand identity
// constant across directions — only the LANGUAGE around it changes.
function YoubeLockup({ height = 18, color = 'auto' }) {
  // tints the wordmark using CSS filter for inverse / monochrome variants
  const filters = {
    auto: 'none',
    white: 'brightness(0) invert(1)',
    ink: 'brightness(0)',
    purple: 'brightness(0) invert(1) sepia(1) saturate(20) hue-rotate(220deg)',
  };
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: height * 0.35 }}>
      <img src="assets/yoube-symbol.png" style={{ height, filter: filters[color] || filters.auto }} alt="" />
      <img src="assets/yoube-wordmark.png" style={{ height: height * 0.66, filter: filters[color] || filters.auto }} alt="Yoube" />
    </span>
  );
}

// Hand-drawn-looking dashed/jittery rectangle as a wireframe placeholder.
function PHBlock({ label = 'IMG', children, style }) {
  return (
    <div className="ph-block ph-block-x" style={{ ...style }}>
      <span style={{ fontFamily: "'Kalam'", fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>{children || label}</span>
    </div>
  );
}

// Small annotation arrow + caveat note
function Note({ children, color = 'purple', style }) {
  return (
    <span className={color === 'purple' ? 'scribble-purple' : 'scribble'} style={{ fontSize: 13, lineHeight: 1.1, ...style }}>{children}</span>
  );
}

// section-header chip on an artboard
function ABTitle({ children }) {
  return (
    <div style={{ fontFamily: "'Caveat', cursive", fontWeight: 700, fontSize: 16, color: 'var(--ink)', marginBottom: 4 }}>{children}</div>
  );
}

// Tiny color swatch
function Swatch({ color, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <div style={{ width: 28, height: 28, background: color, borderRadius: 6, border: '1px solid rgba(0,0,0,0.1)' }} />
      <span style={{ fontFamily: "'Kalam'", fontSize: 9, color: 'var(--ink-faint)', letterSpacing: '0.04em' }}>{label}</span>
    </div>
  );
}

// Common artboard inner padding
const ABPAD = 14;

Object.assign(window, { YoubeLockup, PHBlock, Note, ABTitle, Swatch, ABPAD });