import * as React from 'react';
import { ScrollView } from 'react-native';
import { Card, Title, Paragraph, Text, Dialog} from 'react-native-paper';

const About = () => {
    return (
        <Dialog.Content style={{ maxHeight: 300 }}>
            <ScrollView style={{ padding: 16 }}>
                <Card style={{ marginBottom: 16 }}>
                    <Card.Content>
                        <Paragraph style={{ fontSize: 20 }}>
                            <Text style={{ fontWeight: 'bold' }}>Pogdark</Text> is a dog park communication application that
                            allows users to inform others when they are on the way or have arrived at a dog park of their choice.
                        </Paragraph>
                    </Card.Content>
                </Card>

                <Card style={{ marginBottom: 16 }}>
                    <Card.Content>
                        <Title style={{ fontSize: 20, marginBottom: 8 }}>How It Works</Title>
                        <Paragraph style={{ fontSize: 16 }}>
                            1. Users select a simple status:{"\n"}
                            {"   "}• "On My Way"{"\n"}
                            {"   "}• "Arrived"{"\n\n"}
                            2. The status is instantly sent via a WebSocket broker to other users who are listening.{"\n\n"}
                            3. Users can click again to cancel their current status, or status messages will automatically expire, ensuring no long-term data retention.
                        </Paragraph>
                    </Card.Content>
                </Card>

                <Card>
                    <Card.Content>
                        <Title style={{ fontSize: 20, marginBottom: 8 }}>Key Features</Title>
                        <Paragraph style={{ fontSize: 16 }}>
                            • <Text style={{ fontWeight: 'bold' }}>No Tracking, No Storage</Text> – The system doesn’t store user data or track locations. {"\n\n"}
                            • <Text style={{ fontWeight: 'bold' }}>Instant Updates</Text> – Real-time messaging ensures quick communication. {"\n\n"}
                            • <Text style={{ fontWeight: 'bold' }}>No Links or Logins</Text> – Users don’t need to generate links or sign up.  Profiles are stored locally, and created on initial use.{"\n\n"}
                            • <Text style={{ fontWeight: 'bold' }}>Ephemeral by Design</Text> – Messages exist only for a 30 (On My Way) or 90 (Arrived) minute lifespan.
                        </Paragraph>
                    </Card.Content>
                </Card>
            </ScrollView>
        </Dialog.Content>
    );
};

export default About;