/* global React */
// THE refined Horizon mark — single source of truth.
// Imported by every showcase surface so the logo is consistent everywhere.
//
// API: <AuroraMark size={N} tone="..." />
//   tone='duo'     ink horizon + coral sun (default, on paper)
//   tone='invert'  paper horizon + coral sun (on dark)
//   tone='oncolor' paper horizon + translucent paper sun (on colored bg, e.g. app icon)
//   tone='mono'    currentColor for both (favicons / monochrome contexts)
//   tone='paper'   ink horizon + ink sun (on paper, monotone)
//   tone='ink'     paper horizon + paper sun (on ink, monotone)

const INK    = '#14110f';
const PAPER  = '#faf6f0';
const CORAL  = '#ff7a59';

const AuroraMark = ({ size = 64, tone = 'duo', stroke = 3.4 }) => {
  let lineColor, sunColor, sunFill = 'none';

  if (tone === 'invert')      { lineColor = PAPER;          sunColor = CORAL;          }
  else if (tone === 'oncolor'){ lineColor = PAPER;          sunColor = PAPER;          sunFill = 'rgba(255,255,255,0.22)'; }
  else if (tone === 'mono')   { lineColor = 'currentColor'; sunColor = 'currentColor'; }
  else if (tone === 'paper')  { lineColor = INK;            sunColor = INK;            }
  else if (tone === 'ink')    { lineColor = PAPER;          sunColor = PAPER;          }
  else                        { lineColor = INK;            sunColor = CORAL;          } // duo

  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <path d="M12 40 A20 20 0 0 1 52 40"
            stroke={sunColor} strokeWidth={stroke} strokeLinecap="round" fill={sunFill}/>
      <line x1="6" y1="40" x2="58" y2="40"
            stroke={lineColor} strokeWidth={stroke} strokeLinecap="round"/>
    </svg>
  );
};

// Wordmark — Inter Tight Medium, tight tracking
const AuroraWordmark = ({ size = 36, color = INK }) => (
  <span style={{
    fontFamily: 'Inter Tight, sans-serif',
    fontWeight: 500,
    fontSize: size,
    letterSpacing: '-0.025em',
    lineHeight: 1,
    color,
  }}>Aurora</span>
);

// Standard horizontal lockup
const AuroraLockup = ({ markSize = 40, wordSize = 28, color = INK, tone = 'duo', tagline }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: markSize * 0.32 }}>
    <AuroraMark size={markSize} tone={tone}/>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <AuroraWordmark size={wordSize} color={color}/>
      {tagline && (
        <span style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: wordSize * 0.28,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          color,
          opacity: 0.55,
        }}>{tagline}</span>
      )}
    </div>
  </div>
);

Object.assign(window, { AuroraMark, AuroraWordmark, AuroraLockup, INK, PAPER, CORAL });