// ============================================================================
// USA Trip Companion v2 — main App component
// Single-file React app with hash-based routing and screen stack
// ============================================================================

const { useState, useEffect, useMemo, useCallback, Fragment } = React;

// Icons — minimal stroke set
const Icon = ({ name, size = 22 }) => {
  const paths = {
    home:    <><path d="M3 12 L12 4 L21 12" /><path d="M5 10 V20 H19 V10" /></>,
    map:     <><path d="M9 3 L3 6 V21 L9 18 L15 21 L21 18 V3 L15 6 L9 3 Z" /><path d="M9 3 V18 M15 6 V21" /></>,
    places:  <><path d="M12 2 C 8 2 5 5 5 9 C 5 14 12 22 12 22 C 12 22 19 14 19 9 C 19 5 16 2 12 2 Z" /><circle cx="12" cy="9" r="2.5" /></>,
    team:    <><circle cx="9" cy="8" r="3.5" /><path d="M3 20 C 3 16 6 14 9 14 C 12 14 15 16 15 20" /><circle cx="17" cy="10" r="2.5" /><path d="M15 20 C 15 18 17 17 19 17 C 21 17 21 18 21 20" /></>,
    more:    <><circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" /></>,
    back:    <><path d="M15 6 L9 12 L15 18" /></>,
    close:   <><path d="M6 6 L18 18 M18 6 L6 18" /></>,
    up:      <><path d="M6 15 L12 9 L18 15" /></>,
    chev:    <><path d="M9 6 L15 12 L9 18" /></>,
    weather: <><circle cx="12" cy="12" r="4" /><path d="M12 2 V4 M12 20 V22 M2 12 H4 M20 12 H22 M4.5 4.5 L6 6 M18 18 L19.5 19.5 M4.5 19.5 L6 18 M18 6 L19.5 4.5" /></>,
    nearby:  <><circle cx="12" cy="10" r="3" /><path d="M12 22 C 12 22 4 14 4 10 C 4 6 8 2 12 2 C 16 2 20 6 20 10 C 20 14 12 22 12 22 Z" /></>,
    check:   <><path d="M4 6 H20 M4 12 H20 M4 18 H14" /></>,
    doc:     <><path d="M6 3 H14 L18 7 V21 H6 Z" /><path d="M14 3 V7 H18" /></>,
    camera:  <><path d="M3 8 H7 L8 5 H16 L17 8 H21 V19 H3 Z" /><circle cx="12" cy="13" r="4" /></>,
    flight:  <><path d="M2 14 L22 10 L20 7 L14 9 L10 3 L7 4 L10 10 L4 12 L2 11 L2 14 Z" /></>,
    hotel:   <><path d="M3 21 V6 L12 3 L21 6 V21 Z" /><path d="M9 21 V14 H15 V21" /></>,
    info:    <><circle cx="12" cy="12" r="9" /><path d="M12 8 V8.01 M12 11 V17" /></>,
    share:   <><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="18" cy="18" r="2.5" /><path d="M8 11 L16 7 M8 13 L16 17" /></>,
    directions: <><path d="M3 12 L12 3 L21 12 L12 21 L3 12 Z" /><path d="M8 12 H15 V9 L19 12 L15 15 V12 H8" /></>,
    heart:   <><path d="M12 20 S 3 14 3 8 C 3 5 5 3 8 3 C 10 3 12 5 12 7 C 12 5 14 3 16 3 C 19 3 21 5 21 8 C 21 14 12 20 12 20 Z" /></>,
    sparkle: <><path d="M12 2 L13.5 10 L22 12 L13.5 14 L12 22 L10.5 14 L2 12 L10.5 10 Z" /></>,
    settings:<><circle cx="12" cy="12" r="3" /><path d="M12 2 V5 M12 19 V22 M4.9 4.9 L7 7 M17 17 L19.1 19.1 M2 12 H5 M19 12 H22 M4.9 19.1 L7 17 M17 7 L19.1 4.9" /></>,
    food:    <><path d="M4 8 V20 C 4 21 5 22 6 22 H18 C 19 22 20 21 20 20 V8 Z" /><path d="M8 8 V3 M12 8 V3 M16 8 V3" /></>,
    toilet:  <><circle cx="8" cy="5" r="2" /><circle cx="16" cy="5" r="2" /><path d="M5 22 L6 12 H10 L11 22 M13 22 L14 12 H18 L19 22" /></>,
    grocery: <><path d="M3 5 H6 L9 17 H20 L22 8 H7" /><circle cx="10" cy="20" r="1.5" /><circle cx="17" cy="20" r="1.5" /></>,
    plus:        <><path d="M12 5 V19 M5 12 H19" /></>,
    chevronLeft: <><path d="M15 6 L9 12 L15 18" /></>,
    cloudOff:    <><path d="M22 10 A6 6 0 0 0 12 5 A6 6 0 0 0 6 8 A4 4 0 0 0 7 16 H19 A4 4 0 0 0 22 10 Z" /><path d="M2 2 L22 22" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>
  );
};

// Navigation stack context — every screen uses nav.push(), nav.back()
const NavContext = React.createContext(null);
const useNav = () => React.useContext(NavContext);

// Weather emoji (minimal glyph, not sloppy)
const wxGlyph = (code) => ({ sunny: '☀', partly: '⛅', fog: '☁', rain: '☂' }[code] || '☀');

// Shared: top nav bar (back, title, cross-action)
const TopNav = ({ title, onBack, action, translucent = false }) => (
  <div style={{
    position: 'absolute', top: 0, left: 0, right: 0, height: 100, zIndex: 60,
    paddingTop: 48, display: 'grid', gridTemplateColumns: '44px 1fr 44px', alignItems: 'center',
    padding: '48px 8px 0', pointerEvents: 'none',
    background: translucent ? 'linear-gradient(180deg, oklch(0% 0 0 / 0.5), transparent)' : 'transparent',
  }}>
    <button onClick={onBack} style={{ pointerEvents: 'auto', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: 36, height: 36, borderRadius: '50%', background: translucent ? 'oklch(14% 0.005 260 / 0.6)' : 'var(--bg-elev)', backdropFilter: 'blur(16px)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: translucent ? 'white' : 'var(--ink)' }}>
        <Icon name="back" size={18} />
      </div>
    </button>
    <div style={{ textAlign: 'center', fontSize: 15, fontWeight: 600, color: translucent ? 'white' : 'var(--ink)', pointerEvents: 'none' }}>
      {title}
    </div>
    <div style={{ pointerEvents: 'auto', display: 'flex', justifyContent: 'flex-end' }}>{action}</div>
  </div>
);

// Round icon button (for cross-nav, directions, etc.)
const RoundBtn = ({ icon, onClick, label, translucent = false }) => (
  <button onClick={onClick} title={label} style={{
    width: 36, height: 36, borderRadius: '50%',
    background: translucent ? 'oklch(14% 0.005 260 / 0.6)' : 'var(--bg-elev)',
    backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: translucent ? 'white' : 'var(--ink)',
    border: '0.5px solid var(--line)',
  }}>
    <Icon name={icon} size={16} />
  </button>
);

Object.assign(window, { Icon, TopNav, RoundBtn, NavContext, useNav, wxGlyph });