/* Activity cards, map, and modal */
const { useState: _us, useEffect: _ue, useMemo: _um, useRef: _ur } = React;

// Resolve an image URL for an activity.
// Priority: explicit a.image → ACTIVITY_IMAGES (from teepoint15.cz) → category pool (hashed) → single category fallback.
function imageForActivity(a) {
  if (a.image) return a.image;
  if (window.ACTIVITY_IMAGES && window.ACTIVITY_IMAGES[a.id]) return window.ACTIVITY_IMAGES[a.id];
  const pool = (window.CATEGORY_IMAGE_POOL && window.CATEGORY_IMAGE_POOL[a.category]) || [];
  if (pool.length) {
    let h = 0;
    for (let i = 0; i < a.id.length; i++) h = (h * 31 + a.id.charCodeAt(i)) >>> 0;
    return pool[h % pool.length];
  }
  return window.CATEGORY_IMAGES?.[a.category] || "";
}

// <img> with a graceful gradient+icon fallback when the remote photo fails to load.
function ActivityImage({ a, height = 160, radius = 10, dark }) {
  const [failed, setFailed] = _us(false);
  const { Icon } = CATEGORY_META[a.category];
  const src = imageForActivity(a);
  if (failed || !src) {
    return (
      <div style={{
        height, borderRadius: radius, overflow: 'hidden', position: 'relative',
        background: 'linear-gradient(135deg, #1E3A2E 0%, #2C4C3E 70%, #C9A961 100%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'rgba(245,234,208,0.45)',
      }}>
        <Icon size={56} stroke={1.2}/>
      </div>
    );
  }
  return (
    <div style={{
      height, borderRadius: radius, overflow: 'hidden', position: 'relative',
      background: dark ? '#0F241C' : '#E4DDC8',
    }}>
      <img
        src={src}
        alt={a.name?.cs || a.id}
        loading="lazy"
        onError={() => setFailed(true)}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(15,36,28,0) 55%, rgba(15,36,28,0.35) 100%)',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

// Difficulty dots
function DifficultyDots({ level, dark }) {
  const n = DIFFICULTY_DOTS[level] || 1;
  return (
    <span style={{ display: 'inline-flex', gap: 3, alignItems: 'center' }}>
      {[1,2,3].map(i => (
        <span key={i} style={{
          width: 5, height: 5, borderRadius: 999,
          background: i <= n ? '#C9A961' : (dark ? 'rgba(255,255,255,0.15)' : 'rgba(30,58,46,0.15)'),
        }}/>
      ))}
    </span>
  );
}

// Meta row — distance · duration · difficulty
function ActivityMeta({ a, t, lang, dark, compact }) {
  const col = dark ? 'rgba(245,234,208,0.65)' : 'rgba(30,58,46,0.62)';
  const sep = <span style={{ color: col, opacity: 0.4 }}>·</span>;
  return (
    <div style={{
      display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap',
      fontFamily: 'Inter, sans-serif', fontSize: compact ? 11.5 : 12.5,
      color: col, letterSpacing: '0.02em',
    }}>
      <span>{a.distance}</span>
      {sep}
      <span>{a.duration[lang]}</span>
      {sep}
      <DifficultyDots level={a.difficulty} dark={dark}/>
    </div>
  );
}

// Card — three density variants
function ActivityCard({ a, t, lang, dark, density, onOpen }) {
  const { Icon } = CATEGORY_META[a.category];
  const bg = dark ? 'rgba(255,255,255,0.04)' : '#fff';
  const border = dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(30,58,46,0.08)';
  const titleCol = dark ? '#F5EAD0' : '#1E3A2E';
  const descCol = dark ? 'rgba(245,234,208,0.72)' : 'rgba(30,58,46,0.72)';

  if (density === 'list') {
    return (
      <button onClick={onOpen} style={{
        display:'flex', alignItems:'center', gap:14, width:'100%',
        background: bg, border, borderRadius: 10, padding: 10,
        textAlign: 'left', cursor: 'pointer', color: 'inherit',
        transition: 'transform 0.15s, box-shadow 0.15s',
      }}
      onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-1px)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
      >
        <div style={{ width: 96, flexShrink: 0 }}>
          <ActivityImage a={a} height={72} radius={8} dark={dark}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontSize: 20, fontWeight: 600,
            color: titleCol, letterSpacing: '-0.01em', marginBottom: 3,
          }}>{a.name[lang]}</div>
          <ActivityMeta a={a} t={t} lang={lang} dark={dark} compact/>
        </div>
        <div style={{ color: '#C9A961', flexShrink: 0, paddingRight: 6 }}>
          <IconArrow size={18}/>
        </div>
      </button>
    );
  }

  if (density === 'tile') {
    return (
      <button onClick={onOpen} style={{
        position: 'relative', display:'flex', flexDirection: 'column',
        width:'100%', minHeight: 320,
        background: '#1E3A2E',
        color: '#F5EAD0',
        border: 'none', borderRadius: 12, padding: 0,
        textAlign: 'left', cursor: 'pointer',
        overflow: 'hidden',
        transition: 'transform 0.2s, box-shadow 0.2s',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.25)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
      >
        <ActivityImage a={a} height={180} radius={0} dark={dark}/>
        <div style={{ padding: '20px 22px 22px', display: 'flex', flexDirection: 'column', flex: 1, gap: 10 }}>
          <div style={{ color: '#C9A961' }}>
            <Icon size={22} stroke={1.4}/>
          </div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontSize: 24, fontWeight: 600,
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>{a.name[lang]}</div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.5,
            color: 'rgba(245,234,208,0.78)', flex: 1,
          }}>{a.desc[lang]}</div>
          <ActivityMeta a={a} t={t} lang={lang} dark={true} compact/>
        </div>
      </button>
    );
  }

  // default: grid — image on top, content below
  return (
    <button onClick={onOpen} style={{
      display:'flex', flexDirection: 'column', width:'100%',
      background: bg, border, borderRadius: 12, padding: 0,
      textAlign: 'left', cursor: 'pointer', color: 'inherit',
      overflow: 'hidden',
      transition: 'transform 0.15s, box-shadow 0.15s',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = dark ? '0 10px 28px rgba(0,0,0,0.35)' : '0 10px 28px rgba(30,58,46,0.1)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <ActivityImage a={a} height={170} radius={0} dark={dark}/>
      <div style={{ padding: '18px 20px 18px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ color: '#C9A961' }}>
            <Icon size={20} stroke={1.4}/>
          </div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 10.5, letterSpacing: '0.15em',
            textTransform: 'uppercase', color: dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.5)',
            fontWeight: 600,
          }}>{t.category[a.category]}</div>
        </div>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontSize: 22, fontWeight: 600,
          color: titleCol, letterSpacing: '-0.01em', lineHeight: 1.15,
        }}>{a.name[lang]}</div>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.5,
          color: descCol, flex: 1,
        }}>{a.desc[lang]}</div>
        <ActivityMeta a={a} t={t} lang={lang} dark={dark} compact/>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// Category section
// ─────────────────────────────────────────────────────────────
function CategorySection({ catKey, activities, t, lang, dark, density, onOpen, selectedCat }) {
  const { Icon } = CATEGORY_META[catKey];
  const filtered = activities.filter(a => a.category === catKey);
  if (!filtered.length) return null;
  if (selectedCat !== 'all' && selectedCat !== catKey) return null;

  const gridTemplate = density === 'list'
    ? '1fr'
    : density === 'tile'
    ? 'repeat(auto-fit, minmax(280px, 1fr))'
    : 'repeat(auto-fit, minmax(240px, 1fr))';

  return (
    <section id={`cat-${catKey}`} style={{ marginBottom: 48, scrollMarginTop: 80 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18,
        paddingBottom: 12, flexWrap: 'wrap',
        borderBottom: dark ? '1px solid rgba(245,234,208,0.12)' : '1px solid rgba(30,58,46,0.1)',
      }}>
        <div style={{ color: '#C9A961', alignSelf: 'center' }}>
          <Icon size={22} stroke={1.5}/>
        </div>
        <h3 style={{
          fontFamily: '"Cormorant Garamond", serif', fontSize: 30, fontWeight: 500,
          letterSpacing: '-0.015em', margin: 0,
          color: dark ? '#F5EAD0' : '#1E3A2E',
        }}>{t.category[catKey]}</h3>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 13, color: dark ? 'rgba(245,234,208,0.55)' : 'rgba(30,58,46,0.55)',
          marginLeft: 'auto',
        }}>{t.categoryDesc[catKey]}</div>
      </div>
      <div style={{ display: 'grid', gap: 12, gridTemplateColumns: gridTemplate }}>
        {filtered.map(a => (
          <ActivityCard key={a.id} a={a} t={t} lang={lang} dark={dark} density={density} onOpen={() => onOpen(a)} />
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Map — stylised SVG of the area with category-coloured pins
// ─────────────────────────────────────────────────────────────
function AreaMap({ activities, t, lang, dark, selectedCat, onOpen, villaGps }) {
  const [hover, setHover] = _us(null);

  const visible = selectedCat === 'all'
    ? activities
    : activities.filter(a => a.category === selectedCat);

  const bg = dark ? '#0F241C' : '#EDE7D7';
  const land = dark ? '#173028' : '#E4DDC8';
  const water = dark ? '#1B3A4A' : '#BCD4D6';
  const road = dark ? 'rgba(201,169,97,0.35)' : 'rgba(30,58,46,0.22)';
  const forest = dark ? '#102820' : '#D6CFB8';

  return (
    <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', background: bg, aspectRatio: '16/10' }}>
      <svg viewBox="0 0 100 62" style={{ width: '100%', height: '100%', display: 'block' }} preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="topoMap" width="4" height="4" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="0.3" fill={dark ? 'rgba(245,234,208,0.08)' : 'rgba(30,58,46,0.08)'}/>
          </pattern>
        </defs>
        <rect width="100" height="62" fill={land}/>
        <rect width="100" height="62" fill="url(#topoMap)"/>

        {/* Forests */}
        <path d="M0,0 Q20,5 35,3 L40,0 Z" fill={forest}/>
        <path d="M0,10 Q15,22 8,30 L0,28 Z" fill={forest} opacity="0.7"/>
        <path d="M60,0 Q75,6 90,2 L100,0 L100,15 Q80,12 65,18 L60,10 Z" fill={forest}/>
        <path d="M70,40 Q85,45 95,42 L100,50 L100,62 L75,62 Z" fill={forest} opacity="0.8"/>
        <path d="M0,50 Q10,52 20,55 L15,62 L0,62 Z" fill={forest}/>

        {/* Lakes */}
        <ellipse cx="40" cy="49.6" rx="4.5" ry="2" fill={water} opacity="0.85"/>
        <ellipse cx="58" cy="12.5" rx="3" ry="1.4" fill={water}/>
        <ellipse cx="72" cy="31" rx="3" ry="1.4" fill={water}/>

        {/* Roads */}
        <path d="M-5,32 Q 25,28 50,48 Q 72,58 108,50" fill="none" stroke={road} strokeWidth="0.4" strokeDasharray="1 1"/>
        <path d="M50,-5 Q 48,20 50,30 Q 52,60 50,68" fill="none" stroke={road} strokeWidth="0.4" strokeDasharray="1 1"/>
        <path d="M-5,18 Q 30,15 55,30 Q 80,40 108,32" fill="none" stroke={road} strokeWidth="0.3" strokeDasharray="0.6 1.2"/>

        {/* Villa marker */}
        <g transform="translate(50 29.8)">
          <circle r="3.2" fill="#C9A961" opacity="0.2"/>
          <circle r="2" fill="#C9A961" opacity="0.35"/>
          <circle r="1.3" fill="#C9A961"/>
          <circle r="0.5" fill="#1E3A2E"/>
        </g>
        <text x="50" y="35.8" fontSize="2.2" fontFamily="Cormorant Garamond, serif" fontWeight="600" textAnchor="middle" fill={dark ? '#F5EAD0' : '#1E3A2E'}>
          Vila Albatros
        </text>
        <text x="50" y="38.4" fontSize="1.4" fontFamily="Inter, sans-serif" textAnchor="middle" fill={dark ? 'rgba(245,234,208,0.55)' : 'rgba(30,58,46,0.55)'} letterSpacing="0.12em">
          HEŘMANICE · MALEVIL
        </text>

        {/* Labels */}
        <text x="40" y="52" fontSize="1.6" fontFamily="Inter, sans-serif" textAnchor="middle" fill={dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.45)'}>
          Máchovo j.
        </text>
        <text x="75" y="53" fontSize="1.6" fontFamily="Inter, sans-serif" textAnchor="middle" fill={dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.45)'}>
          Ještěd
        </text>
        <text x="45" y="18.5" fontSize="1.6" fontFamily="Inter, sans-serif" textAnchor="middle" fill={dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.45)'}>
          Lužické hory
        </text>

        {/* Pins */}
        {visible.map(a => {
          const isHover = hover === a.id;
          const cx = a.map.x;
          const cy = a.map.y * 0.62;
          return (
            <g key={a.id} transform={`translate(${cx} ${cy})`}
              style={{ cursor: 'pointer' }}
              onMouseEnter={() => setHover(a.id)}
              onMouseLeave={() => setHover(null)}
              onClick={() => onOpen(a)}
            >
              <circle r={isHover ? 2.6 : 2.1} fill="#C9A961" opacity="0.3"/>
              <circle r={isHover ? 1.6 : 1.3} fill="#C9A961" stroke="#1E3A2E" strokeWidth="0.2"/>
              <circle r="0.5" fill="#1E3A2E"/>
            </g>
          );
        })}
      </svg>

      {/* Hover tooltip */}
      {hover && (() => {
        const a = activities.find(x => x.id === hover);
        if (!a) return null;
        const cx = a.map.x; const cy = a.map.y * 0.62;
        return (
          <div style={{
            position: 'absolute',
            left: `${cx}%`, top: `${(cy/62)*100}%`,
            transform: 'translate(-50%, calc(-100% - 12px))',
            background: dark ? '#F5EAD0' : '#1E3A2E',
            color: dark ? '#1E3A2E' : '#F5EAD0',
            padding: '8px 12px', borderRadius: 6,
            fontFamily: 'Inter, sans-serif', fontSize: 12, whiteSpace: 'nowrap',
            pointerEvents: 'none', zIndex: 10,
            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
          }}>
            <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 15, fontWeight: 600 }}>{a.name[lang]}</div>
            <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2 }}>{a.distance} · {a.duration[lang]}</div>
          </div>
        );
      })()}

      {/* Open-full-map overlay button (bottom-right) */}
      <a
        href={googleMapsLink(villaGps)}
        target="_blank" rel="noopener noreferrer"
        style={{
          position: 'absolute', right: 12, bottom: 12,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: dark ? 'rgba(23,48,40,0.92)' : 'rgba(255,255,255,0.92)',
          color: dark ? '#F5EAD0' : '#1E3A2E',
          padding: '8px 12px', borderRadius: 999,
          fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600,
          textDecoration: 'none',
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        }}
      >
        <IconPinDrop size={14}/> {t.openInMaps}
      </a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Activity detail modal — with map links and directions
// ─────────────────────────────────────────────────────────────
function ActivityModal({ a, t, lang, dark, onClose, villaGps }) {
  _ue(() => {
    if (!a) return;
    document.body.style.overflow = 'hidden';
    const onEsc = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, [a]);

  if (!a) return null;
  const { Icon } = CATEGORY_META[a.category];
  const directionsMode = a.routeMode === 'bike' ? 'bicycling' : (a.category === 'walks' ? 'walking' : 'driving');

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(15,36,28,0.6)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      padding: '40px 16px 0',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: dark ? '#173028' : '#F7F3EA',
        color: dark ? '#F5EAD0' : '#1E3A2E',
        width: '100%', maxWidth: 560,
        borderRadius: '16px 16px 0 0',
        padding: '32px 28px 32px',
        position: 'relative',
        boxShadow: '0 -8px 40px rgba(0,0,0,0.3)',
        maxHeight: '92vh', overflowY: 'auto',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 18, right: 18, zIndex: 3,
          background: 'rgba(255,255,255,0.9)',
          border: 'none', borderRadius: 999,
          width: 36, height: 36, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#1E3A2E', boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
        }}>
          <IconClose size={16}/>
        </button>
        <div style={{ margin: '-32px -28px 20px' }}>
          <ActivityImage a={a} height={220} radius={0} dark={dark}/>
        </div>
        <div style={{ color: '#C9A961', marginBottom: 12 }}>
          <Icon size={30} stroke={1.4}/>
        </div>
        <div style={{
          fontFamily: 'Inter, sans-serif', fontSize: 11, letterSpacing: '0.15em',
          textTransform: 'uppercase', color: dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.5)',
          marginBottom: 6,
        }}>{t.category[a.category]}</div>
        <h2 style={{
          fontFamily: '"Cormorant Garamond", serif', fontSize: 36, fontWeight: 500,
          margin: '0 0 16px', letterSpacing: '-0.015em', lineHeight: 1.1,
        }}>{a.name[lang]}</h2>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
          color: dark ? 'rgba(245,234,208,0.82)' : 'rgba(30,58,46,0.82)',
          margin: '0 0 24px',
        }}>{a.desc[lang]}</p>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
          padding: '16px 0', borderTop: dark ? '1px solid rgba(245,234,208,0.12)' : '1px solid rgba(30,58,46,0.1)',
          borderBottom: dark ? '1px solid rgba(245,234,208,0.12)' : '1px solid rgba(30,58,46,0.1)',
          marginBottom: 20,
        }}>
          <div>
            <div style={{ fontFamily:'Inter', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color: dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.5)', marginBottom: 4 }}>{t.distance}</div>
            <div style={{ fontFamily:'"Cormorant Garamond", serif', fontSize: 22, fontWeight: 600 }}>{a.distance}</div>
          </div>
          <div>
            <div style={{ fontFamily:'Inter', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color: dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.5)', marginBottom: 4 }}>{t.duration}</div>
            <div style={{ fontFamily:'"Cormorant Garamond", serif', fontSize: 22, fontWeight: 600 }}>{a.duration[lang]}</div>
          </div>
          <div>
            <div style={{ fontFamily:'Inter', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color: dark ? 'rgba(245,234,208,0.5)' : 'rgba(30,58,46,0.5)', marginBottom: 4 }}>{t.difficulty}</div>
            <div style={{ fontFamily:'"Cormorant Garamond", serif', fontSize: 22, fontWeight: 600, display:'flex', gap: 10, alignItems:'center' }}>
              {t[a.difficulty]}
              <DifficultyDots level={a.difficulty} dark={dark}/>
            </div>
          </div>
        </div>

        {/* Map actions */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
          <a
            href={googleDirections(villaGps, a.gps, directionsMode)}
            target="_blank" rel="noopener noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: '#C9A961', color: '#1E3A2E',
              padding: '10px 14px', borderRadius: 999,
              textDecoration: 'none', fontWeight: 600, fontSize: 13,
              fontFamily: 'Inter, sans-serif', flex: '1 1 auto',
              justifyContent: 'center',
            }}
          >
            <IconNavigate size={14}/> {t.directionsFromVilla}
          </a>
          <PillLink href={mapyCzLink(a.gps)} dark={dark}>
            <IconPinDrop size={13}/> Mapy.cz
          </PillLink>
          <PillLink href={googleMapsLink(a.gps)} dark={dark}>
            <IconPinDrop size={13}/> Google Maps
          </PillLink>
        </div>

        {/* GPS coords, subtle */}
        <div style={{
          fontFamily: 'ui-monospace, SFMono-Regular, monospace',
          fontSize: 11, color: dark ? 'rgba(245,234,208,0.45)' : 'rgba(30,58,46,0.5)',
          letterSpacing: '0.02em',
        }}>
          GPS {a.gps[0].toFixed(4)}° N, {a.gps[1].toFixed(4)}° E
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  DifficultyDots, ActivityMeta, ActivityCard, CategorySection, AreaMap, ActivityModal,
});