// ORB — the Apex logo/product mark. Colors NEVER change.
// We only vary stage, scale, and the environment around it.

const Orb = ({ size=120, glow=true, float=true, style={} }) => {
  return (
    <div style={{
      width:size,height:size,position:'relative',
      animation: float ? 'apex-float 5s ease-in-out infinite' : 'none',
      ...style,
    }}>
      {glow && (
        <div style={{
          position:'absolute',inset:-size*0.3,
          background:`radial-gradient(circle,rgba(124,58,237,0.45) 0%,rgba(59,130,246,0.15) 45%,transparent 70%)`,
          filter:'blur(12px)',pointerEvents:'none',
        }}/>
      )}
      <img src={BRAND.orbSrc} alt="Apex"
        style={{
          position:'relative',zIndex:1,
          width:'100%',height:'100%',objectFit:'contain',
          filter:glow?'drop-shadow(0 8px 30px rgba(124,58,237,0.45))':'none',
        }}
      />
    </div>
  );
};

// Orb + wordmark for footer / chrome
const ApexMark = ({ size=36, showText=true, textColor }) => (
  <div style={{display:'inline-flex',alignItems:'center',gap:12}}>
    <Orb size={size} float={false} glow={true}/>
    {showText && (
      <span style={{
        fontWeight:800,letterSpacing:'0.4px',textTransform:'uppercase',fontSize:size*0.4,
        background: textColor || 'linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,#7c3aed 100%)',
        WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
      }}>Apex OS</span>
    )}
  </div>
);

Object.assign(window, { Orb, ApexMark });