// logo-monograms.jsx — the four WP logo marks for Wasser Performance.
// Each mark takes { fg, accent } so it can render on light or dark grounds.
// Exported to window for the main canvas file to consume.

const WP = {
  burgundy: '#64303d',
  burgundyDeep: '#4a232e',
  cream: '#f5efe7',
  creamDeep: '#ece2d4',
  ink: '#241318',
  gold: '#b08a5a',
};

// ── Direction 1 · Editorial Serif ───────────────────────────────
// High-contrast Bodoni W·P split by a hairline, classic + sharp.
function MarkSerif({ fg, accent, size = 120 }) {
  // text-stroke thickens the W's thin (filigree) diagonals so the mark reads
  // solid and even rather than high-contrast.
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.05,
      lineHeight: 1, color: fg, fontFamily: "'Bodoni Moda', serif", fontWeight: 600 }}>
      <span style={{ fontSize: size, letterSpacing: '-0.02em',
        WebkitTextStroke: `${size * 0.03}px ${fg}`, paintOrder: 'stroke fill' }}>W</span>
      <span style={{ fontSize: size, WebkitTextStroke: `${size * 0.016}px ${fg}`,
        paintOrder: 'stroke fill' }}>P</span>
    </div>
  );
}

// ── Direction 2 · Athletic Crest ────────────────────────────────
// Circular emblem, condensed WP, name on the ring. Sporty + precise.
function MarkCrest({ fg, accent, size = 200 }) {
  const id = React.useId().replace(/:/g, '');
  return (
    <svg width={size} height={size} viewBox="0 0 200 200">
      <defs>
        <path id={`top-${id}`} d="M36 100 A64 64 0 0 1 164 100" fill="none" />
        <path id={`bot-${id}`} d="M22 100 A78 78 0 0 0 178 100" fill="none" />
      </defs>
      <circle cx="100" cy="100" r="92" fill="none" stroke={fg} strokeWidth="2.5" />
      <circle cx="100" cy="100" r="80" fill="none" stroke={fg} strokeWidth="1" opacity="0.55" />
      <text fontFamily="'Oswald', sans-serif" fontWeight="500" fill={fg}
        fontSize="14" letterSpacing="6" textAnchor="middle">
        <textPath href={`#top-${id}`} startOffset="50%">WASNER</textPath>
      </text>
      <text fontFamily="'Oswald', sans-serif" fontWeight="500" fill={fg}
        fontSize="14" letterSpacing="5" textAnchor="middle">
        <textPath href={`#bot-${id}`} startOffset="50%">PERFORMANCE</textPath>
      </text>
      <circle cx="32.5" cy="100" r="2.4" fill={accent} />
      <circle cx="167.5" cy="100" r="2.4" fill={accent} />
      <text x="100" y="116" textAnchor="middle" fontFamily="'Oswald', sans-serif"
        fontWeight="700" fontSize="58" letterSpacing="-1" fill={fg}>WP</text>
      <rect x="74" y="128" width="52" height="2.5" fill={accent} />
    </svg>
  );
}

// ── Direction 3 · Merged Line ───────────────────────────────────
// Single-weight monoline: the W's final rise becomes the P's stem.
function MarkMerged({ fg, accent, size = 150 }) {
  const sw = size * 0.072;
  return (
    <svg width={size * 1.18} height={size} viewBox="0 0 142 120"
      fill="none" stroke={fg} strokeWidth={sw} strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 26 L30 96 L52 50 L74 96 L92 26" />
      <path d="M92 26 L92 104" />
      <path d="M92 26 C120 26 120 60 92 60" />
      <circle cx="92" cy="43" r={sw * 0.34} fill={accent} stroke="none" />
    </svg>
  );
}

// ── Direction 4 · Velocity ──────────────────────────────────────
// Italic condensed WP with speed cuts — motion + drive.
function MarkVelocity({ fg, accent, size = 120 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.04 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: size * 0.085,
        alignItems: 'flex-end', paddingRight: size * 0.06 }}>
        {[1, 0.66, 0.4].map((w, i) => (
          <span key={i} style={{ display: 'block', height: Math.max(2, size * 0.052),
            width: size * 0.42 * w, background: accent, borderRadius: 2,
            transform: 'skewX(-12deg)' }}></span>
        ))}
      </div>
      <span style={{ fontFamily: "'Oswald', sans-serif", fontWeight: 700, fontSize: size,
        fontStyle: 'italic', color: fg, letterSpacing: '-0.04em', lineHeight: 0.9,
        transform: 'skewX(-4deg)' }}>WP</span>
    </div>
  );
}

// ── Wordmark used beneath each mark ─────────────────────────────
function Wordmark({ fg, accent, scale = 1, font = "'Archivo', sans-serif",
  weight = 600, track = '0.34em', size = 19, divider = true }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
      gap: 9 * scale }}>
      {divider && <span style={{ width: 46 * scale, height: 2, background: fg,
        opacity: 0.9 }}></span>}
      <div style={{ display: 'flex', gap: `calc(${track} + ${size * 0.02}px)`,
        fontFamily: font, fontWeight: weight, fontSize: size * scale,
        letterSpacing: track, color: fg, textTransform: 'uppercase',
        paddingLeft: track }}>
        <span>Wasner</span><span style={{ opacity: 0.62 }}>Performance</span>
      </div>
    </div>
  );
}

Object.assign(window, { WP, MarkSerif, MarkCrest, MarkMerged, MarkVelocity, Wordmark });