https://10code.ai/assets/mar-y-costa-B2kbNksa.js

1import{u as L,j as e}from"./vendor-query-Df_Xbx4p.js";import{u as F,r}from"./vendor-router-BHV-2cCT.js";import{S as n}from"./scroll-reveal-BZHUMeV6.js";import{G as v}from"./glass-card-848ey6Yv.js";import{A as z}from"./AdSlot-CbpdrCGw.js";import{O as N}from"./OdSlot-DbCkcpO4.js";import{A as D}from"./AdInterstitial-C0Fn_rjC.js";import{A as P}from"./AdBanner-XUL33p0m.js";import{g as S,z as d,W as B,E as h,j as O}from"./index-UZ_1qV1X.js";import{u as $}from"./use-beach-favorites-p-pjMHOJ.js";import{W as y,S as I,X as R,H as w,M as C,q as G,I as T}from"./vendor-icons-BAVaECHf.js";import{A as W,m as g}from"./vendor-motion-CdFSgn6J.js";import"./vendor-react-C0Dkio3Y.js";import"./vendor-charts-B2mhFsTX.js";import"./use-mi-andalmet-By7ZJRhV.js";const _="/videos/el-tiempo-en-malaga.mp4",q=d.filter(i=>O.includes(i.nombre)).sort(()=>Math.random()-.5),f={Atlántico:"#1E90FF",Estrecho:"#FF6B35",Mediterráneo:"#4CAF50"};function oe(){const[,i]=F(),[l,c]=r.useState(""),[m,o]=r.useState(!1),x=r.useRef(null),{favorites:b}=$(),{data:j}=L({queryKey:["/api/weather/provinces"],staleTime:300*1e3}),M=r.useMemo(()=>{const a=new Date().getHours();return a<7||a>=21},[]),A=r.useMemo(()=>{const a={};return j?.forEach(t=>{a[t.name]=S(t.weatherCode).icon}),a},[j]);r.useEffect(()=>{document.title="Meteoplaya | Andalmet — Condiciones Marinas en Andalucía, Ceuta y Melilla"},[]),r.useEffect(()=>{function a(t){x.current&&!x.current.contains(t.target)&&o(!1)}return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[]);const u=r.useMemo(()=>{if(!l.trim())return[];const a=l.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");return d.filter(t=>{const s=t.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,""),E=t.municipio.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,""),k=t.provincia.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"");return s.includes(a)||E.includes(a)||k.includes(a)}).slice(0,8)},[l]);function p(a){c(""),o(!1),i(`/el-tiempo-en/${h(a.nombre)}`)}return e.jsxs("div",{className:"pt-[calc(var(--hh)+1rem)] pb-16 min-h-screen",children:[e.jsx(D,{slotId:"meteoplaya"}),e.jsxs("section",{className:"relative h-[50vh] min-h-[380px] flex items-center justify-center overflow-hidden",children:[e.jsx("video",{src:_,className:"absolute inset-0 w-full h-full object-cover",autoPlay:!0,muted:!0,loop:!0,playsInline:!0,"data-testid":"video-hero-mar"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/65"}),e.jsx("div",{className:"relative z-10 text-center px-4 max-w-3xl mx-auto",children:e.jsxs(n,{children:[e.jsx("div",{className:"flex justify-center mb-4",children:e.jsxs("div",{className:"flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 backdrop-blur-sm border border-white/20",children:[e.jsx(y,{className:"w-4 h-4 text-[#64B5F6]"}),e.jsx("span",{className:"text-white/90 text-xs font-medium",children:"Condiciones marinas en tiempo real"})]})}),e.jsx("h1",{className:"text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4","data-testid":"text-mar-title",children:"Meteoplayas"}),e.jsx("p",{className:"text-base sm:text-lg text-white/80 max-w-xl mx-auto",children:"Condiciones meteorológicas de nuestros mares y zonas costeras. Organiza tu escapada a la playa en las mejores condiciones y planifica tus actividades"})]})})]}),e.jsx("section",{className:"py-10 sm:py-16 px-4 sm:px-6",children:e.jsxs("div",{className:"max-w-5xl mx-auto",children:[e.jsx(N,{desktop:"Content_1",mobile:"Mobile_Pos1"}),e.jsx(n,{children:e.jsxs("div",{className:"mb-8",children:[e.jsxs("div",{className:"relative max-w-md mx-auto mb-4",ref:x,"data-testid":"location-search-wrapper",children:[e.jsxs("div",{className:"relative",children:[e.jsx(I,{className:"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"}),e.jsx("input",{type:"text",value:l,onChange:a=>{c(a.target.value),o(!0)},onFocus:()=>o(!0),placeholder:"Buscar playa...",className:"w-full pl-9 pr-9 py-2.5 rounded-xl border border-gray-200 bg-white text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#2

1E7D32]/30 focus:border-[#2E7D32] shadow-sm transition-all","data-testid":"input-search-location"}),l&&e.jsx("button",{onClick:()=>{c(""),o(!1)},className:"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600","data-testid":"button-clear-search",children:e.jsx(R,{className:"w-3.5 h-3.5"})})]}),e.jsxs(W,{children:[m&&!l.trim()&&b.length>0&&e.jsxs(g.div,{initial:{opacity:0,y:-4},animate:{opacity:1,y:0},exit:{opacity:0,y:-4},transition:{duration:.15},className:"absolute z-50 w-full mt-1.5 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden","data-testid":"search-dropdown-favorites",children:[e.jsxs("div",{className:"px-4 pt-3 pb-1.5 flex items-center gap-1.5",children:[e.jsx(w,{className:"w-3 h-3 fill-[#2E7D32] text-[#2E7D32]"}),e.jsx("span",{className:"text-[10px] font-bold tracking-widest text-[#2E7D32] uppercase",children:"Mis playas"})]}),b.map(a=>{const t=A[a.provincia]??null;return e.jsxs("button",{onClick:()=>{c(""),o(!1),i(`/el-tiempo-en/${h(a.nombre)}`)},className:"w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors text-left border-b border-gray-50 last:border-0","data-testid":`search-favorite-beach-${a.nombre}`,children:[t?e.jsx("span",{className:"w-7 h-7 rounded-xl bg-sky-50 flex items-center justify-center shrink-0",children:e.jsx(B,{type:t,size:22,isNight:M,animated:!1})}):e.jsx("span",{className:"w-7 h-7 rounded-xl bg-[#2E7D32]/10 flex items-center justify-center shrink-0",children:e.jsx(w,{className:"w-3.5 h-3.5 fill-[#2E7D32] text-[#2E7D32]"})}),e.jsx("span",{className:"text-sm font-medium text-gray-800 flex-1 min-w-0 truncate",children:a.nombre})]},a.nombre)})]}),m&&u.length>0&&e.jsx(g.div,{initial:{opacity:0,y:-4},animate:{opacity:1,y:0},exit:{opacity:0,y:-4},transition:{duration:.15},className:"absolute z-50 w-full mt-1.5 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden","data-testid":"search-dropdown",children:u.map(a=>e.jsxs("button",{onClick:()=>p(a),className:"w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors text-left border-b border-gray-50 last:border-0","data-testid":`search-result-${a.nombre}`,children:[e.jsx(C,{className:"w-3.5 h-3.5 flex-shrink-0",style:{color:f[a.mar]}}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("span",{className:"text-sm font-semibold text-gray-800",children:a.nombre}),e.jsxs("span",{className:"text-xs text-gray-600 ml-1.5",children:[a.municipio,", ",a.provincia]})]}),e.jsx("span",{className:"text-[9px] font-bold px-2 py-0.5 rounded-full text-white flex-shrink-0",style:{backgroundColor:f[a.mar]},children:a.mar})]},`${a.nombre}-${a.provincia}`))}),m&&l.trim()&&u.length===0&&e.jsx(g.div,{initial:{opacity:0,y:-4},animate:{opacity:1,y:0},exit:{opacity:0,y:-4},className:"absolute z-50 w-full mt-1.5 bg-white border border-gray-200 rounded-xl shadow-lg px-4 py-3",children:e.jsx("p",{className:"text-xs text-gray-600 text-center",children:"No se encontraron playas"})})]})]}),e.jsx("p",{className:"text-[10px] text-gray-600 text-center mb-2",children:"Playas populares"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2","data-testid":"popular-locations",children:q.map(a=>e.jsx("button",{onClick:()=>p(a),className:"px-3 py-1.5 rounded-full text-xs font-medium transition-all border bg-white text-gray-600 hover:border-gray-300 border-gray-200 hover:text-[#2E7D32]","data-testid":`popular-${a.nombre}`,children:a.nombre.replace(/^Playa de(l)? /i,"")},a.nombre))})]})}),e.jsxs(n,{delay:.08,children:[e.jsx("h2",{className:"text-xl font-bold text-gray-900 mb-2 text-center",children:"Busca tu playa"}),e.jsxs("p",{className:"text-sm text-gray-600 text-center mb-6 max-w-md mx-auto",children:[d.length," playas de Andalucía, Ceuta y Melilla con previsión meteorológica y condiciones marinas"]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-10",children:["Huelva","Cádiz","Málaga","Granada","Almería","Ceuta","Melilla"].map(a=>{const t=d.filter(s=>s.provincia===a);return e.jsxs(v,{intensity:"light",className:"p-4 flex flex-col",style:{minHeight:"580px"},"data-testid":`province-card-${a}`,children:[e.jsxs("div",{className:"flex items-center justify-between mb-3 flex-shrink-0",children:[e.jsx("h3",{className:"text-sm font-bold text-gray-900",children:a}),e.jsxs("span",{className:"text-[10px] text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full",children:[t.length," playas"]})]}),e.jsx("div",{className:"grid grid-cols-3 gap-x-2 gap-y-0.5 content-start",children:t.map(s=>e.jsxs("button",{onClick:()=>p(s),className:"flex items-center gap-1 text-left hover:text-[#2E7D32] transition-colors group min-w-0 py-0.5","data-testid":`playa-link-${h(s.nombre)}`,children:[e.jsx("div",{className:"w-1 h-1 rounded-full flex-shrink-0",style:{backgroundColor:f[s.mar]}}),e.jsx("span",{className:"text-[10px] text-gray-600 group-hover:text-[#2E7D32] transition-colors truncate leading-tight",children:s.nombre.replace(/^Playa de(l)? /i,"")})]},s.nombre))})]},a)})})]}),e.jsx(P,{}),e.jsx(n,{delay:.1,children:e.jsx("h2",{className:"text-xl sm:text-2xl font-bold text-gray-900 mb-6 text-center",children:"La costa de Andalucía, Ceuta y Melilla"})}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10",children:[{color:"#1E90FF",mar:"Costa Atlántica",provincias:"Huelva · Cádiz",icon:y,desc:"La costa atlántica andaluza está influenciada por dinámica oceánica. Las mareas son notables (1–3 m de amplitud) y el oleaje y mar de fondo pueden ser elevados en los temporales propios del otoño e invierno. Los vientos dominantes s

1on el Poniente y el Levante, especialmente en el Estrecho aunque también predomina el suroeste bajo la influencia de las Borrascas Atlánticas.",highlight:"Oleaje generalmente mayor que el Mediterráneo"},{color:"#FF6B35",mar:"Estrecho de Gibraltar",provincias:"Tarifa · Algeciras · Ceuta",icon:G,desc:"El Estrecho es una de las zonas con mayor viento de Europa. El Levante y el Poniente pueden alcanzar fuerza 9-10 en la escala Beaufort. Es paraíso del kitesurf y windsurf, pero exige respeto. Las corrientes son intensas.",highlight:"Zona de mayor viento de toda Andalucía"},{color:"#4CAF50",mar:"Costa Mediterránea",provincias:"Málaga · Granada · Almería · Melilla",icon:T,desc:"El Mediterráneo tiene mareas mínimas y un oleaje generalmente más suave. La temperatura del agua es más cálida en verano. Los vientos más frecuentes son el Levante y la Brisa Marina. Excelente para snorkel y buceo.",highlight:"Aguas más cálidas y oleaje más suave"},{color:"#7C4DFF",mar:"Ceuta",provincias:"Estrecho de Gibraltar · Mediterráneo",icon:C,desc:"Ceuta reúne playas abiertas al Estrecho de Gibraltar y al Mediterráneo, con condiciones de oleaje y viento que pueden variar mucho entre sus dos fachadas costeras.",highlight:"Dos fachadas marinas en una misma ciudad"},{color:"#00897B",mar:"Melilla",provincias:"Mar de Alborán · Mediterráneo",icon:y,desc:"Las playas de Melilla se asoman al mar de Alborán, dentro del Mediterráneo occidental. Consulta en cada ficha el viento, el oleaje y la temperatura del agua de sus coordenadas reales.",highlight:"Condiciones del mar de Alborán"}].map((a,t)=>{const s=a.icon;return e.jsx(n,{delay:t*.1,children:e.jsxs(v,{intensity:"light",className:"p-5 h-full border-t-4 flex flex-col",style:{borderTopColor:a.color},"data-testid":`coast-card-${t}`,children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx(s,{className:"w-4 h-4",style:{color:a.color}}),e.jsx("h3",{className:"text-sm font-bold text-gray-900",children:a.mar})]}),e.jsx("p",{className:"text-[10px] text-gray-600 mb-3",children:a.provincias}),e.jsx("p",{className:"text-xs text-gray-500 leading-relaxed mb-3 flex-1",children:a.desc}),e.jsx("div",{className:"px-3 py-2 rounded-lg text-[10px] font-medium text-white mt-auto",style:{backgroundColor:a.color},children:a.highlight})]})},t)})}),e.jsx(N,{desktop:"Content_2",mobile:"Mobile_Pos2"}),e.jsx("div",{className:"mb-8",children:e.jsx(z,{id:"MAR-COSTA-2"})})]})})]})}export{oe as default};