// home.jsx — Muna home map screen (most important). Map + pins + proximity banner + bottom sheet.
(function () {
  const T = window.T, { MapView, MapPin, IconBtn } = window;
  const { useState } = React;

  function Home({ go, app, tw }) {
    const [active, setActive] = useState('geun');
    const [sheet, setSheet] = useState(tw.homeSheetStart === 'open' ? 'open' : 'peek'); // peek | open
    const sites = window.SITES;
    const near = window.siteById('geun');
    const bannerFloat = tw.homeBanner === 'floating';
    const minimalPins = tw.homePins === 'minimal';

    const sheetH = sheet === 'open' ? 460 : 168;

    return (
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: T.canvas }}>
        <MapView />

        {/* pins */}
        {sites.map(s => (
          <MapPin key={s.id} site={s} active={active === s.id}
            near={s.id === 'geun'}
            onClick={() => { setActive(s.id); }} />
        ))}
        {/* current location dot */}
        <div style={{ position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%,-50%)', zIndex: 4 }}>
          <div style={{ width: 64, height: 64, borderRadius: 99, background: 'rgba(86,122,180,.16)',
            position: 'absolute', inset: '-22px', animation: 'munaPulse 2.4s ease-out infinite' }} />
          <div style={{ width: 20, height: 20, borderRadius: 99, background: '#4f7bd6',
            border: '3px solid #fff', boxShadow: '0 3px 10px rgba(48,80,150,.5)' }} />
        </div>

        {/* ── top controls ── */}
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16, zIndex: 20,
          display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={() => go('search')} style={{ flex: 1, height: 50, borderRadius: 99,
              background: 'rgba(251,246,236,.95)', backdropFilter: 'blur(8px)', border: '1px solid ' + T.hairline,
              boxShadow: '0 6px 18px -8px rgba(33,30,20,.35)', display: 'flex', alignItems: 'center',
              gap: 10, padding: '0 16px', cursor: 'pointer' }}>
              <Icon name="search" size={20} color={T.muted} />
              <span style={{ fontFamily: T.sans, fontSize: 14.5, color: T.muted, whiteSpace: 'nowrap' }}>유산 이름으로 찾기</span>
            </button>
            <IconBtn name="globe" size={50} ic={22} bg="rgba(251,246,236,.95)"
              onClick={() => go('langPick')} style={{ backdropFilter: 'blur(8px)',
                boxShadow: '0 6px 18px -8px rgba(33,30,20,.35)' }} />
          </div>

          {/* proximity banner (top variant) */}
          {!bannerFloat && <ProxBanner site={near} go={go} />}
        </div>

        {/* my-location FAB + layers */}
        <div style={{ position: 'absolute', right: 16, zIndex: 18,
          bottom: sheetH + 16, display: 'flex', flexDirection: 'column', gap: 10,
          transition: 'bottom .32s cubic-bezier(.4,0,.2,1)' }}>
          <IconBtn name="layers" size={46} ic={20} bg="rgba(251,246,236,.95)"
            style={{ boxShadow: '0 6px 16px -8px rgba(33,30,20,.4)' }} />
          <IconBtn name="location" size={46} ic={21} color={T.teal} bg="rgba(251,246,236,.95)"
            style={{ boxShadow: '0 6px 16px -8px rgba(33,30,20,.4)' }} />
        </div>

        {/* floating banner variant — above sheet */}
        {bannerFloat && (
          <div style={{ position: 'absolute', left: 16, right: 16, zIndex: 19,
            bottom: sheetH + 74, transition: 'bottom .32s cubic-bezier(.4,0,.2,1)' }}>
            <ProxBanner site={near} go={go} floating />
          </div>
        )}

        {/* ── bottom sheet ── */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 22,
          height: sheetH, background: T.canvas, borderRadius: '22px 22px 0 0',
          boxShadow: '0 -10px 30px -12px rgba(33,30,20,.28)', border: '1px solid ' + T.hairlineSoft,
          borderBottom: 'none', display: 'flex', flexDirection: 'column', overflow: 'hidden',
          transition: 'height .34s cubic-bezier(.4,0,.2,1)' }}>
          {/* handle */}
          <button onClick={() => setSheet(sheet === 'open' ? 'peek' : 'open')}
            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '10px 0 6px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
            <div style={{ width: 40, height: 5, borderRadius: 9, background: T.hairline }} />
          </button>
          <div style={{ padding: '4px 20px 10px', display: 'flex', alignItems: 'center',
            justifyContent: 'space-between', flexShrink: 0 }}>
            <div>
              <div style={{ fontFamily: T.display, fontSize: 20, letterSpacing: -.4, color: T.ink }}>
                주변 문화유산</div>
              <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 1, whiteSpace: 'nowrap' }}>
                반경 1km · {sites.filter(s => s.dist <= 1000).length}곳 · 가까운 순</div>
            </div>
            <button onClick={() => go('explore')} style={{ background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: T.sans, fontSize: 13.5, fontWeight: 600, color: T.teal, display: 'flex',
              alignItems: 'center', gap: 2 }}>전체 <Icon name="chevronR" size={15} color={T.teal} /></button>
          </div>

          {sheet === 'peek' ? (
            <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '2px 20px 16px',
              scrollbarWidth: 'none' }}>
              {sites.filter(s => s.dist <= 1000).map(s => (
                <PeekCard key={s.id} site={s} onClick={() => go('detail', { id: s.id })}
                  hover={() => setActive(s.id)} />
              ))}
            </div>
          ) : (
            <div style={{ flex: 1, overflowY: 'auto', padding: '2px 16px 18px', scrollbarWidth: 'none' }}>
              {sites.map(s => (
                <ListRow key={s.id} site={s} onClick={() => go('detail', { id: s.id })} />
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

  // proximity banner
  function ProxBanner({ site, go, floating }) {
    return (
      <button onClick={() => go('detail', { id: site.id })} style={{
        width: '100%', textAlign: 'left', cursor: 'pointer', borderRadius: 18,
        background: T.teal, border: 'none', padding: '12px 14px', display: 'flex',
        alignItems: 'center', gap: 12, boxShadow: '0 10px 26px -10px rgba(33,65,58,.7)',
        animation: floating ? 'munaRise .4s ease' : 'munaRise .4s ease' }}>
        <div style={{ width: 44, height: 44, borderRadius: 13, background: T.tealEl, flexShrink: 0,
          display: 'grid', placeItems: 'center', position: 'relative' }}>
          <Icon name="sound" size={22} color={T.gold} stroke={1.9} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: T.sans, fontSize: 11, fontWeight: 700, letterSpacing: 1,
            color: T.gold, textTransform: 'uppercase' }}>바로 곁에 · {site.dist}m</div>
          <div style={{ fontFamily: T.display, fontSize: 17, color: T.onDark, letterSpacing: -.3,
            marginTop: 1 }}>{site.name}, 들어보실래요?</div>
          <div style={{ fontFamily: T.sans, fontSize: 12, color: T.onDarkMuted, marginTop: 2 }}>
            10개 언어 청취 가능 · 약 6분</div>
        </div>
        <div style={{ width: 40, height: 40, borderRadius: 99, background: T.gold, flexShrink: 0,
          display: 'grid', placeItems: 'center' }}>
          <Icon name="play" size={18} color="#241c06" fill="#241c06" /></div>
      </button>
    );
  }

  function PeekCard({ site, onClick, hover }) {
    const col = window.TAG_COLORS[site.c];
    return (
      <button onClick={onClick} onMouseEnter={hover} style={{ width: 188, flexShrink: 0, textAlign: 'left',
        cursor: 'pointer', background: T.soft, border: '1px solid ' + T.hairlineSoft, borderRadius: T.r.lg,
        padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <window.ImgSlot label={site.name} h={84} r={0} />
        <div style={{ padding: '11px 13px 13px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
            <span style={{ width: 7, height: 7, borderRadius: 9, background: col.bg }} />
            <span style={{ fontFamily: T.sans, fontSize: 11.5, fontWeight: 600, color: T.muted, whiteSpace: 'nowrap' }}>
              {site.type} · {site.dist}m</span>
          </div>
          <div style={{ fontFamily: T.display, fontSize: 17, letterSpacing: -.3, color: T.ink }}>{site.name}</div>
        </div>
      </button>
    );
  }

  function ListRow({ site, onClick }) {
    const col = window.TAG_COLORS[site.c];
    return (
      <button onClick={onClick} style={{ width: '100%', textAlign: 'left', cursor: 'pointer',
        background: 'none', border: 'none', borderBottom: '1px solid ' + T.hairlineSoft,
        padding: '12px 4px', display: 'flex', alignItems: 'center', gap: 13 }}>
        <window.ImgSlot label="" h={58} style={{ width: 58, flexShrink: 0 }} r={13} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: T.display, fontSize: 17, letterSpacing: -.3, color: T.ink }}>{site.name}</div>
          <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 2,
            display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 7, height: 7, borderRadius: 9, background: col.bg }} />
            {site.type} · {site.period}</div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{ fontFamily: T.sans, fontSize: 13, fontWeight: 700, color: T.teal }}>{site.dist}m</div>
          <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.mutedSoft }}>도보 {site.min}분</div>
        </div>
      </button>
    );
  }

  window.Home = Home;
})();