/* mocks.jsx — Throughline deck · product-surface mockups.
   Clean browser-framed representations that use the design system's real
   status/trust vocabulary instead of grey wireframe bars. Exposed on window. */
const { useState: useStateM } = React;

const NSM = () => window.ThroughlineDesignSystem_3325f5 || {};

/* ── Browser/app window chrome ─────────────────────────────────────── */
function BrowserFrame({ url, tag, dark, accent, style, children }) {
  const bg = dark ? '#222A23' : 'var(--tl-paper-white)';
  const bar = dark ? '#19201A' : '#ECE8DE';
  const barText = dark ? 'rgba(244,241,233,0.62)' : 'var(--tl-soft)';
  const edge = dark ? 'rgba(244,241,233,0.10)' : 'var(--tl-line)';
  return (
    <div style={{
      background: bg, border: `1px solid ${edge}`, borderRadius: 12,
      boxShadow: '0 2px 8px rgba(28,31,28,0.10), 0 26px 56px rgba(28,31,28,0.16)',
      overflow: 'hidden', ...style,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '11px 16px',
        background: bar, borderBottom: `1px solid ${edge}`,
      }}>
        <span style={{ display: 'inline-flex', gap: 6 }}>
          {['#D9C9A8', '#CFC09E', '#C5B694'].map((c, i) => (
            <span key={i} style={{ width: 9, height: 9, borderRadius: 9, background: dark ? 'rgba(244,241,233,0.22)' : c }} />
          ))}
        </span>
        {url && <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 11, color: barText, letterSpacing: '0.02em' }}>{url}</span>}
        {tag && (
          <span style={{
            marginLeft: 'auto', fontFamily: 'var(--tl-mono)', fontSize: 9, fontWeight: 600,
            letterSpacing: '0.13em', textTransform: 'uppercase',
            color: 'var(--tl-brass)', background: 'var(--tl-brass-tint)',
            border: '1px solid rgba(158,123,46,0.28)', borderRadius: 5, padding: '3px 8px',
          }}>{tag}</span>
        )}
      </div>
      <div style={{ padding: 20 }}>{children}</div>
    </div>
  );
}

/* document glyph tile */
function FileTile({ size = 26, tone = 'stone' }) {
  const fill = tone === 'evergreen' ? 'var(--tl-evergreen-tint)' : 'var(--tl-stone-soft)';
  const stroke = tone === 'evergreen' ? '#7FA088' : 'var(--tl-stone-deep)';
  return (
    <span style={{
      width: size, height: size, borderRadius: 6, background: fill,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto',
    }}>
      <svg width={size * 0.5} height={size * 0.5} viewBox="0 0 16 16" fill="none">
        <path d="M4 2h5l3 3v9H4z" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round" />
        <path d="M9 2v3h3" stroke={stroke} strokeWidth="1.3" strokeLinejoin="round" />
      </svg>
    </span>
  );
}

/* A record row — real title (preferred) or faux bars. Status pill at the end. */
function RecordRow({ w = 70, status, typeTag, tone = 'stone', dark, title, sub }) {
  const { StatusPill } = NSM();
  const barBg = dark ? 'rgba(244,241,233,0.16)' : 'var(--tl-stone-soft)';
  const edge = dark ? 'rgba(244,241,233,0.10)' : 'var(--tl-hair)';
  const titleColor = dark ? 'rgba(244,241,233,0.92)' : 'var(--tl-ink)';
  const subColor = dark ? 'rgba(244,241,233,0.5)' : 'var(--tl-faint)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 13, padding: '11px 13px',
      border: `1px solid ${edge}`, borderRadius: 9,
      background: dark ? 'rgba(255,255,255,0.03)' : 'var(--tl-paper-white)',
    }}>
      <FileTile tone={tone} />
      {title ? (
        <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 3 }}>
          <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 13, fontWeight: 600, color: titleColor, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
          {sub && <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, color: subColor, letterSpacing: '0.04em' }}>{sub}</span>}
        </span>
      ) : (
      <span style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={{ height: 7, width: w + '%', borderRadius: 7, background: barBg }} />
        <span style={{ height: 7, width: (w * 0.6) + '%', borderRadius: 7, background: barBg, opacity: 0.6 }} />
      </span>
      )}
      {typeTag && (
        <span style={{
          fontFamily: 'var(--tl-mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--tl-soft)', background: dark ? 'rgba(244,241,233,0.08)' : 'var(--tl-stone-soft)',
          borderRadius: 5, padding: '3px 8px',
        }}>{typeTag}</span>
      )}
      {status && StatusPill && <StatusPill status={status} size={10.5} />}
    </div>
  );
}

/* ── Cover hero: the operating-layer answer record (replaces stock laptop) ── */
function CoverRecord() {
  const { StatusPill, AccessScope, Confidence } = NSM();
  return (
    <div style={{ position: 'relative' }}>
      {/* seal accent behind */}
      <div style={{
        position: 'absolute', top: -26, right: -22, width: 96, height: 96, opacity: 0.9,
        filter: 'drop-shadow(0 10px 24px rgba(0,0,0,0.30))', zIndex: 0,
      }} dangerouslySetInnerHTML={{ __html: SEAL_SVG }} />
      <BrowserFrame dark url="throughline.app · operating layer" tag="Representation" style={{ position: 'relative', zIndex: 1, width: 560 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.5)' }}>Knowledge Vault Record</span>
          <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10.5, color: 'var(--tl-brass-light)' }}>KV-014</span>
        </div>
        <div style={{ fontFamily: 'var(--tl-serif)', fontWeight: 500, fontSize: 24, lineHeight: 1.18, letterSpacing: '-0.01em', color: '#F4F1E9', textWrap: 'pretty' }}>
          Pricing judgement for priority maintenance clients
        </div>
        <div style={{ height: 1, background: 'rgba(244,241,233,0.12)', margin: '16px 0' }} />
        <div style={{ display: 'flex', gap: 22 }}>
          <div>
            <div style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.45)', marginBottom: 8 }}>Confidence</div>
            <span style={{ display: 'inline-flex', gap: 4 }}>
              {[0,1,2,3].map(i => <span key={i} style={{ width: 8, height: 8, borderRadius: 8, background: i < 4 ? 'var(--tl-evergreen)' : 'rgba(244,241,233,0.2)' }} />)}
            </span>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'rgba(244,241,233,0.45)', marginBottom: 8 }}>Status</div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--tl-sans)', fontWeight: 600, fontSize: 12, color: '#7FB591' }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="#7FB591" strokeWidth="1.3"/><path d="M4.5 8.3l2.4 2.4 4.6-5.2" stroke="#7FB591" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Reviewed
            </span>
          </div>
        </div>
        <div style={{
          background: 'var(--tl-paper-white)', borderRadius: 10, padding: '15px 17px',
          margin: '18px 0', boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset',
        }}>
          <div style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--tl-terracotta)', marginBottom: 8 }}>Answer</div>
          <div style={{ fontFamily: 'var(--tl-sans)', fontSize: 13.5, lineHeight: 1.45, fontWeight: 600, color: 'var(--tl-ink)' }}>
            Priority maintenance pricing is set by site criticality, response risk, relationship value and service history.
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 13 }}>
            {['Source-backed', 'Reviewed', 'Buyer scoped'].map((label) => (
              <span key={label} style={{
                fontFamily: 'var(--tl-sans)', fontSize: 10.5, fontWeight: 600, color: 'var(--tl-evergreen)',
                border: '1px solid var(--tl-line)', borderRadius: 999, padding: '4px 8px', background: '#FCFBF8',
              }}>{label}</span>
            ))}
          </div>
        </div>
        <div style={{ fontFamily: 'var(--tl-mono)', fontSize: 9, letterSpacing: '0.13em', textTransform: 'uppercase', color: 'var(--tl-brass-light)', marginBottom: 9 }}>Provenance · 2 sources</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[['Interview · pricing and commercials', 'FI-2026-0312'], ['Owner note · client tiers', 'KV-014-N2']].map(([t, ref]) => (
            <div key={ref} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{ width: 6, height: 6, borderRadius: 6, background: 'var(--tl-brass-light)' }} />
              <span style={{ fontFamily: 'var(--tl-sans)', fontSize: 11.5, color: 'rgba(244,241,233,0.82)', flex: 1 }}>{t}</span>
              <span style={{ fontFamily: 'var(--tl-mono)', fontSize: 10, color: 'rgba(244,241,233,0.5)' }}>{ref}</span>
            </div>
          ))}
        </div>
      </BrowserFrame>
    </div>
  );
}

const SEAL_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 100 100"><defs><path id="msealT" d="M50,50 m-38,0 a38,38 0 1,1 76,0" fill="none"></path><path id="msealB" d="M50,50 m-38,0 a38,38 0 1,0 76,0" fill="none"></path></defs><circle cx="50" cy="50" r="47" fill="#222A23" stroke="#9E7B2E" stroke-width="1.5"></circle><circle cx="50" cy="50" r="43" fill="none" stroke="#C2A14E" stroke-width="0.8"></circle><circle cx="50" cy="50" r="30" fill="none" stroke="#C2A14E" stroke-width="0.8" opacity="0.55"></circle><text font-family="'IBM Plex Sans', sans-serif" font-size="6.4" font-weight="700" letter-spacing="2.6" fill="#C2A14E"><textPath href="#msealT" startOffset="50%" text-anchor="middle">REVIEWED RECORD</textPath></text><text font-family="'IBM Plex Sans', sans-serif" font-size="6.4" font-weight="700" letter-spacing="2.6" fill="#C2A14E"><textPath href="#msealB" startOffset="50%" text-anchor="middle">SOURCE-BACKED</textPath></text><g transform="translate(50,50)"><g transform="translate(-13,-9)"><rect x="0" y="0" width="20" height="2.6" rx="1.3" fill="#C2A14E"></rect><circle cx="24" cy="1.3" r="2.4" fill="#C2A14E"></circle><rect x="0" y="7.4" width="25" height="2.6" rx="1.3" fill="#C2A14E" opacity="0.7"></rect><rect x="0" y="14.8" width="15" height="2.6" rx="1.3" fill="#C2A14E" opacity="0.7"></rect></g></g></svg>`;

Object.assign(window, { BrowserFrame, FileTile, RecordRow, CoverRecord, SEAL_SVG });