// ── brand-system.jsx ──────────────────────────────────────────
// Final identity: blinking almond eye (no stem) + tone-split wordmark.
// Core marks + every application across the product.
const { IOSDevice, AndroidDevice } = window;

const GOLD = '#bf9b30';
const GOLD_D = '#9a7c25';
const NAVY = '#0f172a';
const NAVY_DEEP = '#0a1424';
const NAVY_TILE = 'linear-gradient(155deg,#172a4c,#0a1424)';
const IVORY = '#faf7f0';

// ── Core mark: blinking almond eye (no stem) ─────────────────
function EyeMark({ size = 60, theme = 'light', blink = true, iris = GOLD }) {
  const stroke = theme === 'dark' ? IVORY : NAVY;
  const pupil = theme === 'dark' ? NAVY_DEEP : NAVY;
  return (
    <svg width={size} height={size * 0.64} viewBox="0 0 50 32" style={{ display: 'block', overflow: 'visible' }} aria-label="legal-eye">
      <g className={blink ? 'le-eye-blink' : ''}>
        <path d="M 2.5 16 Q 13.5 2.5 25 2.5 Q 36.5 2.5 47.5 16 Q 36.5 29.5 25 29.5 Q 13.5 29.5 2.5 16 Z"
              fill="none" stroke={stroke} strokeWidth="3" strokeLinejoin="round" />
        <circle cx="25" cy="16" r="7.4" fill={iris} />
        <circle cx="25" cy="16" r="2.7" fill={pupil} />
      </g>
    </svg>
  );
}

const serif = (px, color, ls = -1.5) => ({
  fontFamily: 'var(--font-serif)', fontWeight: 900, fontSize: px,
  letterSpacing: ls, lineHeight: 0.92, color, direction: 'ltr',
});

// ── Wordmark: legal(ink) + eye(gold) ─────────────────────────
function Wordmark({ size = 40, theme = 'light' }) {
  const ink = theme === 'dark' ? IVORY : NAVY;
  return (
    <span style={serif(size, ink)}>legal<span style={{ color: GOLD }}>eye</span></span>
  );
}

// ── Lockup: eye + wordmark (horizontal) ──────────────────────
function Lockup({ size = 46, theme = 'light', blink = true }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.32, direction: 'ltr' }}>
      <EyeMark size={size * 1.18} theme={theme} blink={blink} />
      <Wordmark size={size} theme={theme} />
    </div>
  );
}

// ── Stacked emblem: eye above wordmark ───────────────────────
function Stacked({ size = 44, theme = 'light', blink = true }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: size * 0.2, direction: 'ltr' }}>
      <EyeMark size={size * 1.25} theme={theme} blink={blink} />
      <Wordmark size={size} theme={theme} />
    </div>
  );
}

// ── App-icon tile ────────────────────────────────────────────
function AppIcon({ size = 96, blink = true, radius }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius != null ? radius : size * 0.23,
      background: NAVY_TILE, border: '1px solid rgba(217,184,92,0.3)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 8px 22px rgba(10,20,36,0.35)', flexShrink: 0,
    }}>
      <EyeMark size={size * 0.58} theme="dark" blink={blink} />
    </div>
  );
}

// ── Specimen card ────────────────────────────────────────────
function Spec({ children, navy, label, tall }) {
  return (
    <div className="bs-spec">
      <div className={'bs-spec-stage' + (navy ? ' navy' : '')} style={tall ? { minHeight: 180 } : null}>{children}</div>
      <div className="bs-spec-label">{label}</div>
    </div>
  );
}

function Section({ tag, title, note, children }) {
  return (
    <section className="bs-sec">
      <div className="bs-sec-tag">{tag}</div>
      <h2 className="bs-sec-h2">{title}</h2>
      {note && <p className="bs-sec-note">{note}</p>}
      {children}
    </section>
  );
}

// ════════════════════════════════════════════════════════════
//  IN-PRODUCT MOCKUPS
// ════════════════════════════════════════════════════════════

// App sidebar header (navy chrome)
function SidebarMock() {
  const item = (t, on) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 11px', borderRadius: 7,
      background: on ? 'rgba(191,155,48,0.16)' : 'transparent', color: on ? IVORY : 'rgba(250,247,240,0.62)', fontSize: 13.5, fontFamily: 'var(--font-sans)' }}>
      <span style={{ width: 7, height: 7, borderRadius: 2, background: on ? GOLD : 'rgba(250,247,240,0.3)' }}></span>{t}
    </div>
  );
  return (
    <div style={{ width: 230, background: NAVY_DEEP, borderRadius: 12, padding: 16, direction: 'rtl', border: '1px solid rgba(217,184,92,0.16)' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-start', paddingBottom: 14, marginBottom: 10, borderBottom: '1px solid rgba(250,247,240,0.1)' }}>
        <Lockup size={22} theme="dark" />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {item('שיחה חדשה', true)}
        {item('היסטוריה', false)}
        {item('דוקטרינות', false)}
        {item('מחשבון מועדים', false)}
      </div>
    </div>
  );
}

// Web topbar (light)
function TopbarMock() {
  return (
    <div style={{ width: '100%', background: '#fff', borderRadius: 12, border: '1px solid var(--rule)', padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', direction: 'rtl' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Lockup size={20} theme="light" />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-2)' }}>
        <span>תכונות</span><span>תמחור</span>
        <span style={{ background: GOLD, color: '#fff', borderRadius: 8, padding: '7px 14px', fontWeight: 700 }}>התחל</span>
      </div>
    </div>
  );
}

// Favicon / browser tab
function TabMock() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: '#fff', border: '1px solid var(--rule)', borderRadius: '9px 9px 0 0', padding: '9px 14px', width: 210, direction: 'ltr' }}>
      <EyeMark size={17} theme="light" />
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--fg-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>Legal Eye · עוזר משפטי</span>
      <span style={{ color: 'var(--fg-3)', fontSize: 13 }}>×</span>
    </div>
  );
}

// Avatar / user chip
function AvatarMock() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11, direction: 'rtl' }}>
      <AppIcon size={42} radius={12} />
      <div style={{ fontFamily: 'var(--font-sans)' }}>
        <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink)' }}>Legal Eye</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg-3)' }}>v2.99.1</div>
      </div>
    </div>
  );
}

// Loading state — the blink IS the loader
function LoaderMock() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <EyeMark size={56} theme="light" blink />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1, color: 'var(--fg-3)' }}>קורא פסיקה…</span>
    </div>
  );
}

// ── iOS splash ───────────────────────────────────────────────
function IOSSplash() {
  return (
    <div style={{ height: '100%', background: 'linear-gradient(170deg,#0e1a30,#0a1424 60%,#080f1d)', display: 'flex', flexDirection: 'column', padding: '60px 30px 40px', boxSizing: 'border-box', fontFamily: 'var(--font-sans)', direction: 'rtl' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 2, color: GOLD, direction: 'ltr', textAlign: 'left' }}>§ LEGAL INTELLIGENCE</div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 24 }}>
        <AppIcon size={118} radius={28} />
        <Wordmark size={46} theme="dark" />
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 21, color: 'rgba(250,247,240,0.82)', textAlign: 'center', lineHeight: 1.5, maxWidth: 250, direction: 'rtl' }}>
          מחקר משפטי עם ציטוטים <span style={{ color: GOLD, fontWeight: 700 }}>מילה במילה</span>.
        </div>
      </div>
      <button style={{ background: GOLD, color: '#1a1206', border: 0, borderRadius: 14, padding: 16, fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 16 }}>פתח את האפליקציה</button>
      <div style={{ textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(250,247,240,0.5)', marginTop: 12 }}>0% הזיות · 732K+ פס״ד</div>
    </div>
  );
}

// ── Android app bar + welcome ────────────────────────────────
function AndroidApp() {
  const chip = (t) => (<div style={{ border: '1px solid var(--rule)', borderRadius: 999, padding: '9px 15px', fontSize: 13.5, color: '#1a1d23', background: '#fff', fontFamily: 'var(--font-sans)' }}>{t}</div>);
  return (
    <div style={{ height: '100%', background: IVORY, display: 'flex', flexDirection: 'column', fontFamily: 'var(--font-sans)', direction: 'rtl' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '15px 18px', borderBottom: '1px solid var(--rule)', background: '#fff' }}>
        <Lockup size={20} theme="light" />
        <div style={{ width: 34, height: 34, borderRadius: '50%', background: NAVY, color: IVORY, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>ע</div>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '24px 22px', gap: 18, textAlign: 'center' }}>
        <EyeMark size={64} theme="light" blink />
        <div style={{ ...serif(30, NAVY, -1), direction: 'rtl' }}>שלום. במה לסייע?</div>
        <div style={{ fontSize: 14.5, color: '#5a5e68', lineHeight: 1.6, maxWidth: 270 }}>פסיקה רלוונטית עם ציטוטים <b style={{ color: NAVY }}>מילה במילה</b>.</div>
        <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap', justifyContent: 'center' }}>{chip('חובת שימוע')}{chip('פרשנות חוזה')}</div>
      </div>
      <div style={{ padding: '14px 16px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#fff', border: '1.5px solid var(--rule)', borderRadius: 16, padding: '12px 14px' }}>
          <span style={{ flex: 1, fontFamily: 'var(--font-serif)', fontSize: 16, color: '#8a8d96' }}>שאלה משפטית…</span>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 17 }}>↑</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  EyeMark, Wordmark, Lockup, Stacked, AppIcon, Spec, Section,
  SidebarMock, TopbarMock, TabMock, AvatarMock, LoaderMock, IOSSplash, AndroidApp,
});