From 9d78fd16dae00a6b787cd913e49db49c27d1e405 Mon Sep 17 00:00:00 2001
From: knuthtimo-lab <knuth.timo@gmail.com>
Date: Thu, 4 Sep 2025 14:37:37 +0200
Subject: [PATCH] MVP

---
 src/components/Footer.tsx        | 218 ++++++++++++++++---------------
 src/lib/database.ts              |  60 +++++++--
 src/pages/InstallateurFinden.tsx | 169 +++++++++++++++++++-----
 3 files changed, 303 insertions(+), 144 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 0a91cba..caf95b7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,138 +1,150 @@
+import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Link } from "react-router-dom";
-import { Mail, Phone, MapPin, Facebook, Twitter, Linkedin, Instagram } from "lucide-react";
+import { 
+  Mail, 
+  Phone, 
+  MapPin, 
+  Facebook, 
+  Twitter, 
+  Linkedin, 
+  Instagram,
+  Calculator,
+  TrendingUp,
+  Shield,
+  Award
+} from "lucide-react";
 
 const Footer = () => {
   return (
-    <footer className="bg-primary text-primary-foreground">
-      <div className="container mx-auto px-4 py-16">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+    <footer className="bg-gray-900 text-white mt-20">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {/* Company Info */}
-          <div className="space-y-6">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-gradient-hero rounded-lg flex items-center justify-center">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-gradient-to-r from-orange-500 to-blue-500 rounded-lg flex items-center justify-center">
                 <span className="text-white font-bold text-lg">E</span>
               </div>
               <span className="text-xl font-bold">EnergieProfis</span>
             </div>
-            
-            <p className="text-primary-foreground/80 leading-relaxed">
-              Ihr vertrauensvoller Partner für erneuerbare Energielösungen in Deutschland. 
-              Wir verbinden Sie mit den besten Installateuren für eine nachhaltige Zukunft.
+            <p className="text-gray-300 text-sm leading-relaxed">
+              Ihr vertrauensvoller Partner für erneuerbare Energien. 
+              Finden Sie qualifizierte Solar- und Wind-Installateure in Ihrer Region.
             </p>
-            
-            <div className="space-y-3">
-              <div className="flex items-center space-x-3">
-                <Phone className="w-5 h-5 text-solar" />
-                <span>+49 (0) 800 123 4567</span>
-              </div>
-              <div className="flex items-center space-x-3">
-                <Mail className="w-5 h-5 text-wind" />
-                <span>info@energieprofis.de</span>
-              </div>
-              <div className="flex items-center space-x-3">
-                <MapPin className="w-5 h-5 text-geo" />
-                <span>München, Deutschland</span>
-              </div>
+            <div className="flex space-x-4">
+              <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white p-2">
+                <Facebook className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white p-2">
+                <Twitter className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white p-2">
+                <Linkedin className="w-5 h-5" />
+              </Button>
+              <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white p-2">
+                <Instagram className="w-5 h-5" />
+              </Button>
             </div>
           </div>
 
-          {/* Energy Types */}
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold">Energielösungen</h3>
-            <ul className="space-y-3">
+          {/* Quick Links */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Schnellzugriff</h3>
+            <ul className="space-y-2 text-sm">
               <li>
-                <Link to="/solar" className="text-primary-foreground/80 hover:text-solar transition-colors">
-                  Solar-Installateure
-                </Link>
+                <a href="/" className="text-gray-300 hover:text-white transition-colors">
+                  Solar-Installation
+                </a>
               </li>
               <li>
-                <Link to="/wind" className="text-primary-foreground/80 hover:text-wind transition-colors">
-                  Wind-Installateure
-                </Link>
+                <a href="/" className="text-gray-300 hover:text-white transition-colors">
+                  Windenergie
+                </a>
+              </li>
+              <li>
+                <a href="/" className="text-gray-300 hover:text-white transition-colors">
+                  Installateur finden
+                </a>
+              </li>
+              <li>
+                <a href="/" className="text-gray-300 hover:text-white transition-colors">
+                  Förderungen 2025
+                </a>
+              </li>
+              <li>
+                <a href="/" className="text-gray-300 hover:text-white transition-colors">
+                  Kostenrechner
+                </a>
               </li>
             </ul>
           </div>
 
           {/* Services */}
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold">Services</h3>
-            <ul className="space-y-3">
-              <li>
-                <Link to="/installateur-finden" className="text-primary-foreground/80 hover:text-white transition-colors">
-                  Installateur Finden
-                </Link>
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Unsere Services</h3>
+            <ul className="space-y-2 text-sm">
+              <li className="flex items-center gap-2 text-gray-300">
+                <Calculator className="w-4 h-4" />
+                Solar-Einsparungsrechner
               </li>
-              <li>
-                <Link to="/unternehmen-listen" className="text-primary-foreground/80 hover:text-white transition-colors">
-                  Unternehmen Listen
-                </Link>
+              <li className="flex items-center gap-2 text-gray-300">
+                <TrendingUp className="w-4 h-4" />
+                Windenergie-Rechner
               </li>
-              <li>
-                <Link to="/preisvergleich" className="text-primary-foreground/80 hover:text-white transition-colors">
-                  Preisvergleich
-                </Link>
+              <li className="flex items-center gap-2 text-gray-300">
+                <Shield className="w-4 h-4" />
+                Verifizierte Installateure
+              </li>
+              <li className="flex items-center gap-2 text-gray-300">
+                <Award className="w-4 h-4" />
+                Zertifizierte Fachbetriebe
               </li>
             </ul>
           </div>
 
-          {/* Newsletter */}
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold">Newsletter</h3>
-            <p className="text-primary-foreground/80">
-              Bleiben Sie informiert über die neuesten Entwicklungen 
-              in der erneuerbaren Energie.
-            </p>
-            
-            <div className="space-y-3">
-              <Input 
-                placeholder="Ihre E-Mail-Adresse"
-                className="bg-white/10 border-white/20 text-white placeholder:text-white/60"
-              />
-              <Button variant="hero" className="w-full bg-white text-primary hover:bg-white/90">
-                Anmelden
-              </Button>
-            </div>
-            
-            {/* Social Media */}
-            <div className="flex space-x-4">
-              <Button variant="ghost" size="icon" className="hover:bg-white/10">
-                <Facebook className="w-5 h-5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="hover:bg-white/10">
-                <Twitter className="w-5 h-5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="hover:bg-white/10">
-                <Linkedin className="w-5 h-5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="hover:bg-white/10">
-                <Instagram className="w-5 h-5" />
-              </Button>
+          {/* Contact Info */}
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold">Kontakt</h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center gap-3 text-gray-300">
+                <Mail className="w-4 h-4" />
+                <span>info@energieprofis.de</span>
+              </div>
+              <div className="flex items-center gap-3 text-gray-300">
+                <Phone className="w-4 h-4" />
+                <span>+49 (0) 800 123 456</span>
+              </div>
+              <div className="flex items-start gap-3 text-gray-300">
+                <MapPin className="w-4 h-4 mt-0.5" />
+                <span>
+                  EnergieProfis GmbH<br />
+                  Musterstraße 123<br />
+                  10115 Berlin
+                </span>
+              </div>
             </div>
           </div>
         </div>
-        
-        {/* Bottom Bar */}
-        <div className="border-t border-white/20 mt-12 pt-8">
-          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-            <p className="text-primary-foreground/60 text-sm">
-              © 2024 EnergieProfis. Alle Rechte vorbehalten.
-            </p>
-            
+
+        {/* Bottom Section */}
+        <div className="border-t border-gray-700 mt-12 pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="text-sm text-gray-400">
+              © 2025 EnergieProfis. Alle Rechte vorbehalten.
+            </div>
             <div className="flex space-x-6 text-sm">
-              <Link to="/datenschutz" className="text-primary-foreground/60 hover:text-white transition-colors">
-                Datenschutz
-              </Link>
-              <Link to="/agb" className="text-primary-foreground/60 hover:text-white transition-colors">
-                AGB
-              </Link>
-              <Link to="/impressum" className="text-primary-foreground/60 hover:text-white transition-colors">
+              <a href="/" className="text-gray-400 hover:text-white transition-colors">
                 Impressum
-              </Link>
-              <Link to="/kontakt" className="text-primary-foreground/60 hover:text-white transition-colors">
-                Kontakt
-              </Link>
+              </a>
+              <a href="/" className="text-gray-400 hover:text-white transition-colors">
+                Datenschutz
+              </a>
+              <a href="/" className="text-gray-400 hover:text-white transition-colors">
+                AGB
+              </a>
+              <a href="/" className="text-gray-400 hover:text-white transition-colors">
+                Cookie-Einstellungen
+              </a>
             </div>
           </div>
         </div>
diff --git a/src/lib/database.ts b/src/lib/database.ts
index 25cbd9a..580e6c3 100644
--- a/src/lib/database.ts
+++ b/src/lib/database.ts
@@ -14,28 +14,64 @@ export const installerService = {
   // Get all installers with optional filters
   async getInstallers(filters?: {
     energyType?: string;
-    location?: string;
+    bundesland?: string;
     searchTerm?: string;
+    limit?: number;
+    offset?: number;
   }) {
-    let query = supabase
+    // First, get the total count
+    let countQuery = supabase
+      .from('installers')
+      .select('*', { count: 'exact', head: true })
+      .eq('status', 'active');
+
+    if (filters?.energyType && filters.energyType !== 'all') {
+      countQuery = countQuery.eq('energy_type', filters.energyType);
+    }
+
+    if (filters?.bundesland && filters.bundesland !== 'all') {
+      countQuery = countQuery.ilike('location', `%${filters.bundesland}%`);
+    }
+
+    if (filters?.searchTerm) {
+      countQuery = countQuery.or(`name.ilike.%${filters.searchTerm}%,description.ilike.%${filters.searchTerm}%,specialties.cs.{${filters.searchTerm}}`);
+    }
+
+    const { count, error: countError } = await countQuery;
+    
+    if (countError) {
+      console.error('Error fetching installer count:', countError);
+      throw countError;
+    }
+
+    // Then get the actual data with pagination
+    let dataQuery = supabase
       .from('installers')
       .select('*')
       .eq('status', 'active')
       .order('rating', { ascending: false });
 
     if (filters?.energyType && filters.energyType !== 'all') {
-      query = query.eq('energy_type', filters.energyType);
+      dataQuery = dataQuery.eq('energy_type', filters.energyType);
     }
 
-    if (filters?.location) {
-      query = query.ilike('location', `%${filters.location}%`);
+    if (filters?.bundesland && filters.bundesland !== 'all') {
+      dataQuery = dataQuery.ilike('location', `%${filters.bundesland}%`);
     }
 
     if (filters?.searchTerm) {
-      query = query.or(`name.ilike.%${filters.searchTerm}%,description.ilike.%${filters.searchTerm}%,specialties.cs.{${filters.searchTerm}}`);
+      dataQuery = dataQuery.or(`name.ilike.%${filters.searchTerm}%,description.ilike.%${filters.searchTerm}%,specialties.cs.{${filters.searchTerm}}`);
     }
 
-    const { data, error } = await query;
+    // Apply pagination
+    if (filters?.limit) {
+      dataQuery = dataQuery.limit(filters.limit);
+    }
+    if (filters?.offset) {
+      dataQuery = dataQuery.range(filters.offset, filters.offset + (filters.limit || 10) - 1);
+    }
+
+    const { data, error } = await dataQuery;
     
     if (error) {
       console.error('Error fetching installers:', error);
@@ -48,7 +84,7 @@ export const installerService = {
       throw error;
     }
 
-    return data;
+    return { data: data || [], totalCount: count || 0 };
   },
 
   // Get installer by ID
@@ -182,14 +218,16 @@ export const useInstallers = () => {
 
   const fetchInstallers = async (filters?: {
     energyType?: string;
-    location?: string;
+    bundesland?: string;
     searchTerm?: string;
+    limit?: number;
+    offset?: number;
   }) => {
     try {
       setLoading(true);
       setError(null);
-      const data = await installerService.getInstallers(filters);
-      setInstallers(data || []);
+      const result = await installerService.getInstallers(filters);
+      setInstallers(result.data || []);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'An error occurred');
       setInstallers([]);
diff --git a/src/pages/InstallateurFinden.tsx b/src/pages/InstallateurFinden.tsx
index de6d545..967635c 100644
--- a/src/pages/InstallateurFinden.tsx
+++ b/src/pages/InstallateurFinden.tsx
@@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Badge } from "@/components/ui/badge";
 import { Search, MapPin, Star, Phone, Mail, Globe, Filter, AlertCircle, Calculator, Award, Shield, TrendingUp, Map, Users, Clock, CheckCircle } from "lucide-react";
 import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 import { installerService, analyticsService } from "@/lib/database";
 import { cleanAndReseedDatabase } from "@/lib/cleanDatabase";
 import { debugDatabase, forceDeleteAll, testConnection } from "@/lib/debugDatabase";
@@ -22,7 +23,13 @@ const InstallateurFinden = () => {
   
   const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
   const [energyType, setEnergyType] = useState(searchParams.get("type") || "all");
-  const [location, setLocation] = useState(searchParams.get("location") || "");
+  const [bundesland, setBundesland] = useState(searchParams.get("bundesland") || "all");
+  
+  // Pagination state
+  const [displayedInstallers, setDisplayedInstallers] = useState<Installer[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalInstallers, setTotalInstallers] = useState(0);
+  const [showAll, setShowAll] = useState(false);
 
   // SEO: Add structured data for the page
   useEffect(() => {
@@ -33,8 +40,8 @@ const InstallateurFinden = () => {
       "name": "Solar- und Wind-Installateure in Deutschland",
       "description": "Qualifizierte Fachbetriebe für Photovoltaik und Windenergie finden und vergleichen",
       "url": window.location.href,
-      "numberOfItems": installers.length,
-      "itemListElement": installers.map((installer, index) => ({
+      "numberOfItems": displayedInstallers.length,
+      "itemListElement": displayedInstallers.map((installer, index) => ({
         "@type": "ListItem",
         "position": index + 1,
         "item": {
@@ -152,18 +159,27 @@ const InstallateurFinden = () => {
   }, []);
 
   // Load installers from database
-  const loadInstallers = async () => {
+  const loadInstallers = async (resetPagination = true) => {
     try {
       setLoading(true);
       setError(null);
       
+      if (resetPagination) {
+        setCurrentPage(0);
+        setShowAll(false);
+      }
+      
       const filters = {
         energyType: energyType && energyType !== "all" ? energyType : undefined,
-        location: location || undefined,
-        searchTerm: searchTerm || undefined
+        bundesland: bundesland && bundesland !== "all" ? bundesland : undefined,
+        searchTerm: searchTerm || undefined,
+        limit: showAll ? undefined : 10,
+        offset: showAll ? undefined : (currentPage * 10)
       };
 
-      const data = await installerService.getInstallers(filters);
+      const result = await installerService.getInstallers(filters);
+      const data = result.data;
+      const totalCount = result.totalCount;
       
       // If no installers found, automatically seed the database
       if (!data || data.length === 0) {
@@ -171,19 +187,38 @@ const InstallateurFinden = () => {
         try {
           await cleanAndReseedDatabase();
           // Try to load installers again after seeding
-          const reseededData = await installerService.getInstallers(filters);
-          setInstallers(reseededData || []);
+          const reseededResult = await installerService.getInstallers(filters);
+          if (resetPagination) {
+            setInstallers(reseededResult.data || []);
+            setDisplayedInstallers(reseededResult.data || []);
+            setTotalInstallers(reseededResult.totalCount || 0);
+          } else {
+            const newInstallers = [...displayedInstallers, ...(reseededResult.data || [])];
+            setDisplayedInstallers(newInstallers);
+            setTotalInstallers(reseededResult.totalCount || 0);
+          }
         } catch (seedError) {
           console.error('Error seeding database:', seedError);
           setError('Datenbank wird initialisiert. Bitte versuchen Sie es in wenigen Sekunden erneut.');
           setInstallers([]);
+          setDisplayedInstallers([]);
+          setTotalInstallers(0);
         }
       } else {
-        setInstallers(data);
+        if (resetPagination) {
+          setInstallers(data);
+          setDisplayedInstallers(data);
+          setTotalInstallers(totalCount);
+        } else {
+          // Append new data for pagination
+          const newInstallers = [...displayedInstallers, ...data];
+          setDisplayedInstallers(newInstallers);
+          setTotalInstallers(totalCount);
+        }
       }
 
       // Track search event
-      if (searchTerm || energyType !== "all" || location) {
+      if (searchTerm || energyType !== "all" || bundesland !== "all") {
         analyticsService.trackEvent({
           event_type: 'installer_search',
           page_url: window.location.pathname,
@@ -196,6 +231,7 @@ const InstallateurFinden = () => {
       console.error('Error loading installers:', err);
       setError('Fehler beim Laden der Installateure. Bitte versuchen Sie es später erneut.');
       setInstallers([]);
+      setDisplayedInstallers([]);
     } finally {
       setLoading(false);
     }
@@ -209,25 +245,65 @@ const InstallateurFinden = () => {
   // Reload when filters change
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      loadInstallers();
+      loadInstallers(true); // Reset pagination when filters change
     }, 500); // Debounce search
 
     return () => clearTimeout(timeoutId);
-  }, [searchTerm, energyType, location]);
+  }, [searchTerm, energyType, bundesland]);
 
   // Update URL params when filters change
   useEffect(() => {
     const params = new URLSearchParams();
     if (searchTerm) params.set("search", searchTerm);
     if (energyType && energyType !== "all") params.set("type", energyType);
-    if (location) params.set("location", location);
+    if (bundesland && bundesland !== "all") params.set("bundesland", bundesland);
     setSearchParams(params);
-  }, [searchTerm, energyType, location, setSearchParams]);
+  }, [searchTerm, energyType, bundesland, setSearchParams]);
 
   const handleReset = () => {
     setSearchTerm("");
     setEnergyType("all");
-    setLocation("");
+    setBundesland("all");
+  };
+
+  // Handle "Show More" button click
+  const handleShowMore = async (e: React.MouseEvent) => {
+    e.preventDefault(); // Prevent default button behavior
+    e.stopPropagation(); // Stop event bubbling
+    
+    if (currentPage >= 2) {
+      // After 3 clicks (30 installers), show all remaining
+      setShowAll(true);
+      setCurrentPage(0);
+      await loadInstallers(false);
+    } else {
+      // Load next 10 installers
+      const nextPage = currentPage + 1;
+      setCurrentPage(nextPage);
+      
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const filters = {
+          energyType: energyType && energyType !== "all" ? energyType : undefined,
+          bundesland: bundesland && bundesland !== "all" ? bundesland : undefined,
+          searchTerm: searchTerm || undefined,
+          limit: 10,
+          offset: nextPage * 10
+        };
+
+        const result = await installerService.getInstallers(filters);
+        const newInstallers = [...displayedInstallers, ...(result.data || [])];
+        setDisplayedInstallers(newInstallers);
+        setTotalInstallers(result.totalCount || 0);
+      } catch (err) {
+        console.error('Error loading more installers:', err);
+        setError('Fehler beim Laden weiterer Installateure. Bitte versuchen Sie es später erneut.');
+      } finally {
+        setLoading(false);
+      }
+    }
   };
 
   // Test connection
@@ -258,7 +334,7 @@ const InstallateurFinden = () => {
     try {
       await cleanAndReseedDatabase();
       alert('Deutsche Installateure erfolgreich geladen!');
-      loadInstallers(); // Reload the data
+      loadInstallers(true); // Reload the data with pagination reset
     } catch (error) {
       console.error('Error seeding database:', error);
       alert('Fehler beim Laden der Installateure. Details in der Konsole.');
@@ -482,15 +558,30 @@ const InstallateurFinden = () => {
                 </SelectContent>
               </Select>
               
-              <div className="relative">
-                <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
-                <Input
-                  placeholder="PLZ oder Stadt"
-                  value={location}
-                  onChange={(e) => setLocation(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
+              <Select value={bundesland} onValueChange={setBundesland}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Bundesland wählen" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Alle Bundesländer</SelectItem>
+                  <SelectItem value="Baden-Württemberg">Baden-Württemberg</SelectItem>
+                  <SelectItem value="Bayern">Bayern</SelectItem>
+                  <SelectItem value="Berlin">Berlin</SelectItem>
+                  <SelectItem value="Brandenburg">Brandenburg</SelectItem>
+                  <SelectItem value="Bremen">Bremen</SelectItem>
+                  <SelectItem value="Hamburg">Hamburg</SelectItem>
+                  <SelectItem value="Hessen">Hessen</SelectItem>
+                  <SelectItem value="Mecklenburg-Vorpommern">Mecklenburg-Vorpommern</SelectItem>
+                  <SelectItem value="Niedersachsen">Niedersachsen</SelectItem>
+                  <SelectItem value="Nordrhein-Westfalen">Nordrhein-Westfalen</SelectItem>
+                  <SelectItem value="Rheinland-Pfalz">Rheinland-Pfalz</SelectItem>
+                  <SelectItem value="Saarland">Saarland</SelectItem>
+                  <SelectItem value="Sachsen">Sachsen</SelectItem>
+                  <SelectItem value="Sachsen-Anhalt">Sachsen-Anhalt</SelectItem>
+                  <SelectItem value="Schleswig-Holstein">Schleswig-Holstein</SelectItem>
+                  <SelectItem value="Thüringen">Thüringen</SelectItem>
+                </SelectContent>
+              </Select>
               
               <Button onClick={handleReset} variant="outline" className="w-full">
                 Filter zurücksetzen
@@ -533,7 +624,7 @@ const InstallateurFinden = () => {
                 <h3 className="text-lg font-semibold text-red-800 mb-2">Fehler beim Laden</h3>
                 <p className="text-red-700 mb-4">{error}</p>
                 <div className="flex gap-2 justify-center">
-                  <Button onClick={loadInstallers} variant="outline" className="border-red-300 text-red-700 hover:bg-red-100">
+                  <Button onClick={() => loadInstallers(true)} variant="outline" className="border-red-300 text-red-700 hover:bg-red-100">
                     Erneut versuchen
                   </Button>
                   {process.env.NODE_ENV === 'development' && (
@@ -562,13 +653,13 @@ const InstallateurFinden = () => {
         {/* Results */}
         <div className="mb-4">
           <p className="text-muted-foreground">
-            {installers.length} Installateur{installers.length !== 1 ? 'e' : ''} gefunden
+            {displayedInstallers.length} von {totalInstallers} Installateur{totalInstallers !== 1 ? 'e' : ''} angezeigt
           </p>
         </div>
 
         {/* Installer Cards */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {installers.map((installer) => (
+          {displayedInstallers.map((installer) => (
             <Card key={installer.id} className="hover:shadow-lg transition-shadow">
               <CardHeader>
                 <div className="flex justify-between items-start">
@@ -677,7 +768,22 @@ const InstallateurFinden = () => {
           ))}
         </div>
 
-        {installers.length === 0 && (
+        {/* Show More Button */}
+        {displayedInstallers.length > 0 && displayedInstallers.length < totalInstallers && (
+          <div className="text-center mt-12 mb-16">
+            <Button 
+              type="button"
+              onClick={handleShowMore} 
+              variant="outline" 
+              size="lg"
+              className="px-12 py-3 text-lg font-semibold"
+            >
+              {currentPage >= 2 ? 'Alle anzeigen' : 'Mehr anzeigen'}
+            </Button>
+          </div>
+        )}
+
+        {displayedInstallers.length === 0 && (
           <Card className="text-center py-12">
             <CardContent>
               <p className="text-muted-foreground text-lg mb-4">
@@ -759,6 +865,9 @@ const InstallateurFinden = () => {
           </div>
         </div>
       </div>
+      
+      {/* Footer */}
+      <Footer />
     </div>
   );
 };