// logo.jsx — DeftForge logo system
// The mark: a small diamond/spark glyph — reads as both an ember (forge) and a forged point.
// The wordmark: lowercase "deftforge." in Inter, tight tracking, with a precise terminal period.
//
// Three primary lockups:
//   <DFLogo variant="wordmark" />        — wordmark only
//   <DFLogo variant="mark" />            — just the spark mark
//   <DFLogo variant="lockup" />          — mark + wordmark, horizontal
//   <DFLogo variant="stacked" />         — mark above wordmark, centered

const DF_EMBER = '#ff6b35';

// ── Spark mark ──────────────────────────────────────────────────────────────
// A diamond rotated 45° split into two triangles: a darker "anvil" base
// and a glowing "spark" top. Geometrically simple, no hand-drawn SVG mess.
function DFMark({
  size = 40,
  color = '#f5f5f4',
  ember = DF_EMBER,
  monochrome = false,
  animated = false,
  glow = false,
}) {
  const s = size;
  const stroke = Math.max(1.5, s * 0.06);

  // Diamond points
  const cx = s / 2, cy = s / 2;
  const r = s / 2 - stroke;

  const top = [cx, cy - r];
  const right = [cx + r, cy];
  const bot = [cx, cy + r];
  const left = [cx - r, cy];

  const topTriangle = `${top[0]},${top[1]} ${right[0]},${right[1]} ${left[0]},${left[1]}`;
  const botTriangle = `${left[0]},${left[1]} ${right[0]},${right[1]} ${bot[0]},${bot[1]}`;

  const sparkColor = monochrome ? color : ember;

  return (
    <svg
      width={s} height={s}
      viewBox={`0 0 ${s} ${s}`}
      style={{
        display: 'block',
        filter: glow ? `drop-shadow(0 0 ${s * 0.3}px ${ember}88)` : 'none',
        overflow: 'visible',
      }}
    >
      {/* Top triangle = the spark / ember */}
      <polygon
        points={topTriangle}
        fill={sparkColor}
      />
      {/* Bottom triangle = the anvil / base — outlined */}
      <polygon
        points={botTriangle}
        fill="none"
        stroke={color}
        strokeWidth={stroke}
        strokeLinejoin="miter"
      />
    </svg>
  );
}

// ── Wordmark ────────────────────────────────────────────────────────────────
// "deftforge." — the period is the brand voice (decisive, complete).
// Renders as flexbox so the period can be colored / sized independently.
function DFWordmark({
  size = 48,
  color = '#f5f5f4',
  ember = DF_EMBER,
  monochrome = false,
  weight = 700,
  letterSpacing = '-0.04em',
}) {
  return (
    <span style={{
      fontFamily: 'Inter, system-ui, sans-serif',
      fontWeight: weight,
      fontSize: size,
      letterSpacing,
      color,
      lineHeight: 1,
      display: 'inline-flex',
      alignItems: 'baseline',
      fontFeatureSettings: '"ss01", "cv11"',
    }}>
      <span>deftforge</span>
      <span style={{
        color: monochrome ? color : ember,
        marginLeft: size * 0.01,
      }}>.</span>
    </span>
  );
}

// ── Lockup variants ─────────────────────────────────────────────────────────
function DFLogo({
  variant = 'lockup',       // 'wordmark' | 'mark' | 'lockup' | 'stacked'
  size = 48,
  color = '#f5f5f4',
  ember = DF_EMBER,
  monochrome = false,
  animated = false,
  glow = false,
  weight = 700,
}) {
  if (variant === 'mark') {
    return <DFMark size={size} color={color} ember={ember} monochrome={monochrome} glow={glow} />;
  }
  if (variant === 'wordmark') {
    return <DFWordmark size={size} color={color} ember={ember} monochrome={monochrome} weight={weight} />;
  }
  if (variant === 'stacked') {
    return (
      <div style={{
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: size * 0.35,
      }}>
        <DFMark size={size * 0.95} color={color} ember={ember} monochrome={monochrome} glow={glow} />
        <DFWordmark size={size} color={color} ember={ember} monochrome={monochrome} weight={weight} />
      </div>
    );
  }
  // default: horizontal lockup
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: size * 0.32,
    }}>
      <DFMark size={size * 0.85} color={color} ember={ember} monochrome={monochrome} glow={glow} />
      <DFWordmark size={size} color={color} ember={ember} monochrome={monochrome} weight={weight} />
    </div>
  );
}

Object.assign(window, { DFMark, DFWordmark, DFLogo, DF_EMBER });