App.js

import { StyleSheet, View, ScrollView, StatusBar } from 'react-native';
import { Appbar, Provider as PaperProvider, MD3DarkTheme } from 'react-native-paper';

import AnimeSection from './components/AnimeSection';
import CoupleSection from './components/CoupleSection';

const theme = {
  ...MD3DarkTheme,
  colors: {
    ...MD3DarkTheme.colors,
    primary: '#FF4500',
    background: '#121212',
    surface: '#1E1E1E',
  },
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#0a0a0a" />
        <Appbar.Header style={styles.header}>
          <Appbar.Content title="Soul & Maka" titleStyle={styles.headerTitle} />
        </Appbar.Header>

        <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
          <AnimeSection />
          <CoupleSection />
        </ScrollView>
      </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#121212',
  },
  header: {
    backgroundColor: '#0a0a0a',
    elevation: 4,
    shadowColor: '#FF4500',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  headerTitle: {
    color: '#FF4500',
    fontWeight: '900',
    fontSize: 22,
    letterSpacing: 2,
    textTransform: 'uppercase',
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 40,
  },
});