// Swiss design language v2 - Home + Map
// Single hot accent (#FF4D2E), strict grid, big sans, mono for data.

const PHONE_W = 390;
const PHONE_H = 844;

function StatusBar({ time = '14:32', dark = false }) {
  const fg = dark ? '#FFFFFF' : '#000000';
  return (
    <div style={{
      position:'absolute', top: 0, left: 0, right: 0, height: 44,
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'0 28px', color: fg,
      fontFamily:'-apple-system, "SF Pro Text", system-ui, sans-serif',
      fontSize: 15, fontWeight: 600, letterSpacing: -0.2, zIndex: 100,
      pointerEvents:'none',
    }}>
      <span style={{ fontFeatureSettings:'"tnum" 1' }}>{time}</span>
      <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
        {/* signal */}
        <svg width="17" height="11" viewBox="0 0 17 11" fill={fg}>
          <rect x="0" y="7" width="3" height="4" rx="0.5"/>
          <rect x="4.5" y="5" width="3" height="6" rx="0.5"/>
          <rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/>
          <rect x="13.5" y="0" width="3" height="11" rx="0.5"/>
        </svg>
        {/* wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill={fg}>
          <path d="M7.5 1.2c2.6 0 5 .9 6.9 2.5l-1.2 1.4c-1.6-1.3-3.6-2-5.7-2s-4.1.7-5.7 2L.6 3.7C2.5 2.1 4.9 1.2 7.5 1.2zm0 3.4c1.7 0 3.3.6 4.6 1.6l-1.2 1.4c-1-.7-2.2-1.1-3.4-1.1s-2.4.4-3.4 1.1L2.9 6.2c1.3-1 2.9-1.6 4.6-1.6zm0 3.4c.8 0 1.6.2 2.2.7L7.5 11 5.3 8.7c.6-.5 1.4-.7 2.2-.7z"/>
        </svg>
        {/* battery */}
        <svg width="27" height="11" viewBox="0 0 27 11" fill="none">
          <rect x="0.5" y="0.5" width="22" height="10" rx="2.5" stroke={fg} strokeOpacity="0.4"/>
          <rect x="2" y="2" width="19" height="7" rx="1" fill={fg}/>
          <rect x="23.5" y="3.5" width="2" height="4" rx="1" fill={fg} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

function HomeIndicator({ dark = false }) {
  return (
    <div style={{
      position:'absolute', bottom: 8, left: '50%', transform:'translateX(-50%)',
      width: 134, height: 5, borderRadius: 3,
      background: dark ? '#FFFFFF' : '#000000', zIndex: 100, pointerEvents:'none',
    }}/>
  );
}

function Frame({ children, dark = false, time = '14:32', bg }) {
  return (
    <div style={{
      width: PHONE_W, height: PHONE_H, background: bg || (dark ? '#0F1115' : '#FFFFFF'),
      position:'relative', overflow:'hidden',
      borderRadius: 53,
      fontFamily:'var(--bc-font)', color: dark ? '#F5ECDB' : '#15182A',
    }}>
      <StatusBar time={time} dark={dark}/>
      {children}
      <HomeIndicator dark={dark}/>
    </div>
  );
}
const SWISS_ACCENT = '#FF4D2E';
const SWISS_INK = '#000000';
const SWISS_PAPER = '#FFFFFF';
const SWISS_GREY_3 = '#888888';
const SWISS_GREY_2 = '#BBBBBB';
const SWISS_GREY_1 = '#E5E5E5';
const SWISS_RULE = '#000000';

// Real photo avatars via Unsplash - round, with optional ring.
// Photo IDs are stable Unsplash IDs of friendly portraits.
const SWISS_PHOTOS = [
  // Female-presenting
  'photo-1494790108377-be9c29b29330', // young woman, smile
  'photo-1438761681033-6461ffad8d80', // young woman, blonde
  'photo-1544005313-94ddf0286df2',    // young woman, dark hair
  'photo-1487412720507-e7ab37603c6f', // woman, brown hair
  // Male-presenting
  'photo-1500648767791-00dcc994a43e', // young man, friendly
  'photo-1472099645785-5658abf4ff4e', // young man, beard
  'photo-1507003211169-0a1dd7228f2d', // young man, glasses
];

function SwissAvatar({ variant = 0, size = 32, ring = 'none' /* 'none' | 'ink' | 'accent' */ }) {
  const id = SWISS_PHOTOS[variant % SWISS_PHOTOS.length];
  const url = `https://images.unsplash.com/${id}?w=160&h=160&fit=crop&crop=faces&q=70`;
  const ringPx = ring === 'none' ? 0 : 2;
  const ringColor = ring === 'accent' ? SWISS_ACCENT : SWISS_INK;
  return (
    <div style={{
      width: size, height: size, flexShrink: 0,
      borderRadius: 999, overflow:'hidden',
      boxShadow: ring === 'none' ? 'none' : `0 0 0 ${ringPx}px ${ringColor}`,
      background:'#E5E5E5',
    }}>
      <img src={url} alt="" style={{
        width:'100%', height:'100%', objectFit:'cover', display:'block',
      }}/>
    </div>
  );
}

// Map kind glyph - round, illustrated, character-driven (kept for reference / unused)
function SwissKindGlyph() { return null; }

window.SwissAvatar = SwissAvatar;
window.SwissKindGlyph = SwissKindGlyph;

// ─── Shared bits ──────────────────────────────────────────────
function SwissMast({ dark = false }) {
  const ink = dark ? '#FFF' : SWISS_INK;
  return (
    <div style={{
      display:'flex', justifyContent:'space-between', alignItems:'baseline',
      borderBottom: `1.5px solid ${dark ? '#FFF' : SWISS_INK}`, paddingBottom: 8,
      color: ink,
    }}>
      <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: -0.4 }}>
        <span style={{ color: SWISS_ACCENT }}>Wir.</span> Raus.
      </span>
      <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, letterSpacing: 0.2 }}>14.05.26 / 14:32 / DO</span>
    </div>
  );
}

function Rule({ heavy = false, color = SWISS_RULE }) {
  return <div style={{ height: heavy ? 1.5 : 1, background: color }}/>;
}

// ─── HOME (extended) ──────────────────────────────────────────
function Swiss_Home() {
  return (
    <Frame bg={SWISS_PAPER}>
      <div style={{
        position:'absolute', top: 44, left: 0, right: 0, bottom: 64,
        padding:'12px 22px 0', overflowY:'auto', color: SWISS_INK,
      }}>
        <SwissMast/>

        {/* Section label */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'18px 0 0' }}>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2.4, textTransform:'uppercase' }}>Heute / Donnerstag</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_GREY_3 }}>Ausgabe 142</span>
        </div>

        {/* Hero number - Swiss poster move */}
        <div style={{ paddingTop: 14, position:'relative' }}>
          <div style={{
            fontWeight: 800, fontSize: 156, lineHeight: 0.82, letterSpacing: -8,
            color: SWISS_ACCENT,
          }}>22</div>
          <div style={{
            fontWeight: 800, fontSize: 38, lineHeight: 0.95, letterSpacing: -1.6,
            marginTop: 4,
          }}>Orte für<br/>heute Nachmittag.</div>
          {/* Tiny corner label */}
          <div style={{
            position:'absolute', top: 6, right: 0,
            fontFamily:'var(--bc-mono)', fontSize: 9.5, letterSpacing: 1.2, textTransform:'uppercase',
            color: SWISS_GREY_3, textAlign:'right', lineHeight: 1.3,
          }}>im radius<br/>4,6 km</div>
        </div>

        {/* Subtitle / rationale */}
        <div style={{ paddingTop: 20, fontSize: 14, lineHeight: 1.4, maxWidth: 320 }}>
          18° und sonnig, leichter Westwind. <span style={{ color: SWISS_ACCENT, fontWeight: 700 }}>Drei Buddys sind unterwegs.</span> Drei kuratierte Vorschläge wenn du jetzt los willst.
        </div>

        {/* Weather strip - typographic */}
        <div style={{ paddingTop: 20 }}>
          <Rule heavy/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', borderBottom: `1px solid ${SWISS_INK}` }}>
            {[
              { t:'14h', v:'18°', s:'sonnig', accent:true },
              { t:'16h', v:'19°', s:'sonnig' },
              { t:'18h', v:'17°', s:'wolkig' },
              { t:'20h', v:'14°', s:'kühl' },
            ].map((c, i) => (
              <div key={i} style={{
                padding:'10px 8px 12px',
                borderRight: i<3 ? `1px solid ${SWISS_INK}` : 'none',
                borderTop: 'none',
              }}>
                <div style={{ fontFamily:'var(--bc-mono)', fontSize: 9.5, letterSpacing: 1, color: SWISS_GREY_3, textTransform:'uppercase' }}>{c.t}</div>
                <div style={{
                  fontWeight: 800, fontSize: 22, letterSpacing: -0.6, marginTop: 2,
                  color: c.accent ? SWISS_ACCENT : SWISS_INK,
                }}>{c.v}</div>
                <div style={{ fontSize: 10, color: SWISS_GREY_3, marginTop: 1 }}>{c.s}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Buddy strip - typographic, no avatars-as-decoration, just initials in squares */}
        <div style={{ paddingTop: 22 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase' }}>Buddys / Aktiv</span>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_ACCENT, fontWeight: 700 }}>3 / 8</span>
          </div>
          <Rule/>
          {[
            { i:'A', av:1, n:'Anna Igel',   loc:'Naturbad Maria Einsiedel', t:'seit 13:50', dist:'1,3 km' },
            { i:'B', av:4, n:'Ben Reh',     loc:'Isarauen Thalkirchen',     t:'seit 14:30', dist:'0,7 km' },
            { i:'L', av:2, n:'Lena Fuchs',  loc:'Floßlände Maria Einsiedel', t:'seit 14:10', dist:'1,7 km' },
          ].map((b, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'32px 1fr auto', alignItems:'center',
              gap: 12, padding:'10px 0', borderBottom:`1px solid ${SWISS_INK}`,
            }}>
              <SwissAvatar variant={b.av} size={32}/>
              <div style={{ display:'flex', flexDirection:'column', minWidth: 0 }}>
                <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: -0.1 }}>{b.n}</span>
                <span style={{ fontSize: 11, color: SWISS_GREY_3, marginTop: 1 }}>{b.loc} · <span style={{ fontFamily:'var(--bc-mono)' }}>{b.t}</span></span>
              </div>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SWISS_ACCENT, fontWeight: 700 }}>{b.dist}</span>
            </div>
          ))}
        </div>

        {/* Recommendations - three with full reasoning */}
        <div style={{ paddingTop: 22 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase' }}>Empfehlungen / 3</span>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_GREY_3 }}>kuratiert · 14:32</span>
          </div>
          <Rule heavy/>
          {[
            {
              n:'01', name:'Naturbad Maria Einsiedel', kind:'Schwimmen · Wiese', d:'1,3 km', age:'0-10 J',
              status:'Saison läuft', statusOk:true,
              why:'Naturbad in den Isarauen · Planschbereich · große Liegewiese · 4,6★ aus 1290 Bewertungen',
              buddy:{ name:'Anna Igel', text:'ist seit 13:50 dort', av:1 },
            },
            {
              n:'02', name:'Café Thalkirchen', kind:'Café · Pullacher Pl.', d:'0,3 km', age:'0-8 J',
              status:'offen bis 23 Uhr', statusOk:true,
              why:'Unaufgeregt am Pullacher Platz · Terrasse · 4,8★ aus 1070 Bewertungen · gut für kurzen Stopp',
              buddy: null,
            },
            {
              n:'03', name:'Familienzentrum Sendling', kind:'Indoor · Plan B', d:'0,5 km', age:'0-10 J',
              status:'Plan B bei Regen', statusOk:false,
              why:'Offenes Café · Wickeltisch · Eltern-Treff · 4,7★ · falls die Wolken doch kommen',
              buddy: null,
            },
          ].map((it, i) => (
            <div key={i} style={{
              padding:'14px 0', borderBottom: `1px solid ${SWISS_INK}`,
            }}>
              {/* Header row */}
              <div style={{
                display:'grid', gridTemplateColumns:'24px 1fr auto', alignItems:'baseline', gap: 12, marginBottom: 6,
              }}>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SWISS_GREY_3, letterSpacing: 0.5 }}>{it.n}</span>
                <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: -0.4 }}>{it.name}</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SWISS_ACCENT, fontWeight: 700 }}>{it.d}</span>
              </div>
              {/* Meta */}
              <div style={{ paddingLeft: 36, display:'flex', gap: 10, fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, textTransform:'uppercase', color: SWISS_GREY_3, marginBottom: 8 }}>
                <span>{it.kind}</span>
                <span>·</span>
                <span>{it.age}</span>
                <span>·</span>
                <span style={{ color: it.statusOk ? SWISS_INK : SWISS_ACCENT, fontWeight: 700 }}>{it.status}</span>
              </div>
              {/* Reason */}
              <div style={{ paddingLeft: 36, fontSize: 13, lineHeight: 1.45, color: SWISS_INK, marginBottom: it.buddy ? 8 : 0 }}>
                {it.why}
              </div>
              {/* Buddy mention */}
              {it.buddy && (
                <div style={{
                  marginLeft: 36, padding:'4px 8px 4px 4px', display:'inline-flex', alignItems:'center', gap: 8,
                  border:`1.5px solid ${SWISS_ACCENT}`, color: SWISS_ACCENT,
                  fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 700, textTransform:'uppercase',
                }}>
                  <SwissAvatar variant={it.buddy.av} size={20}/>
                  <span>{it.buddy.name} · {it.buddy.text}</span>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Fallback / discovery teaser */}
        <div style={{ paddingTop: 22 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase' }}>Auch in der Nähe</span>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_GREY_3 }}>+20 weitere</span>
          </div>
          <Rule/>
          {[
            { name:'Isarauen Thalkirchen', kind:'Natur', d:'0,7 km' },
            { name:'Tierpark Hellabrunn', kind:'Tierpark', d:'1,4 km' },
            { name:'Spielplatz Isarwinkel', kind:'Spielplatz', d:'1,1 km' },
            { name:'Alter Wirt Thalkirchen', kind:'Biergarten', d:'0,8 km' },
          ].map((it, i, arr) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr auto auto', alignItems:'baseline',
              gap: 12, padding:'8px 0',
              borderBottom: i < arr.length - 1 ? `1px solid ${SWISS_GREY_1}` : `1.5px solid ${SWISS_INK}`,
            }}>
              <span style={{ fontWeight: 700, fontSize: 14, letterSpacing: -0.1 }}>{it.name}</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SWISS_GREY_3, letterSpacing: 0.5, textTransform:'uppercase' }}>{it.kind}</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SWISS_ACCENT, fontWeight: 700, minWidth: 44, textAlign:'right' }}>{it.d}</span>
            </div>
          ))}
        </div>

        {/* Bottom system note */}
        <div style={{
          padding:'18px 0 24px', display:'flex', justifyContent:'space-between',
          fontFamily:'var(--bc-mono)', fontSize: 9.5, color: SWISS_GREY_3, letterSpacing: 0.4,
        }}>
          <span>Thalkirchen · 22 Orte · 4,6 km Radius</span>
          <span>sync 14:32:09</span>
        </div>
      </div>

      {/* Nav */}
      <SwissNav active={0}/>
    </Frame>
  );
}

// ─── MAP screen ───────────────────────────────────────────────
function Swiss_Map() {
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    if (!mapRef.current || !window.L) return;
    const node = mapRef.current;
    if (node._bc_map) { node._bc_map.remove(); node._bc_map = null; }
    const map = L.map(node, {
      zoomControl: false, attributionControl: false,
      dragging: false, scrollWheelZoom: false, doubleClickZoom: false, tap: false, touchZoom: false,
    });
    node._bc_map = map;
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      maxZoom: 19, subdomains: 'abcd',
    }).addTo(map);

    // Featured: hero spots in the Thalkirchen area, plus Westpark to give the map breath.
    const featured = ['p1','p2','p5','p11','p12','p21'];
    // Buddies present at: Café Thalkirchen (Mira-planned), Naturbad (Anna-active), Isarauen (Ben-active)
    const buddyAt = { p11: { i:'A', av:1 }, p1: { i:'M', av:0 }, p5: { i:'B', av:4 } };

    // Center on Thalkirchen so the user's home neighborhood anchors the view.
    const userHome = [48.108, 11.546];

    // Fit bounds to all featured POIs + user home so the map ALWAYS frames them.
    const featuredCoords = (window.POIS || [])
      .filter(p => featured.includes(p.id))
      .map(p => [p.lat, p.lng]);
    featuredCoords.push(userHome);
    if (featuredCoords.length > 1) {
      map.fitBounds(featuredCoords, { padding: [50, 50] });
    } else {
      map.setView(userHome, 14);
    }

    // Glyph per kind - sized for 24px / 36px coin (viewBox 32x32)
    function coinGlyph(kind, c='#FFF') {
      const sw = 2;
      const map = {
        // Slide on a hill
        spielplatz: `
          <g fill="none" stroke="${c}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
            <path d="M7 9 L25 9"/>
            <path d="M11 9 L11 19"/>
            <path d="M21 9 L21 19"/>
            <rect x="9" y="19" width="14" height="3" rx="0.6" fill="${c}" stroke="none"/>
            <path d="M11 22 L11 25"/>
            <path d="M21 22 L21 25"/>
          </g>`,
        // Cup with latte heart in foam
        cafe: `
          <g fill="none" stroke="${c}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 12 L9 22 Q9 25 12 25 L19 25 Q22 25 22 22 L22 12 Z"/>
            <path d="M22 14 L24 14 Q26.5 14 26.5 17 Q26.5 20 24 20 L22 20"/>
            <path d="M13.5 17 Q14.5 15.5 16 17 Q17.5 15.5 18.5 17 Q18.5 19 16 21 Q13.5 19 13.5 17 Z" fill="${c}"/>
          </g>`,
        // Wave with sun
        schwimmbad: `
          <g fill="none" stroke="${c}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="22" cy="11" r="2.5" fill="${c}"/>
            <path d="M6 19 Q9 16 12 19 T18 19 T24 19 T28 19"/>
            <path d="M6 23 Q9 20 12 23 T18 23 T24 23 T28 23"/>
          </g>`,
        // Two pine trees + bird
        natur: `
          <g fill="${c}" stroke="${c}" stroke-width="${sw}" stroke-linejoin="round" stroke-linecap="round">
            <path d="M11 24 L15.5 12 L20 24 Z"/>
            <path d="M19 24 L23 14 L27 24 Z"/>
            <circle cx="9" cy="11" r="1" fill="${c}"/>
            <path d="M7 11 Q9 9 11 11" fill="none"/>
          </g>`,
        // Pillared museum facade with sun
        museum: `
          <g fill="${c}" stroke="${c}" stroke-width="${sw}" stroke-linejoin="round">
            <circle cx="16" cy="8" r="2" fill="${c}"/>
            <path d="M7 14 L16 10 L25 14 Z"/>
            <path d="M9 14 L9 22 M14 14 L14 22 M18 14 L18 22 M23 14 L23 22" fill="none"/>
            <path d="M6 23 L26 23" fill="none"/>
          </g>`,
        // Stacked blocks
        indoor: `
          <g fill="${c}" stroke="${c}" stroke-width="${sw}" stroke-linejoin="round">
            <rect x="9" y="20" width="14" height="5" rx="0.5" fill="none"/>
            <rect x="11" y="14" width="10" height="6" rx="0.5" fill="none"/>
            <rect x="13" y="9" width="6" height="5" rx="0.5" fill="none"/>
          </g>`,
        tanzkurs: `
          <g fill="none" stroke="${c}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
            <path d="M13 22 L13 9 L23 7 L23 11 L15 13 L15 22"/>
            <ellipse cx="13" cy="22" rx="3" ry="2.2" fill="${c}"/>
            <ellipse cx="23" cy="11" rx="3" ry="2.2" fill="${c}"/>
          </g>`,
        musikkurs: `
          <g fill="none" stroke="${c}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
            <path d="M13 22 L13 9 L23 7 L23 11 L15 13 L15 22"/>
            <ellipse cx="13" cy="22" rx="3" ry="2.2" fill="${c}"/>
            <ellipse cx="23" cy="11" rx="3" ry="2.2" fill="${c}"/>
          </g>`,
      };
      return map[kind] || map.spielplatz;
    }

    (window.POIS || []).forEach(p => {
      const isFeatured = featured.includes(p.id);
      const buddy = buddyAt[p.id];
      const hasBuddy = !!buddy;
      const coinSize = isFeatured ? 44 : 28;
      const bg = hasBuddy ? SWISS_ACCENT : SWISS_INK;
      const ringColor = hasBuddy ? SWISS_INK : SWISS_PAPER;
      const ringWidth = isFeatured ? 2.5 : 2;
      const half = coinSize / 2;
      const inner = coinSize - ringWidth * 2;

      const buddyPhotoId = hasBuddy ? SWISS_PHOTOS[buddy.av % SWISS_PHOTOS.length] : null;

      let html = `
        <div style="position:relative;width:${coinSize}px;height:${coinSize}px;">
          <div style="
            position:absolute; inset:0;
            width:${coinSize}px;height:${coinSize}px;border-radius:50%;
            background:${bg};
            box-shadow: 0 0 0 2px #fff, 0 0 0 ${2 + (hasBuddy ? 2 : 0)}px ${hasBuddy ? SWISS_ACCENT : 'transparent'}, 0 4px 10px rgba(0,0,0,0.18);
            display:flex;align-items:center;justify-content:center;
          ">
            <svg width="${coinSize - 10}" height="${coinSize - 10}" viewBox="0 0 32 32" style="display:block;">
              ${coinGlyph(p.kind, '#FFF')}
            </svg>
          </div>`;

      if (hasBuddy && buddyPhotoId) {
        // Round avatar bubble - sits OUTSIDE the coin (top-right), no overlap
        const avSize = isFeatured ? 24 : 20;
        html += `
          <div style="
            position:absolute; right:${-Math.round(avSize * 0.65)}px; top:${-Math.round(avSize * 0.35)}px;
            width:${avSize}px;height:${avSize}px;border-radius:50%;
            overflow:hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3px ${SWISS_ACCENT}, 0 2px 6px rgba(0,0,0,0.28);
            background:#E5E5E5; z-index: 10;
          ">
            <img src="https://images.unsplash.com/${buddyPhotoId}?w=80&h=80&fit=crop&crop=faces&q=70"
                 style="width:100%;height:100%;object-fit:cover;display:block;"/>
          </div>`;
      }

      html += `</div>`;

      const icon = L.divIcon({
        className:'swiss-pin', html,
        iconSize: [coinSize, coinSize],
        iconAnchor: [half, half],
      });
      L.marker([p.lat, p.lng], { icon, zIndexOffset: isFeatured ? 500 : 0 }).addTo(map);
    });

    return () => { map.remove(); node._bc_map = null; };
  }, []);

  const filters = [['Alle', true], ['Spiel', false], ['Café', false], ['Schwimmen', false], ['Indoor', false], ['Natur', false]];
  const distances = ['1km','2km','5km','10km'];

  return (
    <Frame bg={SWISS_PAPER}>
      {/* Header */}
      <div style={{ position:'absolute', top: 44, left: 0, right: 0, padding:'12px 22px 0', zIndex: 10, background: SWISS_PAPER }}>
        <SwissMast/>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'10px 0 8px' }}>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2.4, textTransform:'uppercase' }}>Karte / Thalkirchen</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_GREY_3 }}>22 Orte sichtbar</span>
        </div>
      </div>

      {/* Filter row */}
      <div style={{
        position:'absolute', top: 130, left: 0, right: 0, zIndex: 10,
        background: SWISS_PAPER, padding:'0 22px 10px',
        borderBottom: `1.5px solid ${SWISS_INK}`,
        overflow:'hidden',
      }}>
        <div style={{ display:'flex', gap: 6, overflowX:'auto', paddingBottom: 0 }}>
          {filters.map(([l, on], i) => (
            <span key={i} style={{
              padding:'5px 9px', border:`1.5px solid ${SWISS_INK}`,
              background: on ? SWISS_INK : 'transparent',
              color: on ? SWISS_PAPER : SWISS_INK,
              fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 600,
              textTransform:'uppercase', whiteSpace:'nowrap', flexShrink: 0,
            }}>{l}</span>
          ))}
        </div>
      </div>

      {/* Map */}
      <div ref={mapRef} style={{
        position:'absolute', top: 168, left: 0, right: 0, bottom: 360,
        background:'#F5F5F5', overflow:'hidden',
      }}/>

      {/* Map overlay - corner labels */}
      <div style={{
        position:'absolute', top: 184, left: 22, zIndex: 5,
        fontFamily:'var(--bc-mono)', fontSize: 9, letterSpacing: 1.2, textTransform:'uppercase', color: SWISS_INK,
        background: SWISS_PAPER, padding:'4px 6px', border:`1px solid ${SWISS_INK}`,
      }}>N ↑ &nbsp; 48°08′</div>
      <div style={{
        position:'absolute', top: 184, right: 22, zIndex: 5, display:'flex', flexDirection:'column', gap: 6,
      }}>
        {['+','−'].map((s, i) => (
          <div key={i} style={{
            width: 28, height: 28, background: SWISS_PAPER, border: `1.5px solid ${SWISS_INK}`,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontWeight: 800, fontSize: 16,
          }}>{s}</div>
        ))}
        <div style={{
          width: 28, height: 28, background: SWISS_ACCENT, border: `1.5px solid ${SWISS_INK}`,
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <div style={{ width: 8, height: 8, background: SWISS_PAPER, borderRadius: 999, boxShadow:`0 0 0 2px ${SWISS_ACCENT}, 0 0 0 3px ${SWISS_PAPER}` }}/>
        </div>
      </div>

      {/* Distance scale */}
      <div style={{
        position:'absolute', left: 22, bottom: 376, zIndex: 5,
        background: SWISS_PAPER, padding:'5px 8px', border:`1px solid ${SWISS_INK}`,
        display:'flex', alignItems:'center', gap: 6,
      }}>
        <div style={{ width: 36, height: 4, background: SWISS_INK }}/>
        <span style={{ fontFamily:'var(--bc-mono)', fontSize: 9, letterSpacing: 0.8 }}>1 KM</span>
      </div>

      {/* Bottom panel - selected POI in Swiss grid style */}
      <div style={{
        position:'absolute', left: 0, right: 0, bottom: 64, zIndex: 10,
        background: SWISS_PAPER, borderTop: `1.5px solid ${SWISS_INK}`,
        padding:'18px 22px 18px',
      }}>
        {/* Active selection header */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 22 }}>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color: SWISS_ACCENT, fontWeight: 700 }}>● Ausgewählt</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SWISS_GREY_3 }}>22 Orte sichtbar</span>
        </div>

        {/* Featured POI - Naturbad Maria Einsiedel · real data, buddy inline */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-start', gap: 12, marginBottom: 4 }}>
          <h2 style={{
            fontWeight: 800, fontSize: 26, letterSpacing: -0.7, lineHeight: 1.08,
            margin: 0, paddingTop: 2,
          }}>Naturbad<br/>Maria Einsiedel</h2>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 12, color: SWISS_ACCENT, fontWeight: 700, paddingTop: 6 }}>1,3 km</span>
        </div>
        <div style={{ display:'flex', gap: 10, fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, textTransform:'uppercase', color: SWISS_GREY_3, marginTop: 8 }}>
          <span>Schwimmen</span>
          <span>·</span>
          <span>0-10 J</span>
          <span>·</span>
          <span style={{ color: SWISS_INK, fontWeight: 700 }}>Thalkirchen</span>
          <span>·</span>
          <span style={{ color: SWISS_INK, fontWeight: 700 }}>4,6★</span>
        </div>
        {/* Buddy at this POI */}
        <div style={{
          marginTop: 10, padding:'4px 8px 4px 4px',
          display:'inline-flex', alignItems:'center', gap: 8,
          border:`1.5px solid ${SWISS_ACCENT}`, color: SWISS_ACCENT,
          fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 700, textTransform:'uppercase',
        }}>
          <SwissAvatar variant={1} size={20}/>
          <span>Anna Igel · seit 13:50</span>
        </div>

        {/* Inline mini-list of next two */}
        <div style={{ marginTop: 12 }}>
          <Rule/>
          {[
            { n:'02', name:'Tierpark Hellabrunn', kind:'Tierpark', d:'1,4 km', buddy:{av:0, name:'Mira Otter'} },
            { n:'03', name:'Isarauen Thalkirchen', kind:'Natur', d:'0,7 km', buddy:{av:4, name:'Ben Reh'} },
          ].map((r, i) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'22px 22px 1fr auto auto', alignItems:'center',
              gap: 10, padding:'8px 0', borderBottom: `1px solid ${i === 1 ? SWISS_INK : SWISS_GREY_1}`,
            }}>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, color: SWISS_GREY_3 }}>{r.n}</span>
              {r.buddy ? <SwissAvatar variant={r.buddy.av} size={22}/> : <span/>}
              <span style={{ fontWeight: 700, fontSize: 13, letterSpacing: -0.1 }}>{r.name}</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 9.5, color: SWISS_GREY_3, letterSpacing: 0.5, textTransform:'uppercase' }}>{r.kind}</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, fontWeight: 700, color: r.buddy ? SWISS_ACCENT : SWISS_INK, minWidth: 44, textAlign:'right' }}>{r.d}</span>
            </div>
          ))}
        </div>
      </div>

      <SwissNav active={1}/>
    </Frame>
  );
}

// ─── Bottom nav (shared) ──────────────────────────────────────
function SwissNav({ active = 0 }) {
  const items = ['Heute', 'Karte', 'Buddys', 'Du'];
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 0, height: 64,
      background: SWISS_ACCENT,
      display:'grid', gridTemplateColumns:'repeat(4, 1fr)', alignItems:'stretch',
      color: SWISS_INK, fontWeight: 800,
    }}>
      {items.map((l, i) => {
        const on = i === active;
        return (
          <div key={i} style={{
            fontSize: 15, letterSpacing:-0.2,
            borderRight: i < items.length-1 ? '1px solid rgba(0,0,0,0.18)' : 'none',
            background: on ? SWISS_INK : 'transparent',
            color: on ? SWISS_ACCENT : SWISS_INK,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            {l}
          </div>
        );
      })}
    </div>
  );
}

window.Swiss_Home = Swiss_Home;
window.Swiss_Map = Swiss_Map;