// logo.jsx — wordmarks for "2build" + a favicon glyph.
// Five variants, each riffing on the "2" as both a digit and a hook.

// Variant: arrow — reads "2 → build" ≈ "to build". The verb is the point.
function LogoArrow({ size = 28, animated = false }) {
  return (
    <span className="logo-wordmark" style={{ fontSize: size }}>
      <span className="two">2</span>
      <span className="sep" aria-hidden="true">→</span>
      <span>build</span>
      {animated && <span className="cursor" />}
    </span>
  );
}

// Variant: braces — code/JSX feel. "{2}build".
function LogoBraces({ size = 28, animated = false }) {
  return (
    <span className="logo-wordmark" style={{ fontSize: size }}>
      <span className="brace">{'{'}</span>
      <span className="two">2</span>
      <span className="brace">{'}'}</span>
      <span>build</span>
      {animated && <span className="cursor" />}
    </span>
  );
}

// Variant: slash — domain echo, "2/build".
function LogoSlash({ size = 28, animated = false }) {
  return (
    <span className="logo-wordmark" style={{ fontSize: size }}>
      <span className="two">2</span>
      <span className="sep" aria-hidden="true">/</span>
      <span>build</span>
      {animated && <span className="cursor" />}
    </span>
  );
}

// Variant: dot — minimal typographic mark, "2·build".
function LogoDot({ size = 28, animated = false }) {
  return (
    <span className="logo-wordmark" style={{ fontSize: size }}>
      <span className="two">2</span>
      <span className="sep" aria-hidden="true" style={{ transform: 'translateY(-0.04em)' }}>·</span>
      <span>build</span>
      {animated && <span className="cursor" />}
    </span>
  );
}

// Variant: brackets — explicit, array-ish, "[2]build".
function LogoBrackets({ size = 28, animated = false }) {
  return (
    <span className="logo-wordmark" style={{ fontSize: size }}>
      <span className="brace">[</span>
      <span className="two">2</span>
      <span className="brace">]</span>
      <span>build</span>
      {animated && <span className="cursor" />}
    </span>
  );
}

const LOGO_VARIANTS = {
  arrow: LogoArrow,
  braces: LogoBraces,
  slash: LogoSlash,
  dot: LogoDot,
  brackets: LogoBrackets,
};

function Logo({ variant = 'arrow', size = 28, animated = false }) {
  const Cmp = LOGO_VARIANTS[variant] || LogoArrow;
  return <Cmp size={size} animated={animated} />;
}

// Favicon glyph — "[2b]" in the same wordmark font.
// Used as the SVG favicon and as the small mark next to "2build LLC" in the footer.
function LogoGlyph({ size = 32, color, bg }) {
  const fg = color || 'var(--bg)';
  const back = bg || 'var(--accent)';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-label="2build">
      <rect x="0" y="0" width="64" height="64" rx="14" fill={back} />
      <text
        x="32"
        y="42"
        textAnchor="middle"
        fontFamily='"Space Grotesk", system-ui, sans-serif'
        fontWeight="600"
        fontSize="28"
        letterSpacing="-1.5"
        fill={fg}
      >[2b]</text>
    </svg>
  );
}

Object.assign(window, { Logo, LogoGlyph, LOGO_VARIANTS });