// PAN Network — Key Screens (Health Scan & Baseline)
// Two iOS prototype screens. Screen 1 has tap-to-advance state.
//
// Components defined here (all attached to window for cross-file access):
//   PanMarkApp        — small mark for app chrome
//   AIScanScreen      — Screen 1, with internal state A → B on tap
//   BaselineScreen    — Screen 2, static
//   ScanProgressRing  — animated circular progress + green pulse
//   MetricCard        — Screen 1 result card
//   BaselineRow       — Screen 2 indicator row
//   TrendChart        — 7-day line chart

const { useState } = React;

// ─────────────────────────────────────────────────────────────────────
// Shared brand tokens (mirrors colors_and_type.css)
// ─────────────────────────────────────────────────────────────────────
const TOKEN = {
  bgCanvas:   '#08090A',
  bgSurface:  '#0E1012',
  bgRaised:   '#15181B',
  bgHover:    '#1E2226',
  fg1:        '#FAFAFA',
  fg2:        '#C9CCD0',
  fg3:        '#9CA1A6',
  fg4:        '#6E747B',
  fg5:        '#4A5058',
  border:     '#2A2F34',
  borderHi:   '#4A5058',
  signal:     '#F5A623',
  signalSoft: 'rgba(245,166,35,0.16)',
  signalFaint:'rgba(245,166,35,0.07)',
  success:    '#6EE787',
  warn:       '#F0B429',
  danger:     '#FF5454',
  fontSans:   '"Montserrat Alternates", ui-sans-serif, system-ui, sans-serif',
  fontMono:   '"JetBrains Mono", ui-monospace, Menlo, monospace',
};

// ─────────────────────────────────────────────────────────────────────
// Small PAN mark for app chrome
// ─────────────────────────────────────────────────────────────────────
const PanMarkApp = ({ size = 22, light = '#FFFFFF', dark = '#000000', uid = 'pa' }) => (
  <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-label="PAN">
    <defs>
      <clipPath id={`${uid}-l`}><rect width="100" height="200" /></clipPath>
      <clipPath id={`${uid}-r`}><rect x="100" width="100" height="200" /></clipPath>
    </defs>
    <circle cx="100" cy="100" r="100" fill={light} clipPath={`url(#${uid}-l)`} />
    <circle cx="100" cy="100" r="100" fill={dark}  clipPath={`url(#${uid}-r)`} />
    <g clipPath={`url(#${uid}-l)`} fill="none" stroke={dark}>
      <circle cx="100" cy="100" r="50" strokeWidth="18" />
    </g>
    <g clipPath={`url(#${uid}-r)`} fill="none" stroke={light}>
      <circle cx="100" cy="100" r="50" strokeWidth="18" />
    </g>
  </svg>
);

window.PanMarkApp = PanMarkApp;
window.TOKEN = TOKEN;