// COVIA Design Tokens & Theme Provider
const COVIA_TOKENS = {
  colors: {
    gold: 'oklch(0.78 0.16 75)',
    goldDim: 'oklch(0.65 0.12 75)',
    goldBright: 'oklch(0.88 0.14 75)',
    surface0: 'oklch(0.13 0.01 260)',
    surface1: 'oklch(0.16 0.01 260)',
    surface2: 'oklch(0.20 0.015 260)',
    surface3: 'oklch(0.25 0.015 260)',
    text0: 'oklch(0.97 0.005 260)',
    text1: 'oklch(0.80 0.01 260)',
    text2: 'oklch(0.55 0.01 260)',
    border: 'oklch(0.25 0.01 260)',
    borderSubtle: 'oklch(0.20 0.01 260)',
  },
  fonts: {
    display: "'Anton', sans-serif",
    body: "'Noto Sans TC', 'SF Pro Display', -apple-system, sans-serif",
    mono: "'SF Mono', 'Fira Code', monospace",
  },
  radii: { sm: '6px', md: '12px', lg: '20px', xl: '28px' },
  space: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128],
};

// Inject global CSS custom properties + base styles
const globalStyleEl = document.createElement('style');
globalStyleEl.textContent = `
  @font-face {
    font-family: 'Anton';
    src: url('/landing/assets/Anton-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans TC';
    src: url('/landing/assets/NotoSansCJKtc-Regular-subset.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans TC';
    src: url('/landing/assets/NotoSansCJKtc-Bold-subset.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
  }

  :root {
    --gold: ${COVIA_TOKENS.colors.gold};
    --gold-dim: ${COVIA_TOKENS.colors.goldDim};
    --gold-bright: ${COVIA_TOKENS.colors.goldBright};
    --surface-0: ${COVIA_TOKENS.colors.surface0};
    --surface-1: ${COVIA_TOKENS.colors.surface1};
    --surface-2: ${COVIA_TOKENS.colors.surface2};
    --surface-3: ${COVIA_TOKENS.colors.surface3};
    --text-0: ${COVIA_TOKENS.colors.text0};
    --text-1: ${COVIA_TOKENS.colors.text1};
    --text-2: ${COVIA_TOKENS.colors.text2};
    --border: ${COVIA_TOKENS.colors.border};
    --border-subtle: ${COVIA_TOKENS.colors.borderSubtle};
    --font-display: ${COVIA_TOKENS.fonts.display};
    --font-body: ${COVIA_TOKENS.fonts.body};
    --font-mono: ${COVIA_TOKENS.fonts.mono};
    --radius-sm: ${COVIA_TOKENS.radii.sm};
    --radius-md: ${COVIA_TOKENS.radii.md};
    --radius-lg: ${COVIA_TOKENS.radii.lg};
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    background: var(--surface-0);
    color: var(--text-0);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }

  body { overflow-x: hidden; }

  ::selection {
    background: var(--gold);
    color: var(--surface-0);
  }

  /* Scroll-driven fade-in utility */
  .scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Focus ring */
  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  a { color: inherit; text-decoration: none; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--surface-0); }
  ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

  /* Noise overlay */
  #app::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
  }

  /* Global grid — fixed layer behind content, breathes in/out */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(oklch(0.3 0.01 260 / 0.22) 1px, transparent 1px),
      linear-gradient(90deg, oklch(0.3 0.01 260 / 0.22) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 15%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, black 15%, transparent 78%);
    animation: coviaGridBreathe 4s ease-in-out infinite;
    will-change: opacity, transform;
    transform-origin: center center;
  }
  @keyframes coviaGridBreathe {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.035); }
  }
  @media (prefers-reduced-motion: reduce) {
    body::before { animation: none; opacity: 0.8; }
  }
`;
document.head.appendChild(globalStyleEl);

// Scroll reveal observer
const coviaScrollObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('visible');
        coviaScrollObserver.unobserve(e.target);
      }
    });
  },
  { threshold: 0.1, rootMargin: '0px 0px -60px 0px' }
);

function useScrollReveal(ref) {
  React.useEffect(() => {
    if (ref.current) {
      coviaScrollObserver.observe(ref.current);
      return () => coviaScrollObserver.unobserve(ref.current);
    }
  }, [ref]);
}

window.COVIA_TOKENS = COVIA_TOKENS;
window.useScrollReveal = useScrollReveal;