import { Colors } from "@/constants/colors";
import Feather from "@expo/vector-icons/Feather";
import { BlurView } from "expo-blur";
import { router } from "expo-router";
import React from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function LegalScreen() {
  return (
    <View style={styles.container}>
      {/* Header */}
      <BlurView intensity={40} tint="dark" style={styles.header}>
        <Text style={styles.headerTitle}>Info</Text>
        <TouchableOpacity
          onPress={() => router.back()}
          accessibilityRole="button"
          accessibilityLabel="Modal schließen"
          style={styles.closeButton}
        >
          <Feather name="x" size={18} color="rgba(255,255,255,0.85)" />
        </TouchableOpacity>
      </BlurView>

      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Impressum */}
        <View style={styles.card}>
          <View style={styles.cardHeader}>
            <View style={styles.cardIconCircle}>
              <Feather name="briefcase" size={16} color="#199edb" />
            </View>
            <Text style={styles.cardTitle}>Impressum</Text>
          </View>

          <View style={styles.cardSection}>
            <Text style={styles.textPrimary}>Berg Autosoft</Text>
            <Text style={styles.textPrimary}>Joe Felipe Berg</Text>
            <Text style={styles.textPrimary}>Stöckener Straße 35</Text>
            <Text style={styles.textPrimary}>30419 Hannover</Text>
          </View>

          <View style={styles.divider} />

          <View style={styles.cardSection}>
            <View style={styles.infoRow}>
              <Feather name="phone" size={14} color="rgba(255,255,255,0.4)" />
              <Text style={styles.textSecondary}>+49 1522 5642948</Text>
            </View>
            <View style={styles.infoRow}>
              <Feather name="mail" size={14} color="rgba(255,255,255,0.4)" />
              <Text style={styles.textSecondary}>kontakt@berg-autosoft.de</Text>
            </View>
          </View>

          <View style={styles.divider} />

          <View style={styles.cardSection}>
            <Text style={styles.textDim}>Steuernummer: 25/103/17193</Text>
            <Text style={styles.textDim}>USt-ID: DE361689728</Text>
          </View>
        </View>

        {/* Support */}
        <View style={styles.card}>
          <View style={styles.cardHeader}>
            <View style={styles.cardIconCircle}>
              <Feather name="headphones" size={16} color="#199edb" />
            </View>
            <Text style={styles.cardTitle}>Support</Text>
          </View>

          <Text style={styles.textBody}>
            Sollten Sie Probleme bei der Nutzung der iOS- oder Android-App FLTR
            haben, wenden Sie sich bitte direkt an den Support.
          </Text>

          <View style={styles.divider} />

          <Text style={styles.textDim}>Schreiben Sie eine E-Mail an:</Text>
          <View style={styles.emailPill}>
            <Feather name="mail" size={14} color="#199edb" />
            <Text style={styles.emailText}>developer@berg-autosoft.de</Text>
          </View>

          <Text style={[styles.textDim, { marginTop: 12 }]}>
            Wir bemühen uns, Ihr Anliegen so schnell wie möglich zu bearbeiten.
          </Text>
        </View>

        {/* Footer */}
        <Text style={styles.footer}>© 2025 Berg Autosoft</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background,
  },
  header: {
    paddingTop: 18,
    paddingHorizontal: 16,
    paddingBottom: 14,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(255,255,255,0.08)",
    overflow: "hidden",
  },
  headerTitle: {
    color: "white",
    fontSize: 20,
    fontWeight: "700",
    letterSpacing: 0.3,
  },
  closeButton: {
    height: 32,
    width: 32,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 16,
    backgroundColor: "rgba(255,255,255,0.1)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.12)",
  },
  scrollContent: {
    paddingHorizontal: 16,
    paddingBottom: 40,
    paddingTop: 12,
  },
  card: {
    backgroundColor: "rgba(255,255,255,0.06)",
    borderRadius: 18,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.08)",
    padding: 18,
    gap: 12,
    marginTop: 10,
  },
  cardHeader: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    marginBottom: 2,
  },
  cardIconCircle: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: "rgba(25,158,219,0.15)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(25,158,219,0.25)",
    justifyContent: "center",
    alignItems: "center",
  },
  cardTitle: {
    color: "white",
    fontSize: 18,
    fontWeight: "700",
  },
  cardSection: {
    gap: 4,
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: "rgba(255,255,255,0.08)",
  },
  infoRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    paddingVertical: 2,
  },
  textPrimary: {
    color: "rgba(255,255,255,0.92)",
    fontSize: 15,
  },
  textSecondary: {
    color: "rgba(255,255,255,0.75)",
    fontSize: 14,
  },
  textDim: {
    color: "rgba(255,255,255,0.5)",
    fontSize: 13,
  },
  textBody: {
    color: "rgba(255,255,255,0.8)",
    fontSize: 14,
    lineHeight: 20,
  },
  emailPill: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 20,
    backgroundColor: "rgba(25,158,219,0.12)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(25,158,219,0.25)",
    alignSelf: "flex-start",
    marginTop: 4,
  },
  emailText: {
    color: "#199edb",
    fontSize: 14,
    fontWeight: "600",
  },
  footer: {
    color: "rgba(255,255,255,0.35)",
    fontSize: 12,
    letterSpacing: 0.2,
    textAlign: "center",
    marginTop: 24,
  },
});