fltr-app/app/stackStyles/participantStyles.tsx

import { Colors } from "@/constants/colors";
import { Dimensions, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: Colors.background,
    paddingTop: 20,
  },
  profileHero: {
    alignItems: "center",
    paddingTop: 8,
    paddingBottom: 20,
  },
  profileImageContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    overflow: "hidden",
    borderWidth: 3,
    borderColor: "rgba(25,158,219,0.4)",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.3,
    shadowRadius: 12,
    elevation: 8,
  },
  profileImage: {
    width: "100%",
    height: "100%",
  },
  participantName: {
    color: Colors.text,
    fontSize: 24,
    fontWeight: "700",
    textAlign: "center",
    marginTop: 16,
    letterSpacing: 0.3,
  },
  participantSubtitle: {
    color: "rgba(255,255,255,0.5)",
    fontSize: 14,
    fontWeight: "500",
    textAlign: "center",
    marginTop: 4,
    letterSpacing: 0.2,
  },
  participantImage: {
    width: "100%",
    height: 300,
    borderRadius: 0,
    alignSelf: "center",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  participantInfoSection: {
    width: "100%",
    minHeight: "auto",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 15,
    marginTop: 5,
  },
  participantInfo: {
    color: "rgba(255,255,255,0.6)",
    fontSize: 15,
    textAlign: "center",
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: "rgba(255,255,255,0.3)",
    marginHorizontal: 7,
  },
  performedShowsSection: {
    width: "100%",
    backgroundColor: "transparent",
    paddingBottom: 40,
  },
  performedShowsTitle: {
    fontSize: 18,
    fontWeight: "700",
    color: Colors.text,
    marginTop: 8,
    marginLeft: 16,
    marginBottom: 4,
    letterSpacing: 0.2,
  },
  showImage: {
    width: "100%",
    height: "100%",
  },
  showLabel: {
    color: Colors.text,
    fontSize: 14,
    fontWeight: "600",
    textAlign: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 10,
    alignItems: "center",
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: "#eee",
  },
  showTitle: {
    color: Colors.text,
    fontSize: 16,
    fontWeight: "700",
    letterSpacing: 0.1,
  },
  showSeason: {
    color: "rgba(255,255,255,0.45)",
    fontSize: 13,
    fontWeight: "500",
  },
  showContainer: {
    width: Dimensions.get("window").width - 64,
    height: 180,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    overflow: "hidden",
  },
  card: {
    width: Dimensions.get("window").width - 64,
    borderRadius: 20,
    backgroundColor: "rgba(255,255,255,0.06)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.08)",
    overflow: "hidden",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 4,
  },
  cardInfo: {
    padding: 16,
    gap: 4,
  },
  cardTitleRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    gap: 12,
  },
  cardSearchButton: {
    width: 34,
    height: 34,
    borderRadius: 17,
    backgroundColor: "rgba(25,158,219,0.15)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(25,158,219,0.25)",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 2,
  },
  sectionLabel: {
    color: "rgba(255,255,255,0.45)",
    fontSize: 11,
    fontWeight: "600",
    letterSpacing: 0.4,
    textTransform: "uppercase",
    marginBottom: 8,
  },
  partnerSection: {
    marginTop: 14,
    paddingTop: 14,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: "rgba(255,255,255,0.08)",
  },
  partnerRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  partnerChip: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
    paddingVertical: 6,
    paddingHorizontal: 14,
    borderRadius: 20,
    backgroundColor: "rgba(231,76,139,0.15)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(231,76,139,0.3)",
  },
  partnerChipText: {
    color: "rgba(255,255,255,0.9)",
    fontSize: 13,
    fontWeight: "600",
  },
  participantsSection: {
    marginTop: 14,
    paddingTop: 14,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: "rgba(255,255,255,0.08)",
  },
  participantRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 6,
  },
  participantChip: {
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 14,
    backgroundColor: "rgba(255,255,255,0.08)",
    maxWidth: 160,
  },
  participantChipText: {
    color: "rgba(255,255,255,0.7)",
    fontSize: 11,
    fontWeight: "500",
  },
  moreChip: {
    paddingVertical: 5,
    paddingHorizontal: 12,
    borderRadius: 16,
    backgroundColor: "rgba(25,158,219,0.2)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(25,158,219,0.3)",
  },
  moreChipText: {
    color: "#199edb",
    fontSize: 11,
    fontWeight: "600",
  },
  heroButtons: {
    flexDirection: "row",
    gap: 10,
    marginTop: 16,
  },
  searchButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 22,
    backgroundColor: "rgba(25,158,219,0.15)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(25,158,219,0.3)",
  },
  searchButtonText: {
    color: "#199edb",
    fontSize: 14,
    fontWeight: "600",
  },
  instagramButton: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 22,
    backgroundColor: "rgba(225,48,108,0.12)",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(225,48,108,0.3)",
  },
  instagramButtonText: {
    color: "#E1306C",
    fontSize: 14,
    fontWeight: "600",
  },
  loadingContainer: {
    paddingVertical: 60,
    alignItems: "center",
  },
});

export default styles;