// primitives.jsx — shared Chrono UI atoms

// ── Icons (custom-drawn, original) ────────────────────────────────────────
const Icon = {
  cal: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <rect x="2.5" y="4" width="15" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M2.5 8H17.5" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M6.5 2.5V5.5M13.5 2.5V5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  focus: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="7.25" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="10" cy="10" r="2" fill="currentColor"/>
      <path d="M10 5.5V3M10 17V14.5M5.5 10H3M17 10H14.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  ai: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10 2.5L11.5 6.5L15.5 8L11.5 9.5L10 13.5L8.5 9.5L4.5 8L8.5 6.5L10 2.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <circle cx="15.5" cy="14.5" r="1.5" fill="currentColor"/>
      <circle cx="4.5" cy="14" r="1" fill="currentColor"/>
    </svg>
  ),
  settings: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M10 1.5V4M10 16V18.5M3.5 10H1M19 10H16.5M5.4 5.4L3.6 3.6M16.4 16.4L14.6 14.6M5.4 14.6L3.6 16.4M16.4 3.6L14.6 5.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  user: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="7" r="3.25" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3.5 17C3.5 13.5 6.5 12 10 12C13.5 12 16.5 13.5 16.5 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  plus: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10 4V16M4 10H16" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"/>
    </svg>
  ),
  back: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M12 4L6 10L12 16" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  fwd: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M8 4L14 10L8 16" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  close: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"/>
    </svg>
  ),
  check: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M4 10.5L8 14.5L16 6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  send: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10 16V4M10 4L5 9M10 4L15 9" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  play: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M6 4.5L15.5 10L6 15.5V4.5Z" fill="currentColor"/>
    </svg>
  ),
  pause: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <rect x="6" y="4.5" width="3" height="11" rx="1" fill="currentColor"/>
      <rect x="11" y="4.5" width="3" height="11" rx="1" fill="currentColor"/>
    </svg>
  ),
  stop: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <rect x="5.5" y="5.5" width="9" height="9" rx="1.5" fill="currentColor"/>
    </svg>
  ),
  search: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="9" cy="9" r="5.25" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M13 13L17 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  bell: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M5 14V9C5 6.2 7.2 4 10 4C12.8 4 15 6.2 15 9V14L16 15.5H4L5 14Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M8.5 17.5C9.2 18.2 10.8 18.2 11.5 17.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  pin: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10 11V17M6.5 4H13.5L12 8L14 11H6L8 8L6.5 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  loop: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M3.5 10C3.5 6.4 6.4 3.5 10 3.5C12 3.5 13.8 4.4 15 5.8M16.5 10C16.5 13.6 13.6 16.5 10 16.5C8 16.5 6.2 15.6 5 14.2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <path d="M15 3.5V6H12.5M5 16.5V14H7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  pin2: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="8.5" r="2.5" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M10 17C10 17 15 12.5 15 8.5C15 5.7 12.8 3.5 10 3.5C7.2 3.5 5 5.7 5 8.5C5 12.5 10 17 10 17Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  tag: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10.5 3H4V9.5L11.5 17L17 11.5L10.5 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <circle cx="7" cy="7" r="1" fill="currentColor"/>
    </svg>
  ),
  flame: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M10 3C10 6 7 7 7 11C7 13.8 9 16 11 16C13 16 14 14.5 14 13C14 11.5 13 11 13 9.5C13 8 14 7 14 7C14 7 11 5 10 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  sparkle: (p) => (
    <svg width={p.s||14} height={p.s||14} viewBox="0 0 14 14" fill="none">
      <path d="M7 1L8 5L12 6L8 7L7 11L6 7L2 6L6 5L7 1Z" fill="currentColor"/>
    </svg>
  ),
  apple: (p) => (
    <svg width={p.s||16} height={p.s||16} viewBox="0 0 16 16" fill="currentColor">
      <path d="M11.5 8.4c0-1.6 1.3-2.4 1.4-2.4-.8-1.1-2-1.3-2.4-1.3-1-.1-2 .6-2.5.6-.5 0-1.3-.6-2.2-.6-1.1 0-2.2.7-2.8 1.7-1.2 2.1-.3 5.1.9 6.7.6.8 1.2 1.7 2.1 1.7.8 0 1.2-.5 2.2-.5s1.3.5 2.2.5c.9 0 1.5-.8 2.1-1.6.7-.9 1-1.8 1-1.9-.1-.1-1.9-.7-2-2.9zM10.2 4c.4-.5.7-1.3.6-2-.6 0-1.4.4-1.8.9-.4.4-.7 1.2-.6 1.9.7 0 1.4-.4 1.8-.8z"/>
    </svg>
  ),
  google: (p) => (
    <svg width={p.s||16} height={p.s||16} viewBox="0 0 16 16">
      <path d="M14.7 8.16c0-.5-.04-.99-.13-1.46H8v2.77h3.76a3.21 3.21 0 0 1-1.4 2.1v1.74h2.27c1.32-1.22 2.07-3.02 2.07-5.15z" fill="#4285F4"/>
      <path d="M8 15c1.89 0 3.48-.62 4.64-1.7l-2.27-1.74c-.63.42-1.43.66-2.36.66-1.82 0-3.36-1.22-3.91-2.86H1.76v1.79A7 7 0 0 0 8 15z" fill="#34A853"/>
      <path d="M4.09 9.36a4.18 4.18 0 0 1 0-2.72V4.85H1.76a7 7 0 0 0 0 6.3l2.33-1.79z" fill="#FBBC04"/>
      <path d="M8 3.78c1.03 0 1.95.35 2.67 1.04l2-2A7 7 0 0 0 1.76 4.85l2.33 1.79C4.64 5 6.18 3.78 8 3.78z" fill="#EA4335"/>
    </svg>
  ),
  mail: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <rect x="2.5" y="4.5" width="15" height="11" rx="2" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 6L10 11L17 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  trash: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M3.5 5.5H16.5M8 3.5H12M5 5.5L6 16C6 16.5 6.5 17 7 17H13C13.5 17 14 16.5 14 16L15 5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  edit: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M14 3.5L16.5 6L7 15.5H4.5V13L14 3.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  link: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M8.5 11.5L11.5 8.5M7.5 13L6 14.5C5 15.5 3.5 15.5 2.5 14.5C1.5 13.5 1.5 12 2.5 11L4 9.5M12.5 7L14 5.5C15 4.5 16.5 4.5 17.5 5.5C18.5 6.5 18.5 8 17.5 9L16 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  bolt: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M11 2L4 11H10L9 18L16 9H10L11 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" fill={p.fill||"none"}/>
    </svg>
  ),
  brain: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M7 4C5.3 4 4 5.3 4 7C3 7 2 8 2 9.5C2 10.5 2.5 11.5 3.5 12C3.5 13.5 4.5 15 6 15.5C6 16.3 6.7 17 7.5 17H10V4.5C9 4 8 4 7 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M13 4C14.7 4 16 5.3 16 7C17 7 18 8 18 9.5C18 10.5 17.5 11.5 16.5 12C16.5 13.5 15.5 15 14 15.5C14 16.3 13.3 17 12.5 17H10V4.5C11 4 12 4 13 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  ),
  arrowR: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M4 10H16M16 10L11 5M16 10L11 15" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  more: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="5" cy="10" r="1.5" fill="currentColor"/>
      <circle cx="10" cy="10" r="1.5" fill="currentColor"/>
      <circle cx="15" cy="10" r="1.5" fill="currentColor"/>
    </svg>
  ),
  undo: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M5 9H12C14.5 9 16.5 11 16.5 13.5C16.5 16 14.5 18 12 18M5 9L8 6M5 9L8 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  redo: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M15 9H8C5.5 9 3.5 11 3.5 13.5C3.5 16 5.5 18 8 18M15 9L12 6M15 9L12 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  filter: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M3 5H17M5.5 10H14.5M8 15H12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  text: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <path d="M5 4H15V6.5M10 4V16M7 16H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  clock: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="7.25" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M10 6V10L13 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  lock: (p) => (
    <svg width={p.s||20} height={p.s||20} viewBox="0 0 20 20" fill="none">
      <rect x="4" y="9" width="12" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M6.5 9V6.5C6.5 4.5 8 3 10 3C12 3 13.5 4.5 13.5 6.5V9" stroke="currentColor" strokeWidth="1.5"/>
    </svg>
  ),
};

// ── Gradient blob avatar (deterministic from string) ──────────────────────
function GradientBlob({ seed = 'C', size = 40, style }) {
  // Deterministic hue from seed
  const h = React.useMemo(() => {
    let n = 0;
    for (let i = 0; i < seed.length; i++) n = (n * 31 + seed.charCodeAt(i)) >>> 0;
    return n % 360;
  }, [seed]);
  const h2 = (h + 60) % 360;
  return (
    <div style={{
      width: size, height: size, borderRadius: size/2,
      background: `radial-gradient(circle at 30% 30%, oklch(72% 0.18 ${h}), oklch(52% 0.22 ${h2}))`,
      boxShadow: `inset -${size*0.15}px -${size*0.15}px ${size*0.3}px rgba(0,0,0,0.25), 0 ${size*0.05}px ${size*0.2}px ${size*0.02}px oklch(50% 0.2 ${h} / 0.4)`,
      position: 'relative', overflow: 'hidden', flexShrink: 0,
      ...style,
    }}>
      <div style={{
        position: 'absolute', top: '15%', left: '20%',
        width: '40%', height: '30%', borderRadius: '50%',
        background: 'rgba(255,255,255,0.4)', filter: 'blur(4px)',
      }}/>
    </div>
  );
}

// ── Glass surface ─────────────────────────────────────────────────────────
function Glass({ children, dark, style, intensity = 16, radius = 16 }) {
  return (
    <div style={{
      position: 'relative', borderRadius: radius, overflow: 'hidden',
      backdropFilter: `blur(${intensity}px) saturate(180%)`,
      WebkitBackdropFilter: `blur(${intensity}px) saturate(180%)`,
      background: dark ? 'rgba(20,22,32,0.65)' : 'rgba(255,255,255,0.72)',
      border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(10,12,20,0.06)',
      boxShadow: dark
        ? 'inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.4)'
        : 'inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 32px rgba(10,12,20,0.06)',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Subtle button ─────────────────────────────────────────────────────────
function Btn({ children, onClick, primary, ghost, accent, danger, style, theme, disabled }) {
  const t = theme;
  let bg, fg, border, shadow;
  if (primary) {
    bg = `linear-gradient(180deg, ${t.accentColor}, ${t.accentColor}DD)`;
    fg = '#fff';
    border = 'transparent';
    shadow = t.accentGlow;
  } else if (danger) {
    bg = t.isDark ? 'rgba(255,92,122,0.12)' : 'rgba(255,92,122,0.08)';
    fg = '#FF5C7A';
    border = t.isDark ? 'rgba(255,92,122,0.25)' : 'rgba(255,92,122,0.18)';
    shadow = 'none';
  } else if (ghost) {
    bg = 'transparent';
    fg = t.text;
    border = 'transparent';
    shadow = 'none';
  } else {
    bg = t.isDark ? 'rgba(255,255,255,0.05)' : 'rgba(10,12,20,0.04)';
    fg = t.text;
    border = t.hairline;
    shadow = 'none';
  }
  return (
    <button
      className="chrono-tap"
      onClick={onClick}
      disabled={disabled}
      style={{
        appearance: 'none', cursor: disabled ? 'default' : 'pointer',
        border: `1px solid ${border}`, background: bg, color: fg,
        padding: '12px 20px', borderRadius: 14,
        fontFamily: ChronoTokens.font.ui, fontSize: 15, fontWeight: 600,
        letterSpacing: '-0.01em',
        boxShadow: shadow, opacity: disabled ? 0.4 : 1,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        ...style,
      }}
    >{children}</button>
  );
}

// ── Hairline divider ──────────────────────────────────────────────────────
function Hair({ theme, style }) {
  return <div style={{ height: 1, background: theme.hairline, ...style }}/>;
}

// ── Status bar (white text on dark) ───────────────────────────────────────
// Re-use IOSStatusBar from frame; it adapts via dark prop.

// ── Tab bar ───────────────────────────────────────────────────────────────
function TabBar({ active, onChange, theme }) {
  const items = [
    { id: 'calendar', label: 'Calendar', icon: Icon.cal },
    { id: 'focus',    label: 'Focus',    icon: Icon.focus },
    { id: 'ai',       label: 'Assistant', icon: Icon.ai },
    { id: 'settings', label: 'Settings', icon: Icon.settings },
    { id: 'profile',  label: 'Profile',  icon: Icon.user },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 12,
      display: 'flex', alignItems: 'stretch', gap: 4,
      padding: 6, borderRadius: 22,
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      background: theme.isDark ? 'rgba(14,16,24,0.78)' : 'rgba(255,255,255,0.85)',
      border: `0.5px solid ${theme.glassBorder}`,
      boxShadow: theme.isDark
        ? '0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)'
        : '0 8px 32px rgba(10,12,20,0.08), inset 0 1px 0 rgba(255,255,255,0.9)',
      zIndex: 30,
    }}>
      {items.map(it => {
        const isActive = active === it.id;
        return (
          <button
            key={it.id}
            className="chrono-tap"
            onClick={() => onChange(it.id)}
            style={{
              flex: 1, appearance: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              gap: 3, padding: '8px 0',
              border: 'none', borderRadius: 16,
              background: isActive
                ? (theme.isDark ? `${theme.accentColor}22` : `${theme.accentColor}12`)
                : 'transparent',
              color: isActive ? theme.accentColor : theme.textDim,
              fontFamily: ChronoTokens.font.ui, fontSize: 10, fontWeight: 600,
              letterSpacing: '-0.005em',
              transition: `all 220ms ${Spring.snap}`,
            }}
          >
            <it.icon s={20}/>
            <span>{it.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── Ambient glow background ───────────────────────────────────────────────
function AmbientBG({ theme, intensity = 1 }) {
  if (theme.bg === 'true-black') return null;
  return (
    <>
      <div style={{
        position: 'absolute', top: -120, left: -100, width: 360, height: 360,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${theme.accentColor}${theme.isDark ? '33' : '14'} 0%, transparent 70%)`,
        filter: 'blur(60px)',
        animation: 'chrono-orb-1 18s ease-in-out infinite',
        pointerEvents: 'none', zIndex: 0,
        opacity: intensity,
      }}/>
      <div style={{
        position: 'absolute', top: 200, right: -120, width: 280, height: 280,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${theme.isDark ? '#7A5AF8' : '#A78BFA'}${theme.isDark ? '22' : '10'} 0%, transparent 70%)`,
        filter: 'blur(70px)',
        animation: 'chrono-orb-2 22s ease-in-out infinite',
        pointerEvents: 'none', zIndex: 0,
        opacity: intensity,
      }}/>
    </>
  );
}

// ── Logo ──────────────────────────────────────────────────────────────────
// Original mark: nested hex/rotor — six-petal aperture suggesting
// time segments + a futuristic chronograph rotor. Not a clock-with-hands
// trope; geometric, original, OK against trademark registries.
function ChronoLogo({ size = 48, color, glow }) {
  const id = `cl-${size}-${Math.round((color||'#000').charCodeAt(1))}`;
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      filter: glow ? `drop-shadow(0 0 14px ${color}AA)` : 'none',
    }}>
      <svg viewBox="0 0 48 48" width={size} height={size}>
        <defs>
          <linearGradient id={`${id}-g`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor={color}/>
            <stop offset="1" stopColor={color} stopOpacity="0.55"/>
          </linearGradient>
          <radialGradient id={`${id}-r`} cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stopColor={color} stopOpacity="0.85"/>
            <stop offset="1" stopColor={color} stopOpacity="0"/>
          </radialGradient>
        </defs>
        {/* Outer hex */}
        <path d="M24 3 L42 13.5 L42 34.5 L24 45 L6 34.5 L6 13.5 Z"
          stroke={`url(#${id}-g)`} strokeWidth="2" fill="none" strokeLinejoin="round"/>
        {/* Inner rotated hex (offset for depth) */}
        <path d="M24 11 L36 18 L36 30 L24 37 L12 30 L12 18 Z"
          stroke={color} strokeOpacity="0.55" strokeWidth="1.25" fill="none" strokeLinejoin="round"/>
        {/* Three crossing time vectors meeting at core */}
        <path d="M24 24 L24 8" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
        <path d="M24 24 L37.86 32" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeOpacity="0.85"/>
        <path d="M24 24 L10.14 32" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeOpacity="0.55"/>
        {/* Core */}
        <circle cx="24" cy="24" r="3.6" fill={`url(#${id}-r)`}/>
        <circle cx="24" cy="24" r="1.8" fill={color}/>
      </svg>
    </div>
  );
}

Object.assign(window, { Icon, GradientBlob, Glass, Btn, Hair, TabBar, AmbientBG, ChronoLogo });
