// alternates.jsx — alternate visual treatments shown as static iOS frames
// on the design canvas, alongside the main interactive prototype.

// ─────────────────────────────────────────────────────────────
// Home — Soonest-first continuous scroll
// (sparse-friendly: just a chronological list with date dividers)
// ─────────────────────────────────────────────────────────────
function HomeTimeGrid() {
  // Build a chronological feed: runs grouped by date, soonest first
  const feed = [
    { date: 'Tonight', sub: 'Tue 19 May', runs: [RUNS[0]] },
    { date: 'Tomorrow', sub: 'Wed 20 May', runs: [RUNS[1], RUNS[2]] },
    { date: 'Sat', sub: '23 May', runs: [RUNS[4]] },
    { date: 'Sun', sub: '24 May', runs: [RUNS[3]] },
  ];

  return (
    <div style={{ background: PACER.bg, minHeight: '100%', color: PACER.text, fontFamily: PACER.font }}>
      {/* Header */}
      <div style={{ padding: '54px 20px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <div style={{
              width: 30, height: 30, borderRadius: 9, background: PACER.lime,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="run" size={18} color={PACER.limeInk}/>
            </div>
            <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.5 }}>Run Crew</div>
          </div>
          <Avatar name="Sam" size={36} photo/>
        </div>
        <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -1, lineHeight: 1.05 }}>
          Runs near you
        </div>
        <div style={{ fontSize: 13.5, color: PACER.textDim, marginTop: 4 }}>
          <span style={{ fontFamily: PACER.mono, color: PACER.text }}>5 runs</span> in the next 7 days, near Clifton
        </div>
      </div>

      {/* Filter strip — single line, no day-pills */}
      <div style={{
        display: 'flex', gap: 8, padding: '0 20px 22px',
        overflowX: 'auto', scrollbarWidth: 'none',
      }}>
        {['All', 'Women-only', '2K+', '5K+', '10K+'].map((f, i) => (
          <button key={f} style={{
            height: 32, padding: '0 12px', borderRadius: 99,
            background: i === 0 ? PACER.lime : 'transparent',
            border: `1px solid ${i === 0 ? PACER.lime : PACER.border}`,
            color: i === 0 ? PACER.limeInk : PACER.textDim,
            fontFamily: PACER.font, fontSize: 12.5, fontWeight: i === 0 ? 600 : 500,
            cursor: 'pointer', flexShrink: 0,
          }}>{f}</button>
        ))}
      </div>

      {/* Chronological list */}
      <div style={{ padding: '0 20px 30px' }}>
        {feed.map((day, di) => (
          <div key={di} style={{ marginBottom: 22 }}>
            {/* Date divider — inline, not sticky */}
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12,
              paddingBottom: 8, borderBottom: `1px solid ${PACER.border}`,
            }}>
              <span style={{
                fontFamily: PACER.font, fontSize: 17, fontWeight: 600,
                color: di === 0 ? PACER.lime : PACER.text, letterSpacing: -0.3,
              }}>{day.date}</span>
              <span style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textMute, letterSpacing: 0.5 }}>
                {day.sub}
              </span>
              <span style={{ flex: 1 }}/>
              <span style={{ fontFamily: PACER.mono, fontSize: 10.5, color: PACER.textSubtle, letterSpacing: 1.2 }}>
                {day.runs.length} RUN{day.runs.length > 1 ? 'S' : ''}
              </span>
            </div>

            {/* Runs */}
            <div style={{ display: 'grid', gap: 10 }}>
              {day.runs.map(r => {
                const host = USERS[r.host];
                const isLive = di === 0;
                return (
                  <div key={r.id} style={{
                    background: isLive
                      ? `linear-gradient(180deg, ${PACER.limeSoft}, transparent 50%), ${PACER.card}`
                      : PACER.card,
                    border: `1px solid ${isLive ? PACER.limeBorder : PACER.border}`,
                    borderRadius: 16, padding: 14,
                    display: 'flex', alignItems: 'stretch', gap: 14,
                  }}>
                    {/* Time block */}
                    <div style={{
                      width: 54, flexShrink: 0,
                      display: 'flex', flexDirection: 'column', justifyContent: 'center',
                      borderRight: `1px solid ${PACER.border}`,
                      paddingRight: 12,
                    }}>
                      <div style={{
                        fontFamily: PACER.mono, fontSize: 17, fontWeight: 500,
                        color: PACER.text, letterSpacing: -0.3, lineHeight: 1,
                      }}>{r.time}</div>
                      <div style={{
                        fontFamily: PACER.mono, fontSize: 9.5, color: PACER.textMute,
                        marginTop: 5, letterSpacing: 0.5,
                      }}>{parseInt(r.time) < 12 ? 'AM' : 'PM'}</div>
                    </div>

                    {/* Content */}
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
                        <span style={{ fontSize: 15, fontWeight: 600, color: PACER.text, letterSpacing: -0.2 }}>
                          {r.title}
                        </span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
                        <span style={{ fontFamily: PACER.mono, fontSize: 12, color: PACER.text, fontWeight: 500 }}>{r.distance}</span>
                        <span style={{ color: PACER.textSubtle, fontSize: 11 }}>·</span>
                        <span style={{ fontFamily: PACER.mono, fontSize: 12, color: PACER.textDim }}>{r.paceMin}–{r.paceMax}/km</span>
                        <span style={{ color: PACER.textSubtle, fontSize: 11 }}>·</span>
                        <span style={{ fontSize: 12, color: PACER.textDim }}>{r.area}</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Avatar name={host.name} size={20}/>
                        <span style={{ fontSize: 11.5, color: PACER.textDim }}>
                          {host.name.split(' ')[0]}
                        </span>
                        <span style={{ flex: 1 }}/>
                        {r.womenOnly && <Chip tone="magenta" size="xs">W</Chip>}
                        <Chip tone="default" size="xs">
                          {r.joined.length}/{r.capacity}
                        </Chip>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        {/* End-of-feed nudge */}
        <div style={{
          marginTop: 12, padding: 18,
          background: 'rgba(255,255,255,0.02)', border: `1px dashed ${PACER.border}`,
          borderRadius: 16, textAlign: 'center',
        }}>
          <div style={{ fontSize: 13.5, color: PACER.text, fontWeight: 500, marginBottom: 4 }}>
            That’s all this week.
          </div>
          <div style={{ fontSize: 12, color: PACER.textMute, marginBottom: 12 }}>
            See nothing at your time? Host one — we’ll surface it to nearby runners.
          </div>
          <button style={{
            padding: '8px 14px', borderRadius: 99,
            background: PACER.lime, color: PACER.limeInk, border: 'none',
            fontFamily: PACER.font, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
          }}>Create a run</button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stylized dark-mode map (Google-Maps-aesthetic, hand-drawn SVG).
// Real maps would need an API key — this matches the look + feel.
// ─────────────────────────────────────────────────────────────
function DarkMap({ children }) {
  const C = {
    land:    '#1a1d1a',
    water:   '#1b2a36', waterEd: '#243646',
    park:    '#1e2a1e', parkEd:  '#243424', parkLbl: '#4d6a4d',
    bldg:    '#22251f',
    roadMin: '#2c2f2a',
    roadMaj: '#3d4038', roadMjE: '#4a4e44',
    roadHwy: '#5a4f3c', roadHwyE:'#6a5d44',
    labelSm: '#6b716a',
  };
  return (
    <div style={{ position: 'absolute', inset: 0, background: C.land, overflow: 'hidden' }}>
      <svg width="100%" height="100%" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ display: 'block' }}>
        <defs>
          <pattern id="blocks" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="6" height="6" fill={C.bldg}/>
            <rect x="8" y="2" width="5" height="4" fill={C.bldg} opacity="0.7"/>
            <rect x="1" y="9" width="4" height="4" fill={C.bldg} opacity="0.85"/>
            <rect x="7" y="8" width="6" height="5" fill={C.bldg} opacity="0.7"/>
          </pattern>
        </defs>
        {/* Base */}
        <rect width="400" height="500" fill={C.land}/>
        {/* Building blocks texture */}
        <rect x="0" y="100" width="400" height="380" fill="url(#blocks)" opacity="0.55"/>

        {/* River Thames — wide horizontal band at top */}
        <path d="M-20 60 C 50 90, 140 50, 220 75 S 360 80, 420 50 L 420 0 L -20 0 Z" fill={C.water}/>
        <path d="M-20 60 C 50 90, 140 50, 220 75 S 360 80, 420 50" stroke={C.waterEd} strokeWidth="1" fill="none" opacity="0.9"/>

        {/* Battersea Park */}
        <path d="M70 95 Q 120 80, 175 95 Q 200 110, 195 145 Q 175 175, 130 175 Q 80 170, 65 145 Q 55 115, 70 95 Z" fill={C.park}/>
        <path d="M70 95 Q 120 80, 175 95 Q 200 110, 195 145 Q 175 175, 130 175 Q 80 170, 65 145 Q 55 115, 70 95 Z" stroke={C.parkEd} strokeWidth="1" fill="none"/>
        <path d="M90 130 Q 130 110, 170 130 Q 180 150, 150 160" stroke="rgba(255,255,255,0.04)" strokeWidth="1" fill="none"/>

        {/* Clapham Common */}
        <path d="M150 230 Q 220 220, 290 235 Q 305 270, 290 310 Q 240 325, 180 318 Q 145 305, 145 270 Q 145 245, 150 230 Z" fill={C.park}/>
        <path d="M150 230 Q 220 220, 290 235 Q 305 270, 290 310 Q 240 325, 180 318 Q 145 305, 145 270 Q 145 245, 150 230 Z" stroke={C.parkEd} strokeWidth="1" fill="none"/>
        <path d="M160 235 Q 220 275, 295 305 M165 320 Q 230 280, 290 240" stroke="rgba(255,255,255,0.04)" strokeWidth="1" fill="none"/>

        {/* Wandsworth Common */}
        <path d="M320 200 Q 360 195, 395 210 L 395 270 Q 370 285, 330 280 Q 310 250, 320 200 Z" fill={C.park}/>
        <path d="M320 200 Q 360 195, 395 210 L 395 270 Q 370 285, 330 280 Q 310 250, 320 200 Z" stroke={C.parkEd} strokeWidth="1" fill="none"/>

        {/* Tooting Bec common */}
        <path d="M260 410 Q 320 405, 360 425 Q 355 460, 310 470 Q 270 465, 260 440 Z" fill={C.park}/>
        <path d="M260 410 Q 320 405, 360 425 Q 355 460, 310 470 Q 270 465, 260 440 Z" stroke={C.parkEd} strokeWidth="1" fill="none"/>

        {/* Major arterials (drawn with stroke + edge stroke for depth) */}
        {/* A3 sweeping curve */}
        <path d="M0 130 C 80 145, 150 200, 250 215 S 400 260, 420 270" stroke={C.roadHwyE} strokeWidth="5" fill="none"/>
        <path d="M0 130 C 80 145, 150 200, 250 215 S 400 260, 420 270" stroke={C.roadHwy} strokeWidth="3.5" fill="none"/>
        {/* Clapham High St vertical */}
        <path d="M210 100 L 215 230 M 215 320 L 220 480" stroke={C.roadMjE} strokeWidth="4" fill="none"/>
        <path d="M210 100 L 215 230 M 215 320 L 220 480" stroke={C.roadMaj} strokeWidth="2.5" fill="none"/>
        {/* Bridge across Thames */}
        <path d="M130 30 L 130 95" stroke={C.roadMjE} strokeWidth="4" fill="none"/>
        <path d="M130 30 L 130 95" stroke={C.roadMaj} strokeWidth="2.5" fill="none"/>
        {/* Lavender Hill */}
        <path d="M40 175 Q 200 195, 360 200" stroke={C.roadMjE} strokeWidth="3.5" fill="none"/>
        <path d="M40 175 Q 200 195, 360 200" stroke={C.roadMaj} strokeWidth="2" fill="none"/>
        {/* Balham High Rd */}
        <path d="M150 350 L 280 360 L 300 480" stroke={C.roadMjE} strokeWidth="3" fill="none"/>
        <path d="M150 350 L 280 360 L 300 480" stroke={C.roadMaj} strokeWidth="1.8" fill="none"/>

        {/* Minor street grid */}
        <g stroke={C.roadMin} strokeWidth="1.2" fill="none">
          {/* Battersea */}
          <path d="M30 110 L 60 130 M 50 100 L 70 130 M 25 145 L 60 165 M 20 170 L 55 185"/>
          {/* Clapham residential */}
          <path d="M155 200 L 200 215 M 170 195 L 180 240 M 240 215 L 245 240 M 270 215 L 280 240"/>
          <path d="M155 330 L 200 340 M 165 340 L 175 380 M 230 330 L 240 390 M 260 332 L 272 400"/>
          <path d="M100 380 L 200 395 M 100 410 L 200 425 M 120 360 L 130 440 M 165 370 L 175 445"/>
          {/* Wandsworth grid */}
          <path d="M325 290 L 395 295 M 330 305 L 395 312 M 340 320 L 395 326 M 340 285 L 355 380 M 370 285 L 385 380"/>
          {/* Stockwell */}
          <path d="M280 200 L 330 195 M 290 215 L 320 200 M 300 230 L 330 220"/>
        </g>

        {/* Cycleways (dashed) */}
        <g stroke="#3a3d36" strokeWidth="1" strokeDasharray="3 3" fill="none">
          <path d="M120 80 Q 200 95, 300 90"/>
          <path d="M220 240 Q 250 280, 220 320"/>
        </g>

        {/* Tube stations */}
        {[
          { x: 210, y: 222 },
          { x: 222, y: 340 },
          { x: 232, y: 425 },
          { x: 135, y: 215 },
          { x: 350, y: 285 },
        ].map((s, i) => (
          <circle key={'tube' + i} cx={s.x} cy={s.y} r="4.5" fill="#1a1d1a" stroke="#c75a3a" strokeWidth="1.6"/>
        ))}

        {/* Labels */}
        <g fontFamily="Space Grotesk, system-ui" fill={C.parkLbl} textAnchor="middle">
          <text x="130" y="135" fontSize="9" letterSpacing="0.6" fontWeight="500">ASHTON COURT</text>
          <text x="220" y="278" fontSize="10" letterSpacing="0.8" fontWeight="500">CLIFTON DOWN</text>
          <text x="360" y="245" fontSize="8" letterSpacing="0.6" fontWeight="500">BRANDON HILL</text>
          <text x="310" y="445" fontSize="8" letterSpacing="0.6" fontWeight="500">VICTORIA PK</text>
          <text x="200" y="40" fontSize="8.5" letterSpacing="1.2" fontWeight="500" fill="#4a6478">RIVER AVON</text>
          <text x="55" y="225" fontSize="7" letterSpacing="0.5" fill={C.labelSm}>Bedminster</text>
          <text x="60" y="335" fontSize="7" letterSpacing="0.5" fill={C.labelSm}>Southville</text>
          <text x="120" y="465" fontSize="7" letterSpacing="0.5" fill={C.labelSm}>Totterdown</text>
          <text x="350" y="160" fontSize="7" letterSpacing="0.5" fill={C.labelSm}>St Pauls</text>
        </g>
      </svg>
      {children}
    </div>
  );
}

// Google-style teardrop pin
function MapPin({ x, y, label, live = false, color = '#d4ff3a' }) {
  return (
    <div style={{
      position: 'absolute', left: `${(x / 400) * 100}%`, top: `${(y / 500) * 100}%`,
      transform: 'translate(-50%, -100%)', pointerEvents: 'none',
    }}>
      {live && (
        <div style={{
          position: 'absolute', left: '50%', bottom: -10, transform: 'translateX(-50%)',
          width: 56, height: 56, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(212,255,58,0.35) 0%, rgba(212,255,58,0) 70%)',
        }}/>
      )}
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{
          background: live ? color : '#1f2220',
          color: live ? '#0a0c0a' : '#f1f3ee',
          border: live ? 'none' : '1px solid rgba(255,255,255,0.12)',
          borderRadius: 8, padding: '4px 9px',
          fontFamily: 'Space Grotesk, system-ui', fontSize: 11.5, fontWeight: 600,
          boxShadow: '0 4px 14px rgba(0,0,0,0.6)',
          whiteSpace: 'nowrap', marginBottom: 3,
        }}>{label}</div>
        <svg width="20" height="26" viewBox="0 0 20 26" style={{ filter: 'drop-shadow(0 3px 6px rgba(0,0,0,0.7))' }}>
          <path d="M10 0 C 4 0, 0 4, 0 10 C 0 17, 10 26, 10 26 C 10 26, 20 17, 20 10 C 20 4, 16 0, 10 0 Z"
                fill={live ? color : '#2a2d28'}
                stroke={live ? color : 'rgba(255,255,255,0.25)'} strokeWidth="1"/>
          <circle cx="10" cy="10" r="3.5" fill={live ? '#0a0c0a' : color}/>
        </svg>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Home — Map-led variant
// ─────────────────────────────────────────────────────────────
function HomeMapLed() {
  const pins = [
    { x: 220, y: 270, label: 'Easy 5K · 18:30', live: true },
    { x: 360, y: 235, label: '4K · W-only', color: '#ff5fa2' },
    { x: 130, y: 130, label: '8K · Wed' },
    { x: 80,  y: 200, label: '3K · Sat' },
    { x: 290, y: 425, label: '12K · Sun' },
  ];

  return (
    <div style={{ background: '#1a1d1a', minHeight: '100%', color: PACER.text, fontFamily: PACER.font, position: 'relative' }}>
      <DarkMap>
        {pins.map((p, i) => <MapPin key={i} {...p}/>)}
        {/* You-are-here */}
        <div style={{
          position: 'absolute', left: '54%', top: '54%', transform: 'translate(-50%, -50%)',
        }}>
          <div style={{
            width: 14, height: 14, borderRadius: '50%',
            background: '#7fd0ff', border: '2px solid #0a0c0a',
            boxShadow: '0 0 0 6px rgba(127,208,255,0.18)',
          }}/>
        </div>
      </DarkMap>

      {/* Top overlay */}
      <div style={{ position: 'relative', padding: '54px 16px 0', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            flex: 1, background: 'rgba(20,22,20,0.88)',
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
            border: `1px solid ${PACER.border}`, borderRadius: 12,
            padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8,
            boxShadow: '0 4px 18px rgba(0,0,0,0.5)',
          }}>
            <Icon name="search" size={15} color={PACER.textDim}/>
            <span style={{ fontSize: 13.5, color: PACER.text, fontWeight: 500 }}>Clifton + 1 mile</span>
            <span style={{ flex: 1 }}/>
            <span style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.lime }}>5 runs</span>
          </div>
          <button style={{
            background: 'rgba(20,22,20,0.88)',
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
            width: 42, height: 42, borderRadius: 12,
            border: `1px solid ${PACER.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', boxShadow: '0 4px 18px rgba(0,0,0,0.5)',
          }}>
            <Icon name="filter" size={17} color={PACER.text}/>
          </button>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {['All', 'Women-only', '2K+', '5K+', '10K+'].map((f, i) => (
            <div key={f} style={{
              flex: '0 0 auto', padding: '7px 12px', borderRadius: 99,
              background: i === 0 ? PACER.lime : 'rgba(20,22,20,0.88)',
              backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
              border: i === 0 ? 'none' : `1px solid ${PACER.border}`,
              color: i === 0 ? PACER.limeInk : PACER.text,
              fontSize: 12, fontWeight: i === 0 ? 600 : 500, whiteSpace: 'nowrap',
              boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
            }}>{f}</div>
          ))}
        </div>
      </div>

      {/* Recenter button */}
      <div style={{ position: 'absolute', right: 16, bottom: 250, zIndex: 3 }}>
        <button style={{
          width: 44, height: 44, borderRadius: 12,
          background: 'rgba(20,22,20,0.92)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          border: `1px solid ${PACER.border}`, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 14px rgba(0,0,0,0.6)',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f1f3ee" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="3"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3"/>
          </svg>
        </button>
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: PACER.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '14px 18px 30px',
        boxShadow: '0 -20px 40px rgba(0,0,0,0.6)',
        borderTop: `1px solid ${PACER.borderStrong}`,
      }}>
        <div style={{
          width: 36, height: 4, borderRadius: 99, background: PACER.borderStrong,
          margin: '0 auto 14px',
        }}/>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12,
        }}>
          <span style={{ fontSize: 16, fontWeight: 600 }}>5 runs nearby</span>
          <span style={{ fontFamily: PACER.mono, fontSize: 10.5, color: PACER.textMute, letterSpacing: 1.2 }}>BY TIME</span>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', scrollbarWidth: 'none', margin: '0 -18px', padding: '0 18px' }}>
          {[RUNS[0], RUNS[1], RUNS[2]].map((r, i) => (
            <div key={r.id} style={{
              flex: '0 0 220px',
              background: i === 0 ? `linear-gradient(180deg, ${PACER.limeSoft}, transparent), ${PACER.card}` : PACER.card,
              border: `1px solid ${i === 0 ? PACER.limeBorder : PACER.border}`,
              borderRadius: 16, padding: 14,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
                <span style={{ fontFamily: PACER.mono, fontSize: 20, fontWeight: 500 }}>{r.distance}</span>
                <span style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textDim }}>{r.paceMin}/km</span>
                <span style={{ flex: 1 }}/>
                <span style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.text, fontWeight: 500 }}>{r.time}</span>
              </div>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>{r.title}</div>
              <div style={{ fontSize: 11, color: PACER.textMute }}>{r.area}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Run Detail — Editorial / minimal variant
// ─────────────────────────────────────────────────────────────
function RunDetailEditorial() {
  const run = RUNS[0];
  const host = USERS[run.host];
  return (
    <div style={{ background: '#0e110e', minHeight: '100%', color: PACER.text, fontFamily: PACER.font }}>
      <div style={{ padding: '54px 24px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{
          background: 'transparent', border: 'none', color: PACER.text, cursor: 'pointer',
          fontSize: 14, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <Icon name="chevL" size={20} color={PACER.text}/> Back
        </button>
        <button style={{ background: 'transparent', border: 'none', color: PACER.textDim, cursor: 'pointer' }}>
          <Icon name="dots" size={18} color={PACER.textDim}/>
        </button>
      </div>

      <div style={{ padding: '8px 30px 140px' }}>
        <div style={{
          fontFamily: PACER.mono, fontSize: 11, color: PACER.lime,
          letterSpacing: 1.6, textTransform: 'uppercase', marginBottom: 18,
        }}>
          {run.dateLong}
        </div>
        <div style={{
          fontSize: 42, fontWeight: 600, letterSpacing: -1.8, lineHeight: 1.0, marginBottom: 22,
        }}>{run.title}.</div>
        <div style={{
          display: 'flex', borderTop: `1px solid ${PACER.border}`,
          borderBottom: `1px solid ${PACER.border}`, padding: '18px 0', marginBottom: 22,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase', marginBottom: 4 }}>Dist</div>
            <div style={{ fontFamily: PACER.mono, fontSize: 26, fontWeight: 500, letterSpacing: -0.5 }}>{run.distance}</div>
          </div>
          <div style={{ width: 1, background: PACER.border, marginRight: 14 }}/>
          <div style={{ flex: 1.4 }}>
            <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase', marginBottom: 4 }}>Pace</div>
            <div style={{ fontFamily: PACER.mono, fontSize: 26, fontWeight: 500, letterSpacing: -0.5 }}>{run.paceMin}<span style={{ color: PACER.textMute }}>–</span>{run.paceMax}</div>
          </div>
          <div style={{ width: 1, background: PACER.border, marginRight: 14 }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase', marginBottom: 4 }}>Going</div>
            <div style={{ fontFamily: PACER.mono, fontSize: 26, fontWeight: 500, letterSpacing: -0.5 }}>{run.joined.length}<span style={{ color: PACER.textMute, fontSize: 16 }}>/{run.capacity}</span></div>
          </div>
        </div>
        <div style={{ fontSize: 17, color: PACER.textDim, lineHeight: 1.5, marginBottom: 26 }}>
          {run.blurb} {run.notes}
        </div>
        <div style={{ marginBottom: 26 }}>
          <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
            <Icon name="lock" size={16} color={PACER.textMute} style={{ marginTop: 2 }}/>
            <div>
              <div style={{ fontSize: 11, color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, fontWeight: 600, marginBottom: 2 }}>Meeting point</div>
              <div style={{ fontSize: 14, color: PACER.text, fontWeight: 500 }}>{run.meetingHint}</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <Avatar name={host.name} size={36} photo/>
            <div>
              <div style={{ fontSize: 11, color: PACER.textMute, textTransform: 'uppercase', letterSpacing: 1.4, fontWeight: 600, marginBottom: 2 }}>Host</div>
              <div style={{ fontSize: 14, color: PACER.text, fontWeight: 500 }}>{host.name}, hosting since 2024</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 24px 38px',
        background: `linear-gradient(180deg, rgba(14,17,14,0), #0e110e 30%)`,
      }}>
        <Btn variant="primary" size="lg" style={{ width: '100%' }}>Request to join</Btn>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Run card variations (card-only artboards for the canvas)
// ─────────────────────────────────────────────────────────────
function CardVariations() {
  const r = RUNS[0];
  return (
    <div style={{ background: PACER.bg, color: PACER.text, fontFamily: PACER.font, padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase' }}>A · Default</div>
      <RunCard run={r} onClick={() => {}}/>

      <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase' }}>B · Pace-led</div>
      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`, borderRadius: 18, padding: 14,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: 14,
          background: PACER.limeSoft, border: `1px solid ${PACER.limeBorder}`,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <div style={{ fontFamily: PACER.mono, fontSize: 16, fontWeight: 600, color: PACER.lime, lineHeight: 1 }}>{r.paceMin}</div>
          <div style={{ fontFamily: PACER.mono, fontSize: 9, color: PACER.lime, opacity: 0.8, marginTop: 3 }}>/KM</div>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{r.title}</div>
          <div style={{ fontSize: 12, color: PACER.textDim, marginBottom: 8 }}>{r.distance} · {r.area} · {r.time}</div>
          <div style={{ display: 'flex', gap: 6 }}>
            <Chip size="xs">{r.joined.length}/{r.capacity}</Chip>
          </div>
        </div>
      </div>

      <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase' }}>C · Compact list row</div>
      <div style={{
        background: 'transparent', borderTop: `1px solid ${PACER.border}`, borderBottom: `1px solid ${PACER.border}`,
        padding: '12px 0', display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          fontFamily: PACER.mono, fontSize: 14, fontWeight: 500, color: PACER.text,
          minWidth: 46, textAlign: 'left',
        }}>{r.time}</div>
        <div style={{ width: 1, height: 28, background: PACER.border }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>{r.title}</div>
          <div style={{ fontFamily: PACER.mono, fontSize: 11, color: PACER.textDim }}>{r.distance} · {r.paceMin}/km · {r.area}</div>
        </div>
        <Avatar name="Anna" size={26}/>
        <Icon name="chev" size={14} color={PACER.textSubtle}/>
      </div>

      <div style={{ fontSize: 10, color: PACER.textMute, letterSpacing: 1.4, fontWeight: 600, textTransform: 'uppercase' }}>D · Live (starting soon)</div>
      <FeaturedRunCard run={r} onClick={() => {}}/>
    </div>
  );
}

Object.assign(window, { HomeTimeGrid, HomeMapLed, RunDetailEditorial, CardVariations, DarkMap, MapPin });