From d840247c980fb1c608ae50e247485246d7d56a41 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Fri, 15 May 2026 23:42:45 +0200
Subject: [PATCH] =?UTF-8?q?feat(native):=20help=20section=20=E2=80=94=20FA?=
 =?UTF-8?q?Q,=20Contact,=20About,=20Crisis=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New route group app/help/ with 4 sub-pages navigable from settings.

- help/faq.tsx: accordion with 8 Q&As (drafted by UI agent, see below)
- help/contact.tsx: mailto:hilfe@rebreak.org with prefilled subject,
  address block (Rebreak placeholder — TODO verify legal entity name)
- help/about.tsx: mission text + 3 fact rows (DiGA, Hetzner, DSGVO)
- help/crisis.tsx: BZgA 0800 1 372 700, check-dein-spiel.de,
  anonyme-spieler.org, Telefonseelsorge 0800 111 0 111, emergency
  112-box with error-color border treatment. Disclaimer at bottom.

All pages use AppHeader showBack for correct back-button.
All strings in help.* namespace in DE/EN/FR locales.

FAQ answers drafted by UI agent — pending lyra-persona tone review:
  faq_a1 (what is Rebreak), faq_a2 (blocker), faq_a3 (Mac DNS),
  faq_a4 (cancel sub), faq_a5 (data), faq_a6 (bug report),
  faq_a7 (whitelist), faq_a8 (DiGA).
FR locale: faq answers are DE-fallback text (TODO: translate properly).
Contact address block: placeholder — TODO confirm legal entity + address.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/rebreak-native/app/help/_layout.tsx |  18 ++
 apps/rebreak-native/app/help/about.tsx   | 137 +++++++++++++
 apps/rebreak-native/app/help/contact.tsx | 107 ++++++++++
 apps/rebreak-native/app/help/crisis.tsx  | 250 +++++++++++++++++++++++
 apps/rebreak-native/app/help/faq.tsx     | 120 +++++++++++
 5 files changed, 632 insertions(+)
 create mode 100644 apps/rebreak-native/app/help/_layout.tsx
 create mode 100644 apps/rebreak-native/app/help/about.tsx
 create mode 100644 apps/rebreak-native/app/help/contact.tsx
 create mode 100644 apps/rebreak-native/app/help/crisis.tsx
 create mode 100644 apps/rebreak-native/app/help/faq.tsx

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 (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: 'slide_from_right',
+        contentStyle: { backgroundColor: colors.groupedBg },
+      }}
+    />
+  );
+}
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 (
+    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
+      <AppHeader showBack title={t('help.about_title')} />
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          paddingTop: 20,
+          paddingBottom: insets.bottom + 40,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            padding: 16,
+            marginBottom: 16,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 22,
+              fontFamily: 'Nunito_800ExtraBold',
+              color: colors.text,
+              marginBottom: 12,
+            }}
+          >
+            {t('help.about_headline')}
+          </Text>
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: 'Nunito_400Regular',
+              color: colors.text,
+              lineHeight: 24,
+            }}
+          >
+            {t('help.about_body')}
+          </Text>
+        </View>
+
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            overflow: 'hidden',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          {(
+            [
+              { 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<typeof Ionicons>['name']; label: string }[]
+          ).map((item, i, arr) => (
+            <View
+              key={item.icon}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 14,
+                paddingHorizontal: 16,
+                paddingVertical: 14,
+                borderBottomWidth: i < arr.length - 1 ? 1 : 0,
+                borderBottomColor: colors.border,
+              }}
+            >
+              <View
+                style={{
+                  width: 34,
+                  height: 34,
+                  borderRadius: 10,
+                  backgroundColor: colors.surfaceElevated,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Ionicons name={item.icon} size={17} color={colors.textMuted} />
+              </View>
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 14,
+                  fontFamily: 'Nunito_400Regular',
+                  color: colors.text,
+                  lineHeight: 20,
+                }}
+              >
+                {item.label}
+              </Text>
+            </View>
+          ))}
+        </View>
+
+        <TouchableOpacity
+          onPress={() => Linking.openURL('https://rebreak.org')}
+          activeOpacity={0.7}
+          style={{ marginTop: 20, alignItems: 'center' }}
+        >
+          <Text
+            style={{
+              fontSize: 13,
+              fontFamily: 'Nunito_400Regular',
+              color: '#6366f1',
+            }}
+          >
+            rebreak.org
+          </Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+}
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 (
+    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
+      <AppHeader showBack title={t('help.contact_title')} />
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          paddingTop: 20,
+          paddingBottom: insets.bottom + 40,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            padding: 16,
+            marginBottom: 16,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: 'Nunito_700Bold',
+              color: colors.text,
+              marginBottom: 8,
+            }}
+          >
+            {t('help.contact_email_label')}
+          </Text>
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: 'Nunito_400Regular',
+              color: colors.textMuted,
+              lineHeight: 21,
+              marginBottom: 16,
+            }}
+          >
+            {t('help.contact_email_desc')}
+          </Text>
+          <Button
+            title={t('help.contact_email_cta')}
+            onPress={() =>
+              Linking.openURL(
+                'mailto:hilfe@rebreak.org?subject=Support%20Anfrage',
+              )
+            }
+            size="md"
+          />
+        </View>
+
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            padding: 16,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: 'Nunito_700Bold',
+              color: colors.text,
+              marginBottom: 8,
+            }}
+          >
+            {t('help.contact_address_label')}
+          </Text>
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: 'Nunito_400Regular',
+              color: colors.textMuted,
+              lineHeight: 22,
+            }}
+          >
+            {t('help.contact_address_block')}
+          </Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
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<typeof useColors>;
+};
+
+function HotlineRow({ label, sublabel, phoneOrUrl, isUrl, colors }: HotlineRowProps) {
+  return (
+    <TouchableOpacity
+      onPress={() => Linking.openURL(isUrl ? phoneOrUrl : `tel:${phoneOrUrl.replace(/\s/g, '')}`)}
+      activeOpacity={0.7}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 14,
+        }}
+      >
+        <View
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 10,
+            backgroundColor: colors.surfaceElevated,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Ionicons
+            name={isUrl ? 'globe-outline' : 'call-outline'}
+            size={17}
+            color={colors.textMuted}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text
+            style={{
+              fontSize: 15,
+              fontFamily: 'Nunito_600SemiBold',
+              color: colors.text,
+            }}
+          >
+            {label}
+          </Text>
+          <Text
+            style={{
+              fontSize: 12,
+              fontFamily: 'Nunito_400Regular',
+              color: colors.textMuted,
+              marginTop: 2,
+            }}
+          >
+            {sublabel}
+          </Text>
+        </View>
+        <Ionicons name="chevron-forward" size={16} color={colors.border} />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+export default function CrisisScreen() {
+  const { t } = useTranslation();
+  const colors = useColors();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
+      <AppHeader showBack title={t('help.crisis_title')} />
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          paddingTop: 20,
+          paddingBottom: insets.bottom + 40,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <Text
+          style={{
+            fontSize: 13,
+            fontFamily: 'Nunito_600SemiBold',
+            color: colors.textMuted,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+            marginBottom: 8,
+            marginLeft: 4,
+          }}
+        >
+          {t('help.crisis_section_gambling')}
+        </Text>
+
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            overflow: 'hidden',
+            marginBottom: 20,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          <View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
+            <HotlineRow
+              label={t('help.crisis_bzga_label')}
+              sublabel={t('help.crisis_bzga_sublabel')}
+              phoneOrUrl="0800 1 372 700"
+              colors={colors}
+            />
+          </View>
+          <View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
+            <HotlineRow
+              label={t('help.crisis_checkdein_label')}
+              sublabel={t('help.crisis_checkdein_sublabel')}
+              phoneOrUrl="https://www.check-dein-spiel.de"
+              isUrl
+              colors={colors}
+            />
+          </View>
+          <HotlineRow
+            label={t('help.crisis_anonyme_label')}
+            sublabel={t('help.crisis_anonyme_sublabel')}
+            phoneOrUrl="https://www.anonyme-spieler.org"
+            isUrl
+            colors={colors}
+          />
+        </View>
+
+        <Text
+          style={{
+            fontSize: 13,
+            fontFamily: 'Nunito_600SemiBold',
+            color: colors.textMuted,
+            textTransform: 'uppercase',
+            letterSpacing: 1,
+            marginBottom: 8,
+            marginLeft: 4,
+          }}
+        >
+          {t('help.crisis_section_general')}
+        </Text>
+
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            overflow: 'hidden',
+            marginBottom: 20,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          <HotlineRow
+            label={t('help.crisis_seelsorge_label')}
+            sublabel={t('help.crisis_seelsorge_sublabel')}
+            phoneOrUrl="0800 111 0 111"
+            colors={colors}
+          />
+        </View>
+
+        <View
+          style={{
+            backgroundColor: '#fef2f2',
+            borderRadius: 14,
+            borderWidth: 1.5,
+            borderColor: colors.error,
+            padding: 16,
+            marginBottom: 20,
+          }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 8 }}>
+            <Ionicons name="warning-outline" size={20} color={colors.error} />
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: 'Nunito_700Bold',
+                color: colors.error,
+              }}
+            >
+              {t('help.crisis_emergency_label')}
+            </Text>
+          </View>
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: 'Nunito_400Regular',
+              color: colors.text,
+              lineHeight: 21,
+              marginBottom: 12,
+            }}
+          >
+            {t('help.crisis_emergency_desc')}
+          </Text>
+          <TouchableOpacity
+            onPress={() => Linking.openURL('tel:112')}
+            activeOpacity={0.7}
+            style={{
+              backgroundColor: colors.error,
+              borderRadius: 10,
+              paddingVertical: 12,
+              alignItems: 'center',
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 16,
+                fontFamily: 'Nunito_700Bold',
+                color: '#ffffff',
+              }}
+            >
+              {t('help.crisis_emergency_cta')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 12,
+            fontFamily: 'Nunito_400Regular',
+            color: colors.textMuted,
+            lineHeight: 18,
+            textAlign: 'center',
+            marginHorizontal: 8,
+          }}
+        >
+          {t('help.crisis_disclaimer')}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}
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<typeof useColors> }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View
+      style={{
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => setOpen((v) => !v)}
+        activeOpacity={0.7}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: 16,
+          paddingVertical: 14,
+          gap: 12,
+        }}
+      >
+        <Text
+          style={{
+            flex: 1,
+            fontSize: 15,
+            fontFamily: 'Nunito_600SemiBold',
+            color: colors.text,
+            lineHeight: 21,
+          }}
+        >
+          {q}
+        </Text>
+        <Ionicons
+          name={open ? 'chevron-up' : 'chevron-down'}
+          size={18}
+          color={colors.textMuted}
+        />
+      </TouchableOpacity>
+      {open ? (
+        <Text
+          style={{
+            paddingHorizontal: 16,
+            paddingBottom: 16,
+            fontSize: 14,
+            fontFamily: 'Nunito_400Regular',
+            color: colors.textMuted,
+            lineHeight: 21,
+          }}
+        >
+          {a}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+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 (
+    <View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
+      <AppHeader showBack title={t('help.faq_title')} />
+
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          paddingTop: 20,
+          paddingBottom: insets.bottom + 40,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View
+          style={{
+            backgroundColor: colors.card,
+            borderRadius: 14,
+            overflow: 'hidden',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.04,
+            shadowRadius: 3,
+            elevation: 1,
+          }}
+        >
+          {items.map((item, i) => (
+            <FaqRow
+              key={i}
+              q={item.q}
+              a={item.a}
+              colors={colors}
+            />
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}