Update src/app/page.tsx

Merge version_10 into main

src/app/page.tsx

@@ -6,22 +6,27 @@ import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { CheckCircle, Eye, Filter, Phone, Search, Star, MapPin, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
+import { CheckCircle, Filter, MapPin, Search, Star, ZoomIn, ZoomOut, Search as SearchIcon, Info } from "lucide-react";
 import { useState, useMemo } from "react";
 
 export default function LandingPage() {
   const [selectedCity, setSelectedCity] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
+  const [priceRange, setPriceRange] = useState(200);
+  const [minRating, setMinRating] = useState(0);
 
-  const cities = [
-    { id: "grand-city", name: "Grand City", price: "€120/naktī", top: "33%", left: "25%", description: "Lieliska viesnīca pilsētas centrā ar skatu uz parku." },
-    { id: "sunset-view", name: "Sunset View", price: "€85/naktī", top: "75%", left: "66%", description: "Mājīga vieta pie jūras ar brīnišķīgiem saulrietiem." }
+  const allHotels = [
+    { id: "grand-city", name: "Grand City", price: 120, rating: 5, top: "33%", left: "25%", description: "Lieliska viesnīca pilsētas centrā ar skatu uz parku.", amenities: ["Wifi", "Pool"] },
+    { id: "sunset-view", name: "Sunset View", price: 85, rating: 4, top: "75%", left: "66%", description: "Mājīga vieta pie jūras ar brīnišķīgiem saulrietiem.", amenities: ["Wifi", "Beach Access"] }
   ];
 
-  const filteredCities = useMemo(() => {
-    if (!searchQuery) return cities;
-    return cities.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
-  }, [searchQuery]);
+  const filteredHotels = useMemo(() => {
+    return allHotels.filter(h => 
+      h.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+      h.price <= priceRange &&
+      h.rating >= minRating
+    );
+  }, [searchQuery, priceRange, minRating]);
 
   return (
     <ThemeProvider
@@ -74,50 +79,53 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="search" data-section="search">
-        <div className="flex flex-col lg:flex-row gap-8 p-8 max-w-7xl mx-auto">
-          <div className="lg:w-1/4 space-y-4">
-            <h3 className="font-bold text-lg">Galamērķi</h3>
-            <div className="space-y-2">
-                {cities.map((city) => (
-                    <button 
-                        key={city.id} 
-                        onClick={() => setSelectedCity(city.id)}
-                        className={`w-full text-left p-3 rounded-lg border transition-all ${selectedCity === city.id ? "bg-primary text-white border-primary" : "hover:bg-slate-100 border-slate-200"}`}>
-                        {city.name}
-                    </button>
+      <div id="search" data-section="search" className="py-12 px-6">
+        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
+          <div className="lg:w-80 space-y-6">
+            <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
+              <h3 className="font-bold mb-4 flex items-center gap-2"><Filter className="w-4 h-4"/> Filtri</h3>
+              <div className="space-y-4">
+                <div>
+                    <label className="text-sm block mb-1">Budžets: €{priceRange}</label>
+                    <input type="range" min="50" max="300" value={priceRange} onChange={(e) => setPriceRange(Number(e.target.value))} className="w-full"/>
+                </div>
+                <div>
+                    <label className="text-sm block mb-1">Min. vērtējums</label>
+                    <select className="w-full p-2 border rounded" onChange={(e) => setMinRating(Number(e.target.value))}>
+                        <option value="0">Visi</option>
+                        <option value="4">4+</option>
+                        <option value="5">5</option>
+                    </select>
+                </div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 space-y-2 h-96 overflow-y-auto">
+                <h4 className="font-bold">Redzamās viesnīcas:</h4>
+                {filteredHotels.map(h => (
+                    <div key={h.id} className="p-3 text-sm bg-slate-50 rounded-lg hover:bg-slate-100 transition">
+                        {h.name} - €{h.price}
+                    </div>
                 ))}
             </div>
           </div>
-          <div className="flex-grow h-[500px] bg-slate-100 rounded-xl flex flex-col p-6 shadow-inner relative overflow-hidden">
+          <div className="flex-grow h-[600px] bg-slate-100 rounded-2xl flex flex-col p-6 shadow-inner relative overflow-hidden">
                 <div className="flex items-center justify-between mb-4 bg-white p-3 rounded-lg shadow-sm border border-black/10">
                   <div className="flex items-center gap-2">
                     <SearchIcon className="w-5 h-5 text-muted-foreground" />
                     <input type="text" placeholder="Meklēt pilsētu..." className="outline-none" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
                   </div>
-                  <div className="flex gap-2">
-                    <button className="p-2 hover:bg-slate-100 rounded"><ZoomIn className="w-5 h-5" /></button>
-                    <button className="p-2 hover:bg-slate-100 rounded"><ZoomOut className="w-5 h-5" /></button>
-                  </div>
                 </div>
-                <div className="flex-grow flex items-center justify-center bg-slate-300 rounded-lg relative">
-                    {filteredCities.map((city) => (
+                <div className="flex-grow flex items-center justify-center bg-slate-200 rounded-lg relative">
+                    {filteredHotels.map((city) => (
                         <div 
                             key={city.id} 
                             className="absolute cursor-pointer flex flex-col items-center group"
                             style={{ top: city.top, left: city.left }}
                             onClick={() => setSelectedCity(selectedCity === city.id ? null : city.id)}
                         >
-                            <div className={`p-2 rounded-full border-2 border-white shadow-lg transition-colors ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500 animate-bounce"}`}>
+                            <div className={`p-2 rounded-full border-2 border-white shadow-lg ${selectedCity === city.id ? "bg-blue-600" : "bg-red-500"}`}>
                                 <MapPin className="w-5 h-5 text-white" />
                             </div>
-                            {selectedCity === city.id && (
-                                <div className="bg-white p-4 rounded-xl shadow-2xl mt-2 w-48 animate-in fade-in zoom-in">
-                                    <h4 className="font-bold flex items-center gap-2"><Info className="w-4 h-4"/> {city.name}</h4>
-                                    <p className="text-sm text-gray-600 mt-1">{city.description}</p>
-                                    <div className="mt-2 pt-2 border-t font-bold text-blue-600">{city.price}</div>
-                                </div>
-                            )}
                         </div>
                     ))}
                 </div>