// styles.ts
import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  // --- Global / Reusable Styles (or main index page specific) ---
  appContainer: {
    flex: 1,
    backgroundColor: "#2e2e2e",
  },
  mainTitle: {
    fontSize: 38,
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
    paddingTop: 60,
    marginBottom: 20,
    textShadowColor: "rgba(0, 0, 0, 0.75)",
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 5,
    fontFamily: "Minecraft",
  },
  gridContainer: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
  },
  gridItem: {
    width: "50%",
    height: "50%",
  },
  touchableWrapper: {
    flex: 1,
  },
  imageBackground: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  linkButtonText: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    textShadowColor: "rgba(0, 0, 0, 0.7)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
    fontFamily: "Minecraft",
  },
  
  // --- Coordinate Converter Specific Styles (Adjusted and New) ---
  converterSafeArea: {
    flex: 1,
  },
  converterBackgroundImage: {
    flex: 1,
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  converterBackgroundOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0, 0, 0, 0.6)",
  },
  converterContainer: {
    flex: 1,
    width: "100%",
  },
  converterScrollContent: {
    flexGrow: 1,
    padding: 20,
    alignItems: "center",
    width: "100%",
  },
  converterTitle: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#fff",
    marginBottom: 30,
    marginTop: 20,
    textShadowColor: "rgba(0, 0, 0, 0.7)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
    fontFamily: "Minecraft",
  },
  dimensionContainer: {
    width: "90%",
    backgroundColor: "rgba(58, 58, 58, 0.7)",
    borderRadius: 10,
    borderColor: "#6a5acd",
    borderWidth: 2,
    padding: 15,
    marginBottom: 20,
    alignItems: "center",
  },
  dimensionTitle: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 15,
    textShadowColor: "rgba(0, 0, 0, 0.5)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
    fontFamily: "Minecraft",
  },
  coordinatesRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  coordInputGroup: {
    flex: 1,
    marginHorizontal: 5,
    alignItems: "center",
  },
  coordInputLabel: {
    color: "#e0e0e0",
    fontSize: 16,
    marginBottom: 5,
    fontWeight: "500",
    textShadowColor: "rgba(0, 0, 0, 0.5)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
    fontFamily: "Minecraft",
  },
  coordTextInput: {
    backgroundColor: "rgba(58, 58, 58, 0.8)",
    color: "#fff",
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 8,
    fontSize: 18,
    borderWidth: 1,
    borderColor: "#555",
    width: "100%",
    textAlign: "center",
    fontFamily: "Minecraft",
  },
  clearButton: {
    backgroundColor: "#d32f2f",
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 8,
    marginTop: 30,
  },
  clearButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
    fontFamily: "Minecraft",
  },
  backButton: {
    alignSelf: "flex-start",
    marginTop: 10,
    marginBottom: 20,
    paddingVertical: 8,
    paddingHorizontal: 15,
    backgroundColor: "rgba(106, 90, 205, 0.7)",
    borderRadius: 8,
    marginLeft: 10,
  },
  backButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
    fontFamily: "Minecraft",
  },
});