import React from "react";
import { ScrollView, StyleSheet, Text, View, Platform } from "react-native";
import { Stack } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Colors from "@/constants/colors";
import { AppSiteFooter } from "@/components/AppSiteFooter";

export default function AboutUsScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <Stack.Screen options={{ title: "About Us", headerBackTitle: "Back" }} />

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={Platform.OS === "web"}
        nestedScrollEnabled
      >
        <Text style={styles.title}>About Zendo</Text>
        <Text style={styles.subtitle}>
          Building a secure and modern money experience for everyone.
        </Text>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Who We Are</Text>
          <Text style={styles.paragraph}>
            Zendo is a fintech platform focused on fast payments, secure identity workflows, and
            global-ready financial features. Our mission is to make money movement simple, safe,
            and transparent.
          </Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>What We Offer</Text>
          <Text style={styles.listItem}>• Instant peer-to-peer payments</Text>
          <Text style={styles.listItem}>• Wallet and payment orchestration</Text>
          <Text style={styles.listItem}>• Advanced security and risk controls</Text>
          <Text style={styles.listItem}>• Financial tools for individuals and businesses</Text>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Our Principles</Text>
          <Text style={styles.paragraph}>
            We prioritize user trust, privacy, compliance, and product reliability. Every major
            feature is designed with security-first defaults and clear operational guardrails.
          </Text>
        </View>
        <AppSiteFooter />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 24,
    paddingBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: "700",
    color: Colors.dark.text,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: Colors.dark.textSecondary,
    lineHeight: 24,
    marginBottom: 28,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700",
    color: Colors.dark.text,
    marginBottom: 10,
  },
  paragraph: {
    fontSize: 16,
    color: Colors.dark.textSecondary,
    lineHeight: 24,
  },
  listItem: {
    fontSize: 16,
    color: Colors.dark.textSecondary,
    lineHeight: 24,
    marginBottom: 8,
  },
});