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";

const FAQ_ITEMS = [
  {
    question: "How do I send money?",
    answer:
      "Open Send, choose a recipient, enter an amount, and confirm. Transfers are typically processed instantly.",
  },
  {
    question: "Are there transaction fees?",
    answer:
      "Most standard transfers are free. Some premium services, instant cash-out, or partner rails may include fees shown before confirmation.",
  },
  {
    question: "How do I secure my account?",
    answer:
      "Enable biometric login or PIN, use a strong password, and review your Security Activity regularly in Settings.",
  },
  {
    question: "What if I sent money to the wrong person?",
    answer:
      "Completed transfers may not be reversible. Contact support immediately and provide transaction details so we can help investigate.",
  },
  {
    question: "How can I contact support?",
    answer:
      "Open Support Tickets from Help or the footer to file a ticket with a ticket number. Zendo responds within up to 7 business days. You can also use Contact Us for email and phone.",
  },
  {
    question: "How do I change my @handle or profile photo?",
    answer:
      "Go to Settings → Edit Profile to upload, change, or remove your photo. Go to Settings → Your Handle to reset your @handle anytime, like Cash App or Venmo.",
  },
  {
    question: "How do I order a Zendo Card?",
    answer:
      "Tap Order Zendo Card in Settings or the footer to choose a free physical card, premium physical ($4.99), or virtual card shipped to your address.",
  },
];

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

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

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={Platform.OS === "web"}
        nestedScrollEnabled
      >
        <Text style={styles.title}>Frequently Asked Questions</Text>
        <Text style={styles.subtitle}>Quick answers to common Zendo questions.</Text>

        {FAQ_ITEMS.map((item) => (
          <View key={item.question} style={styles.card}>
            <Text style={styles.question}>{item.question}</Text>
            <Text style={styles.answer}>{item.answer}</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: 24,
  },
  card: {
    backgroundColor: Colors.dark.surface,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 14,
    padding: 16,
    marginBottom: 12,
  },
  question: {
    fontSize: 16,
    fontWeight: "700",
    color: Colors.dark.text,
    marginBottom: 8,
  },
  answer: {
    fontSize: 14,
    color: Colors.dark.textSecondary,
    lineHeight: 22,
  },
});