import React, { useState, useRef, useCallback } from 'react';
import {
  View, Text, TouchableOpacity, ScrollView, SafeAreaView,
  TextInput, 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 { useExploreData } from '../src/hooks/useExploreData';
import { getPhotoUrl } from '../src/hooks/usePhotoUrl';
import { getPlaceDetailRoute } from '../src/utils/navigation';
import { showToast } from '../src/components/common/Toast';
import Stars from '../src/components/common/Stars';
import PriceLabel from '../src/components/common/PriceLabel';
import Spinner from '../src/components/common/Spinner';

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

// -- Hardcoded data for categories, locations, cuisines --

const DINING_CATEGORIES = [
  { label: 'Fine Dining', photo: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&h=500&fit=crop&q=80' },
  { label: 'Luxury Dining', photo: 'https://images.unsplash.com/photo-1559339352-11d035aa65de?w=400&h=500&fit=crop&q=80' },
  { label: 'Brunch & Club', photo: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=400&h=500&fit=crop&q=80' },
  { label: 'Local Cuisine', photo: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=400&h=500&fit=crop&q=80' },
];

const POPULAR_LOCATIONS = [
  { label: 'Dine at JBR', photo: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=400&h=500&fit=crop&q=80' },
  { label: 'Dine at City Walk', photo: 'https://images.unsplash.com/photo-1582672060674-bc2bd808a8b5?w=400&h=500&fit=crop&q=80' },
  { label: 'Dine at Downtown', photo: 'https://images.unsplash.com/photo-1546412414-e1885259563a?w=400&h=500&fit=crop&q=80' },
  { label: 'Dine at DIFC', photo: 'https://images.unsplash.com/photo-1597659840241-37e2b9c2f55f?w=400&h=500&fit=crop&q=80' },
];

const CUISINES = [
  { label: 'Middle Eastern', emoji: '🧆' },
  { label: 'Chinese', emoji: '🥡' },
  { label: 'Sea food', emoji: '🦞' },
  { label: 'Burgers', emoji: '🍔' },
  { label: 'Italian', emoji: '🍝' },
  { label: 'Japanese', emoji: '🍣' },
];

const FILTER_PILLS = ['Most booked', 'Top rated', 'Dine with a view', 'With boo...'];

const PROMO_PHOTO = 'https://images.unsplash.com/photo-1582719508461-905c673771fd?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());
}

// -- Small card components --

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>
  );
}

function SmallRestaurantCard({ place, onPress }: { place: Place; onPress: () => void }) {
  const photo = getPhotoUrl(place, 300, 400);
  const name = place.displayName?.text || 'Restaurant';
  const type = formatPrimaryType(place.primaryType);
  const rating = place.rating || 0;

  return (
    <PressableCard onPress={onPress} style={{ width: 130 }}>
      <View style={s.smallCard}>
        {photo ? (
          <Image source={{ uri: photo }} style={s.smallCardPhoto} contentFit="cover" transition={300} />
        ) : (
          <View style={[s.smallCardPhoto, { backgroundColor: Colors.cardDarkAlt }]} />
        )}
        <View style={s.smallCardInfo}>
          <Text style={s.smallCardName} numberOfLines={2}>{name}</Text>
          {type ? <Text style={s.smallCardType} numberOfLines={1}>{type}</Text> : null}
          <View style={s.smallCardMeta}>
            <Text style={s.ratingGold}>{rating.toFixed(1)} ★</Text>
            <PriceLabel priceLevel={place.priceLevel} />
          </View>
        </View>
      </View>
    </PressableCard>
  );
}

function GridRestaurantCard({ place, onPress }: { place: Place; onPress: () => void }) {
  const photo = getPhotoUrl(place, 400, 400);
  const name = place.displayName?.text || 'Restaurant';
  const type = formatPrimaryType(place.primaryType);
  const rating = place.rating || 0;
  const isOpen = place.currentOpeningHours?.openNow;

  return (
    <PressableCard onPress={onPress} style={{ width: CARD_W }}>
      <View style={s.gridCard}>
        <View style={s.gridCardPhotoWrap}>
          {photo ? (
            <Image source={{ uri: photo }} style={s.gridCardPhoto} contentFit="cover" transition={300} />
          ) : (
            <View style={[s.gridCardPhoto, { backgroundColor: Colors.cardDarkAlt }]} />
          )}
          {isOpen !== undefined && (
            <View style={[s.statusBadge, isOpen ? s.statusOpen : s.statusClosed]}>
              <Text style={s.statusText}>{isOpen ? 'Open now' : 'Closed'}</Text>
            </View>
          )}
        </View>
        <View style={s.gridCardInfo}>
          <Text style={s.gridCardName} numberOfLines={1}>{name}</Text>
          {type ? <Text style={s.gridCardType} numberOfLines={1}>{type}</Text> : null}
          <View style={s.smallCardMeta}>
            <Text style={s.ratingGold}>{rating.toFixed(1)} ★</Text>
            <PriceLabel priceLevel={place.priceLevel} />
          </View>
        </View>
      </View>
    </PressableCard>
  );
}

// -- Main Screen --

export default function ExploreRestaurantsScreen() {
  const router = useRouter();
  const { user, selectedCity } = useAuth();
  const { restaurants, loading } = useExploreData(selectedCity);
  const firstName = user?.name ? user.name.split(' ')[0] : 'you';

  const [activeFilter, setActiveFilter] = useState(0);
  const [activeDistance, setActiveDistance] = useState(1); // 10km default
  const [showAll, setShowAll] = useState(false);

  const top10 = restaurants.slice(0, 10);
  const gridPlaces = showAll ? restaurants : restaurants.slice(0, 6);
  const nearbyPlaces = restaurants.slice(0, 8);

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

  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}>Restaurants</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 a <Text style={s.heroBold}>table</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}>search restaurants, Location or cuisine</Text>
        </TouchableOpacity>

        {/* Where to next? */}
        <View style={s.section}>
          <Text style={s.sectionTitle}>Where to next?</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
            {DINING_CATEGORIES.map((cat, i) => (
              <PressableCard key={i} onPress={() => showToast(`Searching ${cat.label}...`)} style={{ width: 80 }}>
                <View style={s.catCard}>
                  <Image source={{ uri: cat.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.catLabel}>{cat.label}</Text>
                </View>
              </PressableCard>
            ))}
          </ScrollView>
        </View>

        {/* Top 10 dining spots */}
        <View style={s.section}>
          <Text style={s.sectionTitle}>Top 10 dining spots, one tap away.</Text>
          {loading.restaurants ? (
            <View style={s.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
              {top10.map((place, i) => (
                <SmallRestaurantCard key={place.id || i} place={place} onPress={() => navigateToPlace(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. Dine. */}
        <View style={s.section}>
          <Text style={s.sectionTitleLg}>Tap. Book. Dine.</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)}
                activeOpacity={0.7}
              >
                <Text style={[s.filterPillText, activeFilter === i && s.filterPillTextActive]}>{pill}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
          {loading.restaurants ? (
            <View style={s.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <>
              <View style={s.grid}>
                {gridPlaces.map((place, i) => (
                  <GridRestaurantCard key={place.id || i} place={place} onPress={() => navigateToPlace(place)} />
                ))}
              </View>
              {!showAll && restaurants.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}>SPECIAL 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 */}
        <View style={s.section}>
          <Text style={s.sectionTitle}>Popular locations</Text>
          <Text style={s.sectionSub}>Explore by neighbourhood</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
            {POPULAR_LOCATIONS.map((loc, i) => (
              <PressableCard key={i} onPress={() => showToast(`Exploring ${loc.label}...`)} style={{ width: 130 }}>
                <View style={s.locCard}>
                  <Image source={{ uri: loc.photo }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.8)']} locations={[0.4, 1]} style={StyleSheet.absoluteFillObject} />
                  <Text style={s.locLabel}>{loc.label}</Text>
                </View>
              </PressableCard>
            ))}
          </ScrollView>
        </View>

        {/* Restaurants Close By */}
        <View style={s.section}>
          <View style={s.closeByHeader}>
            <Text style={s.sectionTitle}>Restaurants close by</Text>
            <View style={s.distancePills}>
              {['5km', '10km', '25km'].map((d, i) => (
                <TouchableOpacity
                  key={i}
                  style={[s.distPill, activeDistance === i && s.distPillActive]}
                  onPress={() => setActiveDistance(i)}
                  activeOpacity={0.7}
                >
                  <Text style={[s.distPillText, activeDistance === i && s.distPillTextActive]}>{d}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
          {loading.restaurants ? (
            <View style={s.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
              {nearbyPlaces.map((place, i) => (
                <SmallRestaurantCard key={place.id || `nb-${i}`} place={place} onPress={() => navigateToPlace(place)} />
              ))}
            </ScrollView>
          )}
        </View>

        {/* What's on your mind? */}
        <View style={[s.section, { marginBottom: 40 }]}>
          <Text style={s.sectionTitle}>What's on your mind?</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={s.hScroll}>
            {CUISINES.map((c, i) => (
              <TouchableOpacity key={i} style={s.cuisineItem} activeOpacity={0.7}>
                <View style={s.cuisineCircle}>
                  <Text style={s.cuisineEmoji}>{c.emoji}</Text>
                </View>
                <Text style={s.cuisineLabel} numberOfLines={1}>{c.label}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      </ScrollView>
    </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 },

  // Horizontal scroll
  hScroll: { gap: 10, paddingRight: 16 },

  // Category cards (Where to next)
  catCard: {
    width: 80, height: 100, borderRadius: Radii.md, overflow: 'hidden', justifyContent: 'flex-end',
  },
  catLabel: {
    fontFamily: Fonts.heading, fontSize: 11, fontWeight: '700', color: '#fff',
    padding: 8, lineHeight: 14,
  },

  // Small restaurant card (Top 10 / Nearby)
  smallCard: { width: 130, borderRadius: Radii.md, overflow: 'hidden' },
  smallCardPhoto: { width: 130, height: 100, borderRadius: Radii.md },
  smallCardInfo: { paddingTop: 8, gap: 2 },
  smallCardName: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff', lineHeight: 17 },
  smallCardType: { fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey },
  smallCardMeta: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 },
  ratingGold: { fontFamily: Fonts.body, fontSize: 11, color: Colors.ratingGold, fontWeight: '600' },

  // Grid restaurant card (Tap Book Dine)
  gridCard: { borderRadius: Radii.md, overflow: 'hidden' },
  gridCardPhotoWrap: { borderRadius: Radii.md, overflow: 'hidden' },
  gridCardPhoto: { width: '100%', height: 140, borderRadius: Radii.md },
  statusBadge: {
    position: 'absolute', bottom: 8, left: 8, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 8,
  },
  statusOpen: { backgroundColor: 'rgba(52,199,89,0.9)' },
  statusClosed: { backgroundColor: 'rgba(255,59,48,0.9)' },
  statusText: { fontFamily: Fonts.body, fontSize: 10, fontWeight: '600', color: '#fff' },
  gridCardInfo: { paddingTop: 8, gap: 2 },
  gridCardName: { fontFamily: Fonts.heading, fontSize: 14, fontWeight: '700', color: '#fff' },
  gridCardType: { fontFamily: Fonts.body, fontSize: 12, color: Colors.textGrey },
  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: 250, borderRadius: Radii.lg, 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: '#FF8C42',
    letterSpacing: 1.2, textTransform: 'uppercase',
  },
  promoTitle: { fontFamily: Fonts.heading, fontSize: 22, fontWeight: '700', color: '#fff', lineHeight: 28 },
  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: '#FF8C42', borderRadius: 20, paddingHorizontal: 18, paddingVertical: 10 },
  promoBtnText: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff' },

  // Location cards
  locCard: {
    width: 130, height: 160, borderRadius: Radii.md, overflow: 'hidden', justifyContent: 'flex-end',
  },
  locLabel: {
    fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff', padding: 10, lineHeight: 17,
  },

  // Close by
  closeByHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
  distancePills: { flexDirection: 'row', gap: 6 },
  distPill: {
    paddingHorizontal: 10, paddingVertical: 5, borderRadius: 12,
    borderWidth: 1, borderColor: 'rgba(255,255,255,0.15)',
  },
  distPillActive: { backgroundColor: Colors.brand, borderColor: Colors.brand },
  distPillText: { fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey },
  distPillTextActive: { color: '#fff' },

  // Cuisine circles
  cuisineItem: { alignItems: 'center', width: 80, gap: 6 },
  cuisineCircle: {
    width: 70, height: 70, borderRadius: 35, backgroundColor: Colors.cardDark,
    alignItems: 'center', justifyContent: 'center',
  },
  cuisineEmoji: { fontSize: 28 },
  cuisineLabel: { fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey, textAlign: 'center' },

  // Ask Etera section
  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' },

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