import React, { useState, useRef, useCallback, useMemo } from 'react';
import {
  View, Text, TouchableOpacity, ScrollView, SafeAreaView,
  StyleSheet, Dimensions, Animated,
} from 'react-native';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Fonts, Radii } from '../src/constants/theme';
import { Place } from '../src/types';
import { useAuth } from '../src/context/AuthContext';
import { useSavedItems } from '../src/context/SavedItemsContext';
import { useExploreData } from '../src/hooks/useExploreData';
import { getPhotoUrl } from '../src/hooks/usePhotoUrl';
import { getPlaceDetailRoute } from '../src/utils/navigation';
import { buildSavedItem } from '../src/utils/savedItemHelpers';
import { SavedItem } from '../src/context/SavedItemsContext';
import { getCityFlag } from '../src/constants/cities';
import { showToast } from '../src/components/common/Toast';
import PriceLabel from '../src/components/common/PriceLabel';
import Spinner from '../src/components/common/Spinner';
import SaveToListSheet from '../src/components/SaveToListSheet';

const logo = require('../assets/images/etera-logo.png');
const { width: SCREEN_W } = Dimensions.get('window');
const CARD_W = (SCREEN_W - 32 - 10) / 2;

// ── Seeded random helpers ──

function hashCode(str: string): number {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash |= 0;
  }
  return Math.abs(hash);
}

function seededRandom(seed: number): number {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

// ── Price generation ──

interface PriceInfo {
  price: number;
  originalPrice: number;
  discountPercent: number;
  hasDiscount: boolean;
}

function generateActivityPrice(place: Place): PriceInfo {
  const name = (place.displayName?.text || '').toLowerCase();
  let basePrice = 150;

  if (name.includes('burj khalifa')) basePrice = 2500;
  else if (name.includes('museum')) basePrice = 250;
  else if (name.includes('waterworld') || name.includes('water park')) basePrice = 500;
  else if (name.includes('ferrari')) basePrice = 250;
  else if (name.includes('safari')) basePrice = 2500;
  else if (name.includes('skypool') || name.includes('pool')) basePrice = 240;
  else if (name.includes('aquarium')) basePrice = 2500;
  else if (name.includes('skydive')) basePrice = 1800;
  else if (name.includes('theme park') || name.includes('amusement')) basePrice = 350;
  else if (name.includes('spa') || name.includes('wellness')) basePrice = 400;
  else if (name.includes('cruise') || name.includes('yacht')) basePrice = 600;
  else if (name.includes('tour')) basePrice = 200;

  const seed = hashCode(place.id || name);
  const hasDiscount = seededRandom(seed) < 0.3;
  const discountPercent = hasDiscount ? (seededRandom(seed + 1) < 0.5 ? 15 : 25) : 0;
  const originalPrice = hasDiscount ? Math.round(basePrice * (1 + discountPercent / 100)) : basePrice;

  return { price: basePrice, originalPrice, discountPercent, hasDiscount };
}

function hasInstantConfirmation(placeId: string): boolean {
  return seededRandom(hashCode(placeId || '') + 42) < 0.6;
}

// ── Hardcoded data ──

const CITY_DESTINATIONS = [
  { city: 'Dubai', label: 'Keep Exploring', country: 'Dubai', photo: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=400&h=500&fit=crop&q=80' },
  { city: 'Paris', label: 'France', country: 'France', photo: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=500&fit=crop&q=80' },
  { city: 'Barcelona', label: 'Spain', country: 'Spain', photo: 'https://images.unsplash.com/photo-1583422409516-2895a77efded?w=400&h=500&fit=crop&q=80' },
  { city: 'Rome', label: 'Italy', country: 'Italy', photo: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=400&h=500&fit=crop&q=80' },
];

const AUDIENCE_CATEGORIES = [
  { label: 'For Couples', count: '100+ Activities', photo: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=400&h=500&fit=crop&q=80' },
  { label: 'With Families', count: '145+ Activities', photo: 'https://images.unsplash.com/photo-1511895426328-dc8714191300?w=400&h=500&fit=crop&q=80' },
  { label: 'For Luxe', count: '35+ Activities', photo: 'https://images.unsplash.com/photo-1540541338287-41700207dee6?w=400&h=500&fit=crop&q=80' },
];

const FILTER_PILLS = ['Recommended', 'Landmarks', 'Water Parks', 'Combos'];

const PROMO_PHOTO = 'https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=1200&h=600&fit=crop&q=80';

function formatPrimaryType(type?: string): string {
  if (!type) return '';
  return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}

// ── Pressable wrapper ──

function PressableCard({ children, onPress, style }: { children: React.ReactNode; onPress: () => void; style?: any }) {
  const scale = useRef(new Animated.Value(1)).current;
  return (
    <Animated.View style={[style, { transform: [{ scale }] }]}>
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={onPress}
        onPressIn={() => Animated.spring(scale, { toValue: 0.97, useNativeDriver: true }).start()}
        onPressOut={() => Animated.spring(scale, { toValue: 1, useNativeDriver: true }).start()}
      >
        {children}
      </TouchableOpacity>
    </Animated.View>
  );
}

// ── Top 10 card ──

function Top10Card({
  place, rank, priceInfo, onPress, isFavorited, onFavorite,
}: {
  place: Place; rank: number; priceInfo: PriceInfo;
  onPress: () => void; isFavorited: boolean; onFavorite: () => void;
}) {
  const photo = getPhotoUrl(place, 300, 400);
  const name = place.displayName?.text || 'Activity';
  const rating = place.rating || 0;

  return (
    <PressableCard onPress={onPress} style={{ width: 140 }}>
      <View style={s.top10Card}>
        <View style={s.top10PhotoWrap}>
          {photo ? (
            <Image source={{ uri: photo }} style={s.top10Photo} contentFit="cover" transition={300} />
          ) : (
            <View style={[s.top10Photo, { backgroundColor: Colors.cardDarkAlt }]} />
          )}
          {/* Rank number */}
          <Text style={s.rankOverlay}>{rank}</Text>
          {/* Discount badge */}
          {priceInfo.hasDiscount && (
            <View style={s.discountBadge}>
              <Text style={s.discountBadgeText}>{priceInfo.discountPercent}% off</Text>
            </View>
          )}
          {/* Heart */}
          <TouchableOpacity
            style={s.heartBtn}
            onPress={onFavorite}
            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          >
            <Text style={s.heartIcon}>{isFavorited ? '❤️' : '♡'}</Text>
          </TouchableOpacity>
        </View>
        <View style={s.top10Info}>
          <Text style={s.top10Name} numberOfLines={2}>{name}</Text>
          <Text style={s.ratingGold}>{rating.toFixed(1)} ★</Text>
          <View style={s.priceRow}>
            {priceInfo.hasDiscount && (
              <Text style={s.priceStrike}>AED {priceInfo.originalPrice.toLocaleString()}</Text>
            )}
            <Text style={s.priceNow}>AED {priceInfo.price.toLocaleString()}</Text>
          </View>
        </View>
      </View>
    </PressableCard>
  );
}

// ── Grid card ──

function GridActivityCard({
  place, priceInfo, onPress, isFavorited, onFavorite,
}: {
  place: Place; priceInfo: PriceInfo;
  onPress: () => void; isFavorited: boolean; onFavorite: () => void;
}) {
  const photo = getPhotoUrl(place, 400, 400);
  const name = place.displayName?.text || 'Activity';
  const rating = place.rating || 0;
  const showInstant = hasInstantConfirmation(place.id || '');

  return (
    <PressableCard onPress={onPress} style={{ width: CARD_W }}>
      <View style={s.gridCard}>
        <View style={s.gridPhotoWrap}>
          {photo ? (
            <Image source={{ uri: photo }} style={s.gridPhoto} contentFit="cover" transition={300} />
          ) : (
            <View style={[s.gridPhoto, { backgroundColor: Colors.cardDarkAlt }]} />
          )}
          {/* Heart top-right */}
          <TouchableOpacity
            style={s.gridHeartBtn}
            onPress={onFavorite}
            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          >
            <Ionicons
              name={isFavorited ? 'heart' : 'heart-outline'}
              size={20}
              color={isFavorited ? '#FF3B30' : '#fff'}
            />
          </TouchableOpacity>
          {/* Instant Confirmation */}
          {showInstant && (
            <View style={s.instantBadge}>
              <Text style={s.instantText}>Instant Confirmation</Text>
            </View>
          )}
        </View>
        <View style={s.gridInfo}>
          <Text style={s.gridName} numberOfLines={1}>{name}</Text>
          <Text style={s.ratingGold}>{rating.toFixed(1)} ★</Text>
          <View style={s.priceRow}>
            {priceInfo.hasDiscount && (
              <Text style={s.priceStrike}>AED {priceInfo.originalPrice.toLocaleString()}</Text>
            )}
            <Text style={s.priceNow}>AED {priceInfo.price.toLocaleString()}</Text>
            {priceInfo.hasDiscount && (
              <View style={s.discountPill}>
                <Text style={s.discountPillText}>{priceInfo.discountPercent}% off</Text>
              </View>
            )}
          </View>
        </View>
      </View>
    </PressableCard>
  );
}

// ── Filter logic ──

function filterByCategory(places: Place[], category: string, priceMap: Map<string, PriceInfo>): Place[] {
  switch (category) {
    case 'Landmarks':
      return places.filter(p => {
        const t = (p.primaryType || '').toLowerCase();
        return t.includes('landmark') || t.includes('point_of_interest') || t.includes('monument')
          || t.includes('museum') || t.includes('tourist_attraction');
      });
    case 'Water Parks':
      return places.filter(p => {
        const t = (p.primaryType || '').toLowerCase();
        return t.includes('water_park') || t.includes('aquarium') || t.includes('amusement_park')
          || t.includes('swimming') || t.includes('pool');
      });
    case 'Combos':
      return places.filter(p => {
        const info = priceMap.get(p.id || '');
        return info?.hasDiscount;
      });
    default:
      return places;
  }
}

// ── Main Screen ──

export default function ExploreExperiencesScreen() {
  const router = useRouter();
  const { user, selectedCity } = useAuth();
  const { isItemSaved } = useSavedItems();
  const firstName = user?.name ? user.name.split(' ')[0] : 'you';

  const [activeCityIdx, setActiveCityIdx] = useState(0);
  const [activeFilter, setActiveFilter] = useState(0);
  const [showAll, setShowAll] = useState(false);
  const [saveSheetItem, setSaveSheetItem] = useState<SavedItem | null>(null);

  // Use the selected city from city cards, or fallback to auth selectedCity
  const cityDestinations = useMemo(() => {
    const destinations = [...CITY_DESTINATIONS];
    destinations[0] = { ...destinations[0], city: selectedCity, label: 'Keep Exploring', country: selectedCity };
    return destinations;
  }, [selectedCity]);

  const activeCity = cityDestinations[activeCityIdx]?.city || selectedCity;
  const { experiences, loading } = useExploreData(activeCity);

  // Generate prices once per place list (memoized)
  const priceMap = useMemo(() => {
    const map = new Map<string, PriceInfo>();
    experiences.forEach(p => {
      map.set(p.id || '', generateActivityPrice(p));
    });
    return map;
  }, [experiences]);

  const top10 = experiences.slice(0, 10);
  const filteredPlaces = filterByCategory(experiences, FILTER_PILLS[activeFilter], priceMap);
  const gridPlaces = showAll ? filteredPlaces : filteredPlaces.slice(0, 6);

  const navigateToPlace = useCallback((place: Place) => {
    router.push({ pathname: getPlaceDetailRoute(place), params: { place: JSON.stringify(place) } });
  }, [router]);

  const handleFavorite = useCallback((place: Place) => {
    setSaveSheetItem(buildSavedItem(place));
  }, []);

  return (
    <SafeAreaView style={s.safe}>
      {/* Header */}
      <View style={s.header}>
        <TouchableOpacity style={s.backBtn} onPress={() => router.back()}>
          <Ionicons name="chevron-back" size={20} color="#fff" />
        </TouchableOpacity>
        <View style={s.headerPill}>
          <Text style={s.headerPillText}>Activities</Text>
        </View>
        <View style={{ width: 36 }} />
      </View>

      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={s.scrollContent}>
        {/* Hero */}
        <View style={s.section}>
          <Text style={s.heroTitle}>
            Want to reserve an <Text style={s.heroBold}>activity</Text>?
          </Text>
          <Text style={s.heroSub}>Reserve with ease — no calls, no hassle</Text>
        </View>

        {/* Search Bar */}
        <TouchableOpacity style={s.searchBar} activeOpacity={0.7} onPress={() => router.push('/(tabs)')}>
          <Ionicons name="search" size={18} color={Colors.textGrey} />
          <Text style={s.searchPlaceholder}>experiences, Location or cities</Text>
        </TouchableOpacity>

        {/* Where to next? — City cards */}
        <View style={s.section}>
          <Text style={s.sectionTitle}>Where to next?</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
            {cityDestinations.map((dest, i) => (
              <PressableCard key={i} onPress={() => setActiveCityIdx(i)} style={{ width: 80 }}>
                <View style={[s.cityCard, activeCityIdx === i && s.cityCardActive]}>
                  <Image source={{ uri: dest.photo }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} locations={[0.3, 1]} style={StyleSheet.absoluteFillObject} />
                  <Text style={s.cityLabel}>{dest.label}</Text>
                </View>
              </PressableCard>
            ))}
          </ScrollView>
        </View>

        {/* Top 10 places to visit */}
        <View style={s.section}>
          <Text style={s.sectionTitle}>Top 10 places to visit, one tap away.</Text>
          {loading.experiences ? (
            <View style={s.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
              {top10.map((place, i) => (
                <Top10Card
                  key={place.id || i}
                  place={place}
                  rank={i + 1}
                  priceInfo={priceMap.get(place.id || '') || { price: 150, originalPrice: 150, discountPercent: 0, hasDiscount: false }}
                  onPress={() => navigateToPlace(place)}
                  isFavorited={isItemSaved(place.id || '')}
                  onFavorite={() => handleFavorite(place)}
                />
              ))}
            </ScrollView>
          )}
        </View>

        {/* Ask Etera */}
        <View style={[s.section, s.askEteraCard]}>
          <Text style={s.askEteraHeading}>Ask etera ✨</Text>
          <View style={s.chatPreview}>
            <View style={s.bubbleLeft}>
              <Text style={s.bubbleText}>Book me a ticket for Yas Waterworld</Text>
            </View>
            <View style={s.logoWrap}>
              <Image source={logo} style={s.logoImg} resizeMode="contain" />
            </View>
            <View style={s.bubbleRight}>
              <Text style={s.bubbleText}>Get me kid-friendly activities for today</Text>
            </View>
          </View>
          <Text style={s.askEteraSub}>
            Looking for adventure or something relaxing, {firstName}? I'll find the ideal experience for you.
          </Text>
          <TouchableOpacity style={s.askBtn} activeOpacity={0.7} onPress={() => router.push('/(tabs)')}>
            <Text style={s.askBtnText}>Ask Anything ✨</Text>
          </TouchableOpacity>
        </View>

        {/* Tap. Book. Enjoy. */}
        <View style={s.section}>
          <Text style={s.sectionTitleLg}>Tap. Book. Enjoy.</Text>
          <Text style={s.sectionSub}>Recommended by us</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.filterRow}>
            {FILTER_PILLS.map((pill, i) => (
              <TouchableOpacity
                key={i}
                style={[s.filterPill, activeFilter === i && s.filterPillActive]}
                onPress={() => { setActiveFilter(i); setShowAll(false); }}
                activeOpacity={0.7}
              >
                <Text style={[s.filterPillText, activeFilter === i && s.filterPillTextActive]}>{pill}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
          {loading.experiences ? (
            <View style={s.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <>
              <View style={s.grid}>
                {gridPlaces.map((place, i) => (
                  <GridActivityCard
                    key={place.id || i}
                    place={place}
                    priceInfo={priceMap.get(place.id || '') || { price: 150, originalPrice: 150, discountPercent: 0, hasDiscount: false }}
                    onPress={() => navigateToPlace(place)}
                    isFavorited={isItemSaved(place.id || '')}
                    onFavorite={() => handleFavorite(place)}
                  />
                ))}
              </View>
              {!showAll && filteredPlaces.length > 6 && (
                <TouchableOpacity style={s.showMoreBtn} onPress={() => setShowAll(true)} activeOpacity={0.7}>
                  <Text style={s.showMoreText}>Show more</Text>
                </TouchableOpacity>
              )}
            </>
          )}
        </View>

        {/* Promo Banner */}
        <View style={s.promoWrap}>
          <Image source={{ uri: PROMO_PHOTO }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
          <LinearGradient colors={['transparent', 'rgba(0,0,0,0.85)']} locations={[0.2, 1]} style={StyleSheet.absoluteFillObject} />
          <View style={s.promoContent}>
            <Text style={s.promoLabel}>OFFER</Text>
            <Text style={s.promoTitle}>20% off your first 3 reservations</Text>
            <View style={s.promoBottom}>
              <Text style={s.promoDesc}>Dine at handpicked spots and taste the city's best.</Text>
              <TouchableOpacity style={s.promoBtn} activeOpacity={0.7} onPress={() => router.push('/(tabs)')}>
                <Text style={s.promoBtnText}>Book Now</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {/* Popular locations — audience categories */}
        <View style={[s.section, { marginBottom: 40 }]}>
          <View style={s.sectionHeaderRow}>
            <View>
              <Text style={s.sectionTitle}>Popular locations</Text>
              <Text style={s.sectionSub}>Explore by neighborhood</Text>
            </View>
            <TouchableOpacity activeOpacity={0.7} onPress={() => showToast('More locations coming soon')}>
              <Text style={s.seeAllLink}>See All</Text>
            </TouchableOpacity>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
            {AUDIENCE_CATEGORIES.map((cat, i) => (
              <PressableCard key={i} onPress={() => showToast(`Exploring ${cat.label}...`)} style={{ width: 200 }}>
                <View style={s.audienceCard}>
                  <Image source={{ uri: cat.photo }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.75)']} locations={[0.4, 1]} style={StyleSheet.absoluteFillObject} />
                  <View style={s.audienceContent}>
                    <Text style={s.audienceLabel}>{cat.label}</Text>
                    <Text style={s.audienceCount}>{cat.count}</Text>
                  </View>
                </View>
              </PressableCard>
            ))}
          </ScrollView>
        </View>
      </ScrollView>

      <SaveToListSheet
        visible={saveSheetItem !== null}
        onClose={() => setSaveSheetItem(null)}
        item={saveSheetItem}
      />
    </SafeAreaView>
  );
}

// ── Styles ──

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.bgDark },
  header: {
    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
    paddingHorizontal: 16, height: 48,
  },
  backBtn: {
    width: 36, height: 36, borderRadius: 18, backgroundColor: Colors.cardDark,
    alignItems: 'center', justifyContent: 'center',
  },
  headerPill: { backgroundColor: Colors.cardDark, paddingHorizontal: 16, paddingVertical: 6, borderRadius: 14 },
  headerPillText: { fontFamily: Fonts.heading, fontSize: 14, fontWeight: '600', color: '#fff' },
  scrollContent: { paddingBottom: 32 },
  section: { paddingHorizontal: 16, marginBottom: 24 },

  // Hero
  heroTitle: { fontFamily: Fonts.heading, fontSize: 28, color: '#fff', lineHeight: 36, marginBottom: 6 },
  heroBold: { fontWeight: '800' },
  heroSub: { fontFamily: Fonts.body, fontSize: 14, color: Colors.textGrey },

  // Search
  searchBar: {
    flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.cardDark,
    borderRadius: Radii.md, height: 44, paddingHorizontal: 14, marginHorizontal: 16, marginBottom: 24, gap: 10,
  },
  searchPlaceholder: { fontFamily: Fonts.body, fontSize: 14, color: Colors.textGrey },

  // Section titles
  sectionTitle: { fontFamily: Fonts.heading, fontSize: 18, fontWeight: '700', color: '#fff', marginBottom: 12 },
  sectionTitleLg: { fontFamily: Fonts.heading, fontSize: 20, fontWeight: '800', color: '#fff', marginBottom: 4 },
  sectionSub: { fontFamily: Fonts.body, fontSize: 13, color: Colors.textGrey, marginBottom: 12 },
  sectionHeaderRow: {
    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4,
  },
  seeAllLink: { fontFamily: Fonts.body, fontSize: 13, color: '#6C5CE7', fontWeight: '600', marginTop: 2 },
  hScroll: { gap: 10, paddingRight: 16 },

  // City cards (Where to next)
  cityCard: {
    width: 80, height: 100, borderRadius: Radii.md, overflow: 'hidden', justifyContent: 'flex-end',
    borderWidth: 2, borderColor: 'transparent',
  },
  cityCardActive: { borderColor: '#6C5CE7' },
  cityLabel: {
    fontFamily: Fonts.heading, fontSize: 10, fontWeight: '700', color: '#fff',
    padding: 6, lineHeight: 13,
  },

  // Top 10 card
  top10Card: { width: 140, borderRadius: Radii.md, overflow: 'hidden' },
  top10PhotoWrap: { width: 140, height: 110, borderRadius: Radii.md, overflow: 'hidden' },
  top10Photo: { width: 140, height: 110 },
  rankOverlay: {
    position: 'absolute', bottom: 6, left: 8,
    fontFamily: Fonts.heading, fontSize: 32, fontWeight: '900', color: 'rgba(255,255,255,0.3)',
  },
  discountBadge: {
    position: 'absolute', top: 6, left: 6,
    backgroundColor: '#FFD60A', paddingHorizontal: 7, paddingVertical: 3, borderRadius: 8,
  },
  discountBadgeText: { fontFamily: Fonts.body, fontSize: 10, fontWeight: '700', color: '#1A1A2E' },
  heartBtn: { position: 'absolute', top: 6, right: 6 },
  heartIcon: {
    fontSize: 20, color: '#fff',
    textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2,
  },
  top10Info: { paddingTop: 8, gap: 2 },
  top10Name: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff', lineHeight: 17 },
  ratingGold: { fontFamily: Fonts.body, fontSize: 11, color: Colors.ratingGold, fontWeight: '600' },
  priceRow: { flexDirection: 'row', alignItems: 'center', gap: 4, flexWrap: 'wrap', marginTop: 2 },
  priceStrike: {
    fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey,
    textDecorationLine: 'line-through',
  },
  priceNow: { fontFamily: Fonts.heading, fontSize: 12, fontWeight: '700', color: '#fff' },

  // Grid card
  gridCard: { borderRadius: Radii.md, overflow: 'hidden' },
  gridPhotoWrap: { borderRadius: Radii.md, overflow: 'hidden', height: 150 },
  gridPhoto: { width: '100%', height: 150 },
  gridHeartBtn: { position: 'absolute', top: 8, right: 8 },
  instantBadge: {
    position: 'absolute', bottom: 8, left: 8,
    backgroundColor: '#34C759', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 8,
  },
  instantText: { fontFamily: Fonts.body, fontSize: 10, fontWeight: '600', color: '#fff' },
  gridInfo: { paddingTop: 8, gap: 2 },
  gridName: { fontFamily: Fonts.heading, fontSize: 14, fontWeight: '700', color: '#fff' },
  discountPill: {
    backgroundColor: '#34C759', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 6,
  },
  discountPillText: { fontFamily: Fonts.body, fontSize: 9, fontWeight: '700', color: '#fff' },
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10, marginTop: 12 },
  showMoreBtn: {
    alignSelf: 'center', marginTop: 16, paddingHorizontal: 24, paddingVertical: 10,
    borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)',
  },
  showMoreText: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '600', color: '#fff' },

  // Filter pills
  filterRow: { gap: 8, marginBottom: 4, paddingRight: 16 },
  filterPill: {
    paddingHorizontal: 14, paddingVertical: 8, borderRadius: 20,
    borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)',
  },
  filterPillActive: { backgroundColor: Colors.cardDark, borderColor: Colors.cardDark },
  filterPillText: { fontFamily: Fonts.body, fontSize: 13, color: Colors.textGrey },
  filterPillTextActive: { color: '#fff' },

  // Promo
  promoWrap: {
    marginHorizontal: 16, height: 280, borderRadius: 16, overflow: 'hidden', marginBottom: 24,
  },
  promoContent: { flex: 1, padding: 18, justifyContent: 'flex-end', gap: 6, zIndex: 1 },
  promoLabel: {
    fontFamily: Fonts.label, fontSize: 10, fontWeight: '700', color: '#FFD60A',
    letterSpacing: 1.2, textTransform: 'uppercase',
  },
  promoTitle: { fontFamily: Fonts.heading, fontSize: 24, fontWeight: '700', color: '#fff', lineHeight: 30 },
  promoBottom: { flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 4 },
  promoDesc: { flex: 1, fontFamily: Fonts.body, fontSize: 13, color: 'rgba(255,255,255,0.6)', marginRight: 12 },
  promoBtn: { backgroundColor: '#2DD4A8', borderRadius: 20, paddingHorizontal: 18, paddingVertical: 10 },
  promoBtnText: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff' },

  // Audience cards (Popular locations)
  audienceCard: {
    width: 200, height: 250, borderRadius: Radii.md, overflow: 'hidden', justifyContent: 'flex-end',
  },
  audienceContent: { padding: 14, gap: 2 },
  audienceLabel: { fontFamily: Fonts.heading, fontSize: 16, fontWeight: '700', color: '#fff' },
  audienceCount: { fontFamily: Fonts.body, fontSize: 12, color: 'rgba(255,255,255,0.7)' },

  // Ask Etera
  askEteraCard: {
    backgroundColor: '#111118', borderRadius: Radii.lg, padding: 16, alignItems: 'center',
    marginHorizontal: 16, paddingHorizontal: 16,
  },
  askEteraHeading: {
    fontFamily: Fonts.heading, fontSize: 15, fontWeight: '700', color: '#fff', textAlign: 'center', marginBottom: 10,
  },
  chatPreview: { width: '100%', alignItems: 'center', marginBottom: 10 },
  bubbleLeft: {
    alignSelf: 'flex-start', backgroundColor: Colors.cardDark, borderRadius: 12,
    paddingHorizontal: 14, paddingVertical: 10, maxWidth: '55%', marginBottom: -8, zIndex: 1,
  },
  logoWrap: { zIndex: 2, alignSelf: 'center' },
  logoImg: { width: 50, height: 50 },
  bubbleRight: {
    alignSelf: 'flex-end', backgroundColor: Colors.cardDark, borderRadius: 12,
    paddingHorizontal: 14, paddingVertical: 10, maxWidth: '55%', marginTop: -8, zIndex: 1,
  },
  bubbleText: { fontFamily: Fonts.body, fontSize: 12, color: '#fff', lineHeight: 17 },
  askEteraSub: {
    fontFamily: Fonts.body, fontSize: 13, color: Colors.textMuted, textAlign: 'center',
    lineHeight: 18, paddingHorizontal: 12, marginBottom: 10,
  },
  askBtn: { backgroundColor: Colors.brand, borderRadius: 20, paddingHorizontal: 24, paddingVertical: 10 },
  askBtnText: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff' },

  spinnerWrap: { alignItems: 'center', paddingVertical: 30 },
});