_layout.tsx

import {
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  useFonts,
} from '@expo-google-fonts/inter';
import { DarkTheme, DefaultTheme, type Theme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import 'react-native-reanimated';

import { installDebugLogger } from '@/components/debug-log';
import { useColorScheme } from '@/hooks/use-color-scheme';

installDebugLogger();
SplashScreen.preventAutoHideAsync().catch(() => {});

function withInterFonts(theme: Theme): Theme {
  return {
    ...theme,
    fonts: {
      regular: { fontFamily: 'Inter_400Regular', fontWeight: '400' },
      medium: { fontFamily: 'Inter_500Medium', fontWeight: '500' },
      bold: { fontFamily: 'Inter_700Bold', fontWeight: '700' },
      heavy: { fontFamily: 'Inter_700Bold', fontWeight: '700' },
    },
  };
}

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    Inter_700Bold,
  });

  React.useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync().catch(() => {});
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  return (
    <ThemeProvider value={withInterFonts(colorScheme === 'dark' ? DarkTheme : DefaultTheme)}>
      <Stack
        screenOptions={{
          headerStyle: { backgroundColor: '#000000' },
          headerTintColor: '#ffffff',
          headerTitleStyle: {
            color: '#ffffff',
            fontFamily: 'Inter_600SemiBold',
          },
          headerShadowVisible: false,
          contentStyle: { backgroundColor: '#000000' },
        }}
      >
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="studio" options={{ title: 'Studio Scene' }} />
        <Stack.Screen name="vr" options={{ title: 'VR Scene' }} />
        <Stack.Screen name="settings" options={{ title: 'Settings' }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
      </Stack>
      <StatusBar style="light" />
    </ThemeProvider>
  );
}