/* global React */
// Brand logo utilities — Brandfetch CDN with sigil fallbacks

const BF = 'https://cdn.brandfetch.io/domain/';
const BFK = '?c=1idNQiW_GhGrqwhZli4';
function bfUrl(domain) { return `${BF}${domain}${BFK}`; }

// Real engine logos — official brand assets, white via CSS filter on dark backgrounds
function EngineIcon({ name, size = 16, invert = true }) {
  const n = (name || '').toLowerCase();
  const filter = invert ? 'brightness(0) invert(1)' : 'brightness(0)';
  const style = { width: size, height: size, objectFit: 'contain', display: 'block', filter };
  if (n === 'chatgpt' || n === 'openai')
    return <img src="/images/engines/chatgpt-icon.svg" alt="ChatGPT" style={style}/>;
  if (n === 'claude' || n === 'anthropic')
    return <img src="/images/engines/claude-icon.svg" alt="Claude" style={style}/>;
  if (n === 'gemini')
    return <img src="/images/engines/gemini-icon.svg" alt="Gemini" style={style}/>;
  if (n === 'perplexity')
    return <img src="/images/engines/perplexity-icon.png" alt="Perplexity" style={style}/>;
  return null;
}

// Inline logo with graceful text fallback
function BrandLogo({ domain, name, sigil, size = 18, light = false, style = {} }) {
  const [err, setErr] = React.useState(false);
  if (!domain || err) {
    return <span style={{fontSize: Math.round(size * 0.62), fontWeight: 700, lineHeight: 1, letterSpacing: 0}}>{sigil}</span>;
  }
  return (
    <img
      src={bfUrl(domain)} alt={name}
      width={size} height={size}
      style={{objectFit: 'contain', display: 'block', flexShrink: 0,
              ...(light ? {filter: 'brightness(0) invert(1)'} : {}), ...style}}
      onError={() => setErr(true)}
    />
  );
}

function EngineMark({ name, color, sigil, domain, width = 120, height = 40, active = false }) {
  return (
    <div className={`engine-mark ${active ? 'active' : ''}`} style={{width, height}}>
      <span className="em-sigil" style={{background: color, display:'flex', alignItems:'center', justifyContent:'center'}}>
        <EngineIcon name={name} size={16} color="#fff"/>
      </span>
      <span className="em-name">{name}</span>
    </div>
  );
}

// AI engine marks
const ENGINE_MARKS = [
  { name: 'ChatGPT',    color: '#3DA874', sigil: 'G',  domain: 'chatgpt.com'        },
  { name: 'Claude',     color: '#F08A2B', sigil: 'C',  domain: 'claude.ai'          },
  { name: 'Gemini',     color: '#4A8FBD', sigil: 'Ge', domain: 'gemini.google.com'  },
  { name: 'Perplexity', color: '#1A6B6B', sigil: 'P',  domain: 'perplexity.ai'      },
];

// Competitor LLM-visibility tools
const COMPETITOR_MARKS = [
  { name: 'Peec',       color: '#8B6BAE', sigil: 'Pe', domain: 'peec.ai'        },
  { name: 'Scrunch',    color: '#D14F3C', sigil: 'Sc', domain: 'scrunchai.com'  },
  { name: 'Profound',   color: '#4A8FBD', sigil: 'Pr', domain: 'tryprofound.com'},
  { name: 'Searchable', color: '#3DA874', sigil: 'Se', domain: 'searchable.ai'  },
  { name: 'Otterly',    color: '#8B6BAE', sigil: 'Ot', domain: 'otterly.ai'     },
  { name: 'Athena HQ',  color: '#1E1A14', sigil: 'At', domain: 'athenahq.ai'    },
  { name: 'Goodie',     color: '#D14F3C', sigil: 'Gd', domain: 'goodie.ai'      },
];

// Demo workspace clients — well-known brands for illustration
const CLIENTS = [
  { name: 'Salesforce',  domain: 'salesforce.com'  },
  { name: 'HubSpot',     domain: 'hubspot.com'     },
  { name: 'Attio',       domain: 'attio.com'       },
  { name: 'Notion',      domain: 'notion.so'       },
  { name: 'Intercom',    domain: 'intercom.com'    },
  { name: 'Figma',       domain: 'figma.com'       },
  { name: 'Stripe',      domain: 'stripe.com'      },
  { name: 'Linear',      domain: 'linear.app'      },
  { name: 'Rippling',    domain: 'rippling.com'    },
  { name: 'Deel',        domain: 'deel.com'        },
  { name: 'Monday.com',  domain: 'monday.com'      },
  { name: 'Vercel',      domain: 'vercel.com'      },
];

window.Promptive = Object.assign(window.Promptive || {}, {
  EngineMark, ENGINE_MARKS, COMPETITOR_MARKS, CLIENTS, BrandLogo, bfUrl, EngineIcon
});