// Shared brand atoms for OncoVolt — dark cinematic + techy minimal.
// Palette: deep space navy, electric cyan, violet, bone white.

const OV_BRAND = {
  bg: '#0A0E1A',
  bgDeep: '#05080F',
  panel: '#0F1524',
  line: 'rgba(255,255,255,0.08)',
  lineStrong: 'rgba(255,255,255,0.14)',
  text: '#F4F4F5',
  textDim: 'rgba(244,244,245,0.62)',
  textMute: 'rgba(244,244,245,0.38)',
  cyan: '#00E5FF',
  violet: '#7C5CFF',
  warm: '#FFB067',
  sans: '"Inter Tight", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',
  mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',
  serif: '"Fraunces", "Canela", "Tiempos Headline", Georgia, serif',
};

// Logo mark — voltaic "O" with a cell-membrane break
function OVLogo({ size = 22, color }) {
  const c = color || OV_BRAND.text;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
      <circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.6" strokeDasharray="3 2.2" />
      <path d="M12 3.5 L12 8 L9.5 12 L14.5 12 L12 20.5" stroke={OV_BRAND.cyan} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  );
}

// Tiny label with a monospace uppercase feel — used everywhere.
function OVEyebrow({ children, color, style = {} }) {
  return (
    <div style={{
      fontFamily: OV_BRAND.mono,
      fontSize: 11,
      letterSpacing: 2.4,
      textTransform: 'uppercase',
      color: color || OV_BRAND.textDim,
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      ...style,
    }}>
      <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 1, background: OV_BRAND.cyan, boxShadow: `0 0 8px ${OV_BRAND.cyan}` }} />
      {children}
    </div>
  );
}

// Minimal top nav — same across all variations.
function OVNav({ variant = 'A' }) {
  const linkStyle = {
    color: OV_BRAND.textDim, textDecoration: 'none', cursor: 'pointer',
    transition: 'color .15s',
  };
  const onHover = (e) => { e.currentTarget.style.color = OV_BRAND.text; };
  const onLeave = (e) => { e.currentTarget.style.color = OV_BRAND.textDim; };
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '22px 44px',
      position: 'relative', zIndex: 10,
      borderBottom: `1px solid ${OV_BRAND.line}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <OVLogo size={20} />
        <div style={{ fontFamily: OV_BRAND.sans, fontSize: 15, fontWeight: 600, letterSpacing: -0.2, color: OV_BRAND.text }}>
          OncoVolt
        </div>
        <div style={{
          fontFamily: OV_BRAND.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
          color: OV_BRAND.textMute, border: `1px solid ${OV_BRAND.line}`, padding: '3px 7px', borderRadius: 2, marginLeft: 8,
        }}>
          Stealth · Est. 2026
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 1.8, textTransform: 'uppercase', color: OV_BRAND.textDim }}>
        <a href="#about" style={linkStyle} onMouseEnter={onHover} onMouseLeave={onLeave}>About</a>
        <a href="#approach" style={linkStyle} onMouseEnter={onHover} onMouseLeave={onLeave}>Approach</a>
        <a href="#platform" style={linkStyle} onMouseEnter={onHover} onMouseLeave={onLeave}>Platform</a>
        <a href="#contact" style={linkStyle} onMouseEnter={onHover} onMouseLeave={onLeave}>Contact</a>
        <a href="#contact" style={{
          fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', textTransform: 'inherit',
          background: 'transparent', color: OV_BRAND.text, textDecoration: 'none',
          border: `1px solid ${OV_BRAND.lineStrong}`, padding: '8px 14px', borderRadius: 2, cursor: 'pointer',
          display: 'inline-block',
        }}>
          Request dialogue →
        </a>
      </div>
    </nav>
  );
}

// Section wrapper with a fine horizontal frame
function OVSection({ children, eyebrow, index, id, style = {}, borderTop = true }) {
  return (
    <section id={id} style={{
      padding: '100px 44px',
      borderTop: borderTop ? `1px solid ${OV_BRAND.line}` : 'none',
      position: 'relative',
      scrollMarginTop: 24,
      ...style,
    }}>
      {(eyebrow || index) && (
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 48, fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 2.4, textTransform: 'uppercase', color: OV_BRAND.textDim }}>
          <OVEyebrow>{eyebrow}</OVEyebrow>
          {index && <span style={{ color: OV_BRAND.textMute }}>{index}</span>}
        </div>
      )}
      {children}
    </section>
  );
}

// Footer
function OVFooter() {
  return (
    <footer style={{
      padding: '60px 44px 36px', borderTop: `1px solid ${OV_BRAND.line}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40,
      fontFamily: OV_BRAND.mono, fontSize: 11, letterSpacing: 1.6, color: OV_BRAND.textMute, textTransform: 'uppercase',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <OVLogo size={28} />
        <div style={{ fontFamily: OV_BRAND.sans, fontSize: 13, color: OV_BRAND.textDim, textTransform: 'none', letterSpacing: 0 }}>
          OncoVolt, Inc. &nbsp;·&nbsp; Cambridge, Massachusetts &nbsp;·&nbsp; 42.3601° N, 71.0942° W
        </div>
      </div>
      <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span>contact@oncovolt.bio</span>
        <span style={{ color: OV_BRAND.textMute }}>© 2026 — all rights reserved</span>
      </div>
    </footer>
  );
}

Object.assign(window, { OV_BRAND, OVLogo, OVEyebrow, OVNav, OVSection, OVFooter });