import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  StyleSheet,
  StatusBar,
  Dimensions,
  PanResponder,
  Animated as RNAnimated,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Feather, Ionicons } from '@expo/vector-icons';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  FadeInDown,
  FadeInUp,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
import { LinearGradient } from 'expo-linear-gradient';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const SWIPE_THRESHOLD = 72;
const ROW_HEIGHT = 100;

// ─── Types ────────────────────────────────────────────────────────────────────

interface Category { id: string; label: string; icon: string; }
interface Performer { name: string; role: string; avatar: string; }
interface TicketTier { id: string; name: string; price: number; description: string; available: number; }
interface Event {
  id: string; title: string; subtitle: string; category: string;
  date: string; time: string; venue: string; city: string;
  image: string; heroImage: string; price: number; attending: number;
  rating: number; featured: boolean; performers: Performer[];
  tiers: TicketTier[]; tags: string[];
}
interface MyTicket {
  id: string; eventId: string; tierName: string; quantity: number;
  total: number; status: 'upcoming' | 'past' | 'cancelled'; purchaseDate: string;
}
type TabName = 'explore' | 'search' | 'tickets' | 'profile';
type DetailScreen = 'detail' | 'checkout' | 'confirmation';

// ─── Data ─────────────────────────────────────────────────────────────────────

const CATEGORIES: Category[] = [
  { id: 'all', label: 'All', icon: 'grid' },
  { id: 'music', label: 'Music', icon: 'music' },
  { id: 'sports', label: 'Sports', icon: 'activity' },
  { id: 'arts', label: 'Arts', icon: 'feather' },
  { id: 'food', label: 'Food', icon: 'coffee' },
  { id: 'tech', label: 'Tech', icon: 'cpu' },
];

const EVENTS: Event[] = [
  {
    id: '1', title: 'Arctic Monkeys', subtitle: 'The Car World Tour 2025',
    category: 'music', date: 'Fri, Mar 14', time: '8:00 PM',
    venue: 'Madison Square Garden', city: 'New York, NY',
    image: 'https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=800&q=80',
    price: 89, attending: 14820, rating: 4.9, featured: true,
    tags: ['Rock', 'Indie', 'Live Band'],
    performers: [
      { name: 'Arctic Monkeys', role: 'Headliner', avatar: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=100&q=80' },
      { name: 'The Last Shadow Puppets', role: 'Support Act', avatar: 'https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=100&q=80' },
    ],
    tiers: [
      { id: 'ga', name: 'General Admission', price: 89, description: 'Floor access, standing', available: 320 },
      { id: 'reserved', name: 'Reserved Seating', price: 149, description: 'Assigned seat, lower bowl', available: 84 },
      { id: 'vip', name: 'VIP Experience', price: 399, description: 'Pit access + meet & greet', available: 12 },
    ],
  },
  {
    id: '2', title: 'NBA Finals Game 4', subtitle: 'Lakers vs. Celtics',
    category: 'sports', date: 'Sun, Mar 16', time: '7:30 PM',
    venue: 'Crypto.com Arena', city: 'Los Angeles, CA',
    image: 'https://images.unsplash.com/photo-1504450758481-7338eba7524a?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1504450758481-7338eba7524a?w=800&q=80',
    price: 210, attending: 20124, rating: 4.8, featured: true,
    tags: ['NBA', 'Basketball', 'Playoffs'],
    performers: [
      { name: 'LA Lakers', role: 'Home Team', avatar: 'https://images.unsplash.com/photo-1546519638405-a9f8e2d63b11?w=100&q=80' },
      { name: 'Boston Celtics', role: 'Away Team', avatar: 'https://images.unsplash.com/photo-1553481187-be93c21490a9?w=100&q=80' },
    ],
    tiers: [
      { id: 'upper', name: 'Upper Level', price: 210, description: 'Upper bowl, all sections', available: 540 },
      { id: 'lower', name: 'Lower Level', price: 480, description: 'Lower bowl, premium views', available: 96 },
      { id: 'courtside', name: 'Courtside', price: 2800, description: 'Courtside seats, celebrity row', available: 4 },
    ],
  },
  {
    id: '3', title: 'Dua Lipa: Radical Optimism', subtitle: 'Summer Arena Tour',
    category: 'music', date: 'Thu, Mar 20', time: '9:00 PM',
    venue: 'Barclays Center', city: 'Brooklyn, NY',
    image: 'https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=800&q=80',
    price: 75, attending: 9340, rating: 4.7, featured: false,
    tags: ['Pop', 'Dance', 'Electronic'],
    performers: [
      { name: 'Dua Lipa', role: 'Headliner', avatar: 'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=100&q=80' },
      { name: 'Tove Lo', role: 'Support Act', avatar: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&q=80' },
    ],
    tiers: [
      { id: 'ga', name: 'General Admission', price: 75, description: 'Floor standing, unreserved', available: 600 },
      { id: 'seated', name: 'Seated', price: 125, description: 'Reserved seating', available: 210 },
      { id: 'vip', name: 'VIP Lounge', price: 320, description: 'Elevated lounge + bar', available: 28 },
    ],
  },
  {
    id: '4', title: 'Taste of Chicago', subtitle: 'Annual Food & Culture Festival',
    category: 'food', date: 'Sat, Mar 22', time: '12:00 PM',
    venue: 'Grant Park', city: 'Chicago, IL',
    image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800&q=80',
    price: 35, attending: 4200, rating: 4.6, featured: false,
    tags: ['Food', 'Culture', 'Family'],
    performers: [
      { name: 'Chef Marcus Rivera', role: 'Featured Chef', avatar: 'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=100&q=80' },
      { name: 'Chicago Symphony', role: 'Live Music', avatar: 'https://images.unsplash.com/photo-1465847899084-d164df4dedc6?w=100&q=80' },
    ],
    tiers: [
      { id: 'standard', name: 'Standard Entry', price: 35, description: 'Full festival access', available: 1200 },
      { id: 'tasting', name: 'Tasting Pass', price: 85, description: 'Entry + 20 tasting tokens', available: 300 },
      { id: 'vip', name: "Chef's Table VIP", price: 200, description: 'Private dining + open bar', available: 20 },
    ],
  },
  {
    id: '5', title: 'WWDC 2025', subtitle: 'Apple Worldwide Developers Conference',
    category: 'tech', date: 'Mon, Mar 24', time: '9:00 AM',
    venue: 'Apple Park', city: 'Cupertino, CA',
    image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&q=80',
    price: 1599, attending: 5000, rating: 4.9, featured: false,
    tags: ['Developer', 'Apple', 'iOS'],
    performers: [
      { name: 'Tim Cook', role: 'Keynote Speaker', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&q=80' },
      { name: 'Craig Federighi', role: 'Speaker', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&q=80' },
    ],
    tiers: [
      { id: 'standard', name: 'Standard Badge', price: 1599, description: 'Full conference, 5 days', available: 3200 },
      { id: 'student', name: 'Student Badge', price: 299, description: 'Full access, verified student', available: 600 },
    ],
  },
  {
    id: '6', title: 'Coachella Valley 2025', subtitle: 'Weekend 1 — Empire Polo Club',
    category: 'music', date: 'Fri, Apr 11', time: '2:00 PM',
    venue: 'Empire Polo Club', city: 'Indio, CA',
    image: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=400&q=80',
    heroImage: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=800&q=80',
    price: 549, attending: 125000, rating: 4.9, featured: true,
    tags: ['Festival', 'Multi-Day', 'Camping'],
    performers: [
      { name: 'Lady Gaga', role: 'Friday Headliner', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&q=80' },
      { name: 'Travis Scott', role: 'Saturday Headliner', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80' },
    ],
    tiers: [
      { id: 'ga', name: 'General Admission', price: 549, description: '3-day pass, GA grounds', available: 8000 },
      { id: 'ga-plus', name: 'GA+', price: 749, description: 'Shaded viewing + charging', available: 2200 },
      { id: 'vip', name: 'VIP Pass', price: 1099, description: 'VIP bars & lounges', available: 400 },
    ],
  },
];

const INITIAL_MY_TICKETS: MyTicket[] = [
  { id: 't1', eventId: '1', tierName: 'Reserved Seating', quantity: 2, total: 330.24, status: 'upcoming', purchaseDate: 'Feb 3' },
  { id: 't2', eventId: '2', tierName: 'Lower Level', quantity: 1, total: 537.60, status: 'upcoming', purchaseDate: 'Jan 28' },
  { id: 't3', eventId: '6', tierName: 'GA+', quantity: 2, total: 1678.88, status: 'upcoming', purchaseDate: 'Jan 15' },
  { id: 't4', eventId: '3', tierName: 'General Admission', quantity: 3, total: 252.00, status: 'past', purchaseDate: 'Dec 12' },
];

// ─── Swipeable Ticket Row ─────────────────────────────────────────────────────

interface SwipeableTicketRowProps {
  ticket: MyTicket;
  event: Event;
  isSaved: boolean;
  onPress: () => void;
  onRemove: () => void;
  onToggleSave: () => void;
}

function SwipeableTicketRow({ ticket, event, isSaved, onPress, onRemove, onToggleSave }: SwipeableTicketRowProps) {
  const translateX = useRef(new RNAnimated.Value(0)).current;
  const rowOpacity = useRef(new RNAnimated.Value(1)).current;
  const isRemoving = useRef(false);

  // Derive action reveal from translateX
  const leftActionOpacity = translateX.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0, 1], extrapolate: 'clamp' });
  const rightActionOpacity = translateX.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0], extrapolate: 'clamp' });
  const leftScale = translateX.interpolate({ inputRange: [0, SWIPE_THRESHOLD], outputRange: [0.6, 1], extrapolate: 'clamp' });
  const rightScale = translateX.interpolate({ inputRange: [-SWIPE_THRESHOLD, 0], outputRange: [1, 0.6], extrapolate: 'clamp' });

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dy) < 20,
      onPanResponderGrant: () => {
        translateX.stopAnimation();
      },
      onPanResponderMove: (_, g) => {
        if (isRemoving.current) return;
        translateX.setValue(g.dx * 0.85);
      },
      onPanResponderRelease: (_, g) => {
        if (isRemoving.current) return;
        if (g.dx > SWIPE_THRESHOLD) {
          // Swipe right → save/unsave
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
          RNAnimated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 18, stiffness: 200 }).start();
          onToggleSave();
        } else if (g.dx < -SWIPE_THRESHOLD) {
          // Swipe left → remove
          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
          isRemoving.current = true;
          RNAnimated.parallel([
            RNAnimated.timing(translateX, { toValue: -SCREEN_WIDTH, duration: 280, useNativeDriver: true }),
            RNAnimated.timing(rowOpacity, { toValue: 0, duration: 280, useNativeDriver: true }),
          ]).start(() => onRemove());
        } else {
          RNAnimated.spring(translateX, { toValue: 0, useNativeDriver: true, damping: 18, stiffness: 200 }).start();
        }
      },
    })
  ).current;

  return (
    <View style={sw.container}>
      {/* Left action: Save — shown on swipe right */}
      <RNAnimated.View style={[sw.leftAction, { opacity: leftActionOpacity }]}>
        <RNAnimated.View style={{ transform: [{ scale: leftScale }], alignItems: 'center', gap: 4 }}>
          <Ionicons name={isSaved ? 'heart-dislike' : 'heart'} size={22} color="#fff" />
          <Text style={sw.actionLabel}>{isSaved ? 'Unsave' : 'Save'}</Text>
        </RNAnimated.View>
      </RNAnimated.View>

      {/* Right action: Remove — shown on swipe left */}
      <RNAnimated.View style={[sw.rightAction, { opacity: rightActionOpacity }]}>
        <RNAnimated.View style={{ transform: [{ scale: rightScale }], alignItems: 'center', gap: 4 }}>
          <Ionicons name="trash-outline" size={22} color="#fff" />
          <Text style={sw.actionLabel}>Remove</Text>
        </RNAnimated.View>
      </RNAnimated.View>

      {/* The card itself */}
      <RNAnimated.View
        style={[sw.card, { transform: [{ translateX }], opacity: rowOpacity }]}
        {...panResponder.panHandlers}
      >
        <TouchableOpacity onPress={onPress} activeOpacity={0.85} style={sw.cardInner}>
          <Image source={{ uri: event.image }} style={sw.thumb} />
          <View style={sw.body}>
            <View style={sw.topRow}>
              <Text style={sw.eventTitle} numberOfLines={1}>{event.title}</Text>
              {isSaved && <Ionicons name="heart" size={13} color="#ef4444" />}
            </View>
            <Text style={sw.tierLabel}>{ticket.tierName} · {ticket.quantity}×</Text>
            <Text style={sw.dateText}>{event.date} · {event.time}</Text>
          </View>
          <View style={sw.right}>
            <Text style={sw.totalPrice}>${ticket.total.toFixed(0)}</Text>
            <View style={[sw.statusBadge, ticket.status === 'upcoming' ? sw.statusUpcoming : sw.statusPast]}>
              <Text style={sw.statusText}>{ticket.status === 'upcoming' ? 'UPCOMING' : 'PAST'}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </RNAnimated.View>
    </View>
  );
}

const sw = StyleSheet.create({
  container: {
    height: ROW_HEIGHT,
    marginHorizontal: 20,
    marginBottom: 10,
    borderRadius: 16,
    overflow: 'hidden',
    position: 'relative',
  },
  leftAction: {
    position: 'absolute', left: 0, top: 0, bottom: 0,
    width: '50%',
    backgroundColor: '#22c55e',
    borderRadius: 16,
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: 24,
  },
  rightAction: {
    position: 'absolute', right: 0, top: 0, bottom: 0,
    width: '50%',
    backgroundColor: '#ef4444',
    borderRadius: 16,
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: 24,
  },
  actionLabel: {
    fontSize: 11,
    color: '#fff',
    fontWeight: '700',
    letterSpacing: 0.5,
  },
  card: {
    position: 'absolute',
    left: 0, right: 0, top: 0, bottom: 0,
    backgroundColor: '#18181b',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#27272a',
  },
  cardInner: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    gap: 12,
  },
  thumb: {
    width: 60,
    height: 60,
    borderRadius: 10,
  },
  body: {
    flex: 1,
    gap: 3,
  },
  topRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  eventTitle: {
    fontSize: 14,
    color: '#fff',
    fontWeight: '700',
    flex: 1,
  },
  tierLabel: {
    fontSize: 12,
    color: '#71717a',
  },
  dateText: {
    fontSize: 11,
    color: '#52525b',
  },
  right: {
    alignItems: 'flex-end',
    gap: 6,
  },
  totalPrice: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '700',
  },
  statusBadge: {
    borderRadius: 5,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  statusUpcoming: { backgroundColor: 'rgba(99,102,241,0.25)' },
  statusPast: { backgroundColor: 'rgba(255,255,255,0.08)' },
  statusText: {
    fontSize: 9,
    color: '#a1a1aa',
    fontWeight: '700',
    letterSpacing: 0.6,
  },
});

// ─── Tab Bar ──────────────────────────────────────────────────────────────────

interface TabBarProps {
  activeTab: TabName;
  onTabPress: (tab: TabName) => void;
  ticketCount: number;
}

function TabBar({ activeTab, onTabPress, ticketCount }: TabBarProps) {
  const insets = useSafeAreaInsets();
  const tabs: { id: TabName; label: string; icon: string; activeIcon: string }[] = [
    { id: 'explore', label: 'Explore', icon: 'compass-outline', activeIcon: 'compass' },
    { id: 'search', label: 'Search', icon: 'search-outline', activeIcon: 'search' },
    { id: 'tickets', label: 'Tickets', icon: 'ticket-outline', activeIcon: 'ticket' },
    { id: 'profile', label: 'Profile', icon: 'person-outline', activeIcon: 'person' },
  ];
  return (
    <View style={[tb.bar, { paddingBottom: insets.bottom || 16 }]}>
      {tabs.map(tab => {
        const isActive = activeTab === tab.id;
        return (
          <TouchableOpacity key={tab.id} style={tb.item} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); onTabPress(tab.id); }} activeOpacity={0.7}>
            <View style={tb.iconWrap}>
              <Ionicons name={(isActive ? tab.activeIcon : tab.icon) as any} size={24} color={isActive ? '#818cf8' : '#52525b'} />
              {tab.id === 'tickets' && ticketCount > 0 && (
                <View style={tb.badge}><Text style={tb.badgeText}>{ticketCount}</Text></View>
              )}
            </View>
            <Text style={[tb.label, isActive && tb.labelActive]}>{tab.label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const tb = StyleSheet.create({
  bar: { flexDirection: 'row', backgroundColor: '#0f0f11', borderTopWidth: 1, borderTopColor: '#1c1c1f', paddingTop: 10 },
  item: { flex: 1, alignItems: 'center', gap: 3 },
  iconWrap: { position: 'relative', width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },
  label: { fontSize: 11, color: '#52525b', fontWeight: '500' },
  labelActive: { color: '#818cf8', fontWeight: '600' },
  badge: { position: 'absolute', top: -3, right: -7, backgroundColor: '#ef4444', borderRadius: 8, minWidth: 15, height: 15, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 3, borderWidth: 1.5, borderColor: '#0f0f11' },
  badgeText: { fontSize: 9, color: '#fff', fontWeight: '700' },
});

// ─── Event Row ────────────────────────────────────────────────────────────────

function EventRow({ event, onPress }: { event: Event; onPress: () => void }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7} style={er.row}>
      <Image source={{ uri: event.image }} style={er.thumb} />
      <View style={er.body}>
        <Text style={er.title} numberOfLines={1}>{event.title}</Text>
        <Text style={er.venue} numberOfLines={1}>{event.venue}</Text>
        <View style={er.meta}>
          <Ionicons name="calendar-outline" size={11} color="#52525b" />
          <Text style={er.metaText}>{event.date}</Text>
          <View style={er.dot} />
          <Ionicons name="location-outline" size={11} color="#52525b" />
          <Text style={er.metaText} numberOfLines={1}>{event.city}</Text>
        </View>
      </View>
      <View style={er.right}>
        <Text style={er.price}>${event.price}</Text>
        <View style={er.ratingRow}>
          <Ionicons name="star" size={10} color="#f59e0b" />
          <Text style={er.ratingText}>{event.rating}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const er = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 14 },
  thumb: { width: 68, height: 68, borderRadius: 12, flexShrink: 0 },
  body: { flex: 1, marginLeft: 12, marginRight: 12, gap: 3, overflow: 'hidden' },
  title: { fontSize: 15, color: '#fff', fontWeight: '600' },
  venue: { fontSize: 13, color: '#71717a' },
  meta: { flexDirection: 'row', alignItems: 'center', gap: 3, marginTop: 2 },
  metaText: { fontSize: 11, color: '#52525b' },
  dot: { width: 3, height: 3, borderRadius: 1.5, backgroundColor: '#3f3f46', marginHorizontal: 1 },
  right: { width: 52, flexShrink: 0, alignItems: 'flex-end', gap: 6 },
  price: { fontSize: 16, color: '#fff', fontWeight: '700' },
  ratingRow: { flexDirection: 'row', alignItems: 'center', gap: 3, backgroundColor: 'rgba(245,158,11,0.12)', paddingHorizontal: 6, paddingVertical: 3, borderRadius: 6 },
  ratingText: { fontSize: 11, color: '#f59e0b', fontWeight: '600' },
});

// ─── Explore Tab ──────────────────────────────────────────────────────────────

function ExploreTab({ onSelectEvent }: { onSelectEvent: (e: Event) => void }) {
  const insets = useSafeAreaInsets();
  const [activeCategory, setActiveCategory] = useState('all');
  const [savedEvents, setSavedEvents] = useState<string[]>(['1', '6']);
  const filteredEvents = activeCategory === 'all' ? EVENTS : EVENTS.filter(e => e.category === activeCategory);
  const featuredEvents = EVENTS.filter(e => e.featured);
  const toggleSave = (id: string) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setSavedEvents(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]); };

  return (
    <View style={d.flex1}>
      <ScrollView style={d.flex1} contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={false}>
        <View style={[d.exploreHeader, { paddingTop: insets.top + 12 }]}>
          <View>
            <Text style={d.greeting}>Good evening</Text>
            <Text style={d.pageTitle}>Discover Events</Text>
          </View>
          <TouchableOpacity style={d.iconBtn} activeOpacity={0.8}>
            <Ionicons name="notifications-outline" size={21} color="#a1a1aa" />
            <View style={d.notifDot} />
          </TouchableOpacity>
        </View>

        <Animated.View entering={FadeInDown.delay(40).duration(350)} style={d.searchBar}>
          <Ionicons name="search-outline" size={16} color="#52525b" />
          <Text style={d.searchPlaceholder}>Search events, artists, venues…</Text>
        </Animated.View>

        <Animated.View entering={FadeInDown.delay(80).duration(350)}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={d.catScroll}>
            {CATEGORIES.map(cat => (
              <TouchableOpacity key={cat.id} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setActiveCategory(cat.id); }} style={[d.catPill, activeCategory === cat.id && d.catPillActive]} activeOpacity={0.8}>
                <Feather name={cat.icon as any} size={13} color={activeCategory === cat.id ? '#09090b' : '#71717a'} />
                <Text style={[d.catPillText, activeCategory === cat.id && d.catPillTextActive]}>{cat.label}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </Animated.View>

        {activeCategory === 'all' && (
          <Animated.View entering={FadeInDown.delay(120).duration(350)}>
            <View style={d.sectionHeader}>
              <View style={d.sectionTitleRow}>
                <Ionicons name="flame" size={18} color="#f97316" />
                <Text style={d.sectionTitle}>Featured</Text>
              </View>
              <TouchableOpacity><Text style={d.seeAll}>See all</Text></TouchableOpacity>
            </View>
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={d.featuredScroll} decelerationRate="fast" snapToInterval={SCREEN_WIDTH - 48} snapToAlignment="start">
              {featuredEvents.map(event => (
                <TouchableOpacity key={event.id} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.95} style={d.featuredCard}>
                  <Image source={{ uri: event.heroImage }} style={d.featuredImage} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.88)']} style={d.featuredGradient} />
                  <View style={d.featuredContent}>
                    <View style={d.tagsRow}>
                      {event.tags.slice(0, 2).map(tag => <View key={tag} style={d.tagPill}><Text style={d.tagText}>{tag}</Text></View>)}
                    </View>
                    <Text style={d.featuredTitle}>{event.title}</Text>
                    <Text style={d.featuredSubtitle}>{event.subtitle}</Text>
                    <View style={d.featuredMeta}>
                      <View style={d.featuredMetaLeft}>
                        <Ionicons name="calendar-outline" size={11} color="rgba(255,255,255,0.6)" />
                        <Text style={d.featuredMetaText}>{event.date} · {event.time}</Text>
                      </View>
                      <Text style={d.featuredPrice}>From ${event.price}</Text>
                    </View>
                  </View>
                  <TouchableOpacity style={d.cardSaveBtn} onPress={() => toggleSave(event.id)} activeOpacity={0.8}>
                    <Ionicons name={savedEvents.includes(event.id) ? 'heart' : 'heart-outline'} size={18} color={savedEvents.includes(event.id) ? '#ef4444' : '#fff'} />
                  </TouchableOpacity>
                </TouchableOpacity>
              ))}
            </ScrollView>
          </Animated.View>
        )}

        <View style={d.sectionHeader}>
          <View style={d.sectionTitleRow}>
            <Ionicons name="calendar" size={18} color="#818cf8" />
            <Text style={d.sectionTitle}>{activeCategory === 'all' ? 'Upcoming' : `${CATEGORIES.find(c => c.id === activeCategory)?.label ?? ''} Events`}</Text>
          </View>
          <Text style={d.countLabel}>{filteredEvents.length} events</Text>
        </View>

        {filteredEvents.map((event, idx) => (
          <Animated.View key={event.id} entering={FadeInDown.delay(160 + idx * 50).duration(350)}>
            <EventRow event={event} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} />
            <View style={d.hairline} />
          </Animated.View>
        ))}
      </ScrollView>
    </View>
  );
}

// ─── Search Tab ───────────────────────────────────────────────────────────────

function SearchTab({ onSelectEvent }: { onSelectEvent: (e: Event) => void }) {
  const insets = useSafeAreaInsets();
  const trending = EVENTS.slice(0, 4);
  return (
    <View style={d.flex1}>
      <ScrollView contentContainerStyle={{ paddingBottom: 24 }} showsVerticalScrollIndicator={false}>
        <View style={[d.pageHeader, { paddingTop: insets.top + 12 }]}>
          <Text style={d.pageTitle}>Search</Text>
        </View>
        <View style={d.bigSearchWrap}>
          <View style={d.bigSearchBar}>
            <Ionicons name="search-outline" size={18} color="#818cf8" />
            <Text style={d.bigSearchPlaceholder}>Artists, events, venues…</Text>
            <Ionicons name="options-outline" size={18} color="#52525b" />
          </View>
        </View>
        <View style={d.searchSection}>
          <Text style={d.searchSectionTitle}>Browse by Category</Text>
          <View style={d.catGrid}>
            {[
              { label: 'Music', img: 'https://images.unsplash.com/photo-1501612780327-45045538702b?w=200&q=80' },
              { label: 'Sports', img: 'https://images.unsplash.com/photo-1461896836934-ffe607ba8211?w=200&q=80' },
              { label: 'Arts', img: 'https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?w=200&q=80' },
              { label: 'Food', img: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=200&q=80' },
              { label: 'Tech', img: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=200&q=80' },
              { label: 'Comedy', img: 'https://images.unsplash.com/photo-1527224857830-43a7acc85260?w=200&q=80' },
            ].map((cat, idx) => (
              <Animated.View key={cat.label} entering={FadeInDown.delay(60 + idx * 40).duration(350)}>
                <TouchableOpacity style={d.catGridItem} activeOpacity={0.8} onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}>
                  <Image source={{ uri: cat.img }} style={d.catGridImage} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.65)']} style={d.catGridGradient} />
                  <Text style={d.catGridLabel}>{cat.label}</Text>
                </TouchableOpacity>
              </Animated.View>
            ))}
          </View>
        </View>
        <View style={d.searchSection}>
          <Text style={d.searchSectionTitle}>Trending Near You</Text>
          {trending.map((event, idx) => (
            <View key={event.id}>
              <TouchableOpacity style={d.trendRow} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.7}>
                <Text style={d.trendRank}>{idx + 1}</Text>
                <Image source={{ uri: event.image }} style={d.trendThumb} />
                <View style={d.trendBody}>
                  <Text style={d.trendTitle} numberOfLines={1}>{event.title}</Text>
                  <Text style={d.trendSub}>{event.date} · {event.city}</Text>
                </View>
                <Text style={d.trendPrice}>${event.price}</Text>
              </TouchableOpacity>
              {idx < trending.length - 1 && <View style={d.hairline} />}
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

// ─── Tickets Tab ──────────────────────────────────────────────────────────────

function TicketsTab({ myTickets, setMyTickets, onSelectEvent }: { myTickets: MyTicket[]; setMyTickets: React.Dispatch<React.SetStateAction<MyTicket[]>>; onSelectEvent: (e: Event) => void }) {
  const insets = useSafeAreaInsets();
  const [activeFilter, setActiveFilter] = useState<'upcoming' | 'past'>('upcoming');
  const [savedTickets, setSavedTickets] = useState<string[]>(['t1']);

  const filtered = myTickets.filter(t => t.status === (activeFilter === 'past' ? 'past' : 'upcoming') || (activeFilter === 'past' && t.status === 'cancelled'));
  const getEvent = (id: string) => EVENTS.find(e => e.id === id);

  const handleRemove = (ticketId: string) => {
    setTimeout(() => setMyTickets(prev => prev.filter(t => t.id !== ticketId)), 320);
  };

  const handleToggleSave = (ticketId: string) => {
    setSavedTickets(prev => prev.includes(ticketId) ? prev.filter(x => x !== ticketId) : [...prev, ticketId]);
  };

  const upcomingCount = myTickets.filter(t => t.status === 'upcoming').length;

  return (
    <View style={d.flex1}>
      <ScrollView contentContainerStyle={{ paddingBottom: 32 }} showsVerticalScrollIndicator={false}>
        <View style={[d.pageHeader, { paddingTop: insets.top + 12 }]}>
          <Text style={d.pageTitle}>My Tickets</Text>
          <TouchableOpacity style={d.qrBtn} activeOpacity={0.8}>
            <Ionicons name="qr-code-outline" size={20} color="#818cf8" />
          </TouchableOpacity>
        </View>

        {/* Hint */}
        {activeFilter === 'upcoming' && filtered.length > 0 && (
          <Animated.View entering={FadeInDown.delay(20).duration(300)} style={d.swipeHint}>
            <Ionicons name="arrow-back" size={12} color="#52525b" />
            <Text style={d.swipeHintText}>Swipe left to remove · Swipe right to save</Text>
            <Ionicons name="arrow-forward" size={12} color="#52525b" />
          </Animated.View>
        )}

        <Animated.View entering={FadeInDown.delay(40).duration(350)} style={d.filterTabRow}>
          {(['upcoming', 'past'] as const).map(f => (
            <TouchableOpacity key={f} style={[d.filterTab, activeFilter === f && d.filterTabActive]} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setActiveFilter(f); }} activeOpacity={0.8}>
              <Text style={[d.filterTabText, activeFilter === f && d.filterTabTextActive]}>
                {f === 'upcoming' ? `Upcoming${upcomingCount > 0 ? ` (${upcomingCount})` : ''}` : 'Past'}
              </Text>
            </TouchableOpacity>
          ))}
        </Animated.View>

        {filtered.length === 0 ? (
          <Animated.View entering={FadeInDown.delay(80).duration(350)} style={d.emptyState}>
            <Ionicons name="ticket-outline" size={44} color="#27272a" />
            <Text style={d.emptyTitle}>No {activeFilter} tickets</Text>
            <Text style={d.emptySubtitle}>Tickets you purchase will appear here</Text>
          </Animated.View>
        ) : (
          filtered.map((ticket, idx) => {
            const event = getEvent(ticket.eventId);
            if (!event) return null;
            if (activeFilter === 'upcoming') {
              return (
                <Animated.View key={ticket.id} entering={FadeInDown.delay(80 + idx * 60).duration(350)}>
                  <SwipeableTicketRow
                    ticket={ticket}
                    event={event}
                    isSaved={savedTickets.includes(ticket.id)}
                    onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }}
                    onRemove={() => handleRemove(ticket.id)}
                    onToggleSave={() => handleToggleSave(ticket.id)}
                  />
                </Animated.View>
              );
            }
            // Past tickets — static rows, no swipe
            return (
              <Animated.View key={ticket.id} entering={FadeInDown.delay(80 + idx * 60).duration(350)}>
                <TouchableOpacity style={d.pastTicketRow} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onSelectEvent(event); }} activeOpacity={0.7}>
                  <Image source={{ uri: event.image }} style={d.pastThumb} />
                  <View style={d.pastBody}>
                    <Text style={d.pastTitle} numberOfLines={1}>{event.title}</Text>
                    <Text style={d.pastTier}>{ticket.tierName} · {ticket.quantity}×</Text>
                    <Text style={d.pastDate}>{event.date}</Text>
                  </View>
                  <Text style={d.pastTotal}>${ticket.total.toFixed(0)}</Text>
                </TouchableOpacity>
                <View style={d.hairline} />
              </Animated.View>
            );
          })
        )}
      </ScrollView>
    </View>
  );
}

// ─── Profile Tab ──────────────────────────────────────────────────────────────

function ProfileTab() {
  const insets = useSafeAreaInsets();
  interface MenuItem { icon: string; label: string; trailing: string; iconColor: string; iconBg: string; }
  interface MenuSection { title: string; items: MenuItem[]; }
  const menuSections: MenuSection[] = [
    { title: 'Account', items: [
      { icon: 'person-outline', label: 'Personal Information', trailing: 'chevron', iconColor: '#818cf8', iconBg: 'rgba(129,140,248,0.15)' },
      { icon: 'card-outline', label: 'Payment Methods', trailing: 'chevron', iconColor: '#22c55e', iconBg: 'rgba(34,197,94,0.12)' },
      { icon: 'notifications-outline', label: 'Notifications', trailing: 'chevron', iconColor: '#f59e0b', iconBg: 'rgba(245,158,11,0.12)' },
    ]},
    { title: 'Preferences', items: [
      { icon: 'location-outline', label: 'Location', trailing: 'New York, NY', iconColor: '#ef4444', iconBg: 'rgba(239,68,68,0.12)' },
      { icon: 'globe-outline', label: 'Language', trailing: 'English', iconColor: '#1d9bf0', iconBg: 'rgba(29,155,240,0.12)' },
      { icon: 'moon-outline', label: 'Appearance', trailing: 'Dark', iconColor: '#8b5cf6', iconBg: 'rgba(139,92,246,0.12)' },
    ]},
    { title: 'Support', items: [
      { icon: 'help-circle-outline', label: 'Help Center', trailing: 'chevron', iconColor: '#818cf8', iconBg: 'rgba(129,140,248,0.15)' },
      { icon: 'chatbubble-outline', label: 'Contact Us', trailing: 'chevron', iconColor: '#22c55e', iconBg: 'rgba(34,197,94,0.12)' },
      { icon: 'document-text-outline', label: 'Terms & Privacy', trailing: 'chevron', iconColor: '#71717a', iconBg: 'rgba(113,113,122,0.15)' },
    ]},
  ];

  return (
    <View style={d.flex1}>
      <ScrollView contentContainerStyle={{ paddingBottom: 40 }} showsVerticalScrollIndicator={false}>
        <View style={[d.pageHeader, { paddingTop: insets.top + 12 }]}>
          <Text style={d.pageTitle}>Profile</Text>
          <TouchableOpacity style={d.iconBtn} activeOpacity={0.8}>
            <Ionicons name="settings-outline" size={20} color="#a1a1aa" />
          </TouchableOpacity>
        </View>

        <Animated.View entering={FadeInDown.delay(40).duration(350)} style={d.profileCard}>
          <Image source={{ uri: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&q=80' }} style={d.avatar} />
          <View style={d.profileInfo}>
            <Text style={d.profileName}>Sarah Chen</Text>
            <Text style={d.profileHandle}>@sarahchen · Since 2021</Text>
          </View>
          <TouchableOpacity style={d.editBtn} activeOpacity={0.8}>
            <Text style={d.editBtnText}>Edit</Text>
          </TouchableOpacity>
        </Animated.View>

        <Animated.View entering={FadeInDown.delay(80).duration(350)} style={d.statsStrip}>
          <View style={d.statItem}><Text style={d.statValue}>14</Text><Text style={d.statLabel}>Events</Text></View>
          <View style={d.statDiv} />
          <View style={d.statItem}><Text style={d.statValue}>6</Text><Text style={d.statLabel}>Upcoming</Text></View>
          <View style={d.statDiv} />
          <View style={d.statItem}><Text style={d.statValue}>$2,418</Text><Text style={d.statLabel}>Spent</Text></View>
        </Animated.View>

        {menuSections.map((section, sIdx) => (
          <Animated.View key={section.title} entering={FadeInDown.delay(120 + sIdx * 60).duration(350)}>
            <Text style={d.menuSectionLabel}>{section.title}</Text>
            <View style={d.menuSection}>
              {section.items.map((item, iIdx) => (
                <View key={item.label}>
                  <TouchableOpacity style={d.menuRow} activeOpacity={0.7} onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}>
                    <View style={[d.menuIconWrap, { backgroundColor: item.iconBg }]}>
                      <Ionicons name={item.icon as any} size={17} color={item.iconColor} />
                    </View>
                    <Text style={d.menuRowLabel}>{item.label}</Text>
                    {item.trailing === 'chevron'
                      ? <Ionicons name="chevron-forward" size={16} color="#3f3f46" />
                      : <Text style={d.menuRowValue}>{item.trailing}</Text>
                    }
                  </TouchableOpacity>
                  {iIdx < section.items.length - 1 && <View style={d.menuHairline} />}
                </View>
              ))}
            </View>
          </Animated.View>
        ))}

        <Animated.View entering={FadeInDown.delay(340).duration(350)}>
          <TouchableOpacity style={d.signOutBtn} activeOpacity={0.8} onPress={() => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning)}>
            <Ionicons name="log-out-outline" size={18} color="#ef4444" />
            <Text style={d.signOutText}>Sign Out</Text>
          </TouchableOpacity>
        </Animated.View>
      </ScrollView>
    </View>
  );
}

// ─── Detail Screen ────────────────────────────────────────────────────────────

function DetailScreen({ event, onBack, onGetTickets }: { event: Event; onBack: () => void; onGetTickets: () => void }) {
  const insets = useSafeAreaInsets();
  const scrollY = useSharedValue(0);
  const btnScale = useSharedValue(1);

  const headerStyle = useAnimatedStyle(() => {
    'worklet';
    return { opacity: withTiming(scrollY.value > 280 ? 1 : 0, { duration: 200 }) };
  });
  const btnStyle = useAnimatedStyle(() => {
    'worklet';
    return { transform: [{ scale: btnScale.value }] };
  });

  const gradColors: [string, string, ...string[]] = ['transparent', 'rgba(0,0,0,0.82)', '#09090b'];

  return (
    <View style={[d.flex1, { backgroundColor: '#09090b' }]}>
      <StatusBar barStyle="light-content" />
      <Animated.View style={[d.stickyHeader, { paddingTop: insets.top }, headerStyle]}>
        <TouchableOpacity onPress={onBack} style={d.stickyBackBtn}>
          <Ionicons name="arrow-back" size={20} color="#fff" />
        </TouchableOpacity>
        <Text style={d.stickyTitle} numberOfLines={1}>{event.title}</Text>
        <View style={{ width: 40 }} />
      </Animated.View>

      <ScrollView showsVerticalScrollIndicator={false} onScroll={e => { scrollY.value = e.nativeEvent.contentOffset.y; }} scrollEventThrottle={16} contentContainerStyle={{ paddingBottom: insets.bottom + 110 }}>
        <View style={d.detailHero}>
          <Image source={{ uri: event.heroImage }} style={d.detailHeroImg} />
          <LinearGradient colors={gradColors} style={d.detailHeroGrad} />
          <TouchableOpacity style={[d.floatBack, { top: insets.top + 8 }]} onPress={onBack} activeOpacity={0.8}>
            <Ionicons name="arrow-back" size={18} color="#fff" />
          </TouchableOpacity>
          <View style={d.heroContent}>
            <View style={d.tagsRow}>
              {event.tags.map(tag => <View key={tag} style={d.tagPill}><Text style={d.tagText}>{tag}</Text></View>)}
            </View>
            <Text style={d.heroTitle}>{event.title}</Text>
            <Text style={d.heroSub}>{event.subtitle}</Text>
          </View>
        </View>

        <Animated.View entering={FadeInUp.delay(80).duration(350)} style={d.statsStrip}>
          <View style={d.statItem}><Text style={d.statValue}>{(event.attending / 1000).toFixed(1)}K</Text><Text style={d.statLabel}>Attending</Text></View>
          <View style={d.statDiv} />
          <View style={d.statItem}>
            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}><Ionicons name="star" size={14} color="#f59e0b" /><Text style={d.statValue}>{event.rating}</Text></View>
            <Text style={d.statLabel}>Rating</Text>
          </View>
          <View style={d.statDiv} />
          <View style={d.statItem}><Text style={[d.statValue, { color: '#818cf8' }]}>${event.price}</Text><Text style={d.statLabel}>From</Text></View>
        </Animated.View>

        <Animated.View entering={FadeInDown.delay(120).duration(350)} style={d.detailCard}>
          <Text style={d.detailCardTitle}>Event Details</Text>
          <View style={d.infoRow}>
            <View style={[d.infoIcon, { backgroundColor: 'rgba(129,140,248,0.15)' }]}><Ionicons name="calendar-outline" size={16} color="#818cf8" /></View>
            <View style={d.infoBody}><Text style={d.infoLabel}>Date & Time</Text><Text style={d.infoValue}>{event.date} at {event.time}</Text></View>
          </View>
          <View style={d.infoHairline} />
          <View style={d.infoRow}>
            <View style={[d.infoIcon, { backgroundColor: 'rgba(239,68,68,0.12)' }]}><Ionicons name="location-outline" size={16} color="#ef4444" /></View>
            <View style={d.infoBody}><Text style={d.infoLabel}>Venue</Text><Text style={d.infoValue}>{event.venue}</Text><Text style={d.infoSub}>{event.city}</Text></View>
            <TouchableOpacity style={d.mapBtn}><Text style={d.mapBtnText}>Map</Text></TouchableOpacity>
          </View>
        </Animated.View>

        <Animated.View entering={FadeInDown.delay(160).duration(350)} style={d.detailCard}>
          <Text style={d.detailCardTitle}>Lineup</Text>
          {event.performers.map((p, idx) => (
            <View key={idx}>
              <View style={d.performerRow}>
                <Image source={{ uri: p.avatar }} style={d.performerAvatar} />
                <View style={d.performerBody}><Text style={d.performerName}>{p.name}</Text><Text style={d.performerRole}>{p.role}</Text></View>
                <Ionicons name="chevron-forward" size={16} color="#3f3f46" />
              </View>
              {idx < event.performers.length - 1 && <View style={d.infoHairline} />}
            </View>
          ))}
        </Animated.View>

        <Animated.View entering={FadeInDown.delay(200).duration(350)} style={d.detailCard}>
          <Text style={d.detailCardTitle}>Ticket Options</Text>
          {event.tiers.map((tier, idx) => (
            <View key={tier.id}>
              <View style={d.tierRow}>
                <View style={d.tierLeft}>
                  <Text style={d.tierName}>{tier.name}</Text>
                  <Text style={d.tierDesc}>{tier.description}</Text>
                  <Text style={d.tierAvail}>{tier.available} remaining</Text>
                </View>
                <Text style={d.tierPrice}>${tier.price}</Text>
              </View>
              {idx < event.tiers.length - 1 && <View style={d.infoHairline} />}
            </View>
          ))}
        </Animated.View>
      </ScrollView>

      <View style={[d.footer, { paddingBottom: insets.bottom + 12 }]}>
        <View style={d.footerInner}>
          <View><Text style={d.footerLabel}>Starting from</Text><Text style={d.footerPrice}>${event.price}</Text></View>
          <Animated.View style={btnStyle}>
            <TouchableOpacity style={d.ctaBtn} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); btnScale.value = withSpring(0.96, {}, () => { btnScale.value = withSpring(1); }); onGetTickets(); }} activeOpacity={0.9}>
              <Text style={d.ctaBtnText}>Get Tickets</Text>
              <Ionicons name="arrow-forward" size={15} color="#fff" />
            </TouchableOpacity>
          </Animated.View>
        </View>
      </View>
    </View>
  );
}

// ─── Checkout Screen ──────────────────────────────────────────────────────────

function CheckoutScreen({ event, onBack, onConfirm }: { event: Event; onBack: () => void; onConfirm: (t: MyTicket) => void }) {
  const insets = useSafeAreaInsets();
  const [selectedTier, setSelectedTier] = useState(event.tiers[0]);
  const [quantity, setQuantity] = useState(1);
  const btnScale = useSharedValue(1);
  const fee = selectedTier.price * quantity * 0.12;
  const total = selectedTier.price * quantity + fee;

  const btnStyle = useAnimatedStyle(() => {
    'worklet';
    return { transform: [{ scale: btnScale.value }] };
  });

  return (
    <View style={[d.flex1, { backgroundColor: '#09090b' }]}>
      <StatusBar barStyle="light-content" />
      <View style={[d.modalHeader, { paddingTop: insets.top + 8 }]}>
        <TouchableOpacity onPress={onBack} style={d.darkBackBtn}>
          <Ionicons name="arrow-back" size={20} color="#fff" />
        </TouchableOpacity>
        <Text style={d.modalTitle}>Select Tickets</Text>
        <View style={{ width: 40 }} />
      </View>

      <ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + 120, gap: 12, padding: 16 }} showsVerticalScrollIndicator={false}>
        <View style={d.coEventCard}>
          <Image source={{ uri: event.image }} style={d.coThumb} />
          <View style={d.coInfo}><Text style={d.coTitle}>{event.title}</Text><Text style={d.coDate}>{event.date} · {event.time}</Text><Text style={d.coVenue}>{event.venue}</Text></View>
        </View>

        <View style={d.coSection}>
          <Text style={d.coSectionTitle}>Choose Your Tier</Text>
          {event.tiers.map(tier => (
            <TouchableOpacity key={tier.id} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setSelectedTier(tier); }} style={[d.tierPick, selectedTier.id === tier.id && d.tierPickActive]} activeOpacity={0.8}>
              <View style={[d.radio, selectedTier.id === tier.id && d.radioActive]}>
                {selectedTier.id === tier.id && <View style={d.radioFill} />}
              </View>
              <View style={d.tierPickBody}>
                <Text style={[d.tierPickName, selectedTier.id === tier.id && d.tierPickNameActive]}>{tier.name}</Text>
                <Text style={d.tierPickDesc}>{tier.description}</Text>
                <Text style={d.tierPickAvail}>{tier.available} remaining</Text>
              </View>
              <Text style={[d.tierPickPrice, selectedTier.id === tier.id && d.tierPickPriceActive]}>${tier.price}</Text>
            </TouchableOpacity>
          ))}
        </View>

        <View style={d.coSection}>
          <Text style={d.coSectionTitle}>Quantity</Text>
          <View style={d.qtyRow}>
            <Text style={d.qtyLabel}>Number of tickets</Text>
            <View style={d.qtyCtrl}>
              <TouchableOpacity style={[d.qtyBtn, quantity === 1 && d.qtyBtnOff]} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setQuantity(p => Math.max(1, p - 1)); }}>
                <Ionicons name="remove" size={16} color={quantity === 1 ? '#3f3f46' : '#fff'} />
              </TouchableOpacity>
              <Text style={d.qtyVal}>{quantity}</Text>
              <TouchableOpacity style={d.qtyBtn} onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); setQuantity(p => Math.min(10, p + 1)); }}>
                <Ionicons name="add" size={16} color="#fff" />
              </TouchableOpacity>
            </View>
          </View>
        </View>

        <View style={d.coSection}>
          <Text style={d.coSectionTitle}>Order Summary</Text>
          <View style={d.summaryRow}><Text style={d.summaryLabel}>{selectedTier.name} × {quantity}</Text><Text style={d.summaryVal}>${(selectedTier.price * quantity).toFixed(2)}</Text></View>
          <View style={d.infoHairline} />
          <View style={d.summaryRow}><Text style={d.summaryLabel}>Service fee (12%)</Text><Text style={d.summaryVal}>${fee.toFixed(2)}</Text></View>
          <View style={d.infoHairline} />
          <View style={d.summaryRow}><Text style={d.summaryTotalLabel}>Total</Text><Text style={d.summaryTotalVal}>${total.toFixed(2)}</Text></View>
        </View>

        <View style={d.coSection}>
          <Text style={d.coSectionTitle}>Payment</Text>
          <View style={d.payRow}>
            <View style={[d.menuIconWrap, { backgroundColor: 'rgba(129,140,248,0.15)' }]}><Ionicons name="card-outline" size={18} color="#818cf8" /></View>
            <View style={d.payBody}><Text style={d.payName}>Visa ending in 4821</Text><Text style={d.paySub}>Expires 09/27</Text></View>
            <TouchableOpacity><Text style={d.changeText}>Change</Text></TouchableOpacity>
          </View>
        </View>
      </ScrollView>

      <View style={[d.footer, { paddingBottom: insets.bottom + 12 }]}>
        <Animated.View style={[d.fullBtn, btnStyle]}>
          <TouchableOpacity style={d.ctaBtn} onPress={() => {
            Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
            btnScale.value = withSpring(0.96, {}, () => { btnScale.value = withSpring(1); });
            const t: MyTicket = { id: `t${Date.now()}`, eventId: event.id, tierName: selectedTier.name, quantity, total, status: 'upcoming', purchaseDate: 'Today' };
            setTimeout(() => onConfirm(t), 160);
          }} activeOpacity={0.9}>
            <Text style={d.ctaBtnText}>Confirm & Pay ${total.toFixed(2)}</Text>
          </TouchableOpacity>
        </Animated.View>
      </View>
    </View>
  );
}

// ─── Confirmation Screen ──────────────────────────────────────────────────────

function ConfirmationScreen({ event, onDone }: { event: Event; onDone: () => void }) {
  const iconScale = useSharedValue(0.5);
  const iconOpacity = useSharedValue(0);
  React.useEffect(() => {
    iconScale.value = withSpring(1, { damping: 11, stiffness: 130 });
    iconOpacity.value = withTiming(1, { duration: 350 });
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  }, []);
  const iconStyle = useAnimatedStyle(() => {
    'worklet';
    return { transform: [{ scale: iconScale.value }], opacity: iconOpacity.value };
  });

  return (
    <View style={[d.flex1, d.confirmScreen]}>
      <StatusBar barStyle="light-content" />
      <Animated.View style={[d.confirmIconWrap, iconStyle]}>
        <View style={d.confirmIconRing}><Ionicons name="checkmark" size={42} color="#fff" /></View>
      </Animated.View>
      <Animated.View entering={FadeInDown.delay(180).duration(350)} style={d.confirmTextBlock}>
        <Text style={d.confirmTitle}>You're In!</Text>
        <Text style={d.confirmSub}>Tickets confirmed and sent to your email</Text>
      </Animated.View>
      <Animated.View entering={FadeInDown.delay(300).duration(350)} style={d.stubCard}>
        <Image source={{ uri: event.heroImage }} style={d.stubImage} />
        <LinearGradient colors={['transparent', 'rgba(0,0,0,0.78)']} style={d.stubGradient} />
        <View style={d.stubImageContent}><Text style={d.stubTitle}>{event.title}</Text><Text style={d.stubSub}>{event.date} · {event.time}</Text></View>
        <View style={d.stubPerf}>
          <View style={d.stubCircleL} /><View style={d.stubDash} /><View style={d.stubCircleR} />
        </View>
        <View style={d.stubBottom}>
          <View><Text style={d.stubMetaLabel}>VENUE</Text><Text style={d.stubMetaValue}>{event.venue}</Text></View>
          <View style={d.stubQR}><Ionicons name="qr-code" size={30} color="#fff" /></View>
        </View>
      </Animated.View>
      <Animated.View entering={FadeInDown.delay(440).duration(350)} style={d.confirmActions}>
        <TouchableOpacity style={d.walletBtn} activeOpacity={0.8} onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}>
          <Ionicons name="wallet-outline" size={17} color="#818cf8" />
          <Text style={d.walletBtnText}>Add to Wallet</Text>
        </TouchableOpacity>
        <TouchableOpacity style={d.doneBtn} onPress={onDone} activeOpacity={0.8}>
          <Text style={d.doneBtnText}>Back to Events</Text>
        </TouchableOpacity>
      </Animated.View>
    </View>
  );
}

// ─── Root ─────────────────────────────────────────────────────────────────────

export default function App() {
  const [activeTab, setActiveTab] = useState<TabName>('explore');
  const [detailScreen, setDetailScreen] = useState<DetailScreen | null>(null);
  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
  const [myTickets, setMyTickets] = useState<MyTicket[]>(INITIAL_MY_TICKETS);
  const upcomingCount = myTickets.filter(t => t.status === 'upcoming').length;

  const handleSelectEvent = (event: Event) => { setSelectedEvent(event); setDetailScreen('detail'); };
  const handleConfirm = (ticket: MyTicket) => { setMyTickets(prev => [ticket, ...prev]); setDetailScreen('confirmation'); };
  const handleDone = () => { setDetailScreen(null); setSelectedEvent(null); setActiveTab('tickets'); };

  if (detailScreen === 'confirmation' && selectedEvent) return <ConfirmationScreen event={selectedEvent} onDone={handleDone} />;
  if (detailScreen === 'checkout' && selectedEvent) return <CheckoutScreen event={selectedEvent} onBack={() => setDetailScreen('detail')} onConfirm={handleConfirm} />;
  if (detailScreen === 'detail' && selectedEvent) return <DetailScreen event={selectedEvent} onBack={() => { setDetailScreen(null); setSelectedEvent(null); }} onGetTickets={() => setDetailScreen('checkout')} />;

  return (
    <View style={d.flex1}>
      <StatusBar barStyle="light-content" />
      <View style={d.flex1}>
        {activeTab === 'explore' && <ExploreTab onSelectEvent={handleSelectEvent} />}
        {activeTab === 'search' && <SearchTab onSelectEvent={handleSelectEvent} />}
        {activeTab === 'tickets' && <TicketsTab myTickets={myTickets} setMyTickets={setMyTickets} onSelectEvent={handleSelectEvent} />}
        {activeTab === 'profile' && <ProfileTab />}
      </View>
      <TabBar activeTab={activeTab} onTabPress={setActiveTab} ticketCount={upcomingCount} />
    </View>
  );
}

// ─── Styles ───────────────────────────────────────────────────────────────────

const d = StyleSheet.create({
  flex1: { flex: 1, backgroundColor: '#09090b' },

  pageHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 16 },
  pageTitle: { fontSize: 28, color: '#fff', fontWeight: '800' },
  greeting: { fontSize: 13, color: '#52525b', fontWeight: '400' },

  exploreHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 12 },
  iconBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' },
  notifDot: { position: 'absolute', top: 9, right: 9, width: 7, height: 7, borderRadius: 3.5, backgroundColor: '#818cf8', borderWidth: 1.5, borderColor: '#09090b' },

  searchBar: { flexDirection: 'row', alignItems: 'center', gap: 10, backgroundColor: '#18181b', borderRadius: 14, marginHorizontal: 20, paddingHorizontal: 14, paddingVertical: 13, marginBottom: 16, borderWidth: 1, borderColor: '#27272a' },
  searchPlaceholder: { fontSize: 14, color: '#3f3f46' },

  catScroll: { paddingHorizontal: 20, gap: 8, paddingBottom: 4 },
  catPill: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 14, paddingVertical: 8, borderRadius: 100, backgroundColor: '#18181b', borderWidth: 1, borderColor: '#27272a' },
  catPillActive: { backgroundColor: '#818cf8', borderColor: '#818cf8' },
  catPillText: { fontSize: 13, color: '#71717a', fontWeight: '500' },
  catPillTextActive: { color: '#09090b', fontWeight: '700' },

  sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 20, marginTop: 24, marginBottom: 12 },
  sectionTitleRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  sectionTitle: { fontSize: 18, color: '#fff', fontWeight: '700' },
  seeAll: { fontSize: 13, color: '#818cf8', fontWeight: '600' },
  countLabel: { fontSize: 13, color: '#3f3f46' },

  featuredScroll: { paddingHorizontal: 20, gap: 16, paddingBottom: 8 },
  featuredCard: { width: SCREEN_WIDTH - 48, height: 240, borderRadius: 20, overflow: 'hidden', backgroundColor: '#18181b' },
  featuredImage: { position: 'absolute', width: '100%', height: '100%' },
  featuredGradient: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 160 },
  featuredContent: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 16 },
  tagsRow: { flexDirection: 'row', gap: 6, marginBottom: 8 },
  tagPill: { backgroundColor: 'rgba(255,255,255,0.18)', borderRadius: 100, paddingHorizontal: 10, paddingVertical: 3 },
  tagText: { fontSize: 11, color: '#fff', fontWeight: '500' },
  featuredTitle: { fontSize: 22, color: '#fff', fontWeight: '700' },
  featuredSubtitle: { fontSize: 13, color: 'rgba(255,255,255,0.65)', marginTop: 2 },
  featuredMeta: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 },
  featuredMetaLeft: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  featuredMetaText: { fontSize: 12, color: 'rgba(255,255,255,0.6)' },
  featuredPrice: { fontSize: 15, color: '#fff', fontWeight: '700' },
  cardSaveBtn: { position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: 17, backgroundColor: 'rgba(0,0,0,0.45)', alignItems: 'center', justifyContent: 'center' },

  hairline: { height: 1, backgroundColor: '#18181b', marginLeft: 20 },

  // Search
  bigSearchWrap: { paddingHorizontal: 20, marginBottom: 24 },
  bigSearchBar: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: '#18181b', borderRadius: 16, paddingHorizontal: 16, paddingVertical: 15, borderWidth: 1, borderColor: '#27272a' },
  bigSearchPlaceholder: { flex: 1, fontSize: 15, color: '#3f3f46' },
  searchSection: { paddingHorizontal: 20, marginBottom: 28 },
  searchSectionTitle: { fontSize: 18, color: '#fff', fontWeight: '700', marginBottom: 12 },
  catGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  catGridItem: { width: (SCREEN_WIDTH - 52) / 2, height: 80, borderRadius: 14, overflow: 'hidden', backgroundColor: '#18181b', justifyContent: 'flex-end' },
  catGridImage: { position: 'absolute', width: '100%', height: '100%' },
  catGridGradient: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 50 },
  catGridLabel: { fontSize: 14, color: '#fff', fontWeight: '700', padding: 10 },
  trendRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 12 },
  trendRank: { width: 20, fontSize: 15, color: '#27272a', fontWeight: '700', textAlign: 'center' },
  trendThumb: { width: 52, height: 52, borderRadius: 10 },
  trendBody: { flex: 1 },
  trendTitle: { fontSize: 14, color: '#fff', fontWeight: '600' },
  trendSub: { fontSize: 12, color: '#52525b', marginTop: 2 },
  trendPrice: { fontSize: 14, color: '#818cf8', fontWeight: '700' },

  // Tickets
  qrBtn: { width: 40, height: 40, borderRadius: 12, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: '#27272a' },
  swipeHint: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginHorizontal: 20, marginBottom: 12 },
  swipeHintText: { fontSize: 11, color: '#3f3f46', fontWeight: '500' },
  filterTabRow: { flexDirection: 'row', marginHorizontal: 20, marginBottom: 20, backgroundColor: '#18181b', borderRadius: 12, padding: 4, borderWidth: 1, borderColor: '#27272a' },
  filterTab: { flex: 1, paddingVertical: 9, borderRadius: 9, alignItems: 'center' },
  filterTabActive: { backgroundColor: '#27272a' },
  filterTabText: { fontSize: 14, color: '#52525b', fontWeight: '600' },
  filterTabTextActive: { color: '#fff' },
  emptyState: { alignItems: 'center', paddingTop: 64, gap: 12 },
  emptyTitle: { fontSize: 18, color: '#3f3f46', fontWeight: '700' },
  emptySubtitle: { fontSize: 14, color: '#27272a', textAlign: 'center', paddingHorizontal: 40 },
  pastTicketRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 14, gap: 12 },
  pastThumb: { width: 56, height: 56, borderRadius: 10 },
  pastBody: { flex: 1, gap: 2 },
  pastTitle: { fontSize: 14, color: '#fff', fontWeight: '600' },
  pastTier: { fontSize: 12, color: '#71717a' },
  pastDate: { fontSize: 11, color: '#52525b' },
  pastTotal: { fontSize: 15, color: '#52525b', fontWeight: '700' },

  // Profile
  profileCard: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingBottom: 20, gap: 14 },
  avatar: { width: 64, height: 64, borderRadius: 32 },
  profileInfo: { flex: 1 },
  profileName: { fontSize: 18, color: '#fff', fontWeight: '700' },
  profileHandle: { fontSize: 13, color: '#52525b', marginTop: 3 },
  editBtn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 10, borderWidth: 1.5, borderColor: '#27272a' },
  editBtnText: { fontSize: 13, color: '#a1a1aa', fontWeight: '600' },
  statsStrip: { flexDirection: 'row', alignItems: 'center', marginHorizontal: 20, marginBottom: 24, backgroundColor: '#18181b', borderRadius: 16, paddingVertical: 16, borderWidth: 1, borderColor: '#27272a' },
  statItem: { flex: 1, alignItems: 'center', gap: 3 },
  statValue: { fontSize: 20, color: '#fff', fontWeight: '700' },
  statLabel: { fontSize: 12, color: '#52525b' },
  statDiv: { width: 1, height: 28, backgroundColor: '#27272a' },
  menuSectionLabel: { fontSize: 12, color: '#3f3f46', fontWeight: '600', letterSpacing: 0.8, textTransform: 'uppercase', paddingHorizontal: 20, marginBottom: 6, marginTop: 8 },
  menuSection: { marginHorizontal: 20, backgroundColor: '#0f0f11', borderRadius: 16, borderWidth: 1, borderColor: '#1c1c1f', marginBottom: 8, overflow: 'hidden' },
  menuRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14, gap: 12 },
  menuIconWrap: { width: 34, height: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
  menuRowLabel: { flex: 1, fontSize: 15, color: '#e4e4e7', fontWeight: '500' },
  menuRowValue: { fontSize: 14, color: '#52525b' },
  menuHairline: { height: 1, backgroundColor: '#1c1c1f', marginLeft: 62 },
  signOutBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, marginHorizontal: 20, marginTop: 16, paddingVertical: 14, borderRadius: 14, borderWidth: 1.5, borderColor: 'rgba(239,68,68,0.25)', backgroundColor: 'rgba(239,68,68,0.08)' },
  signOutText: { fontSize: 15, color: '#ef4444', fontWeight: '600' },

  // Detail
  stickyHeader: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 99, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 10, backgroundColor: '#09090b', borderBottomWidth: 1, borderBottomColor: '#18181b' },
  stickyBackBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' },
  stickyTitle: { flex: 1, fontSize: 16, color: '#fff', fontWeight: '700', textAlign: 'center' },
  detailHero: { height: 380 },
  detailHeroImg: { width: '100%', height: '100%' },
  detailHeroGrad: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 300 },
  floatBack: { position: 'absolute', left: 16, width: 38, height: 38, borderRadius: 19, backgroundColor: 'rgba(0,0,0,0.45)', alignItems: 'center', justifyContent: 'center' },
  heroContent: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20 },
  heroTitle: { fontSize: 26, color: '#fff', fontWeight: '800', lineHeight: 32 },
  heroSub: { fontSize: 14, color: 'rgba(255,255,255,0.65)', marginTop: 4 },
  detailCard: { marginHorizontal: 20, marginTop: 20, backgroundColor: '#0f0f11', borderRadius: 16, borderWidth: 1, borderColor: '#1c1c1f', padding: 16 },
  detailCardTitle: { fontSize: 15, color: '#fff', fontWeight: '700', marginBottom: 14 },
  infoRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
  infoIcon: { width: 34, height: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
  infoBody: { flex: 1 },
  infoLabel: { fontSize: 12, color: '#52525b', fontWeight: '500' },
  infoValue: { fontSize: 14, color: '#fff', fontWeight: '600', marginTop: 2 },
  infoSub: { fontSize: 13, color: '#71717a', marginTop: 2 },
  infoHairline: { height: 1, backgroundColor: '#1c1c1f', marginVertical: 12 },
  mapBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: 'rgba(129,140,248,0.15)', borderRadius: 8 },
  mapBtnText: { fontSize: 13, color: '#818cf8', fontWeight: '600' },
  performerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
  performerAvatar: { width: 44, height: 44, borderRadius: 22 },
  performerBody: { flex: 1 },
  performerName: { fontSize: 14, color: '#fff', fontWeight: '600' },
  performerRole: { fontSize: 12, color: '#52525b', marginTop: 2 },
  tierRow: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' },
  tierLeft: { flex: 1, paddingRight: 12 },
  tierName: { fontSize: 14, color: '#fff', fontWeight: '600' },
  tierDesc: { fontSize: 13, color: '#71717a', marginTop: 2 },
  tierAvail: { fontSize: 12, color: '#f59e0b', fontWeight: '500', marginTop: 4 },
  tierPrice: { fontSize: 16, color: '#818cf8', fontWeight: '700' },
  footer: { position: 'absolute', bottom: 0, left: 0, right: 0, backgroundColor: '#09090b', borderTopWidth: 1, borderTopColor: '#18181b', paddingHorizontal: 20, paddingTop: 12 },
  footerInner: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  footerLabel: { fontSize: 12, color: '#52525b' },
  footerPrice: { fontSize: 24, color: '#fff', fontWeight: '800' },
  ctaBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: '#818cf8', borderRadius: 14, paddingHorizontal: 24, paddingVertical: 14 },
  ctaBtnText: { fontSize: 15, color: '#fff', fontWeight: '700' },
  fullBtn: { flex: 1 },

  // Checkout
  modalHeader: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 12, backgroundColor: '#09090b', borderBottomWidth: 1, borderBottomColor: '#18181b' },
  darkBackBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: '#18181b', alignItems: 'center', justifyContent: 'center' },
  modalTitle: { flex: 1, fontSize: 18, color: '#fff', fontWeight: '700', textAlign: 'center' },
  coEventCard: { flexDirection: 'row', gap: 12, backgroundColor: '#0f0f11', borderRadius: 16, padding: 14, borderWidth: 1, borderColor: '#1c1c1f' },
  coThumb: { width: 64, height: 64, borderRadius: 10 },
  coInfo: { flex: 1, justifyContent: 'center', gap: 3 },
  coTitle: { fontSize: 15, color: '#fff', fontWeight: '700' },
  coDate: { fontSize: 13, color: '#818cf8', fontWeight: '500' },
  coVenue: { fontSize: 12, color: '#52525b' },
  coSection: { backgroundColor: '#0f0f11', borderRadius: 16, padding: 16, borderWidth: 1, borderColor: '#1c1c1f' },
  coSectionTitle: { fontSize: 15, color: '#fff', fontWeight: '700', marginBottom: 14 },
  tierPick: { flexDirection: 'row', alignItems: 'flex-start', gap: 12, paddingVertical: 10, borderRadius: 12, paddingHorizontal: 4 },
  tierPickActive: { backgroundColor: 'rgba(129,140,248,0.08)' },
  radio: { width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: '#3f3f46', marginTop: 2, alignItems: 'center', justifyContent: 'center' },
  radioActive: { borderColor: '#818cf8' },
  radioFill: { width: 10, height: 10, borderRadius: 5, backgroundColor: '#818cf8' },
  tierPickBody: { flex: 1 },
  tierPickName: { fontSize: 14, color: '#71717a', fontWeight: '600' },
  tierPickNameActive: { color: '#fff' },
  tierPickDesc: { fontSize: 12, color: '#3f3f46', marginTop: 2 },
  tierPickAvail: { fontSize: 12, color: '#f59e0b', fontWeight: '500', marginTop: 3 },
  tierPickPrice: { fontSize: 16, color: '#52525b', fontWeight: '700', marginTop: 2 },
  tierPickPriceActive: { color: '#818cf8' },
  qtyRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  qtyLabel: { fontSize: 14, color: '#71717a' },
  qtyCtrl: { flexDirection: 'row', alignItems: 'center', gap: 16 },
  qtyBtn: { width: 36, height: 36, borderRadius: 10, backgroundColor: '#27272a', alignItems: 'center', justifyContent: 'center' },
  qtyBtnOff: { backgroundColor: '#18181b' },
  qtyVal: { fontSize: 18, color: '#fff', fontWeight: '700', minWidth: 24, textAlign: 'center' },
  summaryRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  summaryLabel: { fontSize: 14, color: '#71717a' },
  summaryVal: { fontSize: 14, color: '#a1a1aa', fontWeight: '500' },
  summaryTotalLabel: { fontSize: 15, color: '#fff', fontWeight: '700' },
  summaryTotalVal: { fontSize: 18, color: '#818cf8', fontWeight: '700' },
  payRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
  payBody: { flex: 1 },
  payName: { fontSize: 14, color: '#fff', fontWeight: '600' },
  paySub: { fontSize: 12, color: '#52525b', marginTop: 2 },
  changeText: { fontSize: 13, color: '#818cf8', fontWeight: '600' },

  // Confirmation
  confirmScreen: { alignItems: 'center', justifyContent: 'center', padding: 24 },
  confirmIconWrap: { marginBottom: 24 },
  confirmIconRing: { width: 92, height: 92, borderRadius: 46, backgroundColor: '#22c55e', alignItems: 'center', justifyContent: 'center', shadowColor: '#22c55e', shadowOpacity: 0.4, shadowRadius: 24, shadowOffset: { width: 0, height: 6 } },
  confirmTextBlock: { alignItems: 'center', marginBottom: 28 },
  confirmTitle: { fontSize: 30, color: '#fff', fontWeight: '800', textAlign: 'center' },
  confirmSub: { fontSize: 14, color: '#71717a', textAlign: 'center', marginTop: 8, lineHeight: 20, paddingHorizontal: 20 },
  stubCard: { width: SCREEN_WIDTH - 48, borderRadius: 20, overflow: 'hidden', backgroundColor: '#0f0f11', borderWidth: 1, borderColor: '#27272a' },
  stubImage: { width: '100%', height: 140 },
  stubGradient: { position: 'absolute', top: 80, left: 0, right: 0, height: 80 },
  stubImageContent: { position: 'absolute', bottom: 50, left: 0, right: 0, padding: 14 },
  stubTitle: { fontSize: 18, color: '#fff', fontWeight: '700' },
  stubSub: { fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 3 },
  stubPerf: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#1c1c1f' },
  stubCircleL: { width: 18, height: 18, borderRadius: 9, backgroundColor: '#09090b', marginLeft: -9 },
  stubDash: { flex: 1, height: 1, borderWidth: 1, borderColor: '#27272a', borderStyle: 'dashed' },
  stubCircleR: { width: 18, height: 18, borderRadius: 9, backgroundColor: '#09090b', marginRight: -9 },
  stubBottom: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 14 },
  stubMetaLabel: { fontSize: 10, color: '#52525b', fontWeight: '700', letterSpacing: 0.8 },
  stubMetaValue: { fontSize: 13, color: '#fff', fontWeight: '600', marginTop: 3 },
  stubQR: { width: 52, height: 52, borderRadius: 10, backgroundColor: '#27272a', alignItems: 'center', justifyContent: 'center' },
  confirmActions: { width: '100%', gap: 12, marginTop: 24 },
  walletBtn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8, backgroundColor: 'rgba(129,140,248,0.12)', borderRadius: 14, paddingVertical: 14, borderWidth: 1, borderColor: 'rgba(129,140,248,0.2)' },
  walletBtnText: { fontSize: 15, color: '#818cf8', fontWeight: '600' },
  doneBtn: { alignItems: 'center', paddingVertical: 14, borderRadius: 14, borderWidth: 1.5, borderColor: '#27272a' },
  doneBtnText: { fontSize: 15, color: '#71717a', fontWeight: '600' },
});
Event Ticketing
