// Catatu — Buku Saku Logo System
// Refined version of direction 02. A stacked-paper monogram that reads as
// a small notebook (buku saku = pocket book). Three layered cards form a
// 'C' silhouette; the topmost card carries a ledger ruling and a single
// terra-colored entry mark — the daily jot.

const BS = {
  cream: '#f5f0e6',
  paper: '#fbf8f1',
  ink: '#2a2520',
  ink2: '#5a4f44',
  ink3: '#8a7e6e',
  terra: '#c96442',
  terraDeep: '#a85036',
  terraLight: '#e07a4f',
  olive: '#5c6b3e',
  butter: '#f4d35e',
  ivory: '#f0e4cc',
  warmDark: '#1f1916',
  warmDarker: '#15110f',
};

// ─────────────────────────────────────────────────────────────
// The mark — pure SVG, geometrically tightened from v1.
// Three stacked papers, a 'C' shape implied by the cluster + ruling lines.
// Tunable: size, palette, ruling visibility, entry-mark visibility.
// ─────────────────────────────────────────────────────────────
function BukuSaku({
  size = 100,
  ink = BS.ink,
  paper = BS.paper,
  back = BS.terra,
  middle = BS.ivory,
  accent = BS.terra,
  rule = true,
  entry = true,
  stroke = 2.6,
}) {
  // ViewBox is 100 square; we draw the back paper rotated -7°,
  // the middle rotated -3°, and the front sheet upright.
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      {/* back paper */}
      <g transform="rotate(-7 50 50)">
        <rect x="22" y="20" width="58" height="62" rx="9"
              fill={back} stroke={ink} strokeWidth={stroke} strokeLinejoin="round" />
      </g>
      {/* middle paper */}
      <g transform="rotate(-3 50 50)">
        <rect x="20" y="22" width="58" height="62" rx="9"
              fill={middle} stroke={ink} strokeWidth={stroke} strokeLinejoin="round" />
      </g>
      {/* top paper */}
      <g>
        <rect x="18" y="20" width="58" height="62" rx="9"
              fill={paper} stroke={ink} strokeWidth={stroke} strokeLinejoin="round" />
        {/* spiral binding marks at top edge */}
        <circle cx="30" cy="20" r="1.6" fill={ink} />
        <circle cx="42" cy="20" r="1.6" fill={ink} />
        <circle cx="54" cy="20" r="1.6" fill={ink} />
        <circle cx="66" cy="20" r="1.6" fill={ink} />
        {rule && (
          <>
            <line x1="26" y1="38" x2="68" y2="38" stroke={ink} strokeWidth="1.8" strokeLinecap="round" opacity="0.85" />
            <line x1="26" y1="50" x2="60" y2="50" stroke={ink} strokeWidth="1.8" strokeLinecap="round" opacity="0.85" />
            <line x1="26" y1="62" x2="64" y2="62" stroke={ink} strokeWidth="1.8" strokeLinecap="round" opacity="0.85" />
            <line x1="26" y1="74" x2="50" y2="74" stroke={ink} strokeWidth="1.8" strokeLinecap="round" opacity="0.85" />
          </>
        )}
        {entry && <circle cx="72" cy="38" r="3.6" fill={accent} />}
      </g>
    </svg>
  );
}

// Simplified favicon-grade variant — fewer lines, bolder strokes.
function BukuSakuMini({ size = 32, ink = BS.ink, paper = BS.paper, back = BS.terra, accent = BS.terra }) {
  return (
    <svg viewBox="0 0 32 32" width={size} height={size}>
      <rect x="7" y="6" width="20" height="22" rx="3.5"
            fill={back} stroke={ink} strokeWidth="1.8" transform="rotate(-7 16 17)" strokeLinejoin="round" />
      <rect x="5" y="6" width="20" height="22" rx="3.5"
            fill={paper} stroke={ink} strokeWidth="1.8" strokeLinejoin="round" />
      <line x1="8" y1="13" x2="20" y2="13" stroke={ink} strokeWidth="1.6" strokeLinecap="round" />
      <line x1="8" y1="18" x2="17" y2="18" stroke={ink} strokeWidth="1.6" strokeLinecap="round" />
      <line x1="8" y1="23" x2="19" y2="23" stroke={ink} strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="22" cy="13" r="1.8" fill={accent} />
    </svg>
  );
}

// Wordmark — Fraunces, with the 'tu' set in italic terra to echo product
function BSWordmark({ size = 60, color = BS.ink, accent = BS.terra }) {
  return (
    <span style={{
      fontFamily: 'Fraunces, serif', fontWeight: 500,
      fontSize: size, letterSpacing: -size * 0.04, lineHeight: 0.95, color,
      whiteSpace: 'nowrap', display: 'inline-block',
    }}>
      Cata<em style={{ fontStyle: 'italic', color: accent, fontWeight: 500 }}>tu</em>
    </span>
  );
}

// ── Lockups ────────────────────────────────────────────────────
function LockupHorizontal({ markSize = 56, wordSize = 50, color = BS.ink, accent = BS.terra, ...markProps }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: markSize * 0.22 }}>
      <BukuSaku size={markSize} ink={color} accent={accent} {...markProps} />
      <BSWordmark size={wordSize} color={color} accent={accent} />
    </div>
  );
}

function LockupStacked({ markSize = 80, wordSize = 30, color = BS.ink, accent = BS.terra, tagline = null, ...markProps }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <BukuSaku size={markSize} ink={color} accent={accent} {...markProps} />
      <BSWordmark size={wordSize} color={color} accent={accent} />
      {tagline && (
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 9, letterSpacing: 1.6,
          textTransform: 'uppercase', color, opacity: 0.55, marginTop: -4,
        }}>{tagline}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  BS_PAL: BS,
  BukuSaku, BukuSakuMini, BSWordmark, LockupHorizontal, LockupStacked,
});