import { View } from "react-native";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";

const FAQ = [
  {
    q: "How do I change the theme?",
    a: "Go to Profile > Appearance and choose Light, Dark, or System.",
  },
  {
    q: "Where can I find my invoices and proformas?",
    a: "Use the tabs on the bottom navigation to browse Invoices/Payments and Proformas.",
  },
  {
    q: "Why am I seeing an API error?",
    a: "If your backend is rate-limiting or the database schema is missing columns, the app may show errors. Contact your admin or check the server logs.",
  },
];

export default function HelpScreen() {
  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader title="Help & Support" showBack />

      <View className="px-5 pt-4 pb-10 gap-3">
        <Card>
          <CardContent className="py-4">
            <Text variant="h4" className="text-foreground">
              FAQ
            </Text>
            <Text variant="muted" className="mt-1">
              Quick answers to common questions.
            </Text>
          </CardContent>
        </Card>

        {FAQ.map((item) => (
          <Card key={item.q} className="border border-border">
            <CardContent className="py-4">
              <Text className="text-foreground font-semibold">{item.q}</Text>
              <Text className="text-muted-foreground mt-2">{item.a}</Text>
            </CardContent>
          </Card>
        ))}

        <Card>
          <CardContent className="py-4">
            <Text className="text-foreground font-semibold">Need more help?</Text>
            <Text className="text-muted-foreground mt-2">
              Placeholder — add contact info (email/phone/WhatsApp) or a support chat link here.
            </Text>
          </CardContent>
        </Card>
      </View>
    </ScreenWrapper>
  );
}