// TenorMD training — shared library: icons, browser frame, camera rig,
// animated cursor, captions, title cards, typed fields.
const React = window.React;
const { useTime, interpolate, Easing, clamp } = window;

/* ---- inline Lucide icons (stroke 1.75, currentColor) --------------------- */
const P = (tag, attrs) => React.createElement(tag, attrs);
const ICONS = {
  'log-in': [['path', { d: 'M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4' }], ['polyline', { points: '10 17 15 12 10 7' }], ['line', { x1: 15, x2: 3, y1: 12, y2: 12 }]],
  'plus': [['path', { d: 'M5 12h14' }], ['path', { d: 'M12 5v14' }]],
  'send': [['path', { d: 'm22 2-7 20-4-9-9-4Z' }], ['path', { d: 'M22 2 11 13' }]],
  'chevron-right': [['path', { d: 'm9 18 6-6-6-6' }]],
  'download': [['path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }], ['polyline', { points: '7 10 12 15 17 10' }], ['line', { x1: 12, x2: 12, y1: 15, y2: 3 }]],
  'printer': [['polyline', { points: '6 9 6 2 18 2 18 9' }], ['path', { d: 'M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2' }], ['rect', { x: 6, y: 14, width: 12, height: 8 }]],
  'mail': [['rect', { width: 20, height: 16, x: 2, y: 4, rx: 2 }], ['path', { d: 'm22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' }]],
  'users': [['path', { d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }], ['circle', { cx: 9, cy: 7, r: 4 }], ['path', { d: 'M22 21v-2a4 4 0 0 0-3-3.87' }], ['path', { d: 'M16 3.13a4 4 0 0 1 0 7.75' }]],
  'list-checks': [['path', { d: 'm3 17 2 2 4-4' }], ['path', { d: 'm3 7 2 2 4-4' }], ['path', { d: 'M13 6h8' }], ['path', { d: 'M13 12h8' }], ['path', { d: 'M13 18h8' }]],
  'user': [['path', { d: 'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' }], ['circle', { cx: 12, cy: 7, r: 4 }]],
  'shield-check': [['path', { d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' }], ['path', { d: 'm9 12 2 2 4-4' }]],
  'external-link': [['path', { d: 'M15 3h6v6' }], ['path', { d: 'M10 14 21 3' }], ['path', { d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6' }]],
  'check': [['path', { d: 'M20 6 9 17l-5-5' }]],
  'arrow-right': [['path', { d: 'M5 12h14' }], ['path', { d: 'm12 5 7 7-7 7' }]],
  'lock': [['rect', { width: 18, height: 11, x: 3, y: 11, rx: 2 }], ['path', { d: 'M7 11V7a5 5 0 0 1 10 0v4' }]],
  'calendar-check': [['path', { d: 'M8 2v4' }], ['path', { d: 'M16 2v4' }], ['rect', { width: 18, height: 18, x: 3, y: 4, rx: 2 }], ['path', { d: 'M3 10h18' }], ['path', { d: 'm9 16 2 2 4-4' }]],
  'search': [['circle', { cx: 11, cy: 11, r: 8 }], ['path', { d: 'm21 21-4.3-4.3' }]],
};
function Icon({ name, size = 18, stroke = 1.75, style }) {
  const kids = (ICONS[name] || []).map((c, i) => P(c[0], { key: i, ...c[1] }));
  return React.createElement('svg', {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round',
    style: { display: 'inline-block', verticalAlign: 'middle', flex: 'none', ...style },
  }, ...kids);
}

/* ---- injected styles ----------------------------------------------------- */
const LIB_CSS = `
.tm-field.is-focus .tm-field__control { border-color: var(--harbor-500); box-shadow: var(--shadow-focus); }
.tm-caret { display:inline-block; width:2px; height:1.05em; background:var(--harbor-600); margin-left:1px; transform:translateY(2px); animation: tmblink 1.05s steps(1) infinite; }
@keyframes tmblink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.win-chrome { height:46px; display:flex; align-items:center; gap:16px; padding:0 18px; background:#e7e3dc; border-bottom:1px solid #d8d2c7; }
.win-lights { display:flex; gap:9px; }
.win-light { width:13px; height:13px; border-radius:50%; }
.win-url { flex:1; max-width:520px; margin:0 auto; height:28px; border-radius:8px; background:#f4f1ec; border:1px solid #d8d2c7;
  display:flex; align-items:center; gap:8px; padding:0 12px; font:var(--type-caption); color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.cap-wrap { position:absolute; left:0; right:0; bottom:64px; display:flex; justify-content:center; pointer-events:none; z-index:30; }
.cap { max-width:1180px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.cap-kick { font:var(--type-eyebrow); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--harbor-200);
  background:rgba(15,44,53,.72); padding:6px 13px; border-radius:999px; backdrop-filter:blur(6px); }
.cap-text { font-family:var(--font-sans); font-weight:500; font-size:27px; line-height:1.3; color:#fff;
  background:rgba(15,44,53,.82); padding:13px 26px; border-radius:16px; box-shadow:0 18px 50px rgba(15,44,53,.4); backdrop-filter:blur(8px); }
.cap-text em { font-family:var(--font-display); font-style:italic; font-weight:500; color:#bfe0e2; }
.title-step { display:flex; align-items:center; gap:0; }
.chip-strip { display:flex; align-items:center; gap:14px; }
.chip { display:flex; align-items:center; gap:9px; font-family:var(--font-sans); font-size:16px; font-weight:500; color:var(--text-subtle); white-space:nowrap; }
.chip .num { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:14px; border:1.5px solid var(--border-strong); color:var(--text-subtle); }
.chip.on { color:var(--harbor-700); }
.chip.on .num { background:var(--harbor-600); border-color:var(--harbor-600); color:#fff; }
.chip.done .num { background:var(--sage-100); border-color:var(--sage-600); color:var(--sage-700); }
.chip.done { color:var(--sage-700); }
.chip-sep { width:26px; height:1.5px; background:var(--border-strong); }
.corner-step { position:absolute; left:36px; bottom:34px; z-index:30; display:flex; align-items:center; gap:11px;
  background:rgba(15,44,53,.74); padding:9px 16px 9px 11px; border-radius:999px; backdrop-filter:blur(6px); }
.corner-step .cnum { width:26px; height:26px; border-radius:50%; background:var(--clay-500); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:600; }
.corner-step .clab { color:#fff; font-family:var(--font-sans); font-size:15px; font-weight:500; }
.corner-step .ctot { color:var(--harbor-200); font-family:var(--font-mono); font-size:12px; }
.successrow td { background: var(--sage-100) !important; }
.tm-card__title, .pagehead h1, .crumbs, .cap-kick, .corner-step, .corner-step .clab, .topbar__tag, .topbar__link, .topbar__who { white-space: nowrap; }
.console h1, .console h2, .console h3 { text-wrap: nowrap; }
.tm-band__head { white-space: nowrap; }
`;
if (!document.getElementById('tm-lib-css')) {
  const s = document.createElement('style'); s.id = 'tm-lib-css'; s.textContent = LIB_CSS; document.head.appendChild(s);
}

/* ---- backdrop ------------------------------------------------------------ */
function Backdrop() {
  return React.createElement('div', {
    style: {
      position: 'absolute', left: -700, top: -700, width: 3400, height: 3000,
      background: 'var(--paper)',
    },
  },
    React.createElement('div', { style: { position: 'absolute', left: 560, top: 560, width: 1100, height: 1100, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,196,206,.45), rgba(167,196,206,0) 70%)' } }),
    React.createElement('div', { style: { position: 'absolute', left: 1850, top: 1200, width: 1200, height: 1200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(234,200,179,.40), rgba(234,200,179,0) 70%)' } }),
  );
}

/* ---- browser window frame (fixed canvas rect, auto height) --------------- */
const WIN = { x: 220, y: 66, w: 1480 };
function WindowFrame({ children }) {
  return React.createElement('div', {
    style: {
      position: 'absolute', left: WIN.x, top: WIN.y, width: WIN.w,
      background: 'var(--surface)', borderRadius: 16, overflow: 'hidden',
      boxShadow: '0 50px 120px rgba(15,44,53,.30), 0 12px 30px rgba(15,44,53,.18)',
      border: '1px solid rgba(15,44,53,.10)',
    },
  },
    React.createElement('div', { className: 'win-chrome' },
      React.createElement('div', { className: 'win-lights' },
        React.createElement('span', { className: 'win-light', style: { background: '#e0685f' } }),
        React.createElement('span', { className: 'win-light', style: { background: '#e6b04b' } }),
        React.createElement('span', { className: 'win-light', style: { background: '#62b859' } }),
      ),
      React.createElement('div', { className: 'win-url' },
        React.createElement(Icon, { name: 'lock', size: 12, stroke: 2, style: { color: 'var(--text-subtle)' } }),
        'app.tenormd.com',
      ),
    ),
    children,
  );
}

/* ---- app top bar (harbor) ------------------------------------------------ */
function AppTopbar({ org, who, survey }) {
  return React.createElement('header', { className: 'topbar' },
    React.createElement('div', { className: 'topbar__brand' },
      React.createElement('img', { src: 'assets/logo-wordmark-light.svg', alt: 'TenorMD', style: { height: 28 } })),
    React.createElement('span', { className: 'topbar__tag' }, 'Multi-source provider feedback'),
    React.createElement('nav', { className: 'topbar__nav' },
      org && React.createElement('span', { className: 'topbar__link' }, org),
      org && React.createElement(window.PlanPill, { plan: 'practice' }),
      survey && React.createElement('span', { className: 'topbar__link' },
        React.createElement(Icon, { name: 'external-link', size: 15 }), 'Reviewer view'),
      who && React.createElement('span', { className: 'topbar__who' },
        React.createElement(Icon, { name: 'user', size: 14 }), who),
    ),
  );
}

/* ---- typed field (looks like .tm-field, animates a caret) ---------------- */
function TypedField({ label, value, placeholder, caret, mono, focus, reg, name }) {
  return React.createElement('div', { className: 'tm-field' + (focus ? ' is-focus' : '') },
    label && React.createElement('label', { className: 'tm-field__label' }, label),
    React.createElement('div', {
      ref: reg && reg(name), className: 'tm-field__control',
      style: { minHeight: 40, display: 'flex', alignItems: 'center', whiteSpace: 'pre' },
    },
      value
        ? React.createElement('span', { style: { fontFamily: mono ? 'var(--font-mono)' : 'inherit', color: 'var(--text-primary)' } }, value)
        : React.createElement('span', { style: { color: 'var(--text-subtle)' } }, placeholder),
      caret && React.createElement('span', { className: 'tm-caret' }),
    ),
  );
}

/* ---- animated cursor + click ripple -------------------------------------- */
function Cursor({ x, y, k, localTime, clicks, visible }) {
  if (!visible) return null;
  // nearest click within window
  let press = 0, ripple = null;
  (clicks || []).forEach((ct) => {
    const d = localTime - ct;
    if (d >= -0.12 && d <= 0.16) press = Math.max(press, 1 - Math.abs(d) / 0.16);
    if (d >= 0 && d <= 0.5) ripple = d / 0.5;
  });
  const inv = 1 / k;
  const pressScale = 1 - 0.18 * press;
  return React.createElement('div', {
    style: { position: 'absolute', left: x, top: y, transform: `scale(${inv})`, transformOrigin: '0 0', zIndex: 20, pointerEvents: 'none', willChange: 'transform' },
  },
    ripple != null && React.createElement('div', {
      style: {
        position: 'absolute', left: 2, top: 2, width: 12, height: 12, marginLeft: -6, marginTop: -6,
        borderRadius: '50%', border: '2.5px solid var(--harbor-500)',
        transform: `scale(${1 + ripple * 4})`, opacity: (1 - ripple) * 0.6,
      },
    }),
    React.createElement('div', { style: { transform: `scale(${pressScale})`, transformOrigin: '4px 3px' } },
      React.createElement('svg', { width: 30, height: 30, viewBox: '0 0 24 24', style: { filter: 'drop-shadow(0 3px 5px rgba(15,44,53,.45))' } },
        React.createElement('path', {
          d: 'M5 2 L5 20 L9.5 15.8 L12.4 22 L15 20.9 L12 15 L18.5 15 Z',
          fill: 'var(--ink-900)', stroke: '#fff', strokeWidth: 1.4, strokeLinejoin: 'round',
        }),
      ),
    ),
  );
}

/* ---- caption bar --------------------------------------------------------- */
function CaptionBar({ captions, t }) {
  const c = (captions || []).find((x) => t >= x.start && t <= x.end);
  if (!c) return null;
  const fadeIn = clamp((t - c.start) / 0.4, 0, 1);
  const fadeOut = clamp((c.end - t) / 0.4, 0, 1);
  const op = Math.min(fadeIn, fadeOut);
  const parts = String(c.text).split(/(\*[^*]+\*)/g).filter(Boolean).map((seg, i) =>
    seg.startsWith('*') && seg.endsWith('*')
      ? React.createElement('em', { key: i }, seg.slice(1, -1))
      : React.createElement('span', { key: i }, seg));
  return React.createElement('div', { className: 'cap-wrap', style: { opacity: op } },
    React.createElement('div', { className: 'cap', style: { transform: `translateY(${(1 - fadeIn) * 14}px)` } },
      c.kicker && React.createElement('div', { className: 'cap-kick' }, c.kicker),
      React.createElement('div', { className: 'cap-text' }, ...parts),
    ),
  );
}

/* ---- chapter strip ------------------------------------------------------- */
const STEPS = ['Sign in', 'Add providers', 'Review cycles', 'Coaching'];
function ChapterStrip({ current }) {
  const items = [];
  STEPS.forEach((label, i) => {
    const state = i + 1 < current ? 'done' : i + 1 === current ? 'on' : '';
    items.push(React.createElement('div', { key: 'c' + i, className: 'chip ' + state },
      React.createElement('span', { className: 'num' }, state === 'done' ? React.createElement(Icon, { name: 'check', size: 15, stroke: 2.4 }) : String(i + 1)),
      label));
    if (i < STEPS.length - 1) items.push(React.createElement('div', { key: 's' + i, className: 'chip-sep' }));
  });
  return React.createElement('div', { className: 'chip-strip' }, items);
}
function CornerStep({ current }) {
  return React.createElement('div', { className: 'corner-step' },
    React.createElement('span', { className: 'cnum' }, String(current)),
    React.createElement('span', { className: 'clab' }, STEPS[current - 1]),
    React.createElement('span', { className: 'ctot' }, 'STEP ' + current + ' / 4'),
  );
}

window.TM = Object.assign(window.TM || {}, {
  Icon, Backdrop, WindowFrame, AppTopbar, TypedField, Cursor, CaptionBar, ChapterStrip, CornerStep, STEPS, WIN,
});