/* WPSiteBeam — SiteFavicon.jsx
   v1.0.0 — 2026-05-26
   Colored letter-avatar for sites without a custom favicon.
   From Claude Design concept review (2026-05-26).

   Usage:
     <window.SiteFavicon domain="acme.co" size={28}/>
     <window.SiteFavicon initial="A" color="teal" size={36}/>

   Props:
     domain  : string — derives initial + deterministic color from domain
     initial : string — override initial letter
     color   : 'indigo'|'rose'|'teal'|'amber'|'slate'|'lime'|'sky'|'violet'|'cyan' (override)
     size    : number px (default 28)
     radius  : number px (default 6)
*/
(function() {
  'use strict';
  if (typeof window === 'undefined' || !window.React) return;

  const PALETTE = {
    cyan:   ['rgba(6,182,212,.15)',   'var(--cyan,#06b6d4)'],
    teal:   ['rgba(20,184,166,.15)',  '#0d9488'],
    indigo: ['rgba(99,102,241,.15)',  '#6366f1'],
    rose:   ['rgba(244,63,94,.15)',   '#f43f5e'],
    amber:  ['rgba(245,158,11,.15)',  '#d97706'],
    slate:  ['rgba(100,116,139,.15)', '#475569'],
    lime:   ['rgba(132,204,22,.15)',  '#65a30d'],
    sky:    ['rgba(14,165,233,.15)',  '#0284c7'],
    violet: ['rgba(139,92,246,.15)', '#7c3aed'],
    green:  ['rgba(16,185,129,.15)', '#059669'],
    orange: ['rgba(249,115,22,.15)', '#ea580c'],
  };

  const COLORS = Object.keys(PALETTE);

  function hashColor(str) {
    if (!str) return 'cyan';
    let h = 0;
    for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
    return COLORS[h % COLORS.length];
  }

  function SiteFavicon({ domain, initial, color, size = 28, radius = 6 }) {
    const key    = domain || initial || '?';
    const col    = color || hashColor(key);
    const [bg, fg] = PALETTE[col] || PALETTE.cyan;
    const letter = initial
      ? initial.charAt(0).toUpperCase()
      : (domain || '?').replace(/^www\./, '').charAt(0).toUpperCase();

    return (
      <div style={{
        width:size, height:size, borderRadius:radius,
        background:bg, color:fg,
        display:'grid', placeItems:'center',
        fontWeight:700,
        fontSize: Math.round(size * 0.45) + 'px',
        fontFamily:'var(--font-mono,monospace)',
        flexShrink:0, userSelect:'none',
        border: '1px solid ' + fg.replace(')', ',0.2)').replace('rgb', 'rgba'),
      }}>
        {letter}
      </div>
    );
  }

  window.SiteFavicon = SiteFavicon;
  console.log('[WPSB] SiteFavicon v1.0.0 loaded');
})();