<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EMPHASIS Tracking System</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%2308132A'/><stop offset='100%25' stop-color='%231B379F'/></linearGradient></defs><rect width='100' height='100' rx='25' fill='url(%23g)'/><text x='50' y='72' font-family='sans-serif' font-size='60' font-weight='bold' fill='white' text-anchor='middle'>E</text><circle cx='85' cy='15' r='14' fill='%23FFB400'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Prompt', 'Inter', 'system-ui', 'sans-serif'],
        mono: ['IBM Plex Mono', 'ui-monospace', 'monospace'],
      },
      colors: {
        ink: {
          50: '#F4F6FB',
          100: '#E6EAF3',
          200: '#C9D2E3',
          300: '#9DAAC4',
          400: '#677897',
          500: '#445576',
          600: '#2D3D5C',
          700: '#1B2B47',
          800: '#0F1E38',
          900: '#08132A',
        },
        brand: {
          50: '#EEF4FF',
          100: '#D9E6FE',
          200: '#B9D0FC',
          300: '#8AAFF8',
          400: '#5683F0',
          500: '#2F5DE5',
          600: '#1E45C7',
          700: '#1B379F',
          800: '#1A2F7E',
          900: '#0B1F5C',
        },
        gold: {
          50: '#FFF8E5',
          100: '#FFECB8',
          200: '#FFDC85',
          300: '#FFC845',
          400: '#FFB400',
          500: '#E59C00',
          600: '#B87C00',
        },
        em: {
          bm:    '#2F5DE5', // BM Business Model — brand blue
          bi:    '#8B5CF6', // BI Business Information — purple
          sixw:  '#10B981', // 6W Weight tracking — green
          mfin:  '#F472B6', // MFinity / Bridge
          hm:    '#F59E0B', // House Meeting
        },
      },
      boxShadow: {
        card: '0 1px 2px rgba(15,30,56,0.04), 0 1px 0 rgba(15,30,56,0.03)',
        lift: '0 12px 32px -8px rgba(15,30,56,0.18), 0 4px 12px -4px rgba(15,30,56,0.10)',
        ring: '0 0 0 1px rgba(15,30,56,0.06)',
      },
    }
  }
}
</script>
<style>
  html, body { background: #F4F6FB; color: #0F1E38; }
  * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
  .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
  .scroll-thin::-webkit-scrollbar-thumb { background: #C9D2E3; border-radius: 8px; }
  .scroll-thin::-webkit-scrollbar-track { background: transparent; }
  .grid-bg {
    background-image:
      linear-gradient(to right, rgba(15,30,56,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,30,56,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .stripe-bg {
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.0) 0 8px, rgba(15,30,56,0.04) 8px 9px);
  }
  .drag-ghost { opacity: 0.4; }
  .drop-target { outline: 2px dashed rgba(47,93,229,0.5); outline-offset: -4px; background: rgba(47,93,229,0.06); }
  .glow-brand { box-shadow: 0 0 0 4px rgba(47,93,229,0.12); }
  /* Mermaid container */
  .mermaid-wrap svg { max-width: 100%; height: auto; }
  /* Scrollbar for week grid */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { scrollbar-width: none; }
</style>
</head>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
  <!-- LINE LIFF SDK -->
  <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <!-- Supabase JS v2 (loaded as window.supabase factory) -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

  <script>
    // Expose React hooks globally so Babel standalone scripts can use them without destructuring in every file
    window.useState = React.useState;
    window.useEffect = React.useEffect;
    window.useContext = React.useContext;
    window.useReducer = React.useReducer;
    window.useCallback = React.useCallback;
    window.useMemo = React.useMemo;
    window.useRef = React.useRef;
    window.useLayoutEffect = React.useLayoutEffect;
  </script>

  <!-- Env detection + Supabase client (must load before data.jsx) -->
  <script type="text/babel" src="lib/config.jsx"></script>
  <script type="text/babel" src="lib/supabase.jsx"></script>

  <script type="text/babel" src="data.jsx"></script>
  <script type="text/babel" src="components.jsx"></script>
  <script type="text/babel" src="views/login.jsx"></script>
  <script type="text/babel" src="views/onboarding.jsx"></script>
  <script type="text/babel" src="views/calendar.jsx"></script>
  <script type="text/babel" src="views/6w.jsx"></script>
  <script type="text/babel" src="views/abo.jsx"></script>
  <script type="text/babel" src="views/social.jsx"></script>
  <script type="text/babel" src="views/emphasis.jsx"></script>
  <script type="text/babel" src="views/admin.jsx"></script>
  <script type="text/babel" src="views/settings.jsx"></script>
  <script type="text/babel" src="app.jsx"></script>
</body>
</html>
