// TopBar — page header. Persian-first, scrolls with content.
const topbarStyles = {
  bar: {
    display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
    padding: '18px 20px 12px', direction: 'rtl',
    fontFamily: "'Estedad', sans-serif",
    background: 'linear-gradient(180deg, var(--surface-glass), rgba(255,255,255,0))',
    borderBottom: '1px solid var(--c-border-xs)',
    backdropFilter: 'blur(16px) saturate(140%)',
    WebkitBackdropFilter: 'blur(16px) saturate(140%)',
  },
  titleH1: {
    font: "600 28px/34px 'Estedad', sans-serif",
    letterSpacing: 0,
    color: 'var(--ink)', margin: 0,
  },
  sub: {
    font: "400 13px/18px 'Estedad', sans-serif",
    color: 'var(--ink-3)', margin: '4px 0 0',
  },
  actions: { display: 'flex', alignItems: 'center', gap: 6 },
  iconBtn: {
    width: 38, height: 38, borderRadius: 999,
    display: 'grid', placeItems: 'center',
    background: 'var(--surface-glass)', border: '1px solid var(--c-border-xs)', color: 'var(--ink)',
    cursor: 'pointer',
    boxShadow: 'var(--shadow-press)',
    transition: 'transform 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out)',
  },
  mark: {
    width: 34, height: 34, opacity: 0.98,
  },
};

function TopBar({ title, subtitle, actions, showMark = false }) {
  const asset = window.assetPath || ((name) => `assets/${name}`);
  return (
    <div style={topbarStyles.bar}>
      <div>
        <h1 style={topbarStyles.titleH1}>{title}</h1>
        {subtitle && <p style={topbarStyles.sub}>{subtitle}</p>}
      </div>
      <div style={topbarStyles.actions}>
        {actions}
        {showMark && (
          <div style={{ width: 38, height: 38, display: 'grid', placeItems: 'center' }}>
            <img src={asset('mark.svg?v=logi-functional-v2-20260604')} style={topbarStyles.mark} alt="" />
          </div>
        )}
      </div>
    </div>
  );
}

function IconButton({ children, onClick, ariaLabel }) {
  return (
    <button className="sb-icon-button" style={topbarStyles.iconBtn} onClick={onClick} aria-label={ariaLabel || ''}>
      {children}
    </button>
  );
}

window.TopBar = TopBar;
window.IconButton = IconButton;