import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  StyleSheet,
  Dimensions,
  FlatList,
} from 'react-native';
import {
  SafeAreaProvider,
  SafeAreaView,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { Feather, Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withSequence,
  withTiming,
  withSpring,
  Easing,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const CARD_WIDTH = SCREEN_WIDTH * 0.72;
const CARD_HEIGHT = 300;

interface Event {
  id: string;
  title: string;
  venue: string;
  location: string;
  date: string;
  time: string;
  genre: string;
  price: string;
  image: string;
  artists: string[];
  attending: number;
  avatars: string[];
  isHot: boolean;
  isSoldOut: boolean;
}

interface Artist {
  id: string;
  name: string;
  genre: string;
  image: string;
  followers: string;
  isLive: boolean;
}

interface Category {
  id: string;
  label: string;
}

interface EventCardProps {
  event: Event;
  onPress: () => void;
}

interface ArtistChipProps {
  artist: Artist;
}

interface AvatarStackProps {
  avatars: string[];
  count: number;
  size?: number;
  overlap?: number;
  dark?: boolean;
}

const CATEGORIES: Category[] = [
  { id: 'all', label: '🔥 All' },
  { id: 'tonight', label: '🌙 Tonight' },
  { id: 'afrobeats', label: '🎵 Afrobeats' },
  { id: 'amapiano', label: '🎹 Amapiano' },
  { id: 'afrohouse', label: '🏠 Afro House' },
  { id: 'dancehall', label: '💃 Dancehall' },
];

const EVENTS: Event[] = [
  {
    id: '1',
    title: 'Amapiano Nights Vol. 7',
    venue: 'Fabric London',
    location: 'London, UK',
    date: 'SAT 24 MAY',
    time: '10PM – 6AM',
    genre: 'Amapiano',
    price: '£25',
    image: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&q=80',
    artists: ['DBN Gogo', 'Focalistic', 'Kabza De Small'],
    attending: 1240,
    avatars: [
      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
      'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=100&q=80',
    ],
    isHot: true,
    isSoldOut: false,
  },
  {
    id: '2',
    title: 'Afrobeats in the Park',
    venue: 'Tobacco Dock',
    location: 'London, UK',
    date: 'SUN 25 MAY',
    time: '4PM – 11PM',
    genre: 'Afrobeats',
    price: '£30',
    image: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?w=400&q=80',
    artists: ['Burna Boy', 'Wizkid', 'Davido'],
    attending: 3400,
    avatars: [
      'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&q=80',
      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&q=80',
      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&q=80',
    ],
    isHot: true,
    isSoldOut: false,
  },
  {
    id: '3',
    title: 'Nairobi Sound System',
    venue: 'The Jazz Cafe',
    location: 'London, UK',
    date: 'FRI 23 MAY',
    time: '9PM – 3AM',
    genre: 'Afro House',
    price: '£20',
    image: 'https://images.unsplash.com/photo-1598387993441-a364f854c3e1?w=400&q=80',
    artists: ['Black Coffee', 'Themba'],
    attending: 860,
    avatars: [
      'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=100&q=80',
      'https://images.unsplash.com/photo-1463453091185-61582044d556?w=100&q=80',
      'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100&q=80',
    ],
    isHot: false,
    isSoldOut: true,
  },
  {
    id: '4',
    title: 'Lagos to London',
    venue: 'EartH Theatre',
    location: 'Hackney, UK',
    date: 'SAT 31 MAY',
    time: '8PM – 2AM',
    genre: 'Afrobeats',
    price: '£35',
    image: 'https://images.unsplash.com/photo-1571266028243-e4733b0f0bb0?w=400&q=80',
    artists: ['Asake', 'Rema', 'Ayra Starr'],
    attending: 2100,
    avatars: [
      'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=100&q=80',
      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
    ],
    isHot: true,
    isSoldOut: false,
  },
];

const ARTISTS: Artist[] = [
  {
    id: '1',
    name: 'Kabza De Small',
    genre: 'Amapiano',
    image: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&q=80',
    followers: '2.1M',
    isLive: true,
  },
  {
    id: '2',
    name: 'DBN Gogo',
    genre: 'Amapiano',
    image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&q=80',
    followers: '980K',
    isLive: false,
  },
  {
    id: '3',
    name: 'Focalistic',
    genre: 'Amapiano',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
    followers: '1.4M',
    isLive: true,
  },
  {
    id: '4',
    name: 'Ayra Starr',
    genre: 'Afrobeats',
    image: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=400&q=80',
    followers: '3.2M',
    isLive: false,
  },
];

function formatAttending(n: number): string {
  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
  return String(n);
}

function AvatarStack({
  avatars,
  count,
  size = 22,
  overlap = 8,
  dark = false,
}: AvatarStackProps) {
  const borderColor = dark ? 'rgba(0,0,0,0.7)' : '#0f0f11';
  const stackWidth = avatars.length * (size - overlap) + overlap;

  return (
    <View style={styles.avatarStackRow}>
      <View style={[styles.avatarStackAvatars, { width: stackWidth, height: size }]}>
        {avatars.map((uri, index) => {
          const leftOffset = index * (size - overlap);
          const zIndex = avatars.length - index;
          return (
            <Image
              key={index}
              source={{ uri }}
              style={[
                styles.avatarStackImg,
                {
                  width: size,
                  height: size,
                  borderRadius: size / 2,
                  borderWidth: 1.5,
                  borderColor,
                  left: leftOffset,
                  zIndex,
                },
              ]}
              resizeMode="cover"
            />
          );
        })}
      </View>
      <Text style={[styles.avatarStackCount, dark && styles.avatarStackCountDark]}>
        {formatAttending(count)} going
      </Text>
    </View>
  );
}

function PulseDot() {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

  useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withTiming(1.6, { duration: 800, easing: Easing.out(Easing.ease) }),
        withTiming(1, { duration: 800, easing: Easing.in(Easing.ease) })
      ),
      -1,
      false
    );
    opacity.value = withRepeat(
      withSequence(
        withTiming(0.3, { duration: 800 }),
        withTiming(1, { duration: 800 })
      ),
      -1,
      false
    );
  }, []);

  const animStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
  }));

  return <Animated.View style={[styles.pulseDot, animStyle]} />;
}

function EventCard({ event, onPress }: EventCardProps) {
  const scale = useSharedValue(1);

  const animStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePress = () => {
    scale.value = withSequence(
      withSpring(0.97, { damping: 12 }),
      withSpring(1, { damping: 12 })
    );
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    onPress();
  };

  const gradColors: [string, string, string] = [
    'transparent',
    'rgba(0,0,0,0.55)',
    'rgba(0,0,0,0.93)',
  ];

  return (
    <Animated.View style={[styles.eventCard, animStyle]}>
      <TouchableOpacity activeOpacity={1} onPress={handlePress} style={styles.eventCardInner}>
        <Image source={{ uri: event.image }} style={styles.eventImage} resizeMode="cover" />
        <View style={styles.eventBadgesRow}>
          {event.isHot && (
            <View style={styles.hotBadge}>
              <Text style={styles.hotBadgeText}>🔥 HOT</Text>
            </View>
          )}
          {event.isSoldOut && (
            <View style={styles.soldOutBadge}>
              <Text style={styles.soldOutText}>SOLD OUT</Text>
            </View>
          )}
        </View>
        <LinearGradient colors={gradColors} style={styles.eventGradient}>
          <View style={styles.genreTag}>
            <Text style={styles.genreTagText}>{event.genre.toUpperCase()}</Text>
          </View>
          <Text style={styles.eventTitle}>{event.title}</Text>
          <Text style={styles.eventVenue}>
            {event.venue} · {event.location}
          </Text>
          <View style={styles.eventMeta}>
            <View style={styles.eventMetaItem}>
              <Feather name="calendar" size={11} color="rgba(255,255,255,0.6)" />
              <Text style={styles.eventMetaText}>{event.date}</Text>
            </View>
            <View style={styles.eventMetaItem}>
              <Feather name="clock" size={11} color="rgba(255,255,255,0.6)" />
              <Text style={styles.eventMetaText}>{event.time}</Text>
            </View>
          </View>
          <View style={styles.eventFooter}>
            <AvatarStack
              avatars={event.avatars}
              count={event.attending}
              size={22}
              overlap={7}
              dark
            />
            <Text style={styles.eventPrice}>{event.price}</Text>
          </View>
        </LinearGradient>
      </TouchableOpacity>
    </Animated.View>
  );
}

function ArtistChip({ artist }: ArtistChipProps) {
  return (
    <TouchableOpacity style={styles.artistChip} activeOpacity={0.8}>
      <View style={styles.artistImageWrapper}>
        <Image source={{ uri: artist.image }} style={styles.artistChipImage} />
        {artist.isLive && (
          <View style={styles.liveIndicator}>
            <PulseDot />
          </View>
        )}
      </View>
      <Text style={styles.artistChipName} numberOfLines={1}>
        {artist.name}
      </Text>
      <Text style={styles.artistChipGenre}>{artist.genre}</Text>
      {artist.isLive && (
        <View style={styles.liveLabel}>
          <Text style={styles.liveLabelText}>LIVE</Text>
        </View>
      )}
    </TouchableOpacity>
  );
}

function HotspotScreen() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [savedEvents, setSavedEvents] = useState<string[]>([]);
  const insets = useSafeAreaInsets();

  const headerGlow = useSharedValue(0);

  useEffect(() => {
    headerGlow.value = withRepeat(
      withSequence(
        withTiming(1, { duration: 2000, easing: Easing.inOut(Easing.ease) }),
        withTiming(0, { duration: 2000, easing: Easing.inOut(Easing.ease) })
      ),
      -1,
      false
    );
  }, []);

  const glowStyle = useAnimatedStyle(() => ({
    opacity: 0.4 + headerGlow.value * 0.3,
  }));

  const toggleSave = (id: string) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    setSavedEvents(prev =>
      prev.includes(id) ? prev.filter(e => e !== id) : [...prev, id]
    );
  };

  const bgColors: [string, string, string] = ['#1a0a2e', '#09090b', '#09090b'];
  const ticketGradColors: [string, string] = ['#7c3aed', '#6366f1'];
  // Bottom-only scrim so the photo shows at the top, text readable at the bottom
  const heroScrimColors: [string, string, string, string] = [
    'rgba(0,0,0,0.0)',
    'rgba(0,0,0,0.15)',
    'rgba(0,0,0,0.72)',
    'rgba(0,0,0,0.94)',
  ];

  return (
    <View style={styles.root}>
      <LinearGradient colors={bgColors} style={StyleSheet.absoluteFill} />
      <SafeAreaView style={styles.safeArea} edges={['top']}>
        <ScrollView
          style={styles.scroll}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
        >
          {/* ── Header ── */}
          <View style={styles.header}>
            <View>
              <Animated.Text style={[styles.headerEyebrow, glowStyle]}>
                🌍 AFROBEATS × AMAPIANO
              </Animated.Text>
              <Text style={styles.headerTitle}>Hotspot Events</Text>
            </View>
            <TouchableOpacity style={styles.searchBtn} activeOpacity={0.8}>
              <Feather name="search" size={20} color="#fff" />
            </TouchableOpacity>
          </View>

          {/* ── Hero Banner ── */}
          <TouchableOpacity activeOpacity={0.92} style={styles.heroBanner}>
            {/* Full-bleed concert photo */}
            <Image
              source={{
                uri: 'https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=800&q=85',
              }}
              style={styles.heroPhoto}
              resizeMode="cover"
            />

            {/* Subtle top tint so badges are legible */}
            <LinearGradient
              colors={['rgba(0,0,0,0.45)', 'transparent'] as [string, string]}
              style={styles.heroTopTint}
            />

            {/* Bottom scrim + content */}
            <LinearGradient colors={heroScrimColors} style={styles.heroScrim}>
              {/* Top badge row — sits near the top of the scrim start */}
              <View style={styles.heroBadgeRow}>
                <View style={styles.livePill}>
                  <PulseDot />
                  <Text style={styles.livePillText}>LIVE NOW</Text>
                </View>
                <View style={styles.featuredBadge}>
                  <Text style={styles.featuredText}>FEATURED</Text>
                </View>
              </View>

              {/* Spacer pushes content to bottom */}
              <View style={styles.heroSpacer} />

              <Text style={styles.heroTitle}>Amapiano Nights Vol. 7</Text>
              <Text style={styles.heroSub}>Fabric London · Tonight from 10PM</Text>

              <View style={styles.heroArtistRow}>
                {['DBN Gogo', 'Focalistic', 'Kabza De Small'].map((a, i) => (
                  <View key={i} style={styles.heroArtistTag}>
                    <Text style={styles.heroArtistTagText}>{a}</Text>
                  </View>
                ))}
              </View>

              <View style={styles.heroFooter}>
                <AvatarStack
                  avatars={EVENTS[0].avatars}
                  count={1240}
                  size={26}
                  overlap={9}
                  dark
                />
                <TouchableOpacity
                  style={styles.heroGetTickets}
                  activeOpacity={0.85}
                  onPress={() =>
                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
                  }
                >
                  <LinearGradient
                    colors={ticketGradColors}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={styles.heroTicketGrad}
                  >
                    <Text style={styles.heroTicketText}>Get Tickets · £25</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </LinearGradient>
          </TouchableOpacity>

          {/* ── Categories ── */}
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.categoriesContainer}
            style={styles.categoriesScroll}
          >
            {CATEGORIES.map(cat => (
              <TouchableOpacity
                key={cat.id}
                style={[
                  styles.catChip,
                  activeCategory === cat.id && styles.catChipActive,
                ]}
                onPress={() => {
                  setActiveCategory(cat.id);
                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                }}
                activeOpacity={0.8}
              >
                <Text
                  style={[
                    styles.catChipText,
                    activeCategory === cat.id && styles.catChipTextActive,
                  ]}
                >
                  {cat.label}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>

          {/* ── Tonight's Hotspots ── */}
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Tonight's Hotspots</Text>
            <TouchableOpacity>
              <Text style={styles.seeAllText}>See all</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.eventsListWrapper}>
            <FlatList
              data={EVENTS}
              keyExtractor={item => item.id}
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={styles.eventsListContent}
              snapToInterval={CARD_WIDTH + 16}
              decelerationRate="fast"
              renderItem={({ item }) => (
                <EventCard event={item} onPress={() => {}} />
              )}
            />
          </View>

          {/* ── Artists Spotlight ── */}
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Artists Spotlight</Text>
            <TouchableOpacity>
              <Text style={styles.seeAllText}>See all</Text>
            </TouchableOpacity>
          </View>

          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.artistsContainer}
          >
            {ARTISTS.map(artist => (
              <ArtistChip key={artist.id} artist={artist} />
            ))}
          </ScrollView>

          {/* ── Upcoming Events ── */}
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Upcoming Events</Text>
            <TouchableOpacity>
              <Text style={styles.seeAllText}>See all</Text>
            </TouchableOpacity>
          </View>

          {EVENTS.slice(0, 3).map(event => (
            <TouchableOpacity
              key={event.id}
              style={styles.listCard}
              activeOpacity={0.85}
              onPress={() =>
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
              }
            >
              <Image
                source={{ uri: event.image }}
                style={styles.listCardImage}
                resizeMode="cover"
              />
              <View style={styles.listCardBody}>
                <View style={styles.listCardTop}>
                  <Text style={styles.listCardGenre}>{event.genre}</Text>
                  {event.isHot && <Text style={styles.listHot}>🔥</Text>}
                </View>
                <Text style={styles.listCardTitle} numberOfLines={1}>
                  {event.title}
                </Text>
                <Text style={styles.listCardVenue} numberOfLines={1}>
                  {event.venue}
                </Text>
                <View style={styles.listCardMeta}>
                  <View style={styles.listMetaItem}>
                    <Feather name="calendar" size={11} color="#a1a1aa" />
                    <Text style={styles.listMetaText}>{event.date}</Text>
                  </View>
                  <View style={styles.listMetaItem}>
                    <Feather name="clock" size={11} color="#a1a1aa" />
                    <Text style={styles.listMetaText}>{event.time}</Text>
                  </View>
                </View>
                <View style={styles.listAvatarRow}>
                  <AvatarStack
                    avatars={event.avatars}
                    count={event.attending}
                    size={20}
                    overlap={6}
                    dark={false}
                  />
                </View>
              </View>
              <View style={styles.listCardRight}>
                <Text style={styles.listCardPrice}>{event.price}</Text>
                <TouchableOpacity
                  onPress={() => toggleSave(event.id)}
                  style={styles.saveBtn}
                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                >
                  <Ionicons
                    name={
                      savedEvents.includes(event.id)
                        ? 'bookmark'
                        : 'bookmark-outline'
                    }
                    size={20}
                    color={
                      savedEvents.includes(event.id) ? '#6366f1' : '#71717a'
                    }
                  />
                </TouchableOpacity>
                {event.isSoldOut && (
                  <View style={styles.listSoldOutPill}>
                    <Text style={styles.listSoldOutText}>Sold Out</Text>
                  </View>
                )}
              </View>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <HotspotScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#09090b' },
  safeArea: { flex: 1 },
  scroll: { flex: 1 },

  // ── Header
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 8,
    paddingBottom: 16,
  },
  headerEyebrow: {
    fontSize: 11,
    fontWeight: '600',
    color: '#a78bfa',
    letterSpacing: 1.5,
    marginBottom: 4,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: '800',
    color: '#fff',
    lineHeight: 34,
  },
  searchBtn: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: 'rgba(255,255,255,0.1)',
    alignItems: 'center',
    justifyContent: 'center',
  },

  // ── Hero Banner
  heroBanner: {
    marginHorizontal: 20,
    borderRadius: 24,
    overflow: 'hidden',
    height: 340,
    marginBottom: 24,
  },
  // The concert photo fills the entire banner
  heroPhoto: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
  },
  // Thin dark tint at the very top for badge legibility
  heroTopTint: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 80,
  },
  // Bottom scrim that fades from transparent → dark, holding all text
  heroScrim: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 0,
    paddingHorizontal: 16,
    paddingTop: 14,
    paddingBottom: 18,
    flexDirection: 'column',
  },
  heroBadgeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  heroSpacer: { flex: 1 },
  heroTitle: {
    fontSize: 24,
    fontWeight: '800',
    color: '#fff',
    lineHeight: 29,
    marginBottom: 4,
  },
  heroSub: {
    fontSize: 13,
    color: 'rgba(255,255,255,0.75)',
    marginBottom: 10,
    fontWeight: '500',
  },
  heroArtistRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
    marginBottom: 14,
  },
  heroArtistTag: {
    backgroundColor: 'rgba(255,255,255,0.18)',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
  },
  heroArtistTagText: {
    color: 'rgba(255,255,255,0.95)',
    fontSize: 12,
    fontWeight: '600',
  },
  heroFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  heroGetTickets: {
    borderRadius: 20,
    overflow: 'hidden',
  },
  heroTicketGrad: {
    paddingHorizontal: 18,
    paddingVertical: 11,
    borderRadius: 20,
  },
  heroTicketText: {
    color: '#fff',
    fontSize: 13,
    fontWeight: '700',
  },
  livePill: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'rgba(239,68,68,0.88)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 20,
    gap: 6,
  },
  pulseDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: '#fff',
  },
  livePillText: {
    color: '#fff',
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 1,
  },
  featuredBadge: {
    backgroundColor: 'rgba(99,102,241,0.88)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 20,
  },
  featuredText: {
    color: '#fff',
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 1,
  },

  // ── Categories
  categoriesScroll: { marginBottom: 24 },
  categoriesContainer: { paddingHorizontal: 20 },
  catChip: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.08)',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.1)',
    marginRight: 8,
  },
  catChipActive: { backgroundColor: '#6366f1', borderColor: '#6366f1' },
  catChipText: {
    fontSize: 13,
    fontWeight: '600',
    color: 'rgba(255,255,255,0.6)',
  },
  catChipTextActive: { color: '#fff' },

  // ── Section headers
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#fff',
    lineHeight: 22,
  },
  seeAllText: { fontSize: 13, fontWeight: '600', color: '#6366f1' },

  // ── Events FlatList
  eventsListWrapper: { height: CARD_HEIGHT + 8, marginBottom: 32 },
  eventsListContent: { paddingHorizontal: 20, gap: 16 },

  // ── Event Card
  eventCard: {
    width: CARD_WIDTH,
    height: CARD_HEIGHT,
    borderRadius: 20,
    overflow: 'hidden',
    backgroundColor: '#18181b',
  },
  eventCardInner: { flex: 1 },
  eventImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: CARD_WIDTH,
    height: CARD_HEIGHT,
  },
  eventBadgesRow: {
    position: 'absolute',
    top: 12,
    left: 12,
    right: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    zIndex: 10,
  },
  hotBadge: {
    backgroundColor: 'rgba(239,68,68,0.9)',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 10,
  },
  hotBadgeText: { color: '#fff', fontSize: 11, fontWeight: '700' },
  soldOutBadge: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.3)',
  },
  soldOutText: { color: 'rgba(255,255,255,0.8)', fontSize: 11, fontWeight: '700' },
  eventGradient: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: CARD_HEIGHT * 0.65,
    justifyContent: 'flex-end',
    paddingHorizontal: 14,
    paddingBottom: 14,
    gap: 4,
  },
  genreTag: {
    alignSelf: 'flex-start',
    backgroundColor: 'rgba(99,102,241,0.75)',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 8,
    marginBottom: 2,
  },
  genreTagText: { color: '#fff', fontSize: 10, fontWeight: '700', letterSpacing: 0.8 },
  eventTitle: { fontSize: 16, fontWeight: '700', color: '#fff', lineHeight: 20 },
  eventVenue: { fontSize: 12, color: 'rgba(255,255,255,0.65)', fontWeight: '500' },
  eventMeta: { flexDirection: 'row', gap: 12, marginTop: 2 },
  eventMetaItem: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  eventMetaText: { fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: '500' },
  eventFooter: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 6,
  },
  eventPrice: { fontSize: 20, fontWeight: '800', color: '#fff' },

  // ── Avatar Stack
  avatarStackRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  avatarStackAvatars: { position: 'relative' },
  avatarStackImg: { position: 'absolute', top: 0 },
  avatarStackCount: { fontSize: 12, fontWeight: '600', color: '#f59e0b' },
  avatarStackCountDark: { color: 'rgba(255,255,255,0.9)' },

  // ── Artists
  artistsContainer: { paddingHorizontal: 20, marginBottom: 32 },
  artistChip: { alignItems: 'center', width: 80, marginRight: 16 },
  artistImageWrapper: { width: 64, height: 64, borderRadius: 32, marginBottom: 8 },
  artistChipImage: {
    width: 64,
    height: 64,
    borderRadius: 32,
    borderWidth: 2,
    borderColor: '#6366f1',
  },
  liveIndicator: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: '#ef4444',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 2,
    borderColor: '#09090b',
  },
  artistChipName: {
    fontSize: 12,
    fontWeight: '600',
    color: '#fff',
    textAlign: 'center',
    marginBottom: 2,
  },
  artistChipGenre: {
    fontSize: 11,
    color: 'rgba(255,255,255,0.5)',
    textAlign: 'center',
    marginBottom: 4,
  },
  liveLabel: {
    backgroundColor: 'rgba(239,68,68,0.2)',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 6,
  },
  liveLabelText: { fontSize: 10, fontWeight: '700', color: '#ef4444', letterSpacing: 0.5 },

  // ── List Cards
  listCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#0f0f11',
    marginHorizontal: 20,
    marginBottom: 12,
    borderRadius: 16,
    padding: 12,
    borderWidth: 1,
    borderColor: '#27272a',
    gap: 12,
  },
  listCardImage: { width: 80, height: 88, borderRadius: 12 },
  listCardBody: { flex: 1, gap: 2 },
  listCardTop: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  listCardGenre: { fontSize: 11, fontWeight: '600', color: '#6366f1', letterSpacing: 0.5 },
  listHot: { fontSize: 11 },
  listCardTitle: { fontSize: 14, fontWeight: '700', color: '#fff', lineHeight: 20 },
  listCardVenue: { fontSize: 12, color: '#71717a', fontWeight: '500' },
  listCardMeta: { flexDirection: 'row', gap: 8, marginTop: 4 },
  listMetaItem: { flexDirection: 'row', alignItems: 'center', gap: 3 },
  listMetaText: { fontSize: 11, color: '#71717a', fontWeight: '500' },
  listAvatarRow: { marginTop: 6 },
  listCardRight: {
    alignItems: 'flex-end',
    gap: 8,
    alignSelf: 'flex-start',
    paddingTop: 2,
  },
  listCardPrice: { fontSize: 16, fontWeight: '800', color: '#fff' },
  saveBtn: { width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
  listSoldOutPill: {
    backgroundColor: 'rgba(239,68,68,0.12)',
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 8,
  },
  listSoldOutText: { fontSize: 11, fontWeight: '600', color: '#ef4444' },
});
Event Hotspot
