// La Traverse Logo — bracketed studio wordmark.
// Inline-SVG React component so it inherits CSS vars + page-loaded fonts.
//
// Props:
//   variant: 'primary' | 'with-label' | 'monogram'  (default 'primary')
//   height:  number  (px — controls overall size; default 32)
//   dark:    boolean (use amber accent for dark backgrounds; default false)
//   mono:    boolean (collapse all colors to currentColor; default false)

const Logo = ({ variant = 'primary', height = 32, dark = false, mono = false, ...rest }) => {
  const style = mono
    ? { '--logo-fg': 'currentColor', '--logo-accent': 'currentColor', '--logo-secondary': 'currentColor' }
    : dark
      ? { '--logo-fg': '#f0f0f2', '--logo-accent': '#f59e0b', '--logo-secondary': 'rgba(255,255,255,0.5)' }
      : { '--logo-fg': '#1a1a1a', '--logo-accent': '#c4622a', '--logo-secondary': '#55586a' };

  const wmCss = `font-family: 'Clash Display', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; letter-spacing: -1.6px;`;
  const brCss = `font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 400;`;
  const lblCss = `font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 500; letter-spacing: 2.2px;`;

  if (variant === 'monogram') {
    return (
      <svg
        viewBox="0 0 100 100"
        height={height}
        role="img"
        aria-label="La Traverse"
        style={style}
        {...rest}
      >
        <text x="10" y="64" style={{ ...{ fontSize: '52px' }, font: brCss, fill: 'var(--logo-accent)' }}>[</text>
        <text x="33" y="64" style={{ ...{ fontSize: '46px' }, font: wmCss, fill: 'var(--logo-fg)' }}>LT</text>
        <text x="78" y="64" style={{ ...{ fontSize: '52px' }, font: brCss, fill: 'var(--logo-accent)' }}>]</text>
      </svg>
    );
  }

  if (variant === 'with-label') {
    return (
      <svg
        viewBox="0 0 620 80"
        height={height}
        role="img"
        aria-label="La Traverse Studio"
        style={style}
        {...rest}
      >
        <text x="0"   y="58" style={{ fontSize: 60, fontFamily: "'JetBrains Mono', 'Courier New', monospace", fontWeight: 400, fill: 'var(--logo-accent)' }}>[</text>
        <text x="36"  y="58" style={{ fontSize: 54, fontFamily: "'Clash Display', 'Helvetica Neue', Arial, sans-serif", fontWeight: 600, letterSpacing: '-1.6px', fill: 'var(--logo-fg)' }}>La Traverse</text>
        <text x="408" y="58" style={{ fontSize: 60, fontFamily: "'JetBrains Mono', 'Courier New', monospace", fontWeight: 400, fill: 'var(--logo-accent)' }}>]</text>
        <circle cx="450" cy="44" r="4" fill="var(--logo-accent)" />
        <text x="464" y="58" style={{ fontSize: 34, fontFamily: "'JetBrains Mono', 'Courier New', monospace", fontWeight: 500, letterSpacing: '2.5px', fill: 'var(--logo-secondary)', textTransform: 'uppercase' }}>STUDIO</text>
      </svg>
    );
  }

  // primary
  return (
    <svg
      viewBox="0 0 460 80"
      height={height}
      role="img"
      aria-label="La Traverse"
      style={style}
      {...rest}
    >
      <text x="0"   y="58" style={{ fontSize: 60, fontFamily: "'JetBrains Mono', 'Courier New', monospace", fontWeight: 400, fill: 'var(--logo-accent)' }}>[</text>
      <text x="36"  y="58" style={{ fontSize: 54, fontFamily: "'Clash Display', 'Helvetica Neue', Arial, sans-serif", fontWeight: 600, letterSpacing: '-1.6px', fill: 'var(--logo-fg)' }}>La Traverse</text>
      <text x="408" y="58" style={{ fontSize: 60, fontFamily: "'JetBrains Mono', 'Courier New', monospace", fontWeight: 400, fill: 'var(--logo-accent)' }}>]</text>
    </svg>
  );
};

window.Logo = Logo;