{onBack ? ( ) :
}
{title &&
{title}
} {sub &&
{sub}
}
{right || (onBack ?
: null)}
); } function BottomNav({ active, go }) { const items = [ { id: 'home', icon: 'home', label: 'ホーム' }, { id: 'amulet-map', icon: 'map', label: 'マップ' }, { id: 'wish-list', icon: 'heart', label: '小言' }, { id: 'settings', icon: 'gear', label: '設定' }, ]; return (
{items.map(it => { const on = active === it.id; return ( ); })}
); } /* scroll body that respects safe areas */ function Body({ children, nav, pad = 18, style, scrollRef }) { return (
{children}
); } function Field({ label, value = '', onChange, placeholder, type = 'text', icon, area, rows = 3, right }) { const handle = (e) => onChange && onChange(e.target.value); return ( {label &&
{label}
}
{icon && } {area ? (
        ) : (
          <input type={type} placeholder={placeholder} value={value}
            onChange={handle} readOnly={!onChange}
            style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', height: 50,
              fontFamily: 'var(--font-ui)', fontSize: 15.5, color: 'var(--ink)' }} />
        )}
        {right}
      </div>
    </label>
  );
}

function Segmented({ options, value, onChange, color = 'var(--amethyst)' }) {
  return (
    <div style={{
      display: 'flex', background: 'var(--surface-2)', borderRadius: 12, padding: 4, gap: 4,
      border: '1px solid var(--line)',
    }}>
      {options.map(o => {
        const val = typeof o === 'string' ? o : o.value;
        const lab = typeof o === 'string' ? o : o.label;
        const on = value === val;
        return (
          <button key={val} onClick={() => onChange(val)} style={{
            flex: 1, padding: '9px 6px', borderRadius: 9, border: 'none', cursor: 'pointer',
            fontFamily: 'var(--font-ui)', fontWeight: on ? 700 : 500, fontSize: 13.5,
            background: on ? 'var(--surface)' : 'transparent',
            color: on ? color : 'var(--ink-faint)',
            boxShadow: on ? '0 2px 8px -4px rgba(61,54,44,.4)' : 'none',
            transition: 'all .18s',
          }}>{lab}</button>
        );
      })}
    </div>
  );
}

function PrivacyBadge({ children = '相手には見えません' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 7, flexShrink: 0, whiteSpace: 'nowrap',
      background: 'color-mix(in oklch, var(--amethyst) 14%, var(--paper))',
      color: 'color-mix(in oklch, var(--amethyst) 72%, var(--ink))',
      border: '1px solid color-mix(in srgb, var(--amethyst) 28%, transparent)',
      borderRadius: 999, padding: '6px 13px', fontSize: 12, fontWeight: 700,
    }}>
      {children}
    </div>
  );
}

/* ─────────────────────────── Google Maps ─────────────────────────── */
const MAP_STYLE = [
  { elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
  { featureType: 'poi', stylers: [{ visibility: 'off' }] },
  { featureType: 'transit.station', stylers: [{ visibility: 'simplified' }] },
  { featureType: 'road', elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
  { elementType: 'geometry', stylers: [{ saturation: -20 }, { lightness: 5 }] },
];

// GoogleMapView — ref-based Google Map with custom SVG markers
// Props: center {lat,lng}, zoom, interactive, markers [{id,pos,label,color,onClick}],
//        onMapClick(latLng), onReady(map), style
function GoogleMapView({ center, zoom = 15, interactive = true, markers = [], onMapClick, onReady, fitSignature, style = {} }) {
  const elRef = React.useRef(null);
  const mapRef = React.useRef(null);
  const markerLayerRef = React.useRef([]);
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;
    window.__mapsReady.then((g) => {
      if (cancelled || !elRef.current) return;
      const map = new g.maps.Map(elRef.current, {
        center, zoom,
        disableDefaultUI: true,
        gestureHandling: interactive ? 'greedy' : 'none',
        clickableIcons: false,
        keyboardShortcuts: false,
        styles: MAP_STYLE,
        backgroundColor: '#F0EBE1',
      });
      mapRef.current = map;
      if (onMapClick) map.addListener('click', (e) => onMapClick(e.latLng));
      if (onReady) onReady(map);
      setReady(true);
    });
    return () => { cancelled = true; };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  React.useEffect(() => {
    if (!ready || !mapRef.current) return;
    const g = window.google;
    markerLayerRef.current.forEach(m => m.setMap(null));
    markerLayerRef.current = markers.map((mk) => {
      const fill = mk.color || '#8E7DA6';
      const svg = `data:image/svg+xml;utf8,${encodeURIComponent(
        `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='40' viewBox='0 0 32 40'>
          <path d='M16 1c8.3 0 15 6.7 15 15 0 10.5-15 23-15 23S1 26.5 1 16C1 7.7 7.7 1 16 1z'
            fill='${fill}' stroke='#fff' stroke-width='2'/>
          <circle cx='16' cy='16' r='5' fill='rgba(255,255,255,0.7)'/>
        </svg>`
      )}`;
      const marker = new g.maps.Marker({
        position: mk.pos,
        map: mapRef.current,
        icon: { url: svg, scaledSize: new g.maps.Size(32, 40), anchor: new g.maps.Point(16, 38) },
        title: mk.name || mk.title || '',
        zIndex: mk.active ? 100 : 10,
      });
      if (mk.onClick) marker.addListener('click', mk.onClick);
      return marker;
    });
  }, [markers, ready]);

  React.useEffect(() => {
    if (!ready || !mapRef.current || !center || interactive) return;
    mapRef.current.setCenter(center);
  }, [center, interactive, ready]);

  // fitSignature が変わったら、全マーカーが収まる倍率・中心へ自動フィット。
  // signature は座標のみから作るため、ピン選択（activeの切替）では再フィットしない。
  React.useEffect(() => {
    if (!ready || !mapRef.current || !fitSignature) return;
    const g = window.google;
    const positions = markers.map(m => m.pos).filter(Boolean);
    if (positions.length === 0) return;
    if (positions.length === 1) {
      mapRef.current.setCenter(positions[0]);
      mapRef.current.setZoom(zoom);
      return;
    }
    const b = new g.maps.LatLngBounds();
    positions.forEach(p => b.extend(p));
    mapRef.current.fitBounds(b, { top: 64, right: 56, bottom: 64, left: 56 });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fitSignature, ready]);

  return (
    <div ref={elRef} style={{ width: '100%', height: '100%', ...style }} />
  );
}

/* ─────────────────────────── Weather (Open-Meteo) ───────────────────────────
   予定の日付・エリアから実際の天気を取得し 'sun' | 'rain' を返す。
   APIキー不要・CORS対応の Open-Meteo を使用。エリアはジオコーディングで
   座標化（失敗時は東京にフォールバック）。結果はキャッシュして再取得を防ぐ。 */
const WX_TOKYO = { lat: 35.6812, lon: 139.7671 };
const _geoCache = new Map();
const _wxCache = new Map();

// WMO weather code: 51+ は霧雨/雨/雪/雷雨とみなし 'rain'、それ以外は 'sun'
const wxKind = (code) => (typeof code === 'number' && code >= 51 ? 'rain' : 'sun');

async function geocodeArea(area) {
  const q = (area || '').replace(/あたり|周辺|近辺/g, '').trim();
  if (!q) return WX_TOKYO;
  if (_geoCache.has(q)) return _geoCache.get(q);
  const pr = (async () => {
    try {
      const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(q)}&count=1&language=ja&countryCode=JP`;
      const j = await (await fetch(url)).json();
      const g = j && j.results && j.results[0];
      if (g && typeof g.latitude === 'number') return { lat: g.latitude, lon: g.longitude };
    } catch (_) {}
    return WX_TOKYO;
  })();
  _geoCache.set(q, pr);
  return pr;
}

async function getWeather(dateISO, area) {
  const iso = (dateISO || '').slice(0, 10);
  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return 'sun';
  const key = `${iso}|${area || ''}`;
  if (_wxCache.has(key)) return _wxCache.get(key);
  const pr = (async () => {
    try {
      const { lat, lon } = await geocodeArea(area);
      const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&daily=weather_code&timezone=Asia%2FTokyo&start_date=${iso}&end_date=${iso}`;
      const j = await (await fetch(url)).json();
      const code = j && j.daily && j.daily.weather_code && j.daily.weather_code[0];
      if (code == null) return 'sun';
      return wxKind(code);
    } catch (_) {
      return 'sun';
    }
  })();
  _wxCache.set(key, pr);
  return pr;
}

/* ─────────── 地図のスムーズズーム ───────────
   ラスタ地図の setZoom() は即座に切り替わってアニメーションしない。
   ただし±1段のズームは短いクロスフェードが入るため、1段ずつ刻んで
   連続実行すると「寄っていく／引いていく」連続ズームに見える。
   panTo は近距離ならネイティブでアニメーションするので、先にパンしてからズームを刻む。 */
function mapFlyTo(map, pos, targetZoom) {
  if (!map) return;
  if (map.__flyTimer) clearTimeout(map.__flyTimer);
  const target = Math.round(targetZoom);
  const stepZoom = () => {
    const z = Math.round(map.getZoom());
    if (z === target) return;
    map.setZoom(z < target ? z + 1 : z - 1);
    map.__flyTimer = setTimeout(stepZoom, 140); // 1段ごとのクロスフェードを待つ
  };
  if (pos) map.panTo(pos);
  map.__flyTimer = setTimeout(stepZoom, 200); // パンのアニメーションに少し譲る
}

// bounds が収まるズーム段数を（fitBounds を使わずに）計算する。mapFlyTo と組み合わせて
// 「全体表示」もアニメーションさせるため。pad はビューポート両端の余白(px)。
function zoomForBounds(map, bounds, pad = 110) {
  const div = map.getDiv();
  const w = Math.max(1, div.clientWidth - pad), h = Math.max(1, div.clientHeight - pad);
  const ne = bounds.getNorthEast(), sw = bounds.getSouthWest();
  const latFrac = lat => {
    const s = Math.sin(lat * Math.PI / 180);
    return Math.log((1 + s) / (1 - s)) / 2;
  };
  const latFraction = Math.abs(latFrac(ne.lat()) - latFrac(sw.lat())) / (2 * Math.PI);
  let lngDiff = ne.lng() - sw.lng();
  if (lngDiff < 0) lngDiff += 360;
  const lngFraction = lngDiff / 360;
  const zLat = latFraction > 0 ? Math.log2(h / 256 / latFraction) : Infinity;
  const zLng = lngFraction > 0 ? Math.log2(w / 256 / lngFraction) : Infinity;
  const z = Math.floor(Math.min(zLat, zLng));
  return Number.isFinite(z) ? Math.max(3, Math.min(18, z)) : 15;
}

function mapFlyToBounds(map, positions, pad) {
  if (!map || !window.google || !positions.length) return;
  const b = new window.google.maps.LatLngBounds();
  positions.forEach(p => b.extend(p));
  mapFlyTo(map, b.getCenter(), zoomForBounds(map, b, pad));
}

const Weather = { get: getWeather };

/* 予定日の天気アイコン（取得できるまでは fallback を表示）。
   色はデフォルトで sun=gold / rain=partner。style で上書き可。 */
function WeatherIcon({ dateISO, area, size = 13, fallback = 'sun', style }) {
  const [kind, setKind] = useState(fallback);
  useEffect(() => {
    let dead = false;
    getWeather(dateISO, area).then(k => { if (!dead) setKind(k); });
    return () => { dead = true; };
  }, [dateISO, area]);
  const color = kind === 'rain' ? 'var(--partner)' : 'var(--gold)';
  return <Icon name={kind} size={size} style={{ color, ...style }} />;
}

/* プラン詳細トップのバッジ（アイコン＋ラベル）。取得前は非表示。 */
function WeatherBadge({ dateISO, area }) {
  const [kind, setKind] = useState(null);
  useEffect(() => {
    let dead = false;
    getWeather(dateISO, area).then(k => { if (!dead) setKind(k); });
    return () => { dead = true; };
  }, [dateISO, area]);
  if (!kind) return null;
  const rain = kind === 'rain';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 999, padding: '5px 10px', fontSize: 11.5, fontWeight: 700, color: 'var(--ink-soft)', whiteSpace: 'nowrap' }}>
      <Icon name={kind} size={14} style={{ color: rain ? 'var(--partner)' : 'var(--gold)' }} />
      {rain ? '雨' : '晴れ'}
    </div>
  );
}

/* ─────────── Lottie ───────────
   vendor/lottie_light.min.js（svgレンダラのみ）を使う。
   viewBox は "x y w h" 形式。素材のキャンバスに余白が多いとき、
   描画したい範囲だけを切り出して等倍に見せるために使う。 */
function LottieBox({ src, viewBox, loop = true, speed = 1, paused = false, style }) {
  const host = useRef(null);
  const animRef = useRef(null);
  useEffect(() => {
    const lottie = window.lottie;
    if (!lottie || !host.current) return;
    const anim = lottie.loadAnimation({
      container: host.current, renderer: 'svg', loop, autoplay: true, path: src,
      rendererSettings: viewBox ? { viewBoxSize: viewBox } : undefined,
    });
    anim.setSpeed(speed);
    animRef.current = anim;
    return () => { animRef.current = null; anim.destroy(); };
  }, [src, viewBox]);
  /* paused: 生成に失敗したときなど「動きを止めて見せたい」場面で使う（描画は残したまま停止） */
  useEffect(() => {
    const anim = animRef.current;
    if (!anim) return;
    paused ? anim.pause() : anim.play();
  }, [paused]);
  return <div ref={host} style={style} aria-hidden="true" />;
}

Object.assign(window, {
  AppCtx, useApp, Icon, Btn, Chip, Card, Charm, Avatar, AiAvatar, ImgSlot, Eyebrow,
  TopBar, BottomNav, Body, Field, Segmented, PrivacyBadge, SAFE_TOP, NAV_H,
  GoogleMapView, MAP_STYLE, normalizeEvent, LottieBox,
  mapFlyTo, mapFlyToBounds,
  Weather, WeatherIcon, WeatherBadge,
});