/* Shared Breath tokens + flow data — used by flow-card, flow-screens, etc.
   One source of truth so every screen feels like the same app. */

const TH = {
  bg:         '#F4EFE6',   // warm cream (app bg)
  surface:    '#FBF7F0',   // lighter cream (card fill)
  surface2:   '#EFE8DB',   // slight press / nested
  ink:        '#1F1B16',
  ink2:       '#6B6156',
  ink3:       '#A89E92',
  line:       '#E6DFD2',
  line2:      '#D8CFBF',
  accent:     '#B8553A',   // terracotta — emphasis only, never a button fill
  accentSoft: '#E8D3C6',
  accentDeep: '#8C3E29',
  sage:       '#7A8B6F',   // positive state
  sageSoft:   '#D6DDCF',
  slate:      '#495A6B',   // cool counter-accent (mid-session)
  slateSoft:  '#D1D9E0',
  plum:       '#6B4A5E',   // end of day
  plumSoft:   '#DCCFD6',
  gold:       '#A88A3A',   // weekly / reflection
  goldSoft:   '#E8DCC0',
};

const TF = {
  display: `"Fraunces", "Cormorant Garamond", Georgia, serif`,
  body:    `"Inter", -apple-system, system-ui, sans-serif`,
  mono:    `"JetBrains Mono", ui-monospace, monospace`,
};

// Flow type → tone mapping.
// Traders-first logic: timing category drives hue, never saturated.
// Pre-market = warm (dawn), Mid-session = slate (focus), Post-market = plum (wind-down),
// Weekly = gold (reflection). All dialed WAY down from the current rainbow.
const FLOW_TONES = {
  premarket:  { accent: TH.accent, soft: TH.accentSoft, label: 'Pre-market'  },
  midsession: { accent: TH.slate,  soft: TH.slateSoft,  label: 'Mid-session' },
  postmarket: { accent: TH.plum,   soft: TH.plumSoft,   label: 'Post-market' },
  weekly:     { accent: TH.gold,   soft: TH.goldSoft,   label: 'Weekly'      },
};

// Canonical flow data.
const FLOWS = [
  {
    id: 'pre-market', tone: 'premarket', title: 'Pre-Market Alignment',
    subtitle: 'Get mentally aligned before the first candle.',
    duration: 5, steps: 6, glyph: 'sun',
    bullets: ['Bias', 'Breathwork', 'Intention', 'Commitment'],
    when: 'Before market open · Morning prep',
  },
  {
    id: 'mid-session', tone: 'midsession', title: 'Mid-Session Reset',
    subtitle: 'Quick reset when emotions run high.',
    duration: 3, steps: 4, glyph: 'cycle',
    bullets: ['Name it', 'One breath', 'Re-read plan', 'Return'],
    when: 'After a loss · On tilt · Before re-entering',
  },
  {
    id: 'eod', tone: 'postmarket', title: 'End-of-Day Review',
    subtitle: 'Reflect, journal, close the session.',
    duration: 7, steps: 5, glyph: 'moon',
    bullets: ['What worked', 'What didn\'t', 'Tomorrow\'s one thing'],
    when: 'Market close · Before you leave the screen',
  },
  {
    id: 'weekly-reflect', tone: 'weekly', title: 'Weekly Reflection',
    subtitle: 'Deep review of the trading week.',
    duration: 15, steps: 6, glyph: 'calendar',
    bullets: ['Patterns', 'Wins', 'Leaks', 'Next week\'s lens'],
    when: 'Friday evening · Saturday morning',
  },
  {
    id: 'weekly-outlook', tone: 'weekly', title: 'Weekly Outlook',
    subtitle: 'Plan the week with intention.',
    duration: 10, steps: 5, glyph: 'compass',
    bullets: ['Macro', 'Watchlist', 'Risk budget', 'Word of the week'],
    when: 'Sunday evening · Before Monday',
  },
];

// Glyphs — drawn, not emoji. All share stroke weight for consistency.
function FlowGlyph({ name, size = 20, color = TH.ink }) {
  const s = size, stroke = color;
  const props = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none',
    stroke, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'sun':
      return (<svg {...props}>
        <circle cx="12" cy="12" r="3.5"/>
        <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/>
      </svg>);
    case 'cycle':
      return (<svg {...props}>
        <path d="M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3"/>
        <path d="M18 3v4h-4M6 21v-4h4"/>
      </svg>);
    case 'moon':
      return (<svg {...props}>
        <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/>
      </svg>);
    case 'calendar':
      return (<svg {...props}>
        <rect x="3.5" y="5" width="17" height="15" rx="2"/>
        <path d="M3.5 10h17M8 3v4M16 3v4"/>
      </svg>);
    case 'compass':
      return (<svg {...props}>
        <circle cx="12" cy="12" r="9"/>
        <path d="M15.5 8.5L13 13l-4.5 2.5L11 11z" fill={color} stroke="none"/>
      </svg>);
    case 'heart':
      return (<svg {...props}>
        <path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.65-7 10-7 10z"/>
      </svg>);
    case 'wind':
      return (<svg {...props}>
        <path d="M3 8h10a3 3 0 1 0-3-3M3 12h14a3 3 0 1 1-3 3M3 16h8"/>
      </svg>);
    case 'mic':
      return (<svg {...props}>
        <rect x="9" y="3" width="6" height="12" rx="3"/>
        <path d="M5 11a7 7 0 0 0 14 0M12 18v3"/>
      </svg>);
    case 'check':
      return (<svg {...props}><path d="M4 12l5 5L20 6"/></svg>);
    case 'shield':
      return (<svg {...props}>
        <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/>
      </svg>);
    default: return null;
  }
}

Object.assign(window, { TH, TF, FLOW_TONES, FLOWS, FlowGlyph });