update: gemini fixes

app/(tabs)/explore.tsx

@@ -1,5 +1,5 @@
 import { AutoCompleteItem } from "@/apis/autoCompleteApi";
-import { getSearchResults, SearchResultItem } from "@/apis/searchApi";
+import { SearchResultItem } from "@/apis/searchApi";
 import { Season } from "@/apis/seasonApi";
 import { Show } from "@/apis/showApi";
 import styles from "@/app/tabStyles/indexStyles";
@@ -10,6 +10,7 @@ import Feather from "@expo/vector-icons/Feather";
 import React from "react";
 import { Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
 
+import { useSearch } from "@/hooks/useSearch";
 import { getShowById } from "@/apis/showApi";
 import PersonRow from "@/components/discovery/PersonRow";
 import SeasonCarousel from "@/components/discovery/SeasonCarousel";
@@ -20,25 +21,19 @@ export default function ExploreScreen() {
   const { query, setQuery, suggestions } = useDiscoveryContext();
 
   const [tags, setTags] = React.useState<AutoCompleteItem[]>([]);
-  const [results, setResults] = React.useState<SearchResultItem[]>([]);
+  const tagStrings = React.useMemo(() => tags.map((t) => t.text), [tags]);
+  const { data: results = [] } = useSearch(tagStrings);
 
   // Show metadata cache by id (filled from SHOW results and lazy-loaded by id)
   const [showsById, setShowsById] = React.useState<Record<number, Show>>({});
 
   // --- helpers ---
-  const tagStrings = React.useMemo(() => tags.map((t) => t.text), [tags]);
+
 
   function tagAdded(tag: AutoCompleteItem) {
     const nextTags = tags.some((t) => t.text === tag.text) ? tags : [...tags, tag];
     setTags(nextTags);
 
-    const inputs = nextTags.map((t) => t.text);
-    getSearchResults(inputs, 50)
-      .then((items) => {
-        setResults(items || []);
-      })
-      .catch(console.error);
-
     setQuery("");
     Keyboard.dismiss();
   }
@@ -46,12 +41,6 @@ export default function ExploreScreen() {
   function tagRemoved(tag: AutoCompleteItem) {
     const nextTags = tags.filter((t) => t.text !== tag.text);
     setTags(nextTags);
-    const inputs = nextTags.map((t) => t.text);
-    getSearchResults(inputs, 50)
-      .then((items) => {
-        setResults(items || []);
-      })
-      .catch(console.error);
   }
 
   // Keep our local show cache in sync with SHOW items returned by search
@@ -135,7 +124,7 @@ export default function ExploreScreen() {
         <Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
       </View>
 
-      <View style={{ paddingHorizontal: 10 }}>
+      <View style={styles.sectionContainer}>
         {/* Search bar */}
         <View style={styles.searchContainer}>
           <TextInput
@@ -143,13 +132,7 @@ export default function ExploreScreen() {
             onChangeText={setQuery}
             placeholder="Wonach suchst du?"
             placeholderTextColor=""
-            style={{
-              fontSize: 18,
-              fontWeight: "500",
-              color: "hsl(221, 39%, 80%)",
-              width: "90%",
-              height: "100%",
-            }}
+            style={styles.searchInput}
             returnKeyType="search"
             onSubmitEditing={() => {
               if (!query.trim()) return;
@@ -205,8 +188,8 @@ export default function ExploreScreen() {
         <ScrollView keyboardShouldPersistTaps="handled">
           {/* Personen Section (top) */}
           {persons.length > 0 && (
-            <View style={{ width: "100%", paddingHorizontal: 10, marginBottom: 12 }}>
-              <Text style={{ color: "white", fontSize: 18, fontWeight: "600", marginBottom: 6 }}>Personen</Text>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Personen</Text>
               {persons.slice(0, 5).map((p) => (
                   <PersonRow key={`p-${p.personId ?? p.id}`} person={p}/>
               ))}
@@ -214,8 +197,8 @@ export default function ExploreScreen() {
           )}
 
           {/* Staffeln grouped by Show with page view */}
-          <View style={{ width: "100%", paddingHorizontal: 10 }}>
-            <Text style={{ color: "white", fontSize: 18, fontWeight: "600", marginBottom: 6 }}>Staffeln</Text>
+          <View style={styles.sectionContainer}>
+            <Text style={styles.sectionTitle}>Staffeln</Text>
 
             {Array.from(seasonsByShowId.entries()).map(([showId, seasons]) => {
               const show = showsById[Number(showId)];
@@ -242,7 +225,7 @@ export default function ExploreScreen() {
             })}
 
             {seasonsByShowId.size === 0 && (
-              <Text style={{ color: "white", fontSize: 16, textAlign: "center", marginTop: 14 }}>
+              <Text style={styles.centerText}>
                 Keine Staffeln gefunden. Passe deine Tags an.
               </Text>
             )}