// shared.jsx — tokens, logo, UI primitives shared across variations

// Tweakable defaults (mutated at runtime via Tweaks panel)
window.JB = window.JB || {
  accent: '#FF5B1F', // Jupiter storm orange
  fontDisplay: '"Space Grotesk", "Inter", system-ui, sans-serif',
  fontMono: '"JetBrains Mono", ui-monospace, monospace',
  tagline: 'Expand your horizons.',
  bg: 'dark', // 'dark' | 'light'
  showGrid: false,
  speed: 1
};

// Inline logo — "JUPITER BASE" wordmark with orbit mark
function JupiterMark({ size = 22, color, showText = true, accent }) {
  const c = color || (window.JB.bg === 'dark' ? '#fff' : '#0a0a0a');
  const a = accent || window.JB.accent;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.45, lineHeight: 1 }}>
      <svg width={size * 1.4} height={size * 1.4} viewBox="0 0 40 40" fill="none" style={{ flexShrink: 0 }}>
        {/* planet */}
        <circle cx="20" cy="20" r="9" fill={c} />
        {/* storm spot */}
        <circle cx="17" cy="22" r="2.2" fill={a} />
        {/* orbit */}
        <ellipse cx="20" cy="20" rx="18" ry="6" stroke={c} strokeWidth="1.2" transform="rotate(-18 20 20)" />
      </svg>
      {showText &&
      <div style={{
        fontFamily: window.JB.fontDisplay,
        fontWeight: 600,
        fontSize: size,
        color: c,
        letterSpacing: '0.14em',
        textTransform: 'uppercase'
      }}>
          Jupiter<span style={{ opacity: 0.55, marginLeft: '0.35em' }}>Base</span>
        </div>
      }
    </div>);

}

// Subtle grid overlay (toggleable)
function GridOverlay({ color }) {
  if (!window.JB.showGrid) return null;
  const c = color || (window.JB.bg === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)');
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `linear-gradient(${c} 1px, transparent 1px), linear-gradient(90deg, ${c} 1px, transparent 1px)`,
      backgroundSize: '80px 80px',
      zIndex: 0
    }} />);

}

// Noise/grain overlay for richness
function GrainOverlay({ opacity = 0.04 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      opacity,
      mixBlendMode: 'overlay',
      backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>")`,
      zIndex: 5
    }} />);

}

// Fine tick marks — bottom-of-frame detail
function TickRow({ y, color, count = 60, width = 1920 }) {
  const c = color || (window.JB.bg === 'dark' ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.35)');
  const items = [];
  for (let i = 0; i < count; i++) {
    const big = i % 10 === 0;
    items.push(
      <div key={i} style={{
        position: 'absolute',
        left: i / (count - 1) * width,
        top: 0,
        width: 1,
        height: big ? 10 : 5,
        background: c
      }} />
    );
  }
  return <div style={{ position: 'absolute', left: 0, top: y, width, height: 12 }}>{items}</div>;
}

// Meta strip — small mono labels, corner chrome
function MetaStrip({ left, right, y = 40, color }) {
  const c = color || (window.JB.bg === 'dark' ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)');
  return (
    <>
      <div style={{
        position: 'absolute', left: 48, top: y,
        fontFamily: window.JB.fontMono, letterSpacing: '0.12em',
        color: c, textTransform: 'uppercase', fontVariantNumeric: 'tabular-nums', fontSize: "33px"
      }}>{left}</div>
      <div style={{
        position: 'absolute', right: 48, top: y,
        fontFamily: window.JB.fontMono, letterSpacing: '0.12em',
        color: c, textTransform: 'uppercase', fontVariantNumeric: 'tabular-nums', fontSize: "33px"
      }}>{right}</div>
    </>);

}

// End card — shared across variations
function EndCard({ bg, fg, accent, showAccent = true }) {
  const { progress } = useSprite();
  const p = Easing.easeOutCubic(clamp(progress * 2.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: bg,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      zIndex: 20
    }}>
      <div style={{ opacity: p, transform: `translateY(${(1 - p) * 16}px)` }}>
        <img
          src={window.JUPITER_LOGO_DATA_URL || "jupiter/jupiter-base-logo.png"}
          alt="Jupiter Base"
          style={{
            display: 'block',
            filter: window.JB.bg === 'dark' ? 'invert(1)' : 'none', objectFit: "cover", width: "777px", height: "333px"
          }} />
        
      </div>
      {showAccent &&
      <div style={{
        marginTop: 40, width: clamp((progress - 0.15) * 2, 0, 1) * 200, height: 3,
        background: accent
      }} />
      }
      <div style={{
        position: 'absolute', bottom: 48, left: 48,
        fontFamily: window.JB.fontMono, fontSize: 12, letterSpacing: '0.18em',
        color: fg, opacity: 0.5, textTransform: 'uppercase'
      }}>
</div>
      <div style={{ position: 'absolute', bottom: 48, right: 48,
          fontFamily: window.JB.fontMono, fontSize: 12, letterSpacing: '0.18em',
          color: fg, opacity: 0.5, textTransform: 'uppercase'
        }}></div>
    </div>);

}

Object.assign(window, { JupiterMark, GridOverlay, GrainOverlay, TickRow, MetaStrip, EndCard });