setFocused(true)} onBlur={() => setFocused(false)}
        style={{ ...baseStyle, minHeight: 80 }} />
    </div>
  );
  return (
    <div style={wrap}>
      {icon && <span style={iconStyle}>{icon}</span>}
      <input type={type} placeholder={placeholder} value={value} onChange={onChange}
        onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} style={baseStyle} />
    </div>
  );
}

// ── Nav ────────────────────────────────────────────────────
function SanadNav({ activeView, onNavigate }) {
  const links = [
    { id: 'home',    label: 'الرئيسية' },
    { id: 'chat',    label: 'استشارة قانونية' },
    { id: 'lawyers', label: 'المحامون' },
    { id: 'docs',    label: 'تحليل مستند' },
  ];
  return (
    <nav style={{
      background: sanadColors.bgElevated,
      boxShadow: '0 0 0 1px rgba(239,231,214,0.09)',
      padding: '0 32px', display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', height: 60,
      position: 'sticky', top: 0, zIndex: 100, direction: 'rtl',
    }}>
      {/* Logo */}
      <div style={{ display:'flex', alignItems:'center', gap: 10, cursor:'pointer' }} onClick={() => onNavigate('home')}>
        <LexaMark size={24} />
      </div>
      {/* Links */}
      <div style={{ display:'flex', alignItems:'center', gap: 4 }}>
        {links.map(l => (
          <button key={l.id} onClick={() => onNavigate(l.id)} style={{
            background: activeView === l.id ? sanadColors.bgSubtle : 'transparent',
            color: activeView === l.id ? sanadColors.textPrimary : sanadColors.textTertiary,
            fontFamily: sanadFonts.arabic, fontWeight: activeView === l.id ? 500 : 400,
            fontSize: 14, border: 'none', padding: '6px 14px', borderRadius: 8,
            cursor: 'pointer', transition: 'all 150ms ease',
          }}>{l.label}</button>
        ))}
      </div>
      {/* CTA */}
      <SanadButton size="sm" onClick={() => onNavigate('chat')}>ابدأ استشارتك</SanadButton>
    </nav>
  );
}

// ── Divider ────────────────────────────────────────────────
function SanadDivider({ style = {} }) {
  return <div style={{ height: 1, background: sanadColors.border, ...style }} />;
}

// ── Card ───────────────────────────────────────────────────
function SanadCard({ children, style = {}, hover = false }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div
      onMouseEnter={() => hover && setHovered(true)}
      onMouseLeave={() => hover && setHovered(false)}
      style={{
        background: sanadColors.bgElevated,
        borderRadius: 14,
        boxShadow: hovered
          ? '0 0 0 1px rgba(239,231,214,0.12), 0 4px 16px rgba(0,0,0,0.10)'
          : '0 0 0 1px rgba(239,231,214,0.08), 0 2px 8px rgba(0,0,0,0.05)',
        transition: 'box-shadow 180ms ease',
        ...style,
      }}
    >{children}</div>
  );
}

// Export all to window

/* ── شعار ليكسا: «ليكسا.» بالخطّ الكوفيّ ───────────────────────────────
   tone: 'light' (على خلفيّةٍ فاتحة — حبر) | 'dark' (على خلفيّةٍ داكنة — رمل)
   accent: لونُ النقطة — يتبعُ القسمَ الحاليّ (LEXA_SECTION_ACCENT) أو الطينيَّ افتراضيّاً */
const LEXA_SECTION_ACCENT = { home: '#c96442', assistant: '#c96442', search: '#1f8a8a', files: '#d49a1e', pricing: '#7c5cff', learning: '#3478f6', admin: '#5e5d59' };
function LexaMark({ size = 30, tone = 'light', accent, onClick, style = {} }) {
  const ink = tone === 'dark' ? '#efe7d6' : '#141413';
  return (
    <span onClick={onClick} role={onClick ? 'button' : undefined} aria-label="ليكسا"
      style={{ fontFamily: "'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif", fontWeight: 700, fontSize: size, lineHeight: 1,
               color: ink, letterSpacing: '-.01em', cursor: onClick ? 'pointer' : 'default', display: 'inline-flex', alignItems: 'baseline',
               userSelect: 'none', ...style }}>
      ليكسا<span style={{ color: accent || '#c96442', transition: 'color .4s' }}>.</span>
    </span>
  );
}

/* ── شريطُ التحديثِ الحيّ: الأنظمةُ القادمةُ بعدّادِ سريانها + أحدثُ ما صدر (/api/laws/latest) ──
   يلفُّ باستمرار (يتوقّفُ عند المرور)، والضغطُ على عنصرٍ يفتحُ الوثيقة. يتجدّدُ كلَّ 10 دقائق. */
const LX_TICK_CSS = `
.lxt{position:relative;display:flex;align-items:center;height:40px;background:#0a100e;border-top:1px solid rgba(239,231,214,.08);color:#c9c2b3;font-size:13px;overflow:hidden;direction:rtl;flex-shrink:0}
.lxt-lbl{position:relative;z-index:2;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;background:#0a100e;box-shadow:-18px 0 18px #0a100e;white-space:nowrap;font-weight:600;color:#efe7d6}
.lxt-dot{width:8px;height:8px;border-radius:50%;background:#5fbf8a;box-shadow:0 0 0 0 rgba(95,191,138,.6);animation:lxtPing 1.8s infinite}
@keyframes lxtPing{0%{box-shadow:0 0 0 0 rgba(95,191,138,.55)}70%{box-shadow:0 0 0 8px rgba(95,191,138,0)}100%{box-shadow:0 0 0 0 rgba(95,191,138,0)}}
.lxt-lbl small{font-weight:400;color:#8f9a94}
.lxt-win{flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lxt-track{display:flex;align-items:center;gap:26px;height:100%;width:max-content;animation:lxtRun var(--lxt-dur,80s) linear infinite}
.lxt:hover .lxt-track{animation-play-state:paused}
@keyframes lxtRun{from{transform:translateX(0)}to{transform:translateX(50%)}}
.lxt-i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.lxt-i:hover b{color:#ffb08f}
.lxt-i b{color:#efe7d6;font-weight:600;transition:color .15s}
.lxt-pill{font-size:11.5px;font-weight:700;border-radius:20px;padding:2px 9px}
.lxt-pill.up{background:rgba(224,122,82,.16);color:#ffb08f}
.lxt-pill.soon{background:rgba(224,122,82,.9);color:#1d0f09;animation:lxtGlow 1.6s ease-in-out infinite}
@keyframes lxtGlow{50%{opacity:.65}}
.lxt-pill.new{background:rgba(95,191,138,.14);color:#8fd6ac}
.lxt-i small{color:#8f9a94;font-family:'JetBrains Mono',monospace;font-size:11.5px}
.lxt-sep{width:4px;height:4px;border-radius:50%;background:rgba(239,231,214,.2)}
@media (prefers-reduced-motion:reduce){.lxt-track{animation:none}.lxt-dot,.lxt-pill.soon{animation:none}}
@media (max-width:640px){.lxt-lbl small{display:none}}
`;
function lxtAgo(s) {
  if (!s) return '';
  const d = new Date(String(s).replace(' ', 'T') + ':00');
  const h = Math.max(0, Math.round((Date.now() - d.getTime()) / 3600000));
  if (h < 1) return 'منذ دقائق';
  if (h < 24) return 'منذ ' + h + ' ساعة';
  const days = Math.round(h / 24);
  return days === 1 ? 'أمس' : 'منذ ' + days + ' أيام';
}
function lxtCount(days) {
  if (days <= 0) return 'دخل حيّز النفاذ';
  if (days === 1) return 'يسري غداً';
  if (days === 2) return 'يسري بعد يومين';
  if (days <= 10) return 'يسري بعد ' + days + ' أيام';
  return 'يسري بعد ' + days + ' يوماً';
}
function LxUpdateTicker({ style }) {
  const [d, setD] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    const load = () => fetch(((window.api && window.api.baseUrl) || '') + '/api/laws/latest?n=14')
      .then(r => (r.ok ? r.json() : null)).then(x => { if (alive && x) setD(x); }).catch(() => {});
    load();
    const t = setInterval(load, 10 * 60 * 1000);
    return () => { alive = false; clearInterval(t); };
  }, []);
  if (!d) return null;
  const open = (did) => { location.href = location.pathname + '?doc=' + encodeURIComponent(did); };
  const items = [
    ...d.upcoming.filter(u => u.days > -3).map(u => (
      <button key={'u' + u.did} className="lxt-i" onClick={() => open(u.did)} title={'يسري في ' + u.effective}>
        <span className={'lxt-pill ' + (u.days <= 7 ? 'soon' : 'up')}>⏳ {lxtCount(u.days)}</span><b>{u.title}</b><small>{u.effective}</small>
      </button>
    )),
    ...d.latest.map(x => (
      <button key={'n' + x.did} className="lxt-i" onClick={() => open(x.did)}>
        <span className="lxt-pill new">جديد · {x.kind}</span><b>{x.title.length > 70 ? x.title.slice(0, 70) + '…' : x.title}</b><small>{x.date}</small>
      </button>
    )),
  ];
  const withSep = items.flatMap((it, i) => [it, <span key={'s' + i} className="lxt-sep" />]);
  return (
    <div className="lxt" style={style} aria-label="أحدث الأنظمة">
      <style>{LX_TICK_CSS}</style>
      <div className="lxt-lbl"><span className="lxt-dot" />تحديثٌ حيّ <small>· آخر تحديث للقاعدة {lxtAgo(d.updated_at)}</small></div>
      <div className="lxt-win">
        <div className="lxt-track" style={{ '--lxt-dur': Math.max(50, items.length * 7) + 's' }}>{withSep}{withSep.map((el, i) => React.cloneElement(el, { key: 'b' + i }))}</div>
      </div>
    </div>
  );
}

Object.assign(window, { LexaMark, LEXA_SECTION_ACCENT, LxUpdateTicker,
  SanadButton, SanadBadge, SanadInput, SanadNav, SanadDivider, SanadCard,
  sanadColors, sanadFonts,
});