/* Brand.jsx — Logo lockup + monogram Avatar + Partner wordmark + SocialIcons */
const { createElement: bh } = React;

function Logo({ height = 30, onClick, showWord = true, tagline = false }) {
  return bh('div', {
    onClick, className: 'ys-logo',
    style: { display: 'inline-flex', alignItems: 'center', gap: 12, cursor: onClick ? 'pointer' : 'default', userSelect: 'none' }
  },
    bh('img', { src: './assets/logo-mark.png', alt: 'Yottasecure', style: { height, display: 'block' } }),
    showWord && bh('div', { style: { display: 'flex', flexDirection: 'column', lineHeight: 1 } },
      bh('span', { style: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: height * 0.52, letterSpacing: '.22em', color: 'var(--fg-1)', paddingLeft: '.05em' } }, 'YOTTASECURE'),
      tagline && bh('span', { style: { fontFamily: 'var(--font-mono)', fontSize: 8.5, letterSpacing: '.16em', color: 'var(--brand)', marginTop: 5 } }, 'REAL-TIME · AI-POWERED CYBER DEFENSE')
    )
  );
}

/* Monogram avatar with subtle brand ring — placeholder for real headshots */
function Avatar({ name, size = 132, accent }) {
  const initials = name.split(' ').filter(w => /[A-Za-z]/.test(w[0])).slice(0, 2).map(w => w[0]).join('').toUpperCase();
  return bh('div', {
    style: {
      width: size, height: size, borderRadius: '50%', position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'radial-gradient(120% 120% at 30% 20%, #16242f, #0b0f17 70%)',
      border: '1px solid var(--border-2)', boxShadow: 'inset 0 0 0 1px rgba(31,200,210,.06)'
    }
  },
    bh('div', { 'aria-hidden': true, style: { position: 'absolute', inset: -1, borderRadius: '50%', padding: 1, background: 'conic-gradient(from 210deg, rgba(31,200,210,.5), transparent 35%, transparent 70%, rgba(67,224,195,.4))', WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude', opacity: .8 } }),
    bh('span', { style: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: size * 0.3, letterSpacing: '.02em', color: 'var(--fg-2)' } }, initials)
  );
}

/* Partner wordmark — monochrome text placeholder (real logos are 3rd-party) */
function PartnerMark({ name }) {
  return bh('div', {
    style: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, letterSpacing: '.02em', color: 'var(--fg-3)', opacity: .85, whiteSpace: 'nowrap', transition: 'color var(--dur), opacity var(--dur)' },
    className: 'ys-partner'
  }, name);
}

function SocialIcons({ size = 17, color = 'var(--fg-3)', gap = 16, links = {} }) {
  const items = ['linkedin', 'twitter'];
  return bh('div', { style: { display: 'flex', gap, alignItems: 'center' } },
    items.map(n => bh('a', { key: n, href: links[n] || '#', target: links[n] ? '_blank' : undefined, rel: links[n] ? 'noopener noreferrer' : undefined, onClick: !links[n] ? (e => e.preventDefault()) : undefined, className: 'ys-social', style: { color, display: 'inline-flex', transition: 'color var(--dur)' } }, bh(window.Icon, { name: n, size }))));
}

Object.assign(window, { Logo, Avatar, PartnerMark, SocialIcons });