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 { showToast } from '../src/components/common/Toast';
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');

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

// ── Hotel pricing ──

interface HotelPriceInfo {
  nightly: number;
  total: number;
  originalPrice: number;
  discountPercent: number;
  hasDiscount: boolean;
  fewLeft: boolean;
  tags: string[];
}

const ALL_TAGS = [
  { label: '🍳 Breakfast Includes', chance: 0.6 },
  { label: '🆓 Free cancellation', chance: 0.4 },
  { label: '🏊 Pool', chance: 0.5 },
  { label: '📶 Free WiFi', chance: 0.8 },
  { label: '🅿️ Free parking', chance: 0.3 },
  { label: '💆 Spa', chance: 0.4 },
];

function generateHotelPrice(place: Place): HotelPriceInfo {
  const rating = place.rating || 3.5;
  const seed = hashCode(place.id || place.displayName?.text || '');

  let baseNightly: number;
  switch (place.priceLevel) {
    case 'PRICE_LEVEL_INEXPENSIVE': baseNightly = 250; break;
    case 'PRICE_LEVEL_MODERATE': baseNightly = 600; break;
    case 'PRICE_LEVEL_EXPENSIVE': baseNightly = 1500; break;
    case 'PRICE_LEVEL_VERY_EXPENSIVE': baseNightly = 2800; break;
    default: baseNightly = Math.round(rating * 300); break;
  }

  // Variance ±15% seeded
  const variance = 0.85 + seededRandom(seed) * 0.3;
  const nightly = Math.round(baseNightly * variance);

  // Tax 12% Dubai tourism
  const total = Math.round(nightly * 1.12);

  // Discount (25% chance)
  const hasDiscount = seededRandom(seed + 1) < 0.25;
  const discountPercent = hasDiscount ? (seededRandom(seed + 2) < 0.5 ? 15 : 25) : 0;
  const originalPrice = hasDiscount ? Math.round(nightly * (1 + discountPercent / 100)) : nightly;

  // Urgency (30% chance)
  const fewLeft = seededRandom(seed + 3) < 0.3;

  // Tags — pick seeded, max 2
  const tags: string[] = [];
  ALL_TAGS.forEach((tag, i) => {
    if (seededRandom(seed + 10 + i) < tag.chance) tags.push(tag.label);
  });

  return { nightly, total, originalPrice, discountPercent, hasDiscount, fewLeft, tags: tags.slice(0, 2) };
}

function getRatingText(rating: number): string {
  if (rating >= 4.8) return 'Exceptional';
  if (rating >= 4.5) return 'Very good';
  if (rating >= 4.0) return 'Good';
  if (rating >= 3.5) return 'Pleasant';
  return 'Fair';
}

// ── Hardcoded data ──

const DESTINATIONS = [
  { name: 'ICELAND', subtitle: 'LAND OF FIRE AND ICE', deals: 32, city: 'Reykjavik', photo: 'https://images.unsplash.com/photo-1504829857797-ddff29c27927?w=600&h=400&fit=crop&q=80' },
  { name: 'BALI', subtitle: 'ISLAND PARADISE', deals: 45, city: 'Bali', photo: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=600&h=400&fit=crop&q=80' },
  { name: 'DUBAI', subtitle: 'CITY OF GOLD', deals: 128, city: 'Dubai', photo: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=600&h=400&fit=crop&q=80' },
  { name: 'PARIS', subtitle: 'CITY OF LIGHTS', deals: 67, city: 'Paris', photo: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=600&h=400&fit=crop&q=80' },
  { name: 'MALDIVES', subtitle: 'TROPICAL ESCAPE', deals: 28, city: 'Maldives', photo: 'https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=600&h=400&fit=crop&q=80' },
  { name: 'TOKYO', subtitle: 'NEON & TRADITION', deals: 54, city: 'Tokyo', photo: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=600&h=400&fit=crop&q=80' },
];

const POPULAR_CATEGORIES = [
  { prefix: 'For', name: 'Spa lovers', count: '100+ hotels', photo: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=500&h=600&fit=crop&q=80' },
  { prefix: 'With', name: 'beach front', count: '100+ hotels', photo: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=500&h=600&fit=crop&q=80' },
  { prefix: 'For', name: 'Luxe', count: '35+ hotels', photo: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=500&h=600&fit=crop&q=80' },
];

const FILTER_PILLS = ['Recommended', 'Nature', 'Stunning views', 'Child friendly'];

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

// ── Filter logic ──

function filterByCategory(places: Place[], category: string): Place[] {
  switch (category) {
    case 'Nature':
      return places.filter(p => {
        const t = (p.primaryType || '').toLowerCase();
        const n = (p.displayName?.text || '').toLowerCase();
        return t.includes('resort') || n.includes('resort') || n.includes('nature') || n.includes('garden') || n.includes('park');
      });
    case 'Stunning views':
      return places.filter(p => {
        const n = (p.displayName?.text || '').toLowerCase();
        return n.includes('tower') || n.includes('view') || n.includes('sky') || n.includes('rooftop') || n.includes('panoram') || (p.rating || 0) >= 4.5;
      });
    case 'Child friendly':
      return places.filter(p => {
        const n = (p.displayName?.text || '').toLowerCase();
        return n.includes('family') || n.includes('resort') || n.includes('suite') || n.includes('apartment');
      });
    default:
      return places;
  }
}

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

// ── Destination card (magazine-style) ──

function DestinationCard({ dest, isActive, onPress }: {
  dest: typeof DESTINATIONS[number]; isActive: boolean; onPress: () => void;
}) {
  return (
    <PressableCard onPress={onPress} style={{ width: 200 }}>
      <View style={[st.destCard, isActive && st.destCardActive]}>
        <Image source={{ uri: dest.photo }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
        <LinearGradient
          colors={['rgba(0,0,0,0.1)', 'rgba(0,0,0,0.7)']}
          locations={[0.2, 1]}
          style={StyleSheet.absoluteFillObject}
        />
        <View style={st.destContent}>
          <Text style={st.destSubtitle}>{dest.subtitle}</Text>
          <Text style={st.destName}>{dest.name}</Text>
          <Text style={st.destDeals}>{dest.deals} Deals</Text>
        </View>
      </View>
    </PressableCard>
  );
}

// ── Top 10 hotel card ──

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

  return (
    <PressableCard onPress={onPress} style={{ width: 140 }}>
      <View style={st.top10Card}>
        <View style={st.top10PhotoWrap}>
          {photo ? (
            <Image source={{ uri: photo }} style={st.top10Photo} contentFit="cover" transition={300} />
          ) : (
            <View style={[st.top10Photo, { backgroundColor: Colors.cardDarkAlt }]} />
          )}
          {/* Rank */}
          <Text style={st.rankOverlay}>{rank}</Text>
          {/* Discount badge */}
          {priceInfo.hasDiscount && (
            <View style={st.discountBadge}>
              <Text style={st.discountBadgeText}>{priceInfo.discountPercent}% off</Text>
            </View>
          )}
          {/* Bookmark/save icon */}
          <TouchableOpacity
            style={st.bookmarkBtn}
            onPress={onFavorite}
            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          >
            <Ionicons
              name={isFavorited ? 'bookmark' : 'bookmark-outline'}
              size={18}
              color="#fff"
            />
          </TouchableOpacity>
        </View>
        <View style={st.top10Info}>
          <Text style={st.top10Name} numberOfLines={2}>{name}</Text>
          <Text style={st.ratingGold}>{rating.toFixed(1)} ★</Text>
          <View style={st.priceRow}>
            {priceInfo.hasDiscount && (
              <Text style={st.priceStrike}>AED {priceInfo.originalPrice.toLocaleString()}</Text>
            )}
            <Text style={st.priceNow}>AED {priceInfo.nightly.toLocaleString()}</Text>
          </View>
        </View>
      </View>
    </PressableCard>
  );
}

// ── Horizontal hotel listing card (booking.com style) ──

function HotelListingCard({
  place, priceInfo, onPress, isFavorited, onFavorite,
}: {
  place: Place; priceInfo: HotelPriceInfo;
  onPress: () => void; isFavorited: boolean; onFavorite: () => void;
}) {
  const photo = getPhotoUrl(place, 200, 200);
  const name = place.displayName?.text || 'Hotel';
  const rating = place.rating || 0;
  const ratingLabel = getRatingText(rating);
  const address = place.formattedAddress?.split(',')[0] || '';

  return (
    <PressableCard onPress={onPress} style={{ marginBottom: 12 }}>
      <View style={st.listingCard}>
        {/* Left: Photo */}
        <View style={st.listingPhotoWrap}>
          {photo ? (
            <Image source={{ uri: photo }} style={st.listingPhoto} contentFit="cover" transition={300} />
          ) : (
            <View style={[st.listingPhoto, { backgroundColor: Colors.cardDarkAlt }]} />
          )}
        </View>

        {/* Right: Details */}
        <View style={st.listingDetails}>
          {/* Name + heart */}
          <View style={st.listingNameRow}>
            <Text style={st.listingName} numberOfLines={1}>{name}</Text>
            <TouchableOpacity
              onPress={onFavorite}
              hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
            >
              <Ionicons
                name={isFavorited ? 'heart' : 'heart-outline'}
                size={18}
                color={isFavorited ? '#FF3B30' : Colors.textGrey}
              />
            </TouchableOpacity>
          </View>

          {/* Rating */}
          <View style={st.listingRatingRow}>
            <Text style={st.listingRatingNum}>{rating.toFixed(2)}</Text>
            <Ionicons name="checkmark-circle" size={13} color="#34C759" />
            <Text style={st.listingRatingText}>{ratingLabel}</Text>
          </View>

          {/* Location */}
          {address ? (
            <View style={st.listingLocationRow}>
              <Ionicons name="location-outline" size={12} color={Colors.textGrey} />
              <Text style={st.listingAddress} numberOfLines={1}>{address}</Text>
            </View>
          ) : null}

          {/* Tags */}
          {priceInfo.tags.length > 0 && (
            <View style={st.listingTagsRow}>
              {priceInfo.tags.map((tag, i) => (
                <View key={i} style={st.tagPill}>
                  <Text style={st.tagText} numberOfLines={1}>{tag}</Text>
                </View>
              ))}
            </View>
          )}

          {/* Price */}
          <View style={st.listingPriceBlock}>
            <Text style={st.listingPriceLarge}>AED {priceInfo.nightly.toLocaleString()}</Text>
            <Text style={st.listingTotal}>Total {priceInfo.total.toLocaleString()}</Text>
            <Text style={st.listingTaxNote}>Includes taxes & fees</Text>
          </View>

          {/* Urgency */}
          {priceInfo.fewLeft && (
            <Text style={st.urgencyText}>🔥 We have a few left</Text>
          )}
        </View>
      </View>
    </PressableCard>
  );
}

// ── Main Screen ──

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

  const [activeDestIdx, setActiveDestIdx] = useState(() => {
    const idx = DESTINATIONS.findIndex(d => d.city === selectedCity);
    return idx >= 0 ? idx : 2; // default to Dubai
  });
  const [activeFilter, setActiveFilter] = useState(0);
  const [showAll, setShowAll] = useState(false);
  const [saveSheetItem, setSaveSheetItem] = useState<SavedItem | null>(null);

  const activeCity = DESTINATIONS[activeDestIdx]?.city || selectedCity;
  const { hotels, loading } = useExploreData(activeCity);

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

  const top10 = hotels.slice(0, 10);
  const filteredPlaces = filterByCategory(hotels, FILTER_PILLS[activeFilter]);
  const listPlaces = showAll ? filteredPlaces : filteredPlaces.slice(0, 4);

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

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

  const defaultPrice: HotelPriceInfo = {
    nightly: 450, total: 504, originalPrice: 450, discountPercent: 0,
    hasDiscount: false, fewLeft: false, tags: [],
  };

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

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

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

        {/* All Destinations */}
        <View style={st.section}>
          <Text style={st.sectionTitle}>All Destinations</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={st.hScroll}>
            {DESTINATIONS.map((dest, i) => (
              <DestinationCard
                key={i}
                dest={dest}
                isActive={activeDestIdx === i}
                onPress={() => setActiveDestIdx(i)}
              />
            ))}
          </ScrollView>
        </View>

        {/* Top 10 stays */}
        <View style={st.section}>
          <Text style={st.sectionTitle}>Top 10 stays, one tap away.</Text>
          {loading.hotels ? (
            <View style={st.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={st.hScroll}>
              {top10.map((place, i) => (
                <Top10HotelCard
                  key={place.id || i}
                  place={place}
                  rank={i + 1}
                  priceInfo={priceMap.get(place.id || '') || defaultPrice}
                  onPress={() => navigateToPlace(place)}
                  isFavorited={isItemSaved(place.id || '')}
                  onFavorite={() => handleFavorite(place)}
                />
              ))}
            </ScrollView>
          )}
        </View>

        {/* Ask Etera */}
        <View style={[st.section, st.askEteraCard]}>
          <Text style={st.askEteraHeading}>Ask etera ✨</Text>
          <View style={st.chatPreview}>
            <View style={st.bubbleLeft}>
              <Text style={st.bubbleText}>Book me a ticket for Yas Waterworld</Text>
            </View>
            <View style={st.logoWrap}>
              <Image source={logo} style={st.logoImg} resizeMode="contain" />
            </View>
            <View style={st.bubbleRight}>
              <Text style={st.bubbleText}>Get me kid-friendly activities for today</Text>
            </View>
          </View>
          <Text style={st.askEteraSub}>
            Need the perfect stay, {firstName}? I'll find the best hotel for your trip.
          </Text>
          <TouchableOpacity style={st.askBtn} activeOpacity={0.7} onPress={() => router.push('/(tabs)')}>
            <Text style={st.askBtnText}>Ask Anything ✨</Text>
          </TouchableOpacity>
        </View>

        {/* Explore more places */}
        <View style={st.section}>
          <Text style={st.sectionTitleLg}>Explore more places</Text>
          <Text style={st.sectionSub}>Recommended by us</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={st.filterRow}>
            {FILTER_PILLS.map((pill, i) => (
              <TouchableOpacity
                key={i}
                style={[st.filterPill, activeFilter === i && st.filterPillActive]}
                onPress={() => { setActiveFilter(i); setShowAll(false); }}
                activeOpacity={0.7}
              >
                <Text style={[st.filterPillText, activeFilter === i && st.filterPillTextActive]}>{pill}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
          {loading.hotels ? (
            <View style={st.spinnerWrap}><Spinner size={24} /></View>
          ) : (
            <>
              <View style={st.listingsContainer}>
                {listPlaces.map((place, i) => (
                  <HotelListingCard
                    key={place.id || i}
                    place={place}
                    priceInfo={priceMap.get(place.id || '') || defaultPrice}
                    onPress={() => navigateToPlace(place)}
                    isFavorited={isItemSaved(place.id || '')}
                    onFavorite={() => handleFavorite(place)}
                  />
                ))}
              </View>
              {!showAll && filteredPlaces.length > 4 && (
                <TouchableOpacity style={st.showMoreBtn} onPress={() => setShowAll(true)} activeOpacity={0.7}>
                  <Text style={st.showMoreText}>Show more</Text>
                </TouchableOpacity>
              )}
            </>
          )}
        </View>

        {/* Promo Banner */}
        <View style={st.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={st.promoContent}>
            <Text style={st.promoLabel}>SPECIAL OFFER</Text>
            <Text style={st.promoTitle}>20% off your first 3 reservations</Text>
            <View style={st.promoBottom}>
              <Text style={st.promoDesc}>Dine at handpicked spots and taste the city's best.</Text>
              <TouchableOpacity style={st.promoBtn} activeOpacity={0.7} onPress={() => router.push('/(tabs)')}>
                <Text style={st.promoBtnText}>Book Now</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {/* Popular locations */}
        <View style={[st.section, { marginBottom: 40 }]}>
          <View style={st.sectionHeaderRow}>
            <View>
              <Text style={st.sectionTitle}>Popular locations</Text>
              <Text style={st.sectionSub}>Explore by neighborhood</Text>
            </View>
            <TouchableOpacity activeOpacity={0.7} onPress={() => showToast('More locations coming soon')}>
              <Text style={st.seeAllLink}>See All</Text>
            </TouchableOpacity>
          </View>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={st.hScroll}>
            {POPULAR_CATEGORIES.map((cat, i) => (
              <PressableCard key={i} onPress={() => showToast(`Exploring ${cat.prefix} ${cat.name}...`)} style={{ width: 180 }}>
                <View style={st.popCard}>
                  <Image source={{ uri: cat.photo }} style={StyleSheet.absoluteFillObject} contentFit="cover" transition={300} />
                  <LinearGradient colors={['transparent', 'rgba(0,0,0,0.75)']} locations={[0.35, 1]} style={StyleSheet.absoluteFillObject} />
                  <View style={st.popContent}>
                    <Text style={st.popLabel}>
                      <Text style={st.popPrefix}>{cat.prefix} </Text>
                      <Text style={st.popName}>{cat.name}</Text>
                    </Text>
                    <Text style={st.popCount}>{cat.count}</Text>
                  </View>
                </View>
              </PressableCard>
            ))}
          </ScrollView>
        </View>
      </ScrollView>

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

// ── Styles ──

const st = 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',
  },
  headerLabel: { fontFamily: Fonts.heading, fontSize: 16, 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: 12, paddingRight: 16 },

  // ── Destination cards ──
  destCard: {
    width: 200, height: 160, borderRadius: 16, overflow: 'hidden', justifyContent: 'flex-end',
    borderWidth: 2, borderColor: 'transparent',
  },
  destCardActive: { borderColor: '#6C5CE7' },
  destContent: { padding: 14, gap: 2 },
  destSubtitle: {
    fontFamily: Fonts.body, fontSize: 9, fontWeight: '700', color: 'rgba(255,215,0,0.8)',
    letterSpacing: 1.5, textTransform: 'uppercase',
  },
  destName: { fontFamily: Fonts.heading, fontSize: 22, fontWeight: '900', color: '#fff', letterSpacing: 1 },
  destDeals: { fontFamily: Fonts.body, fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 2 },

  // ── 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' },
  bookmarkBtn: { position: 'absolute', top: 6, right: 6 },
  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, marginTop: 2 },
  priceStrike: {
    fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey,
    textDecorationLine: 'line-through',
  },
  priceNow: { fontFamily: Fonts.heading, fontSize: 12, fontWeight: '700', color: '#fff' },

  // ── Hotel listing card (booking.com style) ──
  listingsContainer: { marginTop: 12 },
  listingCard: {
    flexDirection: 'row', backgroundColor: Colors.cardDark, borderRadius: 12,
    overflow: 'hidden', borderWidth: 1, borderColor: 'rgba(255,255,255,0.06)',
  },
  listingPhotoWrap: { width: 100 },
  listingPhoto: { width: 100, height: '100%', minHeight: 140 },
  listingDetails: { flex: 1, padding: 12, gap: 4 },
  listingNameRow: {
    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8,
  },
  listingName: {
    fontFamily: Fonts.heading, fontSize: 15, fontWeight: '700', color: '#fff', flex: 1,
  },
  listingRatingRow: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  listingRatingNum: { fontFamily: Fonts.heading, fontSize: 12, fontWeight: '700', color: '#fff' },
  listingRatingText: { fontFamily: Fonts.body, fontSize: 12, color: '#34C759' },
  listingLocationRow: { flexDirection: 'row', alignItems: 'center', gap: 3 },
  listingAddress: { fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey, flex: 1 },
  listingTagsRow: { flexDirection: 'row', gap: 6, marginTop: 2 },
  tagPill: {
    backgroundColor: 'rgba(255,255,255,0.08)', paddingHorizontal: 6, paddingVertical: 3,
    borderRadius: 6,
  },
  tagText: { fontFamily: Fonts.body, fontSize: 10, color: Colors.textGrey },
  listingPriceBlock: { marginTop: 4 },
  listingPriceLarge: { fontFamily: Fonts.heading, fontSize: 20, fontWeight: '800', color: '#fff' },
  listingTotal: { fontFamily: Fonts.body, fontSize: 11, color: Colors.textGrey },
  listingTaxNote: { fontFamily: Fonts.body, fontSize: 10, color: Colors.textDim },
  urgencyText: { fontFamily: Fonts.body, fontSize: 12, color: '#FF6B3D', marginTop: 2 },

  // ── 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' },
  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' },

  // ── 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: '#FF8C42',
    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: '#FF8C42', borderRadius: 20, paddingHorizontal: 18, paddingVertical: 10 },
  promoBtnText: { fontFamily: Fonts.heading, fontSize: 13, fontWeight: '700', color: '#fff' },

  // ── Popular categories ──
  popCard: {
    width: 180, height: 220, borderRadius: 16, overflow: 'hidden', justifyContent: 'flex-end',
  },
  popContent: { padding: 14, gap: 2 },
  popLabel: { fontSize: 15, lineHeight: 20 },
  popPrefix: { fontFamily: Fonts.body, color: 'rgba(255,255,255,0.7)' },
  popName: { fontFamily: Fonts.heading, fontWeight: '700', color: '#fff' },
  popCount: { fontFamily: Fonts.body, fontSize: 12, color: 'rgba(255,255,255,0.6)' },

  // ── 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 },
});