// ── brand-mobile-app.jsx ──────────────────────────────────────
// Brand sheet: enlarged wordmark treatments + iOS/Android brand screens.
const { IOSDevice, AndroidDevice } = window;

const GOLD = '#bf9b30';
const NAVY = '#0f172a';
const IVORY = '#faf7f0';

// ── Eye mark ──────────────────────────────────────────────────
// variant: 'full' (eye + i-stem) | 'eye' (almond + iris only)
// theme:  'light' (navy stroke) | 'dark' (ivory stroke)
function EyeMark({ size = 88, variant = 'full', theme = 'light', pupil }) {
  const stroke = theme === 'dark' ? IVORY : NAVY;
  const pup = pupil || (theme === 'dark' ? '#0a1424' : NAVY);
  const w = variant === 'full' ? size * 0.5 : size;
  const vb = variant === 'full' ? '0 0 50 100' : '0 0 50 40';
  const h = variant === 'full' ? size : size * 0.8;
  return (
    <svg width={w} height={h} viewBox={vb} style={{ display: 'block', overflow: 'visible' }} aria-label="legal-eye mark">
      <path d="M 4 18 Q 14 4 25 4 Q 36 4 46 18 Q 36 32 25 32 Q 14 32 4 18 Z"
            fill="none" stroke={stroke} strokeWidth="3.4" strokeLinejoin="round" />
      <circle cx="25" cy="18" r="7" fill={GOLD} />
      <circle cx="25" cy="18" r="2.6" fill={pup} />
      {variant === 'full' && <rect x="19" y="44" width="12" height="52" rx="2" fill={stroke} />}
    </svg>
  );
}

// ── Wordmark treatments ───────────────────────────────────────
function LockupMark({ theme = 'light', size = 78 }) {
  const ink = theme === 'dark' ? IVORY : NAVY;
  return (
    <div className="wm-lockup">
      <EyeMark size={size * 1.12} variant="full" theme={theme} />
      <div className="wm-text">
        <span className="wm-word" style={{ fontSize: size, color: ink }}>
          legal<span className="dash">-</span>eye
        </span>
        <span className="wm-tagline" style={{ fontSize: size * 0.135, color: GOLD, marginTop: 6 }}>
          Legal Intelligence
        </span>
      </div>
    </div>
  );
}

function InlineMark({ theme = 'light', size = 74 }) {
  const ink = theme === 'dark' ? IVORY : NAVY;
  // The eye-on-stem mark IS the letter "i" — eye/i homophone, and the brand
  // mark is literally an i dotted with an eye. No hyphen: the i is the join.
  return (
    <div className="wm-inline" style={{ fontSize: size, color: ink }}>
      <span>legal</span>
      <span className="wm-eye-i" style={{ margin: '0 1px', transform: `translateY(${size * 0.04}px)` }}>
        <EyeMark size={size * 0.94} variant="full" theme={theme} />
      </span>
      <span>eye</span>
    </div>
  );
}

function StackMark({ tile = 'navy' }) {
  const dark = tile === 'navy';
  return (
    <div className="wm-stack">
      <div className="wm-tile" style={{ background: dark ? 'linear-gradient(155deg,#13233f,#0a1424)' : IVORY, border: dark ? '1px solid rgba(217,184,92,0.3)' : '1px solid var(--rule)' }}>
        <EyeMark size={96} variant="full" theme={dark ? 'dark' : 'light'} />
      </div>
      <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span className="wm-stack-word" style={{ color: IVORY }}>legal-eye</span>
        <span className="wm-stack-tag" style={{ color: GOLD }}>רואים משפט אחרת</span>
      </div>
    </div>
  );
}

function MarkCard({ stage, navy, name, use, desc, specs }) {
  return (
    <div className="bm-mark-card">
      <div className={'bm-mark-stage' + (navy ? ' on-navy' : '')}>{stage}</div>
      <div className="bm-mark-meta">
        <span className="bm-mark-meta-use">{use}</span>
        <span className="bm-mark-meta-name">{name}</span>
        <span className="bm-mark-meta-desc">{desc}</span>
        <span className="bm-mark-meta-specs">{specs}</span>
      </div>
    </div>
  );
}

// ── iOS brand splash screen ───────────────────────────────────
function IOSBrandScreen() {
  return (
    <div style={{
      height: '100%', background: 'linear-gradient(170deg,#0e1a30 0%,#0a1424 60%,#080f1d 100%)',
      display: 'flex', flexDirection: 'column', padding: '64px 30px 40px', boxSizing: 'border-box',
      fontFamily: "'Heebo', system-ui", direction: 'rtl', position: 'relative',
    }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 2, color: GOLD, textTransform: 'uppercase', direction: 'ltr', textAlign: 'left' }}>
        § 01 · Legal Intelligence
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 22 }}>
        <div className="wm-tile" style={{ width: 116, height: 116, borderRadius: 28, background: 'linear-gradient(155deg,#16294a,#0c1830)', border: '1px solid rgba(217,184,92,0.35)', boxShadow: '0 18px 44px rgba(0,0,0,0.5)' }}>
          <EyeMark size={86} variant="full" theme="dark" />
        </div>
        <div style={{ textAlign: 'center', direction: 'ltr' }}>
          <div style={{ fontFamily: "'Frank Ruhl Libre', serif", fontWeight: 900, fontSize: 46, letterSpacing: -1.8, color: IVORY, lineHeight: 0.95 }}>legal-eye</div>
        </div>
        <div style={{ fontFamily: "'Frank Ruhl Libre', serif", fontSize: 21, color: 'rgba(250,247,240,0.82)', textAlign: 'center', lineHeight: 1.5, maxWidth: 250 }}>
          מחקר משפטי עם ציטוטים<br/><span style={{ color: GOLD, fontWeight: 700 }}>מילה במילה</span>.
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <button style={{ background: GOLD, color: '#1a1206', border: 0, borderRadius: 14, padding: '16px', fontFamily: "'Heebo'", fontWeight: 700, fontSize: 16, cursor: 'pointer' }}>
          פתח את האפליקציה
        </button>
        <div style={{ textAlign: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 0.5, color: 'rgba(250,247,240,0.5)' }}>
          0% הזיות · 732K+ פס״ד · v2.99.1
        </div>
      </div>
    </div>
  );
}

// ── Android app-welcome screen ────────────────────────────────
function AndroidAppScreen() {
  const chip = (t) => (
    <div style={{ border: '1px solid var(--rule)', borderRadius: 999, padding: '9px 15px', fontSize: 13.5, color: '#1a1d23', background: '#fff', fontFamily: "'Heebo'", lineHeight: 1.2 }}>{t}</div>
  );
  return (
    <div style={{ height: '100%', background: IVORY, display: 'flex', flexDirection: 'column', fontFamily: "'Heebo', system-ui", direction: 'rtl' }}>
      {/* top bar with wordmark */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--rule)', background: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, direction: 'ltr' }}>
          <EyeMark size={30} variant="full" theme="light" />
          <span style={{ fontFamily: "'Frank Ruhl Libre', serif", fontWeight: 900, fontSize: 21, letterSpacing: -0.8, color: NAVY }}>legal-eye</span>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: '50%', background: NAVY, color: IVORY, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>ע</div>
      </div>

      {/* welcome body */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '24px 22px', gap: 18, textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 20, background: 'rgba(191,155,48,0.1)', border: '1px solid rgba(191,155,48,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <EyeMark size={48} variant="full" theme="light" />
        </div>
        <div style={{ fontFamily: "'Frank Ruhl Libre', serif", fontWeight: 900, fontSize: 30, letterSpacing: -1, color: NAVY, lineHeight: 1.1 }}>
          שלום. במה לסייע?
        </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', marginTop: 4 }}>
          {chip('חובת שימוע בניסיון')}
          {chip('פרשנות חוזה')}
        </div>
      </div>

      {/* composer */}
      <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: "'Frank Ruhl Libre', 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 style={{ textAlign: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#8a8d96', marginTop: 10, letterSpacing: 0.3 }}>
          0% הזיות · אין LLM חיצוני בלולאה
        </div>
      </div>
    </div>
  );
}

// ── Page ──────────────────────────────────────────────────────
function BrandSheet() {
  return (
    <React.Fragment>
      <header className="bm-top">
        <a href="tour.html">← חזרה לסיור</a>
        <span className="bm-top-id">BRAND · WORDMARK & MOBILE · v2.99.1</span>
      </header>

      <div className="bm-wrap">
        <div className="bm-hero-eyebrow">§ זהות · BRAND IDENTITY</div>
        <h1 className="bm-hero-h1">ה-wordmark, <em>מוגדל</em><br/>ובא לידי ביטוי בנייד.</h1>
        <p className="bm-hero-lead">
          שלושה טיפולים ל-<span dir="ltr">legal-eye</span> — מהבולט להידוק. סמל-העין (קשתית זהב על גזע-נייבי) נשאר העוגן, אך ה-wordmark גדל, מתהדק, והעין הופכת לנקודת-מוקד. למטה — איך הזהות נראית על iPhone ו-Android.
        </p>

        {/* ── Wordmark ── */}
        <section className="bm-sec">
          <div className="bm-sec-tag">§ A · WORDMARK</div>
          <h2 className="bm-sec-h2">שלושה טיפולים</h2>
          <p className="bm-sec-note">כל טיפול לתפקיד אחר. הצבע היחיד הוא Old Gold (<span dir="ltr">#bf9b30</span>); הגופן Frank Ruhl Libre 900.</p>

          <div className="bm-mark-row">
            <MarkCard
              stage={<LockupMark theme="light" size={76} />}
              use="PRIMARY · Web header"
              name="Lockup אופקי"
              desc="הטיפול הראשי. ה-wordmark הוגדל ל-76px, letter-spacing הודק ל-−2px, וה-hyphen צבוע זהב כדי לחבר את שתי המילים. סמל-העין מימין."
              specs="Frank Ruhl 900 · 76px · −2px · tagline mono 3px"
            />
            <MarkCard
              navy
              stage={<LockupMark theme="dark" size={76} />}
              use="PRIMARY · On navy"
              name="Lockup על נייבי"
              desc="אותו lockup על רקע כהה (Midnight / footer). הקו הופך לשנהב, הקשתית נשארת זהב — ניגוד גבוה, נוכחות חזקה."
              specs="stroke ivory · iris gold · bg #0a1424"
            />
            <MarkCard
              stage={<InlineMark theme="light" size={72} />}
              use="DISTINCTIVE · Inline"
              name="העין היא ה-i"
              desc="הלב של המותג. ‘eye’ נשמע כמו האות i — וסמל-המותג הוא בדיוק i עם עין-זהב כנקודה. כאן הסמל המלא הופך לאות ממש בתוך השם, בלי קו מחבר. הכי איקוני, הכי בלתי-נשכח."
              specs="eye-on-stem = i · ללא hyphen · iris gold"
            />
            <MarkCard
              navy
              stage={<div style={{ display: 'flex', gap: 40 }}><StackMark tile="navy" /><StackMark tile="ivory" /></div>}
              use="APP ICON · Splash"
              name="Badge מוערם"
              desc="סמל גדול על אריח מעוגל + השם מתחת + הסלוגן. זו צורת ה-app-icon ומסך-הפתיחה בנייד. שתי גרסאות: נייבי ושנהב."
              specs="tile 132px · radius 30px · mark 96px"
            />
          </div>
        </section>

        {/* ── Mobile ── */}
        <section className="bm-sec">
          <div className="bm-sec-tag">§ B · MOBILE</div>
          <h2 className="bm-sec-h2">על המכשיר</h2>
          <p className="bm-sec-note">הזהות חיה במסך אמיתי — מסך-פתיחה ב-iPhone (Liquid Glass), וסביבת-העבודה ב-Android (Material 3). RTL מלא, אזורי-מגע ≥44px, אותם טוקנים.</p>

          <div className="bm-devices">
            <div className="bm-device-col">
              <IOSDevice dark>
                <IOSBrandScreen />
              </IOSDevice>
              <div className="bm-device-label">iPhone · <b>מסך פתיחה</b></div>
            </div>
            <div className="bm-device-col">
              <AndroidDevice>
                <AndroidAppScreen />
              </AndroidDevice>
              <div className="bm-device-label">Android · <b>סביבת עבודה</b></div>
            </div>
          </div>
        </section>

        <div className="bm-disclaimer">
          <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}><path d="M8 2.5 L14.5 13.5 H1.5 Z"></path><line x1="8" y1="6.5" x2="8" y2="9.7"></line><circle cx="8" cy="11.6" r="0.5" fill="currentColor" stroke="none"></circle></svg>
          <span>Legal Eye הוא כלי מחקר. סמל-העין, ה-wordmark והצבעים הם זהות-המותג; מסכי-הנייד הם reference לעיצוב באפליקציה הילידית.</span>
        </div>
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BrandSheet />);