alerte-secours/src/scenes/Contribute/index.js

import React from "react";
import {
  View,
  ScrollView,
  Linking,
  Alert,
  TouchableOpacity,
} from "react-native";
import { MaterialIcons, AntDesign } from "@expo/vector-icons";
import Text from "~/components/Text";

import { createStyles, useTheme } from "~/theme";

const openURL = async (url) => {
  try {
    const supported = await Linking.canOpenURL(url);
    if (supported) {
      await Linking.openURL(url);
    } else {
      Alert.alert("Erreur", "Impossible d'ouvrir ce lien");
    }
  } catch (error) {
    Alert.alert(
      "Erreur",
      "Une erreur s'est produite lors de l'ouverture du lien",
    );
  }
};

export default function Contribute() {
  const styles = useStyles();
  const { colors } = useTheme();

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={styles.container}>
        {/* Header */}
        <View style={styles.header}>
          <MaterialIcons name="favorite" size={28} color={colors.primary} />
          <Text style={styles.title}>Contribuer au projet</Text>
        </View>

        {/* Description */}
        <Text style={styles.description}>
          Alerte-Secours est une application mobile citoyenne, gratuite, sans
          publicité ni exploitation de données.
          {"\n\n"}
          Si vous souhaitez contribuer à son développement, sa maintenance et
          son indépendance :
        </Text>

        {/* Liberapay Button */}
        <TouchableOpacity
          style={[
            styles.donationButton,
            styles.buttonContent,
            styles.liberapayButton,
          ]}
          onPress={() => openURL("https://liberapay.com/alerte-secours")}
          activeOpacity={0.8}
        >
          <View style={styles.iconContainer}>
            <MaterialIcons name="circle" style={styles.iconDonation} />
          </View>
          <View style={styles.buttonTextContainer}>
            <Text style={styles.buttonLabel}>Liberapay – Soutien régulier</Text>
            <Text style={styles.buttonDescription}>
              Pour un soutien récurrent et engagé. Chaque don contribue à
              assurer la stabilité du service sur le long terme.
            </Text>
          </View>
        </TouchableOpacity>

        {/* Buy Me a Coffee Button */}
        <TouchableOpacity
          style={[
            styles.donationButton,
            styles.buttonContent,
            styles.buymeacoffeeButton,
          ]}
          onPress={() => openURL("https://buymeacoffee.com/alertesecours")}
          activeOpacity={0.8}
        >
          <View style={styles.iconContainer}>
            <MaterialIcons name="local-cafe" style={styles.iconDonation} />
          </View>
          <View style={styles.buttonTextContainer}>
            <Text style={styles.buttonLabel}>
              Buy Me a Coffee – Don ponctuel
            </Text>
            <Text style={styles.buttonDescription}>
              Pour un coup de pouce ponctuel, un café virtuel pour encourager le
              travail accompli !
            </Text>
          </View>
        </TouchableOpacity>

        {/* GitHub Sponsors Button */}
        <TouchableOpacity
          style={[
            styles.donationButton,
            styles.buttonContent,
            styles.githubButton,
          ]}
          onPress={() => openURL("https://github.com/sponsors/alerte-secours")}
          activeOpacity={0.8}
        >
          <View style={styles.iconContainer}>
            <AntDesign name="github" style={styles.iconDonation} />
          </View>
          <View style={styles.buttonTextContainer}>
            <Text style={styles.buttonLabel}>GitHub Sponsors</Text>
            <Text style={styles.buttonDescription}>
              Pour les développeurs et utilisateurs de GitHub : soutenez le
              projet directement via votre compte.
            </Text>
          </View>
        </TouchableOpacity>

        {/* Collaboration Section */}
        <View style={styles.collaborationSection}>
          <Text style={styles.collaborationTitle}>
            Vous souhaitez nous rejoindre
          </Text>
          <Text style={styles.collaborationDescription}>
            Ce projet fait sens pour vous et vous souhaitez vous engager dans un
            projet d'avenir ?{"\n\n"}
            Alerte-Secours est à la recherche de collaborateurs avec des
            compétences dans le développement, la gestion de projet, le
            business, la com, le graphisme. Contactez-nous si vous souhaitez
            faire partie de l'aventure.
          </Text>
          <TouchableOpacity
            style={styles.contactButton}
            onPress={() => openURL("mailto:contact@alertesecours.fr")}
            activeOpacity={0.8}
          >
            <MaterialIcons name="email" style={styles.contactIcon} />
            <Text style={styles.contactText}>contact@alertesecours.fr</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const useStyles = createStyles(({ theme: { colors, custom } }) => ({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 24,
  },
  title: {
    fontSize: 26,
    fontWeight: "bold",
    color: colors.primary,
    marginLeft: 12,
  },
  description: {
    fontSize: 16,
    lineHeight: 26,
    color: colors.onBackground,
    marginBottom: 36,
    textAlign: "left",
  },
  donationButton: {
    marginVertical: 10,
    borderRadius: 16,
    elevation: 3,
    shadowColor: colors.shadow,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.15,
    shadowRadius: 4,
  },
  buttonContent: {
    minHeight: 64,
    paddingVertical: 16,
    paddingHorizontal: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  buttonLabel: {
    fontSize: 17,
    fontWeight: "700",
    textAlign: "left",
    marginBottom: 4,
    color: custom.donation.onDonation,
  },
  buttonDescription: {
    fontSize: 14,
    opacity: 0.9,
    textAlign: "left",
    lineHeight: 20,
    color: custom.donation.onDonation,
  },
  iconContainer: {
    marginRight: 18,
    width: 32,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 16,
    backgroundColor: "rgba(255, 255, 255, 0.2)",
  },
  buttonTextContainer: {
    flex: 1,
    alignItems: "flex-start",
  },
  // Icon styles
  iconDonation: {
    fontSize: 22,
    color: custom.donation.onDonation,
  },
  // Button background styles
  liberapayButton: {
    backgroundColor: custom.donation.liberapay,
  },
  buymeacoffeeButton: {
    backgroundColor: custom.donation.buymeacoffee,
  },
  githubButton: {
    backgroundColor: custom.donation.github,
  },
  // Collaboration section styles
  collaborationSection: {
    marginTop: 40,
    padding: 20,
    backgroundColor: colors.surfaceVariant,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: colors.outline,
  },
  collaborationTitle: {
    fontSize: 22,
    fontWeight: "bold",
    color: colors.primary,
    marginBottom: 16,
    textAlign: "center",
  },
  collaborationDescription: {
    fontSize: 16,
    lineHeight: 24,
    color: colors.onSurfaceVariant,
    marginBottom: 20,
    textAlign: "left",
  },
  contactButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primary,
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 12,
    elevation: 2,
    shadowColor: colors.shadow,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  contactIcon: {
    fontSize: 20,
    color: colors.onPrimary,
    marginRight: 8,
  },
  contactText: {
    fontSize: 16,
    fontWeight: "600",
    color: colors.onPrimary,
  },
}));