// Marketing-site primitives — mirrors web/src/components in the sciphr-app repo.

const COL = {
  black: '#000000', white: '#FFFFFF',
  grayLight: '#E0E0E0', grayMed: '#C0C0C0', grayDark: '#808080', grayDarker: '#404040',
  // No green in the SciPHR brand. Accent = amber (testnet). Error = red.
  accent: '#FFB800', error: '#FF0000',
  // Window-chrome traffic lights stay (they're literal macOS chrome, not brand).
  trafficRed: '#FF5F56', trafficAmber: '#FFBD2E', trafficGreen: '#27C93F',
};
const MONO_W =
  'Menlo, ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "Liberation Mono", "Courier New", monospace';

// Web CommandButton — solid (CRT-green CTA), outline (dark), or ghost.
function CommandButton({
  label, href = '#', variant = 'outline', tone = 'dark',
  as = 'a', onClick, type = 'button', disabled = false, children,
}) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    padding: '12px 22px',
    fontFamily: MONO_W, fontSize: 12, fontWeight: 600,
    letterSpacing: '0.25em', textTransform: 'uppercase',
    borderRadius: 4, cursor: disabled ? 'not-allowed' : 'pointer',
    transition: 'transform 150ms ease, background 150ms ease, color 150ms ease',
    textDecoration: 'none', userSelect: 'none',
  };
  const palettes = {
    dark: {
      outline: { background: COL.black, color: COL.white, border: `1px solid ${COL.grayDark}`, boxShadow: `3px 3px 0 ${COL.grayDarker}` },
      solid:   { background: COL.white, color: COL.black, border: `1px solid ${COL.white}`, boxShadow: `3px 3px 0 ${COL.grayMed}` },
      ghost:   { background: 'transparent', color: COL.white, border: '1px solid transparent', boxShadow: 'none' },
    },
    light: {
      outline: { background: COL.white, color: COL.black, border: `1px solid ${COL.grayDark}`, boxShadow: `3px 3px 0 ${COL.grayMed}` },
      solid:   { background: COL.black, color: COL.white, border: `1px solid ${COL.black}`, boxShadow: `3px 3px 0 ${COL.grayDarker}` },
      ghost:   { background: 'transparent', color: COL.black, border: '1px solid transparent', boxShadow: 'none' },
    },
  };
  const [hover, setHover] = React.useState(false);
  const style = { ...base, ...palettes[tone][variant], opacity: disabled ? 0.6 : 1, transform: hover && !disabled ? 'translateY(-2px)' : 'none' };
  const content = children || label;
  const handlers = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    onClick: disabled ? undefined : onClick,
  };
  if (as === 'button') {
    return <button style={style} type={type} disabled={disabled} {...handlers}>{content}</button>;
  }
  const external = window.SP_isExternal && window.SP_isExternal(href);
  return (
    <a
      style={style}
      href={href}
      target={external ? '_blank' : undefined}
      rel={external ? 'noopener noreferrer' : undefined}
      {...handlers}>{content}</a>
  );
}

// Web TerminalCard — dark window-chrome shell with CRT-green halo + offset ghost.
function TerminalCard({ title = 'xCIPHR v1.0', children, footer }) {
  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        position: 'absolute', inset: 0, transform: 'translate(6px, 6px)',
        border: `1px solid rgba(255,255,255,0.35)`, background: 'rgba(255,255,255,0.04)',
        borderRadius: 6, pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{
        position: 'relative', zIndex: 1,
        borderRadius: 6, border: `1px solid ${COL.white}`,
        background: COL.black, color: COL.white,
        boxShadow: 'none',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          borderBottom: `1px solid ${COL.grayDarker}`, padding: '10px 14px',
        }}>
          <Dot bg={COL.trafficRed} />
          <Dot bg={COL.trafficAmber} />
          <Dot bg={COL.trafficGreen} />
          <span style={{
            marginLeft: 8, fontFamily: MONO_W, fontSize: 11,
            letterSpacing: '0.35em', textTransform: 'uppercase', color: COL.grayLight,
          }}>{title}</span>
        </div>
        <div style={{ padding: '20px 18px' }}>{children}</div>
        {footer ? (
          <div style={{
            borderTop: `1px solid rgba(128,128,128,0.5)`, padding: '10px 14px',
            fontFamily: MONO_W, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: COL.grayLight,
          }}>{footer}</div>
        ) : null}
      </div>
    </div>
  );
}

function Dot({ bg }) {
  return (
    <span style={{
      width: 12, height: 12, borderRadius: '50%',
      background: bg, border: `1px solid ${COL.grayDark}`, display: 'inline-block',
    }} />
  );
}

// Web OutlineCard — sits on a dark page; has the same green halo + offset ghost.
function OutlineCard({ title, children, id, style = {} }) {
  return (
    <div id={id} style={{ position: 'relative', ...style }}>
      <div style={{
        position: 'absolute', inset: 0, transform: 'translate(6px, 6px)',
        border: `1px solid rgba(255,255,255,0.35)`, background: 'rgba(255,255,255,0.04)',
        borderRadius: 4, pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{
        position: 'relative', zIndex: 1,
        border: `1px solid ${COL.white}`, borderRadius: 4,
        background: 'rgba(0,0,0,0.9)', color: COL.white,
        boxShadow: 'none',
        padding: '22px 20px',
      }}>
        {title ? (
          <>
            <div style={{
              fontFamily: MONO_W, fontSize: 11, letterSpacing: '0.35em',
              textTransform: 'uppercase', color: COL.grayLight, marginBottom: 10,
            }}>{title}</div>
            <hr style={{ border: 0, borderTop: `1px solid rgba(128,128,128,0.4)`, margin: '0 0 14px 0' }} />
          </>
        ) : null}
        {children}
      </div>
    </div>
  );
}

// Marquee strip — auto-scrolling list of uppercase affirmations.
function MarqueeStrip({ items }) {
  const doubled = items.concat(items);
  return (
    <div style={{
      overflow: 'hidden', borderRadius: 4,
      border: `1px solid ${COL.grayDark}`, background: COL.black, padding: '10px 0',
    }}>
      <div style={{
        display: 'flex', gap: 28, whiteSpace: 'nowrap', padding: '0 16px',
        animation: 'sp-marquee 24s linear infinite',
        fontFamily: MONO_W, fontSize: 11, letterSpacing: '0.35em',
        textTransform: 'uppercase', color: COL.grayLight,
      }}>
        {doubled.map((item, i) => <span key={i}>{item} ✓</span>)}
      </div>
      <style>{`@keyframes sp-marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }`}</style>
    </div>
  );
}

// Blinking caret — square wave.
function Caret({ color = COL.white }) {
  const [on, setOn] = React.useState(true);
  React.useEffect(() => {
    const id = setInterval(() => setOn(v => !v), 500);
    return () => clearInterval(id);
  }, []);
  return (
    <span style={{ display: 'inline-block', width: '0.6ch', color, opacity: on ? 1 : 0 }}>_</span>
  );
}

Object.assign(window, {
  SP_COL: COL, SP_MONO_W: MONO_W,
  CommandButton, TerminalCard, OutlineCard, MarqueeStrip, Caret,
});