// Polycode marketing site — brand components
// Slimmed/forked subset of the teaser brand.jsx, tuned for the marketing site.

const FONT_DISPLAY = 'var(--pc-font-sans)';
const FONT_MONO = 'var(--pc-font-mono)';

// PolycodeIcon: braces+star+streams, the canonical app mark.
function PolycodeIcon({ size = 40, mono = false, bg = 'ink' }) {
  const tileBg = bg === 'ink' ? '#1A2238'
    : bg === 'none' ? 'transparent'
    : bg === 'cream' ? '#FFE2B5'
    : bg;
  const onLight = typeof bg === 'string' && (bg === 'cream' || /^#([dDeEfF])/.test(bg));
  const compact = size < 22;

  const streams = mono
    ? [{ y0: 18, y1: 28, color: 'white' },
       { y0: 32, y1: 32, color: 'white' },
       { y0: 46, y1: 36, color: 'white' }]
    : [{ y0: 18, y1: 28, color: '#7FA3E8' },
       { y0: 32, y1: 32, color: '#E89B5C' },
       { y0: 46, y1: 36, color: '#B89CE8' }];
  const streamOpacity = mono ? 0.55 : 0.95;
  const inkColor = mono ? 'white' : (onLight ? '#7A3D14' : '#FFE2B5');
  const starFill = mono ? 'white' : (onLight ? '#C55A1F' : '#FFB872');

  const convergeX = 26;
  const braceL_x = compact ? 18 : 27;
  const braceR_x = compact ? 46 : 51;
  const starX    = compact ? 32 : 39;
  const braceTop = compact ? 18 : 22;
  const braceBot = compact ? 46 : 42;
  const sw = compact ? 3.2 : 2.6;

  const starCx = starX, starCy = 32;
  const starOuter = compact ? 7.2 : (size >= 56 ? 6.0 : 5.4);
  const starInner = starOuter * 0.42;
  const starPts = [];
  for (let i = 0; i < 10; i++) {
    const r = i % 2 === 0 ? starOuter : starInner;
    const a = (Math.PI / 5) * i - Math.PI / 2;
    starPts.push(`${starCx + r * Math.cos(a)},${starCy + r * Math.sin(a)}`);
  }

  return (
    <div style={{
      width: size, height: size,
      borderRadius: size * 0.235,
      background: tileBg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, position: 'relative', overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        {!compact && streams.map((s, i) => {
          const c1x = (3 + convergeX) * 0.55;
          const c2x = convergeX - 4;
          const d = `M 3 ${s.y0} C ${c1x} ${s.y0}, ${c2x} ${s.y1}, ${convergeX} ${s.y1}`;
          return <path key={i} d={d} stroke={s.color} strokeWidth={size >= 56 ? 2.8 : 2.4} fill="none" strokeLinecap="round" opacity={streamOpacity}/>;
        })}
        <path d={`
          M ${braceL_x + 6} ${braceTop}
          C ${braceL_x + 1} ${braceTop}, ${braceL_x} ${braceTop + 3}, ${braceL_x} ${(braceTop + braceBot)/2 - 1.2}
          C ${braceL_x} ${31.5}, ${braceL_x - 2.4} ${32}, ${braceL_x - 2.4} ${32}
          C ${braceL_x - 2.4} ${32}, ${braceL_x} ${32.5}, ${braceL_x} ${(braceTop + braceBot)/2 + 1.2}
          C ${braceL_x} ${braceBot - 3}, ${braceL_x + 1} ${braceBot}, ${braceL_x + 6} ${braceBot}
        `} stroke={inkColor} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <path d={`
          M ${braceR_x - 6} ${braceTop}
          C ${braceR_x - 1} ${braceTop}, ${braceR_x} ${braceTop + 3}, ${braceR_x} ${(braceTop + braceBot)/2 - 1.2}
          C ${braceR_x} ${31.5}, ${braceR_x + 2.4} ${32}, ${braceR_x + 2.4} ${32}
          C ${braceR_x + 2.4} ${32}, ${braceR_x} ${32.5}, ${braceR_x} ${(braceTop + braceBot)/2 + 1.2}
          C ${braceR_x} ${braceBot - 3}, ${braceR_x - 1} ${braceBot}, ${braceR_x - 6} ${braceBot}
        `} stroke={inkColor} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <polygon points={starPts.join(' ')} fill={starFill} stroke={inkColor} strokeWidth={0.5} strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function PolycodeWordmark({ height = 22 }) {
  return (
    <span className="mk-wordmark" style={{ gap: height * 0.42 }}>
      <PolycodeIcon size={height * 1.05}/>
      <span className="word" style={{ fontSize: height * 0.95 }}>
        Poly<span className="light">code</span>
      </span>
    </span>
  );
}

// Provider monogram tile
function Monogram({ letter, bg, fg = 'white', size = 22, tight = false }) {
  const fontSize = letter.length > 1 ? size * 0.42 : size * 0.55;
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.28,
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize,
      letterSpacing: tight ? '-0.05em' : '-0.02em', lineHeight: 1,
      boxShadow: bg === 'white' || bg === '#FAFAFA' ? 'inset 0 0 0 0.5px rgba(0,0,0,0.1)' : undefined,
    }}>{letter}</div>
  );
}
const PROVIDERS = {
  anthropic:  { name: 'Claude',      tile: { letter: 'A',  bg: '#CC785C' },           color: '#C96442' },
  openai:     { name: 'GPT-5',       tile: { letter: 'O',  bg: '#0D0D0D' },           color: '#10A37F' },
  gemini:     { name: 'Gemini',      tile: { letter: 'G',  bg: '#4285F4' },           color: '#1A73E8' },
  foundation: { name: 'On-device',   tile: { letter: '',  bg: '#1D1D1F' },           color: '#6B7280' },
  ollama:     { name: 'Ollama',      tile: { letter: 'Ol', bg: '#FAFAFA', fg: '#1D1D1F', tight: true }, color: '#525252' },
  xai:        { name: 'xAI',         tile: { letter: 'X',  bg: '#000' },              color: '#000' },
  openrouter: { name: 'OpenRouter',  tile: { letter: 'OR', bg: '#6B7280', tight: true }, color: '#6B7280' },
  compat:     { name: 'OpenAI-compat', tile: { letter: 'C', bg: '#5E4A9E' },          color: '#8B6FCC' },
};
function AppleGlyphTile({ size = 22 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.28,
      background: '#1D1D1F',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true" style={{ transform: `translateY(${-size * 0.02}px)` }}>
        <path d="M17.05 12.04c-.02-2.31 1.89-3.42 1.97-3.47-1.07-1.57-2.74-1.79-3.34-1.81-1.42-.14-2.77.83-3.49.83-.74 0-1.84-.81-3.03-.79-1.55.02-2.99.91-3.79 2.31-1.62 2.81-.41 6.97 1.16 9.25.78 1.12 1.69 2.36 2.89 2.32 1.16-.05 1.6-.75 2.99-.75 1.39 0 1.79.75 3 .73 1.24-.02 2.02-1.13 2.78-2.25.88-1.29 1.24-2.55 1.26-2.62-.03-.01-2.41-.93-2.4-3.65zM14.83 5.43c.64-.78 1.07-1.86.95-2.93-.92.04-2.04.61-2.7 1.39-.59.69-1.11 1.79-.97 2.84 1.03.08 2.08-.52 2.72-1.3z"/>
      </svg>
    </div>
  );
}
function ProviderTile({ provider, size = 22 }) {
  if (provider === 'foundation') return <AppleGlyphTile size={size}/>;
  const p = PROVIDERS[provider] || PROVIDERS.compat;
  return <Monogram {...p.tile} size={size}/>;
}

// Lucide-like inline icons (subset)
function Icon({ name, size = 16, color = 'currentColor', strokeWidth = 1.6, style }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (name) {
    case 'arrowRight': return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'download':   return <svg {...props}><path d="M12 3v12m-5-5 5 5 5-5"/><path d="M5 21h14"/></svg>;
    case 'check':      return <svg {...props}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'plus':       return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'crown':      return <svg {...props}><path d="M3 7l5 4 4-7 4 7 5-4-2 11H5L3 7Z"/></svg>;
    case 'sparkles':   return <svg {...props}><path d="M12 3v4m0 10v4M3 12h4m10 0h4M5.6 5.6l2.8 2.8m7.2 7.2 2.8 2.8m0-12.8-2.8 2.8m-7.2 7.2-2.8 2.8"/></svg>;
    case 'shield':     return <svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/></svg>;
    case 'zap':        return <svg {...props}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>;
    case 'cpu':        return <svg {...props}><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3m6-3v3M9 19v3m6-3v3M2 9h3m-3 6h3m14-6h3m-3 6h3"/></svg>;
    case 'apple':      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M17.05 12.04c-.02-2.31 1.89-3.42 1.97-3.47-1.07-1.57-2.74-1.79-3.34-1.81-1.42-.14-2.77.83-3.49.83-.74 0-1.84-.81-3.03-.79-1.55.02-2.99.91-3.79 2.31-1.62 2.81-.41 6.97 1.16 9.25.78 1.12 1.69 2.36 2.89 2.32 1.16-.05 1.6-.75 2.99-.75 1.39 0 1.79.75 3 .73 1.24-.02 2.02-1.13 2.78-2.25.88-1.29 1.24-2.55 1.26-2.62-.03-.01-2.41-.93-2.4-3.65zM14.83 5.43c.64-.78 1.07-1.86.95-2.93-.92.04-2.04.61-2.7 1.39-.59.69-1.11 1.79-.97 2.84 1.03.08 2.08-.52 2.72-1.3z"/></svg>;
    case 'panel':      return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>;
    case 'panelR':     return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></svg>;
    case 'chevronR':   return <svg {...props}><path d="m9 6 6 6-6 6"/></svg>;
    case 'chevronD':   return <svg {...props}><path d="m6 9 6 6 6-6"/></svg>;
    case 'send':       return <svg {...props}><path d="M22 2 11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7Z"/></svg>;
    case 'lock':       return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'eye':        return <svg {...props}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'route':      return <svg {...props}><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M6 16V8a4 4 0 0 1 4-4h8"/></svg>;
    case 'inspector':  return <svg {...props}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M14 4v16"/><path d="M17 9h1m-1 3h1m-1 3h1"/></svg>;
    case 'home':       return <svg {...props}><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg>;
    case 'github':     return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"/></svg>;
    default: return null;
  }
}

Object.assign(window, {
  FONT_DISPLAY, FONT_MONO,
  PolycodeIcon, PolycodeWordmark,
  ProviderTile, AppleGlyphTile, PROVIDERS, Icon,
});