// Logos.jsx
// Project Baseline sub-brand mark (designed to fit Reflective + Numerate visual system),
// plus lockups for Reflective and Numerate.
//
// Concept for the Project Baseline mark:
//   A horizontal "baseline" anchored at the bottom, with three dots ascending above it
//   in a gentle arc. Measurement points plotted against a known floor. The dots echo
//   Numerate's circular DNA; the violet ink locks it as a Reflective sub-brand.

function ProjectBaselineMark({ size = 36, tone = 'violet' }) {
  const ink = tone === 'white' ? '#fff' : 'var(--insight-violet, #7C3AED)';
  const accent = tone === 'white' ? '#fff' : 'var(--curiosity-purple, #4A1FB8)';
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      {/* baseline */}
      <rect x="3" y="30" width="34" height="3.2" rx="1.6" fill={ink}/>
      {/* ticks under baseline */}
      <rect x="8" y="34.5" width="1.5" height="3" rx="0.75" fill={ink} opacity="0.5"/>
      <rect x="19.25" y="34.5" width="1.5" height="3" rx="0.75" fill={ink} opacity="0.5"/>
      <rect x="30.5" y="34.5" width="1.5" height="3" rx="0.75" fill={ink} opacity="0.5"/>
      {/* three plotted points ascending */}
      <circle cx="9" cy="23" r="3.4" fill={ink}/>
      <circle cx="20" cy="16" r="4.6" fill={accent}/>
      <circle cx="31" cy="9.5"  r="3.4" fill={ink}/>
      {/* tiny connector showing progression */}
      <path d="M9 23 L20 16 L31 9.5" stroke={ink} strokeWidth="1.4" strokeLinecap="round" opacity="0.35"/>
    </svg>
  );
}

function ProjectBaselineLogo({ size = 36, tone = 'violet', layout = 'horizontal' }) {
  const ink = tone === 'white' ? '#fff' : 'var(--graphite-950, #1c1b2f)';
  const sub = tone === 'white' ? 'rgba(255,255,255,0.7)' : 'var(--text-tertiary, #475467)';
  if (layout === 'stacked') {
    return (
      <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <ProjectBaselineMark size={size * 1.4} tone={tone}/>
        <div style={{ textAlign: 'center', lineHeight: 1.1 }}>
          <div style={{ fontWeight: 700, fontSize: size * 0.5, letterSpacing: '-0.014em', color: ink }}>Project Baseline</div>
          <div style={{ fontSize: size * 0.28, letterSpacing: '0.06em', textTransform: 'uppercase', color: sub, marginTop: 3, fontWeight: 500 }}>
            a numerate diagnostic
          </div>
        </div>
      </div>
    );
  }
  return (
    <span className="pb-logo-row">
      <ProjectBaselineMark size={size} tone={tone}/>
      <span className="pb-logo-text-stack">
        <span className="pb-logo-name" style={{ color: ink, fontSize: size * 0.46 }}>Project Baseline</span>
        <span className="pb-logo-tag" style={{ color: sub }}>a numerate diagnostic</span>
      </span>
    </span>
  );
}

function ReflectiveWordmark({ height = 22, tone = 'violet' }) {
  // Use the official PNG. For white tone (on dark), invert via filter.
  const style = tone === 'white' ? { filter: 'brightness(0) invert(1)' } : {};
  return (
    <img
      src={window.__resources && window.__resources.reflectiveHorizontal ? window.__resources.reflectiveHorizontal : 'assets/reflective-horizontal.png'}
      alt="Reflective"
      style={{ height, width: 'auto', display: 'block', ...style }}
    />
  );
}

function NumerateLogo({ height = 28, layout = 'horizontal', tone = 'green' }) {
  const key = tone === 'white' ? 'numerateWhite'
            : layout === 'stacked' ? 'numerateStacked'
            : 'numerateHorizontal';
  const fallback = tone === 'white' ? 'assets/numerate-white.png'
                 : layout === 'stacked' ? 'assets/numerate-stacked.png'
                 : 'assets/numerate-horizontal.png';
  const src = (window.__resources && window.__resources[key]) ? window.__resources[key] : fallback;
  return <img src={src} alt="Numerate" style={{ height, width: 'auto', display: 'block' }}/>;
}

// "Powered by" inline lockup used in header / footer
function PoweredByLockup({ tone = 'default' }) {
  const sub = tone === 'white' ? 'rgba(255,255,255,0.6)' : 'var(--text-tertiary, #475467)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 12, color: sub, fontWeight: 500 }}>
      <span style={{ letterSpacing: '0.04em' }}>Powered by</span>
      <NumerateLogo height={18}/>
      <span style={{ opacity: 0.45 }}>·</span>
      <ReflectiveWordmark height={14} tone={tone === 'white' ? 'white' : 'violet'}/>
    </span>
  );
}

Object.assign(window, { ProjectBaselineMark, ProjectBaselineLogo, ReflectiveWordmark, NumerateLogo, PoweredByLockup });