// Additional Swiss screens - POI Detail, Buddys, "Hingehen" Sheet, Buddy Profile
// Same design language as Swiss.jsx (single hot accent, strict grid, big sans, mono for data).

const SX_ACCENT = '#FF4D2E';
const SX_INK = '#000000';
const SX_PAPER = '#FFFFFF';
const SX_GREY_3 = '#888888';
const SX_GREY_2 = '#BBBBBB';
const SX_GREY_1 = '#E5E5E5';

// Reuse helpers from Swiss
const SX_PHOTOS = [
  'photo-1494790108377-be9c29b29330',
  'photo-1438761681033-6461ffad8d80',
  'photo-1544005313-94ddf0286df2',
  'photo-1487412720507-e7ab37603c6f',
  'photo-1500648767791-00dcc994a43e',
  'photo-1472099645785-5658abf4ff4e',
  'photo-1507003211169-0a1dd7228f2d',
];
const sxAvatarUrl = (i, s = 80) => `https://images.unsplash.com/${SX_PHOTOS[i % SX_PHOTOS.length]}?w=${s}&h=${s}&fit=crop&crop=faces&q=70`;

// Real location photos via Unsplash - chosen for genre fit (park bench, coffee, swimming pool, etc.)
const SX_LOC_PHOTOS = {
  westpark: 'photo-1500382017468-9049fed747ef',  // sunlit park, warm grass
  cafe:     'photo-1554118811-1e0d58224f24',     // cafe interior with warm light
  bad:      'photo-1576013551627-0cc20b96c2a7',  // pool water, calm
  park:     'photo-1441974231531-c6227db76b6e',  // forest park
};
const sxLocUrl = (key, w = 800, h = 500) => {
  const id = SX_LOC_PHOTOS[key] || SX_LOC_PHOTOS.westpark;
  return `https://images.unsplash.com/${id}?w=${w}&h=${h}&fit=crop&q=75`;
};

function SXAvatar({ variant = 0, size = 32, ring = 'none' }) {
  const ringPx = ring === 'none' ? 0 : 2;
  const ringColor = ring === 'accent' ? SX_ACCENT : SX_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={sxAvatarUrl(variant, size * 2)} alt=""
        style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
    </div>
  );
}

// Reuse status bar / home indicator - they're declared in Shell.jsx as globals.
function SXFrame({ children, bg, dark = false, time = '14:32' }) {
  return (
    <div style={{
      width: 390, height: 844, 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>
  );
}

function SXMast({ left = null, right = '14.05.26 / 14:32 / DO' }) {
  return (
    <div style={{
      display:'flex', justifyContent:'space-between', alignItems:'baseline',
      borderBottom: `1.5px solid ${SX_INK}`, paddingBottom: 8,
    }}>
      <span style={{ fontWeight: 800, fontSize: 19, letterSpacing: -0.4 }}>
        {left || (<><span style={{ color: SX_ACCENT }}>Wir.</span> Raus.</>)}
      </span>
      <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, letterSpacing: 0.2, color: SX_INK }}>{right}</span>
    </div>
  );
}

function SXNav({ active = 0 }) {
  const items = ['Heute', 'Karte', 'Buddys', 'Du'];
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 0, height: 64,
      background: SX_ACCENT,
      display:'grid', gridTemplateColumns:'repeat(4, 1fr)', alignItems:'stretch',
      color: SX_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 ? SX_INK : 'transparent',
            color: on ? SX_ACCENT : SX_INK,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>{l}</div>
        );
      })}
    </div>
  );
}

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

// ─────────────────────────────────────────────────────────────
// 03 · POI DETAIL - Naturbad Maria Einsiedel
// ─────────────────────────────────────────────────────────────
function Swiss_POI() {
  const features = [
    { t:'Planschbereich für Kleine', icon:'✓', ok:true },
    { t:'Wickeltisch im Eingangsbereich', icon:'✓', ok:true },
    { t:'Große Liegewiese · Schatten unter Bäumen', icon:'✓', ok:true },
    { t:'Eingezäunt (kompletter Bade-Bereich)', icon:'✓', ok:true },
    { t:'WC barrierearm', icon:'✓', ok:true },
    { t:'Hund nur an Leine', icon:'!', ok:'warn' },
  ];
  return (
    <SXFrame bg={SX_PAPER}>
      <div style={{
        position:'absolute', top: 44, left: 0, right: 0, bottom: 64,
        overflowY:'auto',
      }}>
        {/* Top photo with overlaid back/share buttons */}
        <div style={{ position:'relative', height: 280, background:'#E5E5E5' }}>
          <img src="assets/naturbad-maria-einsiedel.webp" alt="Naturbad Maria Einsiedel"
            style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 60%', display:'block' }}/>
          {/* Top-overlay row */}
          <div style={{
            position:'absolute', top: 12, left: 16, right: 16,
            display:'flex', justifyContent:'space-between',
          }}>
            <div style={{
              width: 40, height: 40, background: SX_PAPER, border:`1.5px solid ${SX_INK}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              fontWeight: 800, fontSize: 18,
            }}>←</div>
            <div style={{ display:'flex', gap: 8 }}>
              <div style={{
                width: 40, height: 40, background: SX_PAPER, border:`1.5px solid ${SX_INK}`,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--bc-mono)', fontSize: 14,
              }}>♡</div>
              <div style={{
                width: 40, height: 40, background: SX_PAPER, border:`1.5px solid ${SX_INK}`,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--bc-mono)', fontSize: 14,
              }}>↗</div>
            </div>
          </div>
          {/* Buddy strip on photo */}
          <div style={{
            position:'absolute', bottom: 14, left: 16,
            background: SX_ACCENT, padding:'5px 10px 5px 5px',
            display:'inline-flex', alignItems:'center', gap: 8,
            fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 700, textTransform:'uppercase',
            color: SX_INK,
          }}>
            <SXAvatar variant={1} size={20}/>
            <span>Anna Igel · seit 13:50</span>
          </div>
        </div>

        {/* Body */}
        <div style={{ padding:'0 22px' }}>

          {/* Title block */}
          <div style={{ paddingTop: 20 }}>
            <div style={{
              fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2.4, textTransform:'uppercase', color: SX_GREY_3,
            }}>Naturbad · Thalkirchen · 4,6★</div>
            <h1 style={{
              margin: 0, padding: '4px 0 0',
              fontWeight: 800, fontSize: 36, letterSpacing: -1.2, lineHeight: 1.04,
            }}>Naturbad<br/>Maria Einsiedel.</h1>
          </div>

          {/* Stat strip */}
          <div style={{ paddingTop: 16 }}>
            <Rule heavy/>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', borderBottom: `1px solid ${SX_INK}` }}>
              {[
                { l:'Distanz', v:'4,2', u:'km', accent:true },
                { l:'Alter',   v:'1-6', u:'Jahre' },
                { l:'Buddys',  v:'1', u:'aktiv' },
              ].map((c, i) => (
                <div key={i} style={{
                  padding:'10px 12px 14px',
                  borderRight: i<2 ? `1px solid ${SX_INK}` : 'none',
                }}>
                  <div style={{ fontFamily:'var(--bc-mono)', fontSize: 9.5, letterSpacing: 1, color: SX_GREY_3, textTransform:'uppercase' }}>{c.l}</div>
                  <div style={{
                    display:'flex', alignItems:'baseline', gap: 4, marginTop: 4,
                  }}>
                    <span style={{
                      fontWeight: 800, fontSize: 26, letterSpacing: -0.6,
                      color: c.accent ? SX_ACCENT : SX_INK,
                    }}>{c.v}</span>
                    <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, color: SX_GREY_3 }}>{c.u}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Why now - the editorial reason */}
          <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' }}>Warum heute</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>14:32</span>
            </div>
            <Rule/>
            <p style={{ margin: 0, padding:'14px 0', fontSize: 16, lineHeight: 1.5, color: SX_INK }}>
              Bei <span style={{ color: SX_ACCENT, fontWeight: 700 }}>18° und Sonne</span> startet die Saison - Naturbad in den Isarauen, Planschbereich, große Liegewiese, Anna Igel ist seit 13:50 dort. Gut für 2-3 Stunden.inuten. <span style={{ color: SX_ACCENT, fontWeight: 700 }}>Anna ist seit einer Stunde dort.</span>
            </p>
          </div>

          {/* Features - checklist */}
          <div style={{ paddingTop: 16 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase' }}>Ausstattung</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>6 Punkte</span>
            </div>
            <Rule/>
            {features.map((f, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'24px 1fr',
                gap: 10, padding:'10px 0',
                borderBottom: `1px solid ${i === features.length - 1 ? SX_INK : SX_GREY_1}`,
              }}>
                <span style={{
                  fontFamily:'var(--bc-mono)', fontSize: 14, fontWeight: 800,
                  color: f.ok === true ? SX_INK : f.ok === 'warn' ? SX_ACCENT : SX_GREY_3,
                }}>{f.icon}</span>
                <span style={{
                  fontSize: 13.5, lineHeight: 1.4,
                  color: f.ok === false ? SX_GREY_3 : SX_INK,
                  textDecoration: f.ok === false ? 'line-through' : 'none',
                }}>{f.t}</span>
              </div>
            ))}
          </div>

          {/* Hours / Status */}
          <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' }}>Status</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_ACCENT, fontWeight: 700 }}>● jetzt offen</span>
            </div>
            <Rule/>
            <div style={{ paddingTop: 10, fontSize: 13, color: SX_INK, lineHeight: 1.6 }}>
              <div style={{ display:'grid', gridTemplateColumns:'80px 1fr', gap: 4 }}>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3 }}>Heute</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11 }}>06:00 - 22:00</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3 }}>Café</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11 }}>09:00 - 18:00</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3 }}>Sonnenuntergang</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11 }}>20:48</span>
              </div>
            </div>
          </div>

          {/* Anfahrt */}
          <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' }}>Anfahrt / 4,2 km</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>3 Optionen</span>
            </div>
            <Rule/>
            {[
              { mode:'Mit Buggy', t:'18 min', sub:'zu Fuß · 1,3 km · durch die Isarauen', accent:true },
              { mode:'U-Bahn',    t:'14 min', sub:'U3 Thalkirchen · 8 Min Fußweg' },
              { mode:'Mit Auto',  t:'6 min',  sub:'Parken: Zentralländstr. · frei' },
            ].map((opt, i, arr) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1fr auto', alignItems:'center', gap: 12,
                padding:'12px 0',
                borderBottom: i === arr.length - 1 ? `1.5px solid ${SX_INK}` : `1px solid ${SX_GREY_1}`,
              }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{opt.mode}</div>
                  <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3, marginTop: 2 }}>{opt.sub}</div>
                </div>
                <div style={{
                  fontWeight: 800, fontSize: 18, letterSpacing: -0.4,
                  color: opt.accent ? SX_ACCENT : SX_INK,
                }}>{opt.t}</div>
              </div>
            ))}
          </div>

          {/* Pad before sticky CTA */}
          <div style={{ height: 88 }}/>
        </div>
      </div>

      {/* Sticky bottom CTA */}
      <div style={{
        position:'absolute', left: 0, right: 0, bottom: 64, zIndex: 10,
        background: SX_PAPER, borderTop:`1.5px solid ${SX_INK}`,
        padding:'12px 22px',
        display:'grid', gridTemplateColumns:'1fr auto', gap: 10, alignItems:'center',
      }}>
        <div style={{
          background: SX_ACCENT, color: SX_INK,
          padding:'14px 18px',
          fontWeight: 800, fontSize: 16, letterSpacing: -0.2,
          display:'flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <span>Hingehen.</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, letterSpacing: 0.4 }}>→</span>
        </div>
        <div style={{
          width: 52, height: 52, border:`1.5px solid ${SX_INK}`, background: SX_PAPER,
          display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 18,
        }}>★</div>
      </div>

      <SXNav active={1}/>
    </SXFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// 04 · BUDDYS TAB
// ─────────────────────────────────────────────────────────────
function Swiss_Buddys() {
  const sections = [
    {
      label:'Aktiv jetzt', count:'3 / 8', accent:true,
      items:[
        { name:'Anna Igel',   av:1, status:'Naturbad Maria Einsiedel',         since:'seit 13:50', dist:'1,3 km', shares:'Standort' },
        { name:'Ben Reh',     av:4, status:'Isarauen Thalkirchen',              since:'seit 14:30', dist:'0,7 km', shares:'Aktivität' },
        { name:'Lena Fuchs',  av:0, status:'Floßlände Maria Einsiedel',         since:'seit 14:10', dist:'1,7 km', shares:'Standort' },
      ],
    },
    {
      label:'Geplant',
      items:[
        { name:'Mira Otter',   av:0, status:'Café Thalkirchen',         since:'16:00',          dist:'0,3 km', shares:'Aktivität' },
        { name:'Tobi Fuchs',   av:5, status:'NaturFreunde Bootshaus',   since:'16:00 → 17:30',  dist:'1,0 km', shares:'Aktivität' },
      ],
    },
    {
      label:'Frei heute',
      items:[
        { name:'Lea Schubert',  av:2, status:'verfügbar nachmittags',          since:'-',           dist:'-',     shares:'Aktivität' },
        { name:'Jonas Berger',  av:6, status:'verfügbar nach 17 Uhr',          since:'-',           dist:'-',     shares:'-' },
      ],
    },
    {
      label:'Offline',
      muted: true,
      items:[
        { name:'Sami Wagner',  av:5, status:'zuletzt gestern',                 since:'-',           dist:'-',     shares:'-' },
      ],
    },
  ];
  return (
    <SXFrame bg={SX_PAPER}>
      <div style={{
        position:'absolute', top: 44, left: 0, right: 0, bottom: 64,
        padding:'12px 22px 0', overflowY:'auto', color: SX_INK,
      }}>
        <SXMast/>

        {/* Title */}
        <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' }}>Buddys / 8</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>3 aktiv · 2 geplant</span>
        </div>

        {/* Hero number */}
        <div style={{ paddingTop: 12 }}>
          <div style={{
            fontWeight: 800, fontSize: 130, lineHeight: 0.85, letterSpacing: -7,
            color: SX_ACCENT,
          }}>03</div>
          <div style={{ fontWeight: 800, fontSize: 32, lineHeight: 1, letterSpacing: -1.2, marginTop: 4 }}>
            Buddys sind<br/>jetzt unterwegs.
          </div>
        </div>

        {/* Add buddy callout */}
        <div style={{
          marginTop: 18, padding:'10px 14px',
          border:`1.5px solid ${SX_INK}`,
          display:'flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 13 }}>Buddy-Code teilen</div>
            <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, color: SX_GREY_3, marginTop: 2 }}>
              <span style={{ color: SX_ACCENT, fontWeight: 700 }}>K7-MORG-VIER</span> · 3 Tage gültig
            </div>
          </div>
          <div style={{
            padding:'8px 12px', background: SX_INK, color: SX_PAPER,
            fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 700, textTransform:'uppercase',
          }}>Teilen</div>
        </div>

        {/* Sections */}
        {sections.map((sec, si) => (
          <div key={si} style={{ paddingTop: 24 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
              <span style={{
                fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase',
                color: sec.accent ? SX_ACCENT : sec.muted ? SX_GREY_3 : SX_INK,
                fontWeight: sec.accent ? 700 : 600,
              }}>{sec.accent ? '● ' : ''}{sec.label}</span>
              {sec.count && (
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>{sec.count}</span>
              )}
            </div>
            <Rule heavy={sec.accent}/>
            {sec.items.map((b, i, arr) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'40px 1fr auto', gap: 12, alignItems:'center',
                padding:'12px 0',
                borderBottom: i === arr.length - 1 ? `1.5px solid ${SX_INK}` : `1px solid ${SX_GREY_1}`,
                opacity: sec.muted ? 0.55 : 1,
              }}>
                <SXAvatar variant={b.av} size={40} ring={sec.accent ? 'accent' : 'none'}/>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
                    <span style={{ fontWeight: 700, fontSize: 14, letterSpacing: -0.1 }}>{b.name}</span>
                    <span style={{ fontFamily:'var(--bc-mono)', fontSize: 9, color: SX_GREY_3, letterSpacing: 0.6, textTransform:'uppercase' }}>teilt {b.shares}</span>
                  </div>
                  <div style={{ fontSize: 12, color: SX_INK, marginTop: 2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                    {b.status}
                  </div>
                  <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3, marginTop: 1 }}>
                    {b.since}
                  </div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{
                    fontFamily:'var(--bc-mono)', fontSize: 12, fontWeight: 700,
                    color: sec.accent ? SX_ACCENT : SX_INK,
                  }}>{b.dist}</div>
                </div>
              </div>
            ))}
          </div>
        ))}

        <div style={{ height: 32 }}/>
      </div>

      <SXNav active={2}/>
    </SXFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// 05 · "HINGEHEN" SHEET - modal over POI
// ─────────────────────────────────────────────────────────────
function Swiss_Hingehen() {
  const visibilityOptions = [
    { id:'all',     label:'Alle Buddys',          sub:'5 Personen sehen dich (3 aktiv, 2 geplant)' },
    { id:'select',  label:'Nur Mira Otter & Anna Igel',      sub:'2 Personen sehen dich · ausgewählt' , active: true },,
    { id:'none',    label:'Niemand · privat',     sub:'Du gehst nur für dich hin' },
  ];
  return (
    <SXFrame bg="rgba(0,0,0,0.5)">
      {/* Behind: blurred POI peek */}
      <div style={{
        position:'absolute', top: 44, left: 0, right: 0, bottom: 0,
        background:'#FFF', filter:'blur(4px)', opacity: 0.35,
      }}>
        <div style={{ height: 200, position:'relative', overflow:'hidden' }}>
          <img src="assets/naturbad-maria-einsiedel.webp" alt=""
            style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 60%' }}/>
        </div>
        <div style={{ padding: 22, fontWeight: 800, fontSize: 32, color: SX_INK }}>Naturbad<br/>Maria Einsiedel.</div>
      </div>

      {/* Modal sheet - ends above the bottom nav so nav stays visible */}
      <div style={{
        position:'absolute', left: 0, right: 0, bottom: 64,
        background: SX_PAPER, borderTop:`2px solid ${SX_INK}`,
        padding:'10px 22px 14px',
        boxShadow:'0 -20px 40px rgba(0,0,0,0.18)',
      }}>
        {/* Drag handle */}
        <div style={{
          margin:'2px auto 16px', width: 56, height: 4, background: SX_INK,
        }}/>

        {/* Header */}
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color: SX_ACCENT, fontWeight: 700 }}>● Du gehst hin</span>
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>14:32 · in 18 min</span>
        </div>

        {/* Title - what + where */}
        <h2 style={{ margin:'10px 0 0', fontWeight: 800, fontSize: 28, letterSpacing: -0.9, lineHeight: 1.05 }}>
          Naturbad<br/>Maria Einsiedel.
        </h2>
        <div style={{
          fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, textTransform:'uppercase', color: SX_GREY_3, marginTop: 6,
        }}>
          ankunft 14:50 · u-bahn 18 min · mit kind 2 j
        </div>

        {/* Time chooser */}
        <div style={{ paddingTop: 20 }}>
          <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase', marginBottom: 8 }}>
            Wann?
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 6 }}>
            {[
              { l:'Jetzt', t:'14:32' },
              { l:'+30 min', t:'15:00', active:true },
              { l:'+1 h', t:'15:30' },
              { l:'Später', t:'…' },
            ].map((o, i) => (
              <div key={i} style={{
                padding:'10px 6px', textAlign:'center',
                border:`1.5px solid ${SX_INK}`,
                background: o.active ? SX_INK : SX_PAPER,
                color: o.active ? SX_PAPER : SX_INK,
              }}>
                <div style={{ fontWeight: 800, fontSize: 14 }}>{o.l}</div>
                <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: o.active ? SX_PAPER : SX_GREY_3, marginTop: 2 }}>{o.t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Visibility */}
        <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' }}>Wer sieht das?</span>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>2 / 8 Buddys</span>
          </div>
          <Rule heavy/>
          {visibilityOptions.map((o, i, arr) => (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'24px 1fr', alignItems:'center', gap: 12,
              padding:'14px 0',
              borderBottom: i === arr.length - 1 ? `1.5px solid ${SX_INK}` : `1px solid ${SX_GREY_1}`,
            }}>
              <div style={{
                width: 22, height: 22, border:`1.5px solid ${SX_INK}`,
                background: o.active ? SX_INK : 'transparent',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                {o.active && <div style={{ width: 8, height: 8, background: SX_PAPER }}/>}
              </div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: o.active ? SX_INK : SX_INK }}>{o.label}</div>
                <div style={{
                  fontFamily:'var(--bc-mono)', fontSize: 10.5, marginTop: 2,
                  color: o.active ? SX_ACCENT : SX_GREY_3, fontWeight: o.active ? 700 : 400,
                }}>{o.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Selected buddies preview */}
        <div style={{ paddingTop: 14, display:'flex', alignItems:'center', gap: 10 }}>
          <SXAvatar variant={0} size={32} ring="accent"/>
          <SXAvatar variant={1} size={32} ring="accent"/>
          {/* Mira Otter (av:0, fem) + Anna Igel (av:1, fem) */}
          <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10.5, letterSpacing: 0.4, color: SX_GREY_3 }}>
            <span style={{ color: SX_INK, fontWeight: 700 }}>Mira Otter</span> & <span style={{ color: SX_INK, fontWeight: 700 }}>Anna Igel</span> bekommen Bescheid.
          </span>
        </div>

        {/* Optional message */}
        <div style={{ paddingTop: 16 }}>
          <div style={{
            border:`1.5px solid ${SX_GREY_2}`, padding:'10px 12px',
            fontFamily:'var(--bc-mono)', fontSize: 12, color: SX_GREY_3,
          }}>
            "Bin gleich da - bringe Apfelschorle." <span style={{ color: SX_GREY_2 }}>↵</span>
          </div>
        </div>

        {/* CTA */}
        <div style={{ paddingTop: 18, display:'grid', gridTemplateColumns:'1fr auto', gap: 10 }}>
          <div style={{
            background: SX_ACCENT, color: SX_INK,
            padding:'16px 18px',
            fontWeight: 800, fontSize: 17, letterSpacing: -0.3,
            display:'flex', justifyContent:'space-between', alignItems:'center',
          }}>
            <span>Los - und ankündigen.</span>
            <span style={{ fontFamily:'var(--bc-mono)', fontSize: 12, letterSpacing: 0.4 }}>→</span>
          </div>
          <div style={{
            padding:'16px 16px',
            border:`1.5px solid ${SX_INK}`, background: SX_PAPER,
            fontWeight: 700, fontSize: 14, letterSpacing: -0.1,
            display:'flex', alignItems:'center',
          }}>Abbrechen</div>
        </div>
      </div>

      <SXNav active={1}/>
    </SXFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// 06 · BUDDY PROFILE - Anna Igel
// ─────────────────────────────────────────────────────────────
function Swiss_BuddyProfile() {
  return (
    <SXFrame bg={SX_PAPER}>
      <div style={{
        position:'absolute', top: 44, left: 0, right: 0, bottom: 64,
        overflowY:'auto',
      }}>
        {/* Header band - accent color */}
        <div style={{
          background: SX_ACCENT, padding:'14px 22px 22px',
          color: SX_INK, position:'relative',
        }}>
          {/* Top row: back / overflow */}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{
              width: 36, height: 36, border:`1.5px solid ${SX_INK}`, background: SX_ACCENT,
              display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 16,
            }}>←</div>
            <div style={{
              fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 0.6, fontWeight: 700, textTransform:'uppercase',
            }}>Buddy seit Jan 2026</div>
          </div>

          {/* Avatar + name */}
          <div style={{ display:'flex', alignItems:'flex-end', gap: 14, paddingTop: 18 }}>
            <SXAvatar variant={1} size={86} ring="ink"/>
            <div style={{ paddingBottom: 6 }}>
              <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1.6, textTransform:'uppercase' }}>● Aktiv jetzt</div>
              <h1 style={{
                margin:'4px 0 0', fontWeight: 800, fontSize: 36, letterSpacing: -1.2, lineHeight: 1,
              }}>Anna Igel.</h1>
              <div style={{ fontFamily:'var(--bc-mono)', fontSize: 11, marginTop: 4, letterSpacing: 0.4 }}>2 Kinder · 1 J & 4 J</div>
            </div>
          </div>
        </div>

        {/* Body */}
        <div style={{ padding:'0 22px' }}>
          {/* Where now */}
          <div style={{
            padding:'14px 16px', marginTop: -20, position:'relative',
            background: SX_PAPER, border:`1.5px solid ${SX_INK}`,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 2, textTransform:'uppercase', color: SX_ACCENT, fontWeight: 700 }}>● Jetzt hier</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3 }}>seit 13:30</span>
            </div>
            <div style={{
              marginTop: 6,
              fontWeight: 800, fontSize: 22, letterSpacing: -0.6, lineHeight: 1.1,
            }}>Naturbad Maria Einsiedel</div>
            <div style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3, marginTop: 4 }}>1,3 km von dir · Thalkirchen</div>
            <div style={{
              marginTop: 12, padding:'10px 12px', background: SX_INK, color: SX_PAPER,
              fontWeight: 700, fontSize: 13, display:'flex', justifyContent:'space-between', alignItems:'center',
            }}>
              <span>Da auch hingehen.</span>
              <span style={{ fontFamily:'var(--bc-mono)' }}>→</span>
            </div>
          </div>

          {/* Stats */}
          <div style={{ paddingTop: 22 }}>
            <Rule heavy/>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', borderBottom: `1px solid ${SX_INK}` }}>
              {[
                { l:'Treffen', v:'14', u:'mal' },
                { l:'Orte',    v:'8', u:'gemeinsam', accent:true },
                { l:'Bezirk',  v:'Thalkirchen', u:'beide' },
              ].map((c, i) => (
                <div key={i} style={{
                  padding:'10px 12px 14px',
                  borderRight: i<2 ? `1px solid ${SX_INK}` : 'none',
                }}>
                  <div style={{ fontFamily:'var(--bc-mono)', fontSize: 9.5, letterSpacing: 1, color: SX_GREY_3, textTransform:'uppercase' }}>{c.l}</div>
                  <div style={{ display:'flex', alignItems:'baseline', gap: 4, marginTop: 4 }}>
                    <span style={{
                      fontWeight: 800, fontSize: 22, letterSpacing: -0.6,
                      color: c.accent ? SX_ACCENT : SX_INK,
                    }}>{c.v}</span>
                    <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3 }}>{c.u}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Shared locations */}
          <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' }}>Gemeinsame Orte</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>8 Orte</span>
            </div>
            <Rule/>
            {[
              { n:'01', name:'Naturbad Maria Einsiedel',  count:'5×', last:'jetzt',     accent:true },
              { n:'02', name:'Café Thalkirchen',           count:'3×', last:'vor 4 Tagen' },
              { n:'03', name:'Isarauen Thalkirchen',       count:'2×', last:'vor 2 Wochen' },
              { n:'04', name:'Tierpark Hellabrunn',        count:'2×', last:'vor 1 Monat' },
            ].map((p, i, arr) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'24px 1fr auto auto',
                gap: 12, alignItems:'baseline', padding:'10px 0',
                borderBottom: i === arr.length - 1 ? `1.5px solid ${SX_INK}` : `1px solid ${SX_GREY_1}`,
              }}>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3 }}>{p.n}</span>
                <span style={{ fontWeight: 700, fontSize: 13.5, letterSpacing: -0.1 }}>{p.name}</span>
                <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3, letterSpacing: 0.5, textTransform:'uppercase' }}>{p.last}</span>
                <span style={{
                  fontFamily:'var(--bc-mono)', fontSize: 12, fontWeight: 700,
                  color: p.accent ? SX_ACCENT : SX_INK, minWidth: 28, textAlign:'right',
                }}>{p.count}</span>
              </div>
            ))}
          </div>

          {/* Sharing settings */}
          <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' }}>Was Anna Igel sieht</span>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 10, letterSpacing: 1, color: SX_GREY_3 }}>3 Optionen</span>
            </div>
            <Rule/>
            {[
              { label:'Mein Standort live',   on: false },
              { label:'Meine Aktivität',      on: true },
              { label:'Geplante Ausflüge',    on: true },
            ].map((s, i, arr) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1fr auto', alignItems:'center',
                gap: 12, padding:'12px 0',
                borderBottom: i === arr.length - 1 ? `1.5px solid ${SX_INK}` : `1px solid ${SX_GREY_1}`,
              }}>
                <span style={{ fontWeight: 600, fontSize: 14 }}>{s.label}</span>
                <div style={{
                  width: 44, height: 24, background: s.on ? SX_INK : SX_PAPER,
                  border:`1.5px solid ${SX_INK}`, position:'relative',
                }}>
                  <div style={{
                    position:'absolute', top: 1.5, left: s.on ? 22 : 1.5,
                    width: 18, height: 18,
                    background: s.on ? SX_ACCENT : SX_INK,
                  }}/>
                </div>
              </div>
            ))}
          </div>

          {/* Danger zone */}
          <div style={{ paddingTop: 22, paddingBottom: 22 }}>
            <div style={{
              padding:'12px 14px', border:`1.5px solid ${SX_GREY_2}`,
              display:'flex', justifyContent:'space-between', alignItems:'center',
            }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13 }}>Buddy entfernen</div>
                <div style={{ fontFamily:'var(--bc-mono)', fontSize: 10, color: SX_GREY_3, marginTop: 2 }}>Anna Igel sieht dich nicht mehr</div>
              </div>
              <span style={{ fontFamily:'var(--bc-mono)', fontSize: 11, color: SX_GREY_3, fontWeight: 700, letterSpacing: 0.4, textTransform:'uppercase' }}>Entfernen</span>
            </div>
          </div>
        </div>
      </div>

      <SXNav active={2}/>
    </SXFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// 07 · LOCK SCREEN NOTIFICATION - iOS lock screen with a buddy ping
// ─────────────────────────────────────────────────────────────
function Swiss_LockScreen() {
  // Wallpaper: a soft, atmospheric Munich evening tone - warm gradient that
  // reads as a real photograph behind the glass notification.
  return (
    <div style={{
      width: 390, height: 844,
      position:'relative', overflow:'hidden', borderRadius: 53,
      fontFamily:'var(--bc-font)', color:'#FFF',
      // Layered "wallpaper" - golden-hour Munich (warm sky to dusky horizon)
      background: `
        radial-gradient(120% 60% at 50% 20%, #FFB97A 0%, #E97A4B 38%, #6B2A33 72%, #1B1424 100%)
      `,
    }}>
      {/* Soft texture overlay (grain) for "real photo" feel */}
      <div style={{
        position:'absolute', inset: 0,
        background:`
          radial-gradient(80% 40% at 80% 12%, rgba(255,220,180,0.45) 0%, transparent 60%),
          radial-gradient(60% 30% at 15% 75%, rgba(20,16,30,0.35) 0%, transparent 60%)
        `,
        mixBlendMode:'overlay',
      }}/>

      {/* iOS Status bar - white */}
      <div style={{
        position:'absolute', top: 0, left: 0, right: 0, height: 44,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'0 28px', zIndex: 5,
      }}>
        <span style={{ fontWeight: 600, fontSize: 16, letterSpacing: -0.3 }}>14:32</span>
        <div style={{ width: 122, height: 33 }}/>{/* dynamic island gap */}
        <div style={{ display:'flex', alignItems:'center', gap: 5, fontSize: 14, fontWeight: 600 }}>
          {/* signal */}
          <svg width="17" height="11" viewBox="0 0 17 11"><g fill="#FFF">
            <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="3" width="3" height="8" rx="0.5"/>
            <rect x="13.5" y="0" width="3" height="11" rx="0.5"/>
          </g></svg>
          {/* wifi */}
          <svg width="16" height="11" viewBox="0 0 16 11" fill="#FFF">
            <path d="M8 11 L11 7.5 Q9.5 6 8 6 Q6.5 6 5 7.5 Z"/>
            <path d="M2 5 Q5 2 8 2 Q11 2 14 5 L12.5 6.5 Q10.5 4.5 8 4.5 Q5.5 4.5 3.5 6.5 Z"/>
          </svg>
          {/* battery */}
          <svg width="27" height="13" viewBox="0 0 27 13">
            <rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke="#FFF"/>
            <rect x="2"  y="2"   width="19" height="8" rx="1.6" fill="#FFF"/>
            <rect x="23" y="4"   width="2"  height="4" rx="1" fill="#FFF" opacity="0.5"/>
          </svg>
        </div>
      </div>

      {/* Dynamic Island */}
      <div style={{
        position:'absolute', top: 11, left:'50%', transform:'translateX(-50%)',
        width: 122, height: 33, borderRadius: 999, background:'#000', zIndex: 10,
      }}/>

      {/* Big lock-screen clock */}
      <div style={{
        position:'absolute', top: 56, left: 0, right: 0,
        textAlign:'center', color:'#FFF',
      }}>
        <div style={{
          fontFamily:'var(--bc-font)', fontWeight: 300,
          fontSize: 17, letterSpacing: 0.2, opacity: 0.95, marginBottom: 2,
        }}>
          Donnerstag, 14. Mai
        </div>
        <div style={{
          fontWeight: 200, fontSize: 96, letterSpacing: -4,
          lineHeight: 1, textShadow:'0 2px 14px rgba(0,0,0,0.18)',
        }}>14:32</div>
      </div>

      {/* Widget: weather + step island */}
      <div style={{
        position:'absolute', top: 230, left: 24, right: 24,
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10,
      }}>
        <div style={{
          padding:'10px 14px', borderRadius: 16,
          background:'rgba(255,255,255,0.16)', backdropFilter:'blur(20px)',
          WebkitBackdropFilter:'blur(20px)',
          color:'#FFF', display:'flex', alignItems:'center', gap: 10,
        }}>
          <span style={{ fontSize: 22 }}>☀︎</span>
          <div style={{ lineHeight: 1.15 }}>
            <div style={{ fontSize: 11, opacity: 0.85 }}>München</div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>18° · klar</div>
          </div>
        </div>
        <div style={{
          padding:'10px 14px', borderRadius: 16,
          background:'rgba(255,255,255,0.16)', backdropFilter:'blur(20px)',
          WebkitBackdropFilter:'blur(20px)',
          color:'#FFF',
        }}>
          <div style={{ fontSize: 11, opacity: 0.85 }}>Sonnenuntergang</div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>20:48</div>
        </div>
      </div>

      {/* - NOTIFICATION STACK - */}
      <div style={{
        position:'absolute', left: 12, right: 12, bottom: 132,
        display:'flex', flexDirection:'column', gap: 8,
      }}>
        {/* Stacked-behind hint (older notification - barely visible) */}
        <div style={{
          marginLeft: 14, marginRight: 14, height: 12,
          background:'rgba(255,255,255,0.10)', backdropFilter:'blur(20px)',
          WebkitBackdropFilter:'blur(20px)',
          borderRadius: '20px 20px 8px 8px',
        }}/>
        <div style={{
          marginLeft: 7, marginRight: 7, height: 16,
          background:'rgba(255,255,255,0.13)', backdropFilter:'blur(20px)',
          WebkitBackdropFilter:'blur(20px)',
          borderRadius: '22px 22px 8px 8px',
        }}/>

        {/* Main "Wir. Raus." notification - strict iOS layout
            iOS rules respected:
            - App icon top-left, ~38-40px rounded square
            - App name: small uppercase, system gray, NOT colored
            - Title: bold, system font, system label color
            - Body: regular, secondaryLabel, max ~3 lines collapsed
            - Time: caption2, top right
            - NO inline action chips - those appear only on long-press
            - NO custom avatar - Communication Notifications API requires SiriKit Intents we don't have
        */}
        <div style={{
          background:'rgba(245,245,247,0.82)', backdropFilter:'blur(30px) saturate(180%)',
          WebkitBackdropFilter:'blur(30px) saturate(180%)',
          borderRadius: 22, padding: '11px 14px 12px',
          boxShadow:'0 8px 28px rgba(0,0,0,0.18)',
          color:'#000',
          fontFamily:'-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
          display:'grid', gridTemplateColumns:'38px 1fr', gap: 10, alignItems:'flex-start',
        }}>
          {/* App icon - "Wir. Raus." - black square, accent dot, set type */}
          <div style={{
            width: 38, height: 38, borderRadius: 9,
            background: SX_INK, position:'relative', overflow:'hidden',
            boxShadow:'0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 0.5px rgba(0,0,0,0.2)',
          }}>
            {/* Stacked typographic mark */}
            <div style={{
              position:'absolute', inset: 0,
              display:'flex', flexDirection:'column', alignItems:'flex-start', justifyContent:'center',
              padding:'0 5px',
              fontWeight: 800, color:'#FFF',
              letterSpacing: -0.5, lineHeight: 0.92,
            }}>
              <span style={{ fontSize: 11 }}>Wir.</span>
              <span style={{ fontSize: 11 }}>
                Raus<span style={{ color: SX_ACCENT }}>.</span>
              </span>
            </div>
          </div>

          {/* Body - single column, header row + title + body */}
          <div style={{ minWidth: 0 }}>
            {/* Header row: app name + time */}
            <div style={{
              display:'flex', justifyContent:'space-between', alignItems:'center', gap: 8,
              fontSize: 12.5, color:'rgba(0,0,0,0.55)', fontWeight: 400,
              letterSpacing: -0.05,
            }}>
              <span>WIR. RAUS.</span>
              <span>jetzt</span>
            </div>

            {/* Title - single bold line */}
            <div style={{
              marginTop: 1, fontWeight: 600, fontSize: 14.5, letterSpacing: -0.3, lineHeight: 1.25,
              color:'#000',
            }}>
              Anna Igel ist im Naturbad Maria Einsiedel.
            </div>

            {/* Body - secondary label */}
            <div style={{
              marginTop: 1, fontSize: 14, color:'rgba(0,0,0,0.78)', lineHeight: 1.3,
              fontWeight: 400, letterSpacing: -0.2,
            }}>
              4,2 km · Sonne, Schatten ab 14h. Sie freut sich auf Euch.
            </div>
          </div>
        </div>
      </div>

      {/* Flashlight + Camera affordances (iOS lock-screen bottom corners) */}
      <div style={{
        position:'absolute', bottom: 56, left: 28,
        width: 50, height: 50, borderRadius: 25,
        background:'rgba(0,0,0,0.32)', backdropFilter:'blur(14px)',
        WebkitBackdropFilter:'blur(14px)',
        display:'flex', alignItems:'center', justifyContent:'center', color:'#FFF', fontSize: 18,
      }}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#FFF" strokeWidth="1.6" strokeLinecap="round">
          <path d="M7 2 L13 2 L13 6 L11 9 L11 18 L9 18 L9 9 L7 6 Z"/>
        </svg>
      </div>
      <div style={{
        position:'absolute', bottom: 56, right: 28,
        width: 50, height: 50, borderRadius: 25,
        background:'rgba(0,0,0,0.32)', backdropFilter:'blur(14px)',
        WebkitBackdropFilter:'blur(14px)',
        display:'flex', alignItems:'center', justifyContent:'center', color:'#FFF',
      }}>
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="#FFF" strokeWidth="1.6">
          <rect x="2" y="6" width="18" height="12" rx="2"/>
          <circle cx="11" cy="12" r="3.4"/>
          <rect x="6.5" y="3.5" width="6" height="2.5" rx="0.5"/>
        </svg>
      </div>

      {/* "Slide to unlock"-style hint */}
      <div style={{
        position:'absolute', bottom: 28, left: 0, right: 0, textAlign:'center',
        color:'rgba(255,255,255,0.85)', fontSize: 13, fontWeight: 500, letterSpacing: 0.1,
      }}>
        Zum Öffnen wischen
      </div>

      {/* Home indicator */}
      <div style={{
        position:'absolute', bottom: 8, left:'50%', transform:'translateX(-50%)',
        width: 134, height: 5, borderRadius: 999, background:'#FFF',
      }}/>
    </div>
  );
}

window.Swiss_POI = Swiss_POI;
window.Swiss_Buddys = Swiss_Buddys;
window.Swiss_Hingehen = Swiss_Hingehen;
window.Swiss_BuddyProfile = Swiss_BuddyProfile;
window.Swiss_LockScreen = Swiss_LockScreen;

// Shared helpers for SwissNext.jsx and other extension files
window.SXFrame = SXFrame;
window.SXMast = SXMast;
window.SXNav = SXNav;
window.SXAvatar = SXAvatar;