/* eslint-disable */
const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ============ AdSense config — sostituire con i propri ID ============
const ADSENSE_PUB = 'ca-pub-9532920578088089';
const AD_SLOTS = {
  midList:    '3018367409', // banner dopo 3° card in lista
  bottomList: '5380040524', // banner fondo lista
  map:        '2753877187', // banner overlay mappa
};

const IS_LOCAL = ['localhost', '127.0.0.1', ''].includes(window.location.hostname);

function AdSenseUnit({ slot, format = 'auto' }) {
  const insRef = useRef(null);
  const pushed = useRef(false);
  useEffect(() => {
    if (!insRef.current || pushed.current) return;
    pushed.current = true;
    try { (window.adsbygoogle = window.adsbygoogle || []).push({}); } catch(_) {}
  }, []);
  if (IS_LOCAL) return null;
  return (
    <ins
      ref={insRef}
      className="adsbygoogle"
      data-ad-client={ADSENSE_PUB}
      data-ad-slot={slot}
      data-ad-format={format}
      data-full-width-responsive="true"
    />
  );
}

// ============ Date utils ============
const TODAY = new Date('2026-05-11T12:00:00');
const MONTHS_IT = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'];
const MONTHS_IT_SHORT = ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'];

function parseDate(s) { return new Date(s + 'T12:00:00'); }
function fmtDate(d) {
  return `${String(d.getDate()).padStart(2,'0')} ${MONTHS_IT_SHORT[d.getMonth()]} ${d.getFullYear()}`;
}
function fmtDateShort(d) {
  return `${String(d.getDate()).padStart(2,'0')}.${String(d.getMonth()+1).padStart(2,'0')}`;
}
function ymKey(d) { return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`; }
function isCurrent(start, end) { return start <= TODAY && TODAY <= end; }
function daysUntil(d) { return Math.ceil((d - TODAY) / (1000*60*60*24)); }
function diffDays(a, b) { return Math.round((b - a) / (1000*60*60*24)); }
function isWeekend(d) { const dow = d.getDay(); return dow === 0 || dow === 6; }
function opensThisWeekend(start) {
  // Saturday May 16 - Sunday May 17, 2026 from today (Mon May 11)
  // Find next Saturday and Sunday
  const today = new Date(TODAY);
  const dow = today.getDay();
  const daysToSat = (6 - dow + 7) % 7 || 7;
  const sat = new Date(today); sat.setDate(today.getDate() + daysToSat); sat.setHours(0,0,0,0);
  const sun = new Date(sat); sun.setDate(sat.getDate() + 1);
  // "opens this weekend" = starts on Sat or Sun OR is already open during weekend
  // Per user request: filter "apre questo weekend" — interpret as: available to visit this weekend (active or opens on/before sunday)
  return start <= sun;
}
function activeOnDate(m, date) {
  const s = parseDate(m.data_inizio);
  const e = parseDate(m.data_fine);
  return s <= date && date <= e;
}

window.dateUtils = { TODAY, MONTHS_IT, MONTHS_IT_SHORT, parseDate, fmtDate, fmtDateShort, ymKey, isCurrent, daysUntil, diffDays, opensThisWeekend, activeOnDate };

// ============ Header ============
function Header({ totalCount, likedCount }) {
  return (
    <header className="header">
      <div className="brand">
        <span className="brand-mark">
          mostre<span className="dot"></span>di<span className="dot"></span>fotografia
        </span>
        <span className="brand-tld">.it</span>
      </div>
      <div className="header-meta">
        <span><strong>{String(totalCount).padStart(2,'0')}</strong> mostre in Italia</span>
      </div>
    </header>
  );
}

// ============ FilterBar ============
const TYPES = ['Retrospettiva', 'Mostra antologica', 'Mostra monografica', 'Mostra collettiva', 'Festival'];

function FilterBar({ filterTypes, setFilterTypes, weekendOnly, setWeekendOnly, sortBy, setSortBy, count }) {
  const toggle = (t) => {
    setFilterTypes(filterTypes.includes(t) ? filterTypes.filter(x=>x!==t) : [...filterTypes, t]);
  };
  return (
    <div className="filterbar">
      <div className="filter-chips">
        {TYPES.map(t => (
          <button
            key={t}
            className={`chip ${filterTypes.includes(t) ? 'active' : ''}`}
            onClick={() => toggle(t)}
          >{t}{filterTypes.includes(t) && <span className="x">×</span>}</button>
        ))}
        <span className="filter-sep"></span>
        <button
          className={`chip chip-weekend ${weekendOnly ? 'active' : ''}`}
          onClick={() => setWeekendOnly(!weekendOnly)}
        >◐ Apre questo weekend{weekendOnly && <span className="x">×</span>}</button>
      </div>
      <div className="sort-select">
        <span>Ordina</span>
        <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="date">Per data</option>
          <option value="city">Per città</option>
          <option value="popular">Per popolarità</option>
        </select>
      </div>
    </div>
  );
}

// ============ Gantt ============
function MonthGantt({ month, year, events, selectedId, onSelect }) {
  // axis is the month, day 1 to last day
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();

  const ticks = [];
  for (let d = 1; d <= daysInMonth; d += 5) ticks.push(d);
  if (ticks[ticks.length-1] !== daysInMonth) ticks.push(daysInMonth);

  const todayInMonth = TODAY.getFullYear() === year && TODAY.getMonth() === month;
  const todayPct = todayInMonth ? ((TODAY.getDate() - 1) / (daysInMonth - 1)) * 100 : null;

  const eventsActiveInMonth = events.filter(e => {
    const s = parseDate(e.data_inizio);
    const en = parseDate(e.data_fine);
    return s <= lastDay && en >= firstDay;
  });

  return (
    <div className="gantt">
      <div className="gantt-axis">
        {ticks.map((d, i) => (
          <span
            key={d}
            className={`tick ${d === 1 || d === daysInMonth ? 'major' : ''}`}
            style={{ left: `${((d - 1) / (daysInMonth - 1)) * 100}%` }}
          >{d}</span>
        ))}
      </div>
      {eventsActiveInMonth.map((e) => {
        const s = parseDate(e.data_inizio);
        const en = parseDate(e.data_fine);
        const startDay = Math.max(1, s.getMonth() === month && s.getFullYear() === year ? s.getDate() : 1);
        const endDay = Math.min(daysInMonth, en.getMonth() === month && en.getFullYear() === year ? en.getDate() : daysInMonth);
        const left = ((startDay - 1) / (daysInMonth - 1)) * 100;
        const right = ((endDay - 1) / (daysInMonth - 1)) * 100;
        const width = Math.max(2, right - left);
        const current = isCurrent(s, en);
        return (
          <div key={e._id} className="gantt-track" title={e.titolo}>
            {todayPct !== null && <span className="gantt-today" style={{left: `${todayPct}%`}}></span>}
            <span
              className={`gantt-bar ${current ? 'current' : ''} ${selectedId && selectedId !== e._id ? 'dim' : ''}`}
              style={{ left: `${left}%`, width: `${width}%` }}
              onClick={() => onSelect(e._id)}
            ></span>
          </div>
        );
      })}
    </div>
  );
}

// ============ EventCard ============
function EventCard({ event, index, isSelected, onSelect, likes, onLike }) {
  const s = parseDate(event.data_inizio);
  const e = parseDate(event.data_fine);
  const current = isCurrent(s, e);
  const likeCount = likes[event._id] || event._baseLikes;
  const liked = likes[event._id] !== undefined;

  return (
    <article
      className={`event-card ${current ? 'current' : ''} ${isSelected ? 'selected' : ''}`}
      onClick={() => onSelect(event._id)}
    >
      <div
        className={`event-thumb ${event.url_immagine ? '' : 'no-img'}`}
        style={event.url_immagine ? { backgroundImage: `url(${event.url_immagine})` } : null}
      ></div>
      <div className="event-body">
        <div className="event-eyebrow">
          <span className="city">{event.citta}</span>
          <span className="type-tag">{event.tipo}</span>
        </div>
        <h3 className="event-title">{event.titolo}</h3>
        <div className="event-sede">{event.sede}</div>
        <div className="event-dates">
          {current && (
            <span className="status-pill"><span className="dot"></span>In corso</span>
          )}
          {!current && s > TODAY && (
            <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--muted)'}}>
              Apre tra {daysUntil(s)} giorni
            </span>
          )}
          <span>{fmtDateShort(s)}</span>
          <span className="dash">—</span>
          <span>{fmtDateShort(e)}</span>
        </div>
      </div>
      <div className="event-right">
        <span className="event-num">№ {String(index + 1).padStart(2,'0')}</span>
        <button
          className={`like-btn ${liked ? 'liked' : ''}`}
          onClick={(ev) => { ev.stopPropagation(); onLike(event._id); }}
        >
          <svg viewBox="0 0 24 24" fill={liked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
          </svg>
          <span>{likeCount}</span>
        </button>
      </div>
    </article>
  );
}

// ============ Sidebar ============
function Sidebar({ events, selectedId, onSelect, likes, onLike, showGantt, showAds }) {
  // Group by start month
  const groups = useMemo(() => {
    const map = new Map();
    events.forEach(e => {
      const s = parseDate(e.data_inizio);
      // Place into the month they start, but events ongoing today go into "Maggio 2026" if start was earlier
      let bucket;
      const sm = s.getMonth(), sy = s.getFullYear();
      if (s <= TODAY && parseDate(e.data_fine) >= TODAY) {
        bucket = `${TODAY.getFullYear()}-${TODAY.getMonth()}`;
      } else {
        bucket = `${sy}-${sm}`;
      }
      if (!map.has(bucket)) map.set(bucket, []);
      map.get(bucket).push(e);
    });
    return Array.from(map.entries())
      .map(([k, v]) => {
        const [y, m] = k.split('-').map(Number);
        return { y, m, events: v };
      })
      .sort((a, b) => a.y === b.y ? a.m - b.m : a.y - b.y);
  }, [events]);

  let globalIndex = 0;
  return (
    <aside className="sidebar">
      {groups.map((g, gi) => {
        const isCurrentMonth = g.y === TODAY.getFullYear() && g.m === TODAY.getMonth();
        return (
          <div className="month-block" key={`${g.y}-${g.m}`}>
            <div className="month-head">
              <div className="month-head-top">
                <div className="month-title">
                  <h2>{MONTHS_IT[g.m]}</h2>
                  <span className="year">{g.y}{isCurrentMonth && ' · ora'}</span>
                </div>
                <span className="month-count">{String(g.events.length).padStart(2,'0')} mostre</span>
              </div>
              {showGantt && (
                <MonthGantt month={g.m} year={g.y} events={g.events} selectedId={selectedId} onSelect={onSelect} />
              )}
            </div>
            <div className="month-list">
              {g.events.map((e, i) => {
                const idx = globalIndex++;
                const cardEl = (
                  <EventCard
                    key={e._id}
                    event={e}
                    index={idx}
                    isSelected={selectedId === e._id}
                    onSelect={onSelect}
                    likes={likes}
                    onLike={onLike}
                  />
                );
                // Insert ad after 3rd card in first group
                if (showAds && gi === 0 && i === 2) {
                  return (
                    <React.Fragment key={`frag-${e._id}`}>
                      {cardEl}
                      <div className="ad-banner" key="ad-mid">
                        <AdSenseUnit slot={AD_SLOTS.midList} />
                      </div>
                    </React.Fragment>
                  );
                }
                return cardEl;
              })}
              {showAds && gi === groups.length - 1 && (
                <div className="ad-banner">
                  <AdSenseUnit slot={AD_SLOTS.bottomList} />
                </div>
              )}
            </div>
          </div>
        );
      })}
      {events.length === 0 && (
        <div className="empty">
          <h3>Nessuna mostra trovata</h3>
          <p>Prova a rimuovere qualche filtro o cambiare città.</p>
        </div>
      )}
    </aside>
  );
}

// ============ Detail Panel ============
function DetailPanel({ event, onClose, likes, onLike }) {
  if (!event) return null;
  const s = parseDate(event.data_inizio);
  const e = parseDate(event.data_fine);
  const current = isCurrent(s, e);
  const totalDays = diffDays(s, e);
  const elapsedDays = Math.max(0, diffDays(s, TODAY));
  const pct = Math.min(100, Math.max(0, (elapsedDays / totalDays) * 100));
  const remaining = Math.max(0, diffDays(TODAY, e));
  const likeCount = likes[event._id] || event._baseLikes;
  const liked = likes[event._id] !== undefined;

  return (
    <section className="detail-panel" key={event._id}>
      <button className="detail-close" onClick={onClose} title="Chiudi">
        <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none">
          <path d="M18 6L6 18M6 6l12 12"/>
        </svg>
      </button>
      <div
        className={`detail-hero ${event.url_immagine ? '' : 'no-img'}`}
        style={event.url_immagine ? { backgroundImage: `url(${event.url_immagine})` } : null}
      >
        <div className="detail-hero-overlay">
          <div className="eyebrow">{event.citta} · {event.tipo}</div>
        </div>
      </div>
      <div className="detail-body">
        <div className="detail-status">
          {current ? (
            <span className="status-pill"><span className="dot"></span>In corso · ancora {remaining} giorni</span>
          ) : s > TODAY ? (
            <span className="status-pill" style={{background:'rgba(0,0,0,0.08)', color:'var(--ink)'}}>
              Apre tra {daysUntil(s)} giorni
            </span>
          ) : (
            <span className="status-pill" style={{background:'rgba(0,0,0,0.08)', color:'var(--muted)'}}>Conclusa</span>
          )}
          <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--muted)', letterSpacing:'0.06em', textTransform:'uppercase'}}>
            ID-{event._id.toString().padStart(3,'0')}
          </span>
        </div>
        <h1 className="detail-title">{event.titolo}</h1>
        {event.autore && <div className="detail-author">di {event.autore}</div>}

        <div className="detail-meta">
          <div className="meta-item">
            <span className="label">Sede</span>
            <span className="value">{event.sede}</span>
          </div>
          <div className="meta-item">
            <span className="label">Indirizzo</span>
            <span className="value">{event.indirizzo}</span>
          </div>
          <div className="meta-item">
            <span className="label">Dal</span>
            <span className="value mono">{fmtDate(s)}</span>
          </div>
          <div className="meta-item">
            <span className="label">Al</span>
            <span className="value mono">{fmtDate(e)}</span>
          </div>
          {event.curatori && (
            <div className="meta-item" style={{gridColumn:'span 2'}}>
              <span className="label">A cura di</span>
              <span className="value">{event.curatori.join(', ')}</span>
            </div>
          )}
          {event.giornate_inaugurali && (
            <div className="meta-item" style={{gridColumn:'span 2'}}>
              <span className="label">Inaugurazione</span>
              <span className="value mono">{event.giornate_inaugurali.map(d => fmtDateShort(parseDate(d))).join(' · ')}</span>
            </div>
          )}
        </div>

        <p className="detail-description">{event.descrizione}</p>

        <div className="detail-actions">
          <a className="btn primary" href={event.url_riferimento} target="_blank" rel="noopener">
            Vai al sito ufficiale
            <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none">
              <path d="M7 17L17 7M9 7h8v8"/>
            </svg>
          </a>
          <button
            className={`btn secondary like-btn ${liked ? 'liked' : ''}`}
            onClick={() => onLike(event._id)}
            style={liked ? {background:'var(--accent)', color:'white', borderColor:'var(--accent)'} : null}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill={liked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
            </svg>
            <span>{likeCount} like</span>
          </button>
          {event.latitudine && event.longitudine && (
            <a
              className="btn secondary"
              href={`https://www.google.com/maps/dir/?api=1&destination=${event.latitudine},${event.longitudine}`}
              target="_blank"
              rel="noopener"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none">
                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
                <circle cx="12" cy="9" r="2.5"/>
              </svg>
              <span>Naviga</span>
            </a>
          )}
        </div>

        <div className="detail-mini-timeline">
          <div className="label">
            <span>Durata · {totalDays} giorni</span>
            <span>{Math.round(pct)}% trascorso</span>
          </div>
          <div className="gantt-track" style={{height:8}}>
            <span className={`gantt-bar ${current ? 'current' : ''}`} style={{left:0, width:'100%'}}></span>
            <span style={{
              position:'absolute', top:-3, bottom:-3,
              left: `${pct}%`, width:1,
              background:'var(--paper)', boxShadow:'0 0 0 1.5px var(--ink)'
            }}></span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Map ============
function MapPanel({ events, selectedId, onSelect, cityFilter, setCityFilter, showMapAd, dismissMapAd, mapStyle }) {
  const mapRef = useRef(null);
  const mapInstance = useRef(null);
  const markersRef = useRef({});
  const tileLayerRef = useRef(null);
  const [searchInput, setSearchInput] = useState('');
  const [showSuggestions, setShowSuggestions] = useState(false);

  // unique cities with counts
  const cities = useMemo(() => {
    const map = new Map();
    events.forEach(e => {
      if (!map.has(e.citta)) map.set(e.citta, { name: e.citta, count: 0, lat: e.latitudine, lon: e.longitudine });
      map.get(e.citta).count++;
    });
    return Array.from(map.values()).sort((a,b) => a.name.localeCompare(b.name));
  }, [events]);

  const filteredSuggestions = useMemo(() => {
    if (!searchInput) return cities;
    const q = searchInput.toLowerCase();
    return cities.filter(c => c.name.toLowerCase().includes(q));
  }, [searchInput, cities]);

  // Init map
  useEffect(() => {
    if (!mapRef.current || mapInstance.current) return;
    const map = L.map(mapRef.current, {
      center: [42.5, 12.5],
      zoom: 6,
      zoomControl: true,
      attributionControl: true,
      preferCanvas: false,
    });
    L.control.zoom({ position: 'bottomright' }).remove();
    map.zoomControl.setPosition('bottomright');
    mapInstance.current = map;
  }, []);

  // Tile style
  useEffect(() => {
    if (!mapInstance.current) return;
    if (tileLayerRef.current) tileLayerRef.current.remove();
    const url = mapStyle === 'dark'
      ? 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png'
      : 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png';
    const labelsUrl = mapStyle === 'dark'
      ? 'https://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png'
      : 'https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.png';
    tileLayerRef.current = L.layerGroup([
      L.tileLayer(url, { attribution: '© OpenStreetMap · CARTO', subdomains:'abcd', maxZoom: 19 }),
      L.tileLayer(labelsUrl, { subdomains:'abcd', maxZoom: 19, pane: 'shadowPane' })
    ]).addTo(mapInstance.current);
  }, [mapStyle]);

  // Markers
  useEffect(() => {
    if (!mapInstance.current) return;
    Object.values(markersRef.current).forEach(m => m.remove());
    markersRef.current = {};

    // group by lat,lon for clustering
    const byPos = new Map();
    events.forEach(e => {
      const key = `${e.latitudine.toFixed(2)},${e.longitudine.toFixed(2)}`;
      if (!byPos.has(key)) byPos.set(key, []);
      byPos.get(key).push(e);
    });

    events.forEach(e => {
      const s = parseDate(e.data_inizio);
      const en = parseDate(e.data_fine);
      const current = isCurrent(s, en);
      const isSel = selectedId === e._id;
      const noImg = !e.url_immagine;
      const offsetKey = `${e.latitudine.toFixed(2)},${e.longitudine.toFixed(2)}`;
      const group = byPos.get(offsetKey);
      const idxInGroup = group.indexOf(e);
      // small offset spiral when multiple at same place
      let dlat = 0, dlon = 0;
      if (group.length > 1 && idxInGroup > 0) {
        const angle = (idxInGroup / group.length) * Math.PI * 2;
        dlat = Math.cos(angle) * 0.06;
        dlon = Math.sin(angle) * 0.08;
      }

      const bgStyle = e.url_immagine ? `background-image:url(${e.url_immagine})` : '';
      const html = `
        <div class="poi-pin ${current ? 'current' : ''} ${noImg ? 'no-img' : ''} ${isSel ? 'selected' : ''}" style="${bgStyle}">
        </div>
      `;
      const icon = L.divIcon({ html, className:'', iconSize:[44,51], iconAnchor:[22,51] });
      const marker = L.marker([e.latitudine + dlat, e.longitudine + dlon], { icon, riseOnHover: true })
        .addTo(mapInstance.current)
        .on('click', () => onSelect(e._id));
      markersRef.current[e._id] = marker;
    });
  }, [events, selectedId, onSelect]);

  // City filter zoom
  useEffect(() => {
    if (!mapInstance.current || !cityFilter) return;
    const city = cities.find(c => c.name === cityFilter);
    if (city) mapInstance.current.flyTo([city.lat, city.lon], 11, { duration: 0.7 });
  }, [cityFilter]);

  // Pan to selected
  useEffect(() => {
    if (!mapInstance.current || !selectedId) return;
    const ev = events.find(e => e._id === selectedId);
    if (ev) {
      mapInstance.current.flyTo([ev.latitudine, ev.longitudine], Math.max(8, mapInstance.current.getZoom()), { duration: 0.5 });
    }
  }, [selectedId]);

  return (
    <div className="map-wrap">
      <div ref={mapRef} id="map"></div>
      <div className="map-search">
        <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none">
          <circle cx="11" cy="11" r="7"/>
          <path d="M21 21l-4.3-4.3"/>
        </svg>
        <input
          placeholder={cityFilter ? `Città: ${cityFilter}` : "Cerca per città (Milano, Torino, Venezia…)"}
          value={searchInput}
          onFocus={() => setShowSuggestions(true)}
          onBlur={() => setTimeout(()=>setShowSuggestions(false), 150)}
          onChange={e => setSearchInput(e.target.value)}
        />
        {(cityFilter || searchInput) && (
          <button className="clear" onClick={() => { setCityFilter(null); setSearchInput(''); mapInstance.current?.flyTo([42.5, 12.5], 6, {duration:0.6}); }}>×</button>
        )}
        {showSuggestions && (
          <div className="map-search-suggestions">
            {filteredSuggestions.length === 0 && (
              <div className="sugg" style={{color:'var(--muted)', fontStyle:'italic'}}>Nessuna città</div>
            )}
            {filteredSuggestions.map(c => (
              <div key={c.name} className="sugg" onMouseDown={() => { setCityFilter(c.name); setSearchInput(''); setShowSuggestions(false); }}>
                <span>{c.name}</span>
                <span className="count">{c.count} {c.count === 1 ? 'mostra' : 'mostre'}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      {showMapAd && (
        <div className="map-ad">
          <button className="ad-close" onClick={dismissMapAd}>×</button>
          <AdSenseUnit slot={AD_SLOTS.map} format="rectangle" />
        </div>
      )}
    </div>
  );
}

// ============ Cookie Banner ============
function CookieBanner({ onAccept, onDecline }) {
  return (
    <div className="cookie-banner">
      <p className="cookie-banner-text">
        Utilizziamo cookie di terze parti (Google AdSense) per mostrare annunci personalizzati.
        Leggi la nostra <a href="/privacy" target="_blank" rel="noopener">Privacy Policy</a>.
      </p>
      <div className="cookie-banner-actions">
        <button type="button" className="btn secondary" onClick={onDecline}>Rifiuta</button>
        <button type="button" className="btn primary" onClick={onAccept}>Accetta</button>
      </div>
    </div>
  );
}

Object.assign(window, { Header, FilterBar, Sidebar, DetailPanel, MapPanel, CookieBanner, MONTHS_IT, TODAY });