/* Mira - Design mockups: Figma variants, Linear ticket, design review */

const { IconCheck, IconArrow, IconHeart, IconComment, IconRepeat, IconSend } = window.MiraIcons;

const PORTRAIT_SRC = "../images/employees/design.jpg";

/* Hero composition: portrait + design-mira chat + stat pills */
function HeroComposition() {
  return (
    <div className="hero-stage">
      <div className="hero-portrait-card">
        <img src={PORTRAIT_SRC} alt="Mira, Product Designer"/>
        <div className="hero-portrait-meta">
          <div>
            <div className="name">Mira</div>
            <div className="role">Product Designer</div>
          </div>
          <div className="hero-portrait-badge">
            <span className="dot"/>Drafting
          </div>
        </div>
      </div>

      <div className="hero-chat-card">
        <div className="hero-chat-head">
          <div className="hero-chat-head-l">
            <span className="channel-tag">#</span>
            <span>design-mira</span>
          </div>
          <div className="live"><span className="pulse-dot"/>Live</div>
        </div>
        <div className="hero-chat-body">
          <div className="hero-msg">
            <div className="hero-msg-avatar placeholder" style={{ background: '#fed7aa', color: '#9a3412' }}>PM</div>
            <div>
              <div className="hero-msg-meta">Sara (PM) <span className="time">17:42</span></div>
              <div className="hero-msg-text">Need a mock for the new export modal. Demo Monday.</div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div>
              <div className="hero-msg-meta"><span className="mira">Mira</span> <span className="time">17:43</span></div>
              <div className="hero-msg-text">
                On it. Reading the brief and your export flow. Three variants ready by <span className="hl">tomorrow 9 am</span>.
              </div>
            </div>
          </div>
          <div className="hero-msg">
            <img className="hero-msg-avatar" src={PORTRAIT_SRC} alt=""/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="hero-msg-meta"><span className="mira">Mira</span> <span className="time">Sat 08:55</span></div>
              <div className="hero-msg-text" style={{ marginBottom: 6 }}>Done. Three variants posted, with rationale:</div>
              <div className="hero-li-draft">
                <div className="hero-li-draft-head">
                  <span className="hero-li-draft-source">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" fill="#F24E1E"/><path d="M5 12a3.5 3.5 0 0 1 3.5-3.5H12v7H8.5A3.5 3.5 0 0 1 5 12z" fill="#A259FF"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" fill="#FF7262"/><path d="M19 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z" fill="#1ABCFE"/><path d="M5 18.5A3.5 3.5 0 0 1 8.5 15H12v3.5a3.5 3.5 0 1 1-7 0z" fill="#0ACF83"/></svg>
                    Figma · export-modal · 3 variants
                  </span>
                  <span className="hero-li-draft-badge" style={{ background: '#dcfce7', color: '#15803d' }}>READY</span>
                </div>
                <div className="hero-li-draft-body">
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>A · Compact:</span> minimum clicks, no preview<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>B · With preview:</span> sees first 10 rows, slightly heavier<br/>
                  <span style={{ color: '#0891b0', fontWeight: 600 }}>C · With steps:</span> for the multi-format case
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-stat-pill hero-stat-1">
        <div>
          <div className="v"><em>3</em></div>
          <div className="l">variants per brief</div>
        </div>
      </div>
      <div className="hero-stat-pill hero-stat-2">
        <div>
          <div className="v">30 min</div>
          <div className="l">brief to mock</div>
        </div>
      </div>
    </div>
  );
}

/* FIGMA VARIANTS MOCK - Row 1 (She drafts mocks from a brief) */
function LinkedInPostMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: 0, overflow: 'hidden' }}>
      <div style={{ background: '#1e1e1e', padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" fill="#F24E1E"/><path d="M5 12a3.5 3.5 0 0 1 3.5-3.5H12v7H8.5A3.5 3.5 0 0 1 5 12z" fill="#A259FF"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" fill="#FF7262"/><path d="M19 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z" fill="#1ABCFE"/><path d="M5 18.5A3.5 3.5 0 0 1 8.5 15H12v3.5a3.5 3.5 0 1 1-7 0z" fill="#0ACF83"/></svg>
        <div style={{ font: '600 12.5px/1 var(--gt-font)', color: '#fff' }}>export-modal.fig</div>
        <span style={{ marginLeft: 'auto', font: '500 10.5px/1 var(--gt-font)', color: '#94a3b8' }}>Mira · 3 variants</span>
      </div>
      <div style={{ padding: '16px 14px', background: '#f6f9fc', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {/* Variant A - Compact */}
        <div style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', color: 'var(--gt-cyan)', letterSpacing: '0.04em' }}>A · COMPACT</div>
          <div style={{ background: '#f6f9fc', borderRadius: 4, height: 8 }}/>
          <div style={{ background: '#e5e7eb', borderRadius: 4, height: 6, width: '60%' }}/>
          <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
            <div style={{ background: 'var(--gt-cyan)', borderRadius: 4, height: 14, flex: 1 }}/>
          </div>
        </div>
        {/* Variant B - With preview */}
        <div style={{ background: '#fff', border: '2px solid var(--gt-cyan)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 6, position: 'relative' }}>
          <span style={{ position: 'absolute', top: -8, right: 8, background: 'var(--gt-cyan)', color: '#fff', font: '600 9px/1 var(--gt-font)', padding: '3px 6px', borderRadius: 4 }}>PICKED</span>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', color: 'var(--gt-cyan)', letterSpacing: '0.04em' }}>B · PREVIEW</div>
          <div style={{ background: '#f6f9fc', borderRadius: 4, height: 8 }}/>
          <div style={{ background: '#e5e7eb', borderRadius: 4, height: 6, width: '70%' }}/>
          <div style={{ background: '#eef2ff', borderRadius: 4, height: 20, marginTop: 2 }}/>
          <div style={{ display: 'flex', gap: 4, marginTop: 2 }}>
            <div style={{ background: '#e5e7eb', borderRadius: 4, height: 14, width: 30 }}/>
            <div style={{ background: 'var(--gt-cyan)', borderRadius: 4, height: 14, flex: 1 }}/>
          </div>
        </div>
        {/* Variant C - With steps */}
        <div style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 8, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', color: 'var(--gt-cyan)', letterSpacing: '0.04em' }}>C · STEPS</div>
          <div style={{ display: 'flex', gap: 3 }}>
            <div style={{ background: 'var(--gt-cyan)', borderRadius: 2, height: 3, flex: 1 }}/>
            <div style={{ background: '#e5e7eb', borderRadius: 2, height: 3, flex: 1 }}/>
            <div style={{ background: '#e5e7eb', borderRadius: 2, height: 3, flex: 1 }}/>
          </div>
          <div style={{ background: '#f6f9fc', borderRadius: 4, height: 8, marginTop: 4 }}/>
          <div style={{ background: '#e5e7eb', borderRadius: 4, height: 6, width: '50%' }}/>
          <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
            <div style={{ background: 'var(--gt-cyan)', borderRadius: 4, height: 14, flex: 1 }}/>
          </div>
        </div>
      </div>
      <div style={{ padding: '10px 14px', background: 'var(--gt-cyan-tint)', borderTop: '1px solid rgba(8,145,176,0.18)' }}>
        <div style={{ font: '600 10.5px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Mira · rationale</div>
        <div style={{ font: '400 11.5px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          B picked for the demo. Preview reduces support tickets on first export. Compact stays for the empty-list case.
        </div>
      </div>
    </div>
  );
}

/* DESIGN SYSTEM AUDIT MOCK - Row 2 (She iterates on feedback) */
function CalendarMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, padding: 0, overflow: 'hidden' }}>
      <div style={{ background: '#1e1e1e', padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" fill="#F24E1E"/><path d="M5 12a3.5 3.5 0 0 1 3.5-3.5H12v7H8.5A3.5 3.5 0 0 1 5 12z" fill="#A259FF"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" fill="#FF7262"/><path d="M19 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z" fill="#1ABCFE"/><path d="M5 18.5A3.5 3.5 0 0 1 8.5 15H12v3.5a3.5 3.5 0 1 1-7 0z" fill="#0ACF83"/></svg>
        <div style={{ font: '600 12.5px/1 var(--gt-font)', color: '#fff' }}>export-modal v2</div>
        <span style={{ marginLeft: 'auto', font: '500 10.5px/1 var(--gt-font)', color: '#94a3b8' }}>Iteration 3</span>
      </div>
      <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* PM comment */}
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 12, background: '#fed7aa', color: '#9a3412', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 10px/1 var(--gt-font)', flexShrink: 0 }}>S</div>
          <div style={{ flex: 1 }}>
            <div style={{ font: '600 11px/1 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 4 }}>Sara · PM</div>
            <div style={{ background: '#fef3c7', borderRadius: 8, padding: '8px 10px', font: '400 12px/1.45 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
              The CTA contrast feels off on dark mode. Can we tighten the spacing on B?
            </div>
          </div>
        </div>
        {/* Mira reply */}
        <div style={{ display: 'flex', gap: 10 }}>
          <img src={PORTRAIT_SRC} alt="" style={{ width: 24, height: 24, borderRadius: 12, objectFit: 'cover', flexShrink: 0 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ font: '600 11px/1 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 4 }}>Mira · just now</div>
            <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 8, padding: '10px 12px', font: '400 12px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
              Updated v2 posted. Diff:<br/>
              <span style={{ color: 'var(--gt-cyan)' }}>• CTA token: <code style={{ background: '#fff', padding: '1px 5px', borderRadius: 3, fontSize: 11 }}>btn/primary/contrast-aa</code></span><br/>
              <span style={{ color: 'var(--gt-cyan)' }}>• Spacing: 16→12 between fields</span><br/>
              <span style={{ color: 'var(--gt-cyan)' }}>• Dark mode preview attached</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 10px', background: '#f0fdf4', borderRadius: 8 }}>
          <span style={{ font: '500 11.5px/1 var(--gt-font)', color: '#15803d' }}>✓ Diff highlighted · WCAG AA compliant</span>
          <button style={{ background: 'var(--gt-cyan)', color: '#fff', border: 0, borderRadius: 6, padding: '5px 10px', font: '600 11px/1 var(--gt-font)' }}>Open</button>
        </div>
      </div>
    </div>
  );
}

/* LINEAR HANDOFF SPEC MOCK - Row 3 (She hands off to engineering) */
function DMReplyMock() {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 22, height: 22, borderRadius: 5, background: '#5e6ad2', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M.4 14.6L9.4 23.6c-3.6-.9-6.4-3.7-7.3-7.3L.4 14.6z"/></svg>
        </div>
        <span style={{ font: '600 13px/1 var(--gt-font)', color: 'var(--gt-fg-1)' }}>DESIGN-218 · Handoff</span>
        <span style={{ background: '#dcfce7', color: '#15803d', font: '600 10px/1 var(--gt-font)', padding: '4px 8px', borderRadius: 4, marginLeft: 'auto' }}>READY TO BUILD</span>
      </div>
      <div style={{ padding: '14px 16px' }}>
        <div style={{ font: '600 13.5px/1.3 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 4 }}>Export modal · variant B</div>
        <div style={{ font: '400 11.5px/1.2 var(--gt-font)', color: 'var(--gt-fg-3)', marginBottom: 12 }}>Assigned to @julien · due Friday · Figma link attached</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
          {[
            ['default', '✓ Mocked'],
            ['hover', '✓ Mocked'],
            ['loading', '✓ Mocked'],
            ['empty', '✓ Mocked'],
            ['error · timeout', '✓ Mocked'],
          ].map(function(row, i) {
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', background: '#fafbfc', border: '1px solid var(--gt-border-subtle)', borderRadius: 6 }}>
                <span style={{ font: '500 11px/1 ui-monospace, monospace', color: 'var(--gt-fg-2)', minWidth: 110 }}>{row[0]}</span>
                <span style={{ font: '500 11px/1 var(--gt-font)', color: '#15803d', marginLeft: 'auto' }}>{row[1]}</span>
              </div>
            );
          })}
        </div>

        <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 8, padding: '10px 12px', font: '400 11.5px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Mira · spec notes</div>
          • Tokens: <code style={{ background: '#fff', padding: '0 4px', borderRadius: 3 }}>btn/primary</code> · <code style={{ background: '#fff', padding: '0 4px', borderRadius: 3 }}>radius/lg</code><br/>
          • A11y: focus ring on all controls, label aria-describedby<br/>
          • Performance: lazy-load preview rows after 10
        </div>
      </div>
    </div>
  );
}

/* Generic scenario wrapper */
function ScenarioMock({ children, header }) {
  return (
    <div className="mock-card" style={{ background: '#fff', border: '1px solid var(--gt-border)', borderRadius: 14, overflow: 'hidden' }}>
      <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--gt-border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        {header}
      </div>
      <div style={{ padding: '14px 16px' }}>
        {children}
      </div>
    </div>
  );
}

/* Brand logos for design tools */
const BRAND_LOGOS = {
  Figma:   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" fill="#F24E1E"/><path d="M5 12a3.5 3.5 0 0 1 3.5-3.5H12v7H8.5A3.5 3.5 0 0 1 5 12z" fill="#A259FF"/><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" fill="#FF7262"/><path d="M19 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z" fill="#1ABCFE"/><path d="M5 18.5A3.5 3.5 0 0 1 8.5 15H12v3.5a3.5 3.5 0 1 1-7 0z" fill="#0ACF83"/></svg>',
  Linear:  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#5e6ad2" d="M0.4 14.6L9.4 23.6c-3.6-.9-6.4-3.7-7.3-7.3L.4 14.6zM0 11.7l12.3 12.3c-.6 0-1.3-.1-1.9-.2L0 13.6v-1.9zm.2-2.6L14.9 23.8c-.5.1-1 .1-1.6.2L0 10.6c0-.5.1-1 .2-1.5zm.7-2.3L17.2 23.1c-.5.2-.9.3-1.4.4L.5 8.2c.1-.5.3-.9.4-1.4zm1.3-2L19.3 22.1c-.4.2-.8.4-1.2.6L2 5.9c.2-.4.4-.8.6-1.2zm1.8-1.7L20.6 20.9c-.3.3-.6.6-.9.8L3.3 4.3c.3-.3.5-.6.7-.9zm2.6-1.9L22.5 18.8c-.2.4-.5.7-.7 1L5.7 2.2c.4-.3.7-.5 1-.7zm3.7-1L23.7 17c-.1.5-.2.9-.4 1.4L7.4 1.7c.4-.2.8-.3 1.3-.4zM12 1L24 13c0 .6-.1 1.3-.2 1.9L9.2 0c1 0 2 .1 2.8.3z"/></svg>',
  Slack:   '<img src="/images/logos/tools/slack.png" alt="Slack"/>',
  Notion:  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#000" d="M4.46 3.62c.63.51 1.1.66 1.94.6l9.83-.6c.21 0 .04-.21-.04-.24l-1.65-1.18c-.32-.24-.74-.51-1.51-.44L3.5 2.45c-.33.02-.4.18-.27.3.13.14.6.6 1.23.87zm.59 2.3v10.34c0 .55.28.76.91.74l10.8-.62c.63-.03.7-.42.7-.87V5.24c0-.45-.17-.7-.55-.66l-11.28.65c-.42.03-.58.24-.58.69zm10.66.55c.07.32 0 .63-.32.66l-.52.1v7.68c-.45.24-.87.39-1.22.39-.55 0-.69-.17-1.1-.69L9.31 9.32v5.18l1.08.24s0 .63-.87.63l-2.4.14c-.07-.13 0-.45.24-.51l.62-.17V7.84l-.86-.07c-.07-.32.1-.79.6-.83l2.58-.17 3.55 5.42v-4.8l-.9-.1c-.07-.4.22-.69.59-.72z"/></svg>',
  Loom:    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><circle cx="12" cy="12" r="11" fill="#625df5"/><path fill="#fff" d="M19 11h-3.5l3-1.7-.5-.9-3 1.7L17 7l-.9-.5-2 3-.1-3.5h-1l-.1 3.5-2-3-.9.5 1.7 3-3-1.7-.5.9 3 1.7H8v1h3.5l-3 1.7.5.9 3-1.7L10 17l.9.5 2-3 .1 3.5h1l.1-3.5 2 3 .9-.5-1.7-3 3 1.7.5-.9-3-1.7H19z"/></svg>',
  Miro:    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><rect width="24" height="24" rx="4" fill="#FFD02F"/><path fill="#000" d="M16.6 3.5h-1.5L11.4 12 9 3.5H7.5L10 12 5.5 3.5H4L8.5 12 4 20.5h1.5L10 12l-2.5 8.5H9L11.4 12l3.7 8.5h1.5L13 12l4-8.5z"/></svg>',
  GitHub:  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#181717" d="M12 .297c-6.63 0-12 5.37-12 12 0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.63-5.37-12-12-12"/></svg>',
  Gmail:   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="#4285f4" d="M2 5.7v12.6c0 .9.7 1.7 1.7 1.7H6V9.6L2 5.7z"/><path fill="#34a853" d="M18 20h2.3c.9 0 1.7-.7 1.7-1.7V5.7L18 9.6V20z"/><path fill="#fbbc04" d="M18 4.3v5.3l4-3.9V4.3c0-.7-.8-1.1-1.4-.7L18 4.3z"/><path fill="#ea4335" d="M6 9.6V4.3l6 4.5 6-4.5v5.3l-6 4.5-6-4.5z"/><path fill="#c5221f" d="M2 4.3v1.4l4 3.9V4.3c0-.7-.8-1.1-1.4-.7L2 4.3z"/></svg>',
};
function BrandLogo({ name }) {
  const svg = BRAND_LOGOS[name];
  if (!svg) {
    return <div style={{ width: 28, height: 28, borderRadius: 8, background: '#f6f9fc', color: 'var(--gt-fg-3)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 12px/1 var(--gt-font)' }}>{name[0]}</div>;
  }
  const SCALES = { Figma:1.0, Linear:1.0, Slack:1.0, Notion:1.0, Loom:1.0, Miro:1.0, GitHub:1.0, Gmail:1.0 };
  const scale = SCALES[name] || 1;
  return <div style={{ width: 64, height: 56, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
    <div style={{ width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center", transform: `scale(${scale})` }} dangerouslySetInnerHTML={{ __html: svg.replace(/<svg /, `<svg preserveAspectRatio="xMidYMid meet" style="width:56px;height:48px;display:block" `).replace(/<img /, `<img style="max-width:56px;max-height:48px;width:auto;height:auto;object-fit:contain;display:block" `) }} />
  </div>;
}

window.MiraMocks = {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
};