import { FlatList, StyleSheet, Text, View, useColorScheme } from 'react-native';

type Row = { id: string; title: string; subtitle: string };

const DATA: Row[] = Array.from({ length: 40 }, (_, i) => ({
  id: String(i + 1),
  title: `Поїздка ${i + 1}`,
  subtitle: i % 2 === 0 ? 'Гори' : 'Місто',
}));

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const border = dark ? '#3a3a3c' : '#e2e8f0';

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>FlatList · 40 рядків</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        У дереві — лише видимі. Прокрутіть список.
      </Text>
      <FlatList
        style={styles.list}
        data={DATA}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingBottom: 16, gap: 8 }}
        renderItem={({ item }) => (
          <View
            style={[
              styles.row,
              { backgroundColor: surface, borderColor: border },
            ]}
          >
            <Text style={[styles.title, { color: text }]}>{item.title}</Text>
            <Text style={{ color: muted, fontSize: 13 }}>{item.subtitle}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800', marginBottom: 4 },
  list: { flex: 1 },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
  title: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
});

import { useState } from 'react';
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Row = { id: string; title: string };

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const primary = dark ? '#3b82f6' : '#2563eb';
  const border = dark ? '#3a3a3c' : '#e2e8f0';

  const [data, setData] = useState<Row[]>([]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <View style={styles.toolbar}>
        <Pressable
          onPress={() =>
            setData((prev) => [
              ...prev,
              { id: String(Date.now()), title: `Книга ${prev.length + 1}` },
            ])
          }
          style={[styles.btn, { backgroundColor: primary }]}
        >
          <Text style={styles.btnText}>Додати</Text>
        </Pressable>
        <Pressable
          onPress={() => setData([])}
          style={[styles.btn, { backgroundColor: surface, borderColor: border, borderWidth: 1 }]}
        >
          <Text style={{ color: text, fontWeight: '700' }}>Очистити</Text>
        </Pressable>
      </View>

      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        contentContainerStyle={
          data.length === 0 ? styles.emptyContainer : { paddingBottom: 16, gap: 8 }
        }
        ListHeaderComponent={
          <Text style={[styles.h, { color: text }]}>Моя полиця</Text>
        }
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={[styles.emptyTitle, { color: text }]}>Порожньо</Text>
            <Text style={{ color: muted, textAlign: 'center', lineHeight: 20 }}>
              Натисніть «Додати» — з’явиться перший рядок. ListEmptyComponent
              замінює «нічого».
            </Text>
          </View>
        }
        renderItem={({ item }) => (
          <View style={[styles.row, { backgroundColor: surface, borderColor: border }]}>
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  toolbar: { flexDirection: 'row', gap: 8, marginBottom: 12 },
  btn: {
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 10,
  },
  btnText: { color: '#fff', fontWeight: '700' },
  h: { fontSize: 18, fontWeight: '800', marginBottom: 12 },
  emptyContainer: { flexGrow: 1 },
  empty: {
    flex: 1,
    minHeight: 220,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingHorizontal: 12,
  },
  emptyTitle: { fontSize: 18, fontWeight: '700' },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
});

import { useCallback, useState } from 'react';
import {
  FlatList,
  RefreshControl,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Row = { id: string; title: string; stamp: number };

function makeRows(seed: number): Row[] {
  return Array.from({ length: 12 }, (_, i) => ({
    id: `${seed}-${i}`,
    title: `Елемент ${i + 1}`,
    stamp: seed,
  }));
}

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const primary = dark ? '#3b82f6' : '#2563eb';
  const border = dark ? '#3a3a3c' : '#e2e8f0';

  const [seed, setSeed] = useState(1);
  const [data, setData] = useState(() => makeRows(1));
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      const next = seed + 1;
      setSeed(next);
      setData(makeRows(next));
      setRefreshing(false);
    }, 800);
  }, [seed]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Потягніть униз</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        Оновлення №{seed} · mock-затримка 800 ms
      </Text>
      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ gap: 8, paddingBottom: 16 }}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={primary}
            colors={[primary]}
          />
        }
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
            <Text style={{ color: muted, fontSize: 12 }}>batch {item.stamp}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800' },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

import { useCallback, useState } from 'react';
import {
  ActivityIndicator,
  FlatList,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Row = { id: string; title: string };

const PAGE = 10;
const MAX = 50;

function pageItems(from: number, count: number): Row[] {
  return Array.from({ length: count }, (_, i) => {
    const n = from + i + 1;
    return { id: String(n), title: `Книга №${n}` };
  });
}

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const primary = dark ? '#3b82f6' : '#2563eb';
  const border = dark ? '#3a3a3c' : '#e2e8f0';

  const [data, setData] = useState(() => pageItems(0, PAGE));
  const [loadingMore, setLoadingMore] = useState(false);
  const hasMore = data.length < MAX;

  const loadMore = useCallback(() => {
    if (loadingMore || !hasMore) return;
    setLoadingMore(true);
    setTimeout(() => {
      setData((prev) => {
        const next = pageItems(prev.length, Math.min(PAGE, MAX - prev.length));
        return [...prev, ...next];
      });
      setLoadingMore(false);
    }, 700);
  }, [loadingMore, hasMore]);

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Пагінація UI</Text>
      <Text style={{ color: muted, marginBottom: 8, fontSize: 13 }}>
        {data.length} / {MAX} · долистайте вниз
      </Text>
      <FlatList
        style={{ flex: 1 }}
        data={data}
        keyExtractor={(item) => item.id}
        onEndReached={loadMore}
        onEndReachedThreshold={0.3}
        contentContainerStyle={{ gap: 8, paddingBottom: 16 }}
        ListFooterComponent={
          loadingMore ? (
            <View style={styles.footer}>
              <ActivityIndicator color={primary} />
              <Text style={{ color: muted, marginTop: 8 }}>Завантаження…</Text>
            </View>
          ) : !hasMore ? (
            <Text style={{ color: muted, textAlign: 'center', padding: 12 }}>
              Це всі книги (mock)
            </Text>
          ) : null
        }
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '600' }}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800' },
  row: { borderWidth: 1, borderRadius: 12, padding: 14 },
  footer: { paddingVertical: 16, alignItems: 'center' },
});

import {
  SectionList,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Book = { id: string; title: string; author: string };

const SECTIONS: { title: string; data: Book[] }[] = [
  {
    title: 'Фантастика',
    data: [
      { id: '1', title: 'Дюна', author: 'Ф. Герберт' },
      { id: '2', title: 'Ліва рука темряви', author: 'У. Ле Ґуїн' },
      { id: '3', title: 'Нейромант', author: 'В. Ґібсон' },
    ],
  },
  {
    title: 'Детектив',
    data: [
      { id: '4', title: 'Ім’я троянди', author: 'У. Еко' },
      { id: '5', title: 'Дівчина з тату', author: 'С. Ларссон' },
    ],
  },
  {
    title: 'Подорожі',
    data: [
      { id: '6', title: 'Дорога', author: 'Дж. Керуак' },
      { id: '7', title: 'Холод', author: 'А. Камю' },
      { id: '8', title: 'Nomad notes', author: 'Анонім' },
    ],
  },
];

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const primary = dark ? '#3b82f6' : '#2563eb';
  const border = dark ? '#3a3a3c' : '#e2e8f0';
  const headerBg = dark ? '#111' : '#e2e8f0';

  return (
    <View style={[styles.screen, { backgroundColor: bg }]}>
      <Text style={[styles.h, { color: text }]}>Каталог · SectionList</Text>
      <SectionList
        style={{ flex: 1 }}
        sections={SECTIONS}
        keyExtractor={(item) => item.id}
        stickySectionHeadersEnabled
        contentContainerStyle={{ paddingBottom: 24 }}
        renderSectionHeader={({ section: { title } }) => (
          <View style={[styles.sec, { backgroundColor: headerBg }]}>
            <Text style={{ color: primary, fontWeight: '800' }}>{title}</Text>
          </View>
        )}
        renderItem={({ item }) => (
          <View
            style={[styles.row, { backgroundColor: surface, borderColor: border }]}
          >
            <Text style={{ color: text, fontWeight: '700' }}>{item.title}</Text>
            <Text style={{ color: muted, marginTop: 4 }}>{item.author}</Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
        SectionSeparatorComponent={() => <View style={{ height: 12 }} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, paddingTop: 24 },
  h: { fontSize: 20, fontWeight: '800', marginBottom: 12 },
  sec: {
    paddingVertical: 8,
    paddingHorizontal: 10,
    borderRadius: 8,
    marginBottom: 8,
  },
  row: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 14,
  },
});

import { useCallback, useMemo, useState } from 'react';
import {
  Pressable,
  RefreshControl,
  SectionList,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Book = {
  id: string;
  title: string;
  author: string;
  genre: string;
  year: number;
  rating: number;
};

const GENRES = ['Фантастика', 'Детектив', 'Подорожі', 'Історія', 'Поезія'] as const;
const AUTHORS = ['Коваленко', 'Шевченко', 'Лис', 'Мельник', 'Бондар'];

function buildBooks(seed: number, count = 80): Book[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `${seed}-${i}`,
    title: `Книга ${i + 1}`,
    author: AUTHORS[i % AUTHORS.length],
    genre: GENRES[i % GENRES.length],
    year: 1990 + (i % 35),
    rating: ((seed + i) % 50) / 10 + 5,
  }));
}

function toSections(books: Book[]) {
  const map = new Map<string, Book[]>();
  for (const b of books) {
    const list = map.get(b.genre) ?? [];
    list.push(b);
    map.set(b.genre, list);
  }
  return [...map.entries()]
    .sort(([a], [b]) => a.localeCompare(b, 'uk'))
    .map(([title, data]) => ({ title, data }));
}

export default function App() {
  const dark = useColorScheme() === 'dark';
  const bg = dark ? '#000' : '#F8FAFC';
  const surface = dark ? '#1c1c1e' : '#fff';
  const text = dark ? '#f5f5f7' : '#0f172a';
  const muted = dark ? '#a1a1aa' : '#64748b';
  const primary = dark ? '#3b82f6' : '#2563eb';
  const border = dark ? '#3a3a3c' : '#e2e8f0';
  const headerBg = dark ? '#111' : '#e2e8f0';

  const [seed, setSeed] = useState(1);
  const [books, setBooks] = useState(() => buildBooks(1));
  const [refreshing, setRefreshing] = useState(false);
  const sections = useMemo(() => toSections(books), [books]);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setSeed((s) => {
        const next = s + 1;
        setBooks(buildBooks(next));
        return next;
      });
      setRefreshing(false);
    }, 700);
  }, []);

  return (
    <View style={[styles.safe, { backgroundColor: bg }]}>
      <View style={[styles.toolbar, { borderColor: border }]}>
        <Text style={[styles.h, { color: text }]}>Каталог книг</Text>
        <Text style={{ color: muted, fontSize: 13 }}>
          {books.length} · seed {seed} · SectionList
        </Text>
        <View style={styles.rowBtns}>
          <Pressable
            style={[styles.btn, { backgroundColor: primary }]}
            onPress={() => setBooks(buildBooks(seed))}
          >
            <Text style={styles.btnText}>Заповнити</Text>
          </Pressable>
          <Pressable
            style={[styles.btn, { backgroundColor: surface, borderColor: border, borderWidth: 1 }]}
            onPress={() => setBooks([])}
          >
            <Text style={{ color: text, fontWeight: '700' }}>Очистити</Text>
          </Pressable>
        </View>
      </View>

      <SectionList
        style={{ flex: 1 }}
        sections={sections}
        keyExtractor={(item) => item.id}
        stickySectionHeadersEnabled
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={primary}
            colors={[primary]}
          />
        }
        contentContainerStyle={
          books.length === 0
            ? { flexGrow: 1, padding: 16 }
            : { padding: 16, paddingBottom: 24 }
        }
        ListEmptyComponent={
          <View style={styles.empty}>
            <Text style={[styles.emptyTitle, { color: text }]}>Полиця порожня</Text>
            <Text style={{ color: muted, textAlign: 'center' }}>
              Заповніть або pull-to-refresh
            </Text>
          </View>
        }
        renderSectionHeader={({ section: { title, data } }) => (
          <View style={[styles.sec, { backgroundColor: headerBg }]}>
            <Text style={{ color: primary, fontWeight: '800' }}>
              {title} · {data.length}
            </Text>
          </View>
        )}
        renderItem={({ item }) => (
          <View style={[styles.card, { backgroundColor: surface, borderColor: border }]}>
            <Text style={{ color: text, fontWeight: '700' }}>{item.title}</Text>
            <Text style={{ color: muted, marginTop: 4, fontSize: 13 }}>
              {item.author} · {item.year} · ★ {item.rating.toFixed(1)}
            </Text>
          </View>
        )}
        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
        SectionSeparatorComponent={() => <View style={{ height: 10 }} />}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  toolbar: { padding: 16, gap: 6, borderBottomWidth: 1 },
  h: { fontSize: 20, fontWeight: '800' },
  rowBtns: { flexDirection: 'row', gap: 8, marginTop: 8 },
  btn: { paddingHorizontal: 12, paddingVertical: 10, borderRadius: 10 },
  btnText: { color: '#fff', fontWeight: '700' },
  empty: {
    flex: 1,
    minHeight: 220,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  emptyTitle: { fontSize: 18, fontWeight: '700' },
  sec: {
    paddingVertical: 8,
    paddingHorizontal: 10,
    borderRadius: 8,
    marginBottom: 8,
  },
  card: { borderWidth: 1, borderRadius: 12, padding: 14 },
});

import { useCallback, useState } from 'react';
import {
  FlatList,
  Image,
  Pressable,
  RefreshControl,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';

type Trip = {
  id: string;
  title: string;
  dateLabel: string;
  region: string;
  coverUri: string;
};

type Place = { id: string; name: string; city: string };

const light = {
  bg: '#F8FAFC', surface: '#fff', text: '#0f172a', muted: '#64748b',
  primary: '#2563eb', border: '#e2e8f0', onPrimary: '#fff',
};
const dark = {
  bg: '#000', surface: '#1c1c1e', text: '#f5f5f7', muted: '#a1a1aa',
  primary: '#3b82f6', border: '#3a3a3c', onPrimary: '#fff',
};

const TRIPS: Trip[] = Array.from({ length: 12 }, (_, i) => ({
  id: String(i + 1),
  title: ['Карпати', 'Львів', 'Одеса', 'Київ', 'Чернівці', 'Кам’янець',
    'Харків', 'Дніпро', 'Ужгород', 'Полтава', 'Затока', 'Яремче'][i],
  dateLabel: `${i + 1}–${i + 3} бер. 2026`,
  region: i % 2 === 0 ? 'Карпати' : 'Місто',
  coverUri: `https://picsum.photos/seed/nomad${i}/800/400`,
}));

const PLACES: Place[] = [
  { id: 'p1', name: 'Говерла', city: 'Карпати' },
  { id: 'p2', name: 'Ринок', city: 'Львів' },
  { id: 'p3', name: 'Ланжерон', city: 'Одеса' },
  { id: 'p4', name: 'Поділ', city: 'Київ' },
  { id: 'p5', name: 'Фортеця', city: 'Кам’янець' },
];

export default function App() {
  const systemDark = useColorScheme() === 'dark';
  const [pref, setPref] = useState<'system' | 'light' | 'dark'>('system');
  const isDark = pref === 'dark' || (pref === 'system' && systemDark);
  const c = isDark ? dark : light;

  const [trips, setTrips] = useState(TRIPS);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setTrips([...TRIPS]);
      setRefreshing(false);
    }, 700);
  }, []);

  const listHeader = (
    <View style={{ gap: 12, marginBottom: 12 }}>
      <Text style={{ color: c.text, fontWeight: '700' }}>Останні місця</Text>
      <FlatList
        horizontal
        data={PLACES}
        keyExtractor={(p) => p.id}
        showsHorizontalScrollIndicator={false}
        ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
        renderItem={({ item }) => (
          <View style={[styles.place, { backgroundColor: c.surface, borderColor: c.border }]}>
            <Text style={{ color: c.text, fontWeight: '700' }}>{item.name}</Text>
            <Text style={{ color: c.primary, marginTop: 4, fontSize: 12 }}>{item.city}</Text>
          </View>
        )}
      />
      <Text style={{ color: c.text, fontWeight: '700' }}>Ваші поїздки</Text>
    </View>
  );

  return (
    <View style={[styles.screen, { backgroundColor: c.bg }]}>
      <View style={[styles.top, { borderColor: c.border }]}>
        <Text style={[styles.brand, { color: c.text }]}>Мандрівник</Text>
        <Text style={{ color: c.muted, fontSize: 13, marginTop: 4 }}>
          тема: {isDark ? 'темна' : 'світла'} · {trips.length} поїздок · {PLACES.length} місць
        </Text>
        <View style={styles.chips}>
          {([
            ['system', 'Система'],
            ['light', 'Світла'],
            ['dark', 'Темна'],
          ] as const).map(([id, label]) => {
            const on = pref === id;
            return (
              <Pressable
                key={id}
                onPress={() => setPref(id)}
                style={[
                  styles.chip,
                  {
                    backgroundColor: on ? c.primary : c.surface,
                    borderColor: c.border,
                  },
                ]}
              >
                <Text style={{ color: on ? c.onPrimary : c.text, fontWeight: '700', fontSize: 12 }}>
                  {label}
                </Text>
              </Pressable>
            );
          })}
        </View>
      </View>

      <FlatList
        style={{ flex: 1 }}
        data={trips}
        keyExtractor={(t) => t.id}
        ListHeaderComponent={listHeader}
        contentContainerStyle={{ padding: 16, paddingBottom: 12 }}
        ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            tintColor={c.primary}
            colors={[c.primary]}
          />
        }
        renderItem={({ item }) => (
          <View style={[styles.card, { backgroundColor: c.surface, borderColor: c.border }]}>
            <Image source={{ uri: item.coverUri }} style={styles.cover} />
            <View style={{ padding: 12 }}>
              <Text style={{ color: c.text, fontWeight: '700', fontSize: 16 }}>{item.title}</Text>
              <Text style={{ color: c.muted, marginTop: 4, fontSize: 13 }}>
                {item.dateLabel} · {item.region}
              </Text>
            </View>
          </View>
        )}
      />

      <View style={[styles.footer, { borderColor: c.border, backgroundColor: c.bg }]}>
        <Pressable style={[styles.cta, { backgroundColor: c.primary }]}>
          <Text style={{ color: c.onPrimary, fontWeight: '800' }}>Нова поїздка</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1 },
  top: { padding: 16, borderBottomWidth: 1 },
  brand: { fontSize: 24, fontWeight: '800' },
  chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
  chip: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, borderWidth: 1 },
  place: { width: 140, borderWidth: 1, borderRadius: 12, padding: 10, minHeight: 72 },
  card: { borderWidth: 1, borderRadius: 16, overflow: 'hidden' },
  cover: { width: '100%', height: 120, backgroundColor: '#cbd5e1' },
  footer: { borderTopWidth: 1, padding: 16 },
  cta: { paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
});