diff --git a/apps/rebreak-native/app/help/_layout.tsx b/apps/rebreak-native/app/help/_layout.tsx
new file mode 100644
index 0000000..5152bd8
--- /dev/null
+++ b/apps/rebreak-native/app/help/_layout.tsx
@@ -0,0 +1,18 @@
+import { Stack } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+import { useColors } from '../../lib/theme';
+
+export default function HelpLayout() {
+ const { t } = useTranslation();
+ const colors = useColors();
+
+ return (
+
+ );
+}
diff --git a/apps/rebreak-native/app/help/about.tsx b/apps/rebreak-native/app/help/about.tsx
new file mode 100644
index 0000000..b06bfc4
--- /dev/null
+++ b/apps/rebreak-native/app/help/about.tsx
@@ -0,0 +1,137 @@
+import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+import { useColors } from '../../lib/theme';
+import { AppHeader } from '../../components/AppHeader';
+
+export default function AboutScreen() {
+ const { t } = useTranslation();
+ const colors = useColors();
+ const insets = useSafeAreaInsets();
+
+ return (
+
+
+
+
+
+
+ {t('help.about_headline')}
+
+
+ {t('help.about_body')}
+
+
+
+
+ {(
+ [
+ { icon: 'shield-checkmark-outline', label: t('help.about_fact_diga') },
+ { icon: 'server-outline', label: t('help.about_fact_servers') },
+ { icon: 'lock-closed-outline', label: t('help.about_fact_privacy') },
+ ] as { icon: React.ComponentProps['name']; label: string }[]
+ ).map((item, i, arr) => (
+
+
+
+
+
+ {item.label}
+
+
+ ))}
+
+
+ Linking.openURL('https://rebreak.org')}
+ activeOpacity={0.7}
+ style={{ marginTop: 20, alignItems: 'center' }}
+ >
+
+ rebreak.org
+
+
+
+
+ );
+}
diff --git a/apps/rebreak-native/app/help/contact.tsx b/apps/rebreak-native/app/help/contact.tsx
new file mode 100644
index 0000000..07bdfa6
--- /dev/null
+++ b/apps/rebreak-native/app/help/contact.tsx
@@ -0,0 +1,107 @@
+import { Linking, ScrollView, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import { useColors } from '../../lib/theme';
+import { AppHeader } from '../../components/AppHeader';
+import { Button } from '../../components/Button';
+
+export default function ContactScreen() {
+ const { t } = useTranslation();
+ const colors = useColors();
+ const insets = useSafeAreaInsets();
+
+ return (
+
+
+
+
+
+
+ {t('help.contact_email_label')}
+
+
+ {t('help.contact_email_desc')}
+
+
+
+
+
+ {t('help.contact_address_label')}
+
+
+ {t('help.contact_address_block')}
+
+
+
+
+ );
+}
diff --git a/apps/rebreak-native/app/help/crisis.tsx b/apps/rebreak-native/app/help/crisis.tsx
new file mode 100644
index 0000000..da0348f
--- /dev/null
+++ b/apps/rebreak-native/app/help/crisis.tsx
@@ -0,0 +1,250 @@
+import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+import { useColors } from '../../lib/theme';
+import { AppHeader } from '../../components/AppHeader';
+
+type HotlineRowProps = {
+ label: string;
+ sublabel: string;
+ phoneOrUrl: string;
+ isUrl?: boolean;
+ colors: ReturnType;
+};
+
+function HotlineRow({ label, sublabel, phoneOrUrl, isUrl, colors }: HotlineRowProps) {
+ return (
+ Linking.openURL(isUrl ? phoneOrUrl : `tel:${phoneOrUrl.replace(/\s/g, '')}`)}
+ activeOpacity={0.7}
+ >
+
+
+
+
+
+
+ {label}
+
+
+ {sublabel}
+
+
+
+
+
+ );
+}
+
+export default function CrisisScreen() {
+ const { t } = useTranslation();
+ const colors = useColors();
+ const insets = useSafeAreaInsets();
+
+ return (
+
+
+
+
+
+ {t('help.crisis_section_gambling')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('help.crisis_section_general')}
+
+
+
+
+
+
+
+
+
+
+ {t('help.crisis_emergency_label')}
+
+
+
+ {t('help.crisis_emergency_desc')}
+
+ Linking.openURL('tel:112')}
+ activeOpacity={0.7}
+ style={{
+ backgroundColor: colors.error,
+ borderRadius: 10,
+ paddingVertical: 12,
+ alignItems: 'center',
+ }}
+ >
+
+ {t('help.crisis_emergency_cta')}
+
+
+
+
+
+ {t('help.crisis_disclaimer')}
+
+
+
+ );
+}
diff --git a/apps/rebreak-native/app/help/faq.tsx b/apps/rebreak-native/app/help/faq.tsx
new file mode 100644
index 0000000..3f88ed4
--- /dev/null
+++ b/apps/rebreak-native/app/help/faq.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+import { useColors } from '../../lib/theme';
+import { AppHeader } from '../../components/AppHeader';
+
+type FaqItem = { q: string; a: string };
+
+function FaqRow({ q, a, colors }: FaqItem & { colors: ReturnType }) {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ setOpen((v) => !v)}
+ activeOpacity={0.7}
+ style={{
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingHorizontal: 16,
+ paddingVertical: 14,
+ gap: 12,
+ }}
+ >
+
+ {q}
+
+
+
+ {open ? (
+
+ {a}
+
+ ) : null}
+
+ );
+}
+
+export default function FaqScreen() {
+ const { t } = useTranslation();
+ const colors = useColors();
+ const insets = useSafeAreaInsets();
+
+ const items: FaqItem[] = [
+ { q: t('help.faq_q1'), a: t('help.faq_a1') },
+ { q: t('help.faq_q2'), a: t('help.faq_a2') },
+ { q: t('help.faq_q3'), a: t('help.faq_a3') },
+ { q: t('help.faq_q4'), a: t('help.faq_a4') },
+ { q: t('help.faq_q5'), a: t('help.faq_a5') },
+ { q: t('help.faq_q6'), a: t('help.faq_a6') },
+ { q: t('help.faq_q7'), a: t('help.faq_a7') },
+ { q: t('help.faq_q8'), a: t('help.faq_a8') },
+ ];
+
+ return (
+
+
+
+
+
+ {items.map((item, i) => (
+
+ ))}
+
+
+
+ );
+}