/* HelpMe — Home + Explore */
function SearchBar({ onClick, placeholder = 'Search temples, food, tours…', dark }) {
  return (
    <div onClick={onClick} className="gw-press" style={{
      display: 'flex', alignItems: 'center', gap: 10, height: 50, borderRadius: 14, padding: '0 16px', cursor: 'pointer',
      background: dark ? 'rgba(255,255,255,0.1)' : T.white,
      border: dark ? '1px solid rgba(255,255,255,0.14)' : `1px solid ${T.line}`,
    }}>
      <Icon name="search" size={19} color={dark ? 'rgba(255,255,255,0.6)' : T.muted} />
      <span style={{ fontFamily: SANS, fontSize: 15.5, color: dark ? 'rgba(255,255,255,0.55)' : T.muted }}>{placeholder}</span>
    </div>
  );
}

function ShieldBanner({ onClick }) {
  return (
    <div onClick={onClick} className="gw-press" style={{
      display: 'flex', alignItems: 'center', gap: 13, background: T.tealBg, border: `1px solid ${T.teal}2e`,
      borderRadius: 16, padding: '14px 16px', cursor: 'pointer',
    }}>
      <div style={{ width: 42, height: 42, borderRadius: 12, background: T.teal, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name="shield-check" size={22} color="#fff" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15.5, color: T.tealDk }}>Scam Shield Active</div>
        <div style={{ fontFamily: SANS, fontSize: 13, color: T.tealDk, opacity: 0.85 }}>2 threats today · Real-time monitoring</div>
      </div>
      <span style={{ fontFamily: SANS, fontWeight: 800, fontSize: 12, color: '#fff', background: T.teal, padding: '5px 11px', borderRadius: 8 }}>SECURE</span>
    </div>
  );
}

function AssistantNudge({ onYes, onDismiss }) {
  return (
    <div style={{ display: 'flex', gap: 12, background: T.tealBg, border: `1px solid ${T.teal}2e`, borderRadius: 16, padding: 14, position: 'relative' }}>
      <div style={{ width: 34, height: 34, borderRadius: 10, background: T.teal, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name="bot" size={20} color="#fff" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 14.5, color: T.tealDk }}>GoWithMe Assistant</div>
        <div style={{ fontFamily: SANS, fontSize: 13.5, color: T.tealDk, opacity: 0.9, lineHeight: 1.45, marginTop: 2 }}>
          You're 2.4 km from Angkor Wat. Want me to prep an audio guide and book tickets for today?
        </div>
        <div style={{ display: 'flex', gap: 9, marginTop: 11 }}>
          <button onClick={onYes} style={{ background: T.teal, color: '#fff', border: 'none', borderRadius: 10, padding: '9px 14px', cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 13.5 }}>Yes, help me!</button>
          <button onClick={onDismiss} style={{ background: 'transparent', color: T.tealDk, border: `1px solid ${T.teal}40`, borderRadius: 10, padding: '9px 14px', cursor: 'pointer', fontFamily: SANS, fontWeight: 600, fontSize: 13.5 }}>Maybe later</button>
        </div>
      </div>
      <button onClick={onDismiss} style={{ position: 'absolute', top: 12, right: 12, background: 'none', border: 'none', cursor: 'pointer', padding: 2 }}>
        <Icon name="x" size={16} color={T.tealDk} />
      </button>
    </div>
  );
}

function ResumeAudio({ onClick }) {
  return (
    <div onClick={onClick} className="gw-press" style={{ display: 'flex', alignItems: 'center', gap: 13, background: T.navy, borderRadius: 16, padding: '13px 15px', cursor: 'pointer' }}>
      <div style={{ width: 42, height: 42, borderRadius: 12, background: T.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name="play" size={18} color="#fff" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: SANS, fontWeight: 700, fontSize: 14.5, color: '#fff' }}>Continue listening</div>
        <div style={{ fontFamily: SANS, fontSize: 12.5, color: 'rgba(255,255,255,0.6)' }}>Angkor Wat — Chapter 2 of 4 · 1:12 left</div>
      </div>
      <div style={{ fontFamily: SANS, fontSize: 11, fontWeight: 700, color: T.gold, display: 'flex', alignItems: 'center', gap: 5 }}>
        <Icon name="headphones" size={15} color={T.gold} />AI
      </div>
    </div>
  );
}

function FAB({ onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'absolute', right: 18, bottom: 86, width: 58, height: 58, borderRadius: 999, cursor: 'pointer',
      background: T.navy, border: `2.5px solid ${T.gold}`, boxShadow: '0 10px 26px rgba(16,40,66,0.4)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 30,
    }}>
      <Icon name="message-dots" size={26} color="#fff" />
      <span style={{ position: 'absolute', top: -2, right: -2, minWidth: 20, height: 20, borderRadius: 999, background: T.danger, color: '#fff', fontFamily: SANS, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #fff' }}>1</span>
    </button>
  );
}

function Home({ onNav, onOpenPlace, onOpenChat, onOpenAudio }) {
  const [cat, setCat] = React.useState('All');
  const [nudge, setNudge] = React.useState(true);
  const places = HM.PLACES.filter(p => cat === 'All' || p.category === cat);

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.cream, position: 'relative' }}>
      {/* navy header */}
      <div style={{ background: T.navy, borderBottomLeftRadius: 26, borderBottomRightRadius: 26, paddingBottom: 18, flexShrink: 0 }}>
        <StatusBar light />
        <div style={{ padding: '4px 22px 0' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontFamily: SANS, fontSize: 14.5, color: 'rgba(255,255,255,0.65)', fontWeight: 500 }}>Good morning, Liming 👋</div>
              <div style={{ fontFamily: DISP, fontWeight: 700, fontSize: 27, color: '#fff', marginTop: 2 }}>Siem Reap, Cambodia</div>
            </div>
            <button onClick={() => onNav('shield')} style={{ width: 44, height: 44, borderRadius: 13, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.14)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <Icon name="bell" size={21} color="#fff" />
              <span style={{ position: 'absolute', top: 9, right: 10, width: 8, height: 8, borderRadius: 999, background: T.gold, border: '1.5px solid ' + T.navy }} />
            </button>
          </div>
          <div style={{ marginTop: 14 }}><SearchBar dark onClick={() => onNav('explore')} /></div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', position: 'relative' }}>
        <div style={{ padding: '16px 22px 110px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Stagger>
          <ShieldBanner onClick={() => onNav('shield')} />
          {nudge && <AssistantNudge onYes={onOpenChat} onDismiss={() => setNudge(false)} />}
          <ResumeAudio onClick={onOpenAudio} />

          {/* categories */}
          <div style={{ display: 'flex', gap: 9, overflowX: 'auto', margin: '2px -22px 0', padding: '4px 22px' }}>
            {HM.CATEGORIES.map(c => <Chip key={c} label={c} active={cat === c} onClick={() => setCat(c)} />)}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
            <h2 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 23, color: T.ink, margin: 0, whiteSpace: 'nowrap' }}>Near You</h2>
            <button onClick={() => onNav('explore')} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5, fontFamily: SANS, fontWeight: 700, fontSize: 14.5, color: T.teal }}>
              See all <Icon name="arrow-right" size={15} color={T.teal} />
            </button>
          </div>

          {places.length ? places.map(p => <PlaceCard key={p.id} p={p} onClick={() => onOpenPlace(p.id)} />)
            : <div style={{ textAlign: 'center', color: T.muted, fontFamily: SANS, fontSize: 14.5, padding: '30px 0' }}>
                No {cat.toLowerCase()} nearby yet — try Temples or All.
              </div>}
          </Stagger>
        </div>
      </div>

      <FAB onClick={onOpenChat} />
      <BottomNav active="home" onNav={onNav} />
    </div>
  );
}

function FeaturedCard({ p, onClick }) {
  return (
    <Img src={p.hero} grad={p.grad} radius={22} onClick={onClick} style={{ height: 220, cursor: 'pointer' }}
      overlay={<>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(0,0,0,0.05),rgba(8,18,32,0.78))' }} />
        <div style={{ position: 'absolute', top: 14, left: 14, display: 'flex', gap: 8 }}>
          <CatBadge label="Featured" /><RatingPill value={p.rating} />
        </div>
        <div onClick={onClick} style={{ position: 'absolute', left: 18, right: 18, bottom: 16, cursor: 'pointer' }}>
          <div style={{ fontFamily: DISP, fontWeight: 800, fontSize: 28, color: '#fff', lineHeight: 1.1 }}>{p.name}</div>
          <div style={{ fontFamily: SANS, fontSize: 14, color: 'rgba(255,255,255,0.85)', marginTop: 3 }}>{p.tagline}</div>
        </div>
      </>} />
  );
}

function Explore({ onNav, onOpenPlace, onOpenChat }) {
  const [cat, setCat] = React.useState('All');
  const [q, setQ] = React.useState('');
  let list = HM.PLACES.filter(p => cat === 'All' || p.category === cat);
  if (q.trim()) list = HM.PLACES.filter(p => (p.name + p.tagline + p.tags.join()).toLowerCase().includes(q.toLowerCase()));
  const featured = HM.PLACES[0];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.cream, position: 'relative' }}>
      <div style={{ background: T.navy, borderBottomLeftRadius: 26, borderBottomRightRadius: 26, paddingBottom: 18, flexShrink: 0 }}>
        <StatusBar light />
        <div style={{ padding: '4px 22px 0' }}>
          <h1 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 30, color: '#fff', margin: '2px 0 14px' }}>Explore Siem Reap</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, height: 50, borderRadius: 14, padding: '0 16px', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.14)' }}>
            <Icon name="search" size={19} color="rgba(255,255,255,0.6)" />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search temples, food, tours…" style={{ flex: 1, border: 'none', outline: 'none', background: 'none', fontFamily: SANS, fontSize: 15.5, color: '#fff', minWidth: 0 }} />
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', position: 'relative' }}>
        <div style={{ padding: '16px 22px 110px' }}>
          <div style={{ display: 'flex', gap: 9, overflowX: 'auto', margin: '0 -22px 16px', padding: '0 22px' }}>
            {HM.CATEGORIES.map(c => <Chip key={c} label={c} active={cat === c} onClick={() => { setCat(c); setQ(''); }} />)}
          </div>

          {!q && cat === 'All' && <>
            <h2 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 21, color: T.ink, margin: '0 0 12px', whiteSpace: 'nowrap' }}>Today's pick</h2>
            <div style={{ marginBottom: 22 }}><Rise delay={30}><FeaturedCard p={featured} onClick={() => onOpenPlace(featured.id)} /></Rise></div>
          </>}

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <h2 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 21, color: T.ink, margin: 0, whiteSpace: 'nowrap' }}>{q ? 'Results' : 'All places'}</h2>
            <span style={{ fontFamily: SANS, fontWeight: 600, fontSize: 13.5, color: T.muted }}>{list.length} places</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {list.length ? <Stagger start={40}>{list.map(p => <PlaceCard key={p.id} p={p} onClick={() => onOpenPlace(p.id)} />)}</Stagger>
              : <div style={{ textAlign: 'center', color: T.muted, fontFamily: SANS, fontSize: 14.5, padding: '30px 0' }}>No matches — try another search.</div>}
          </div>
        </div>
      </div>

      <FAB onClick={onOpenChat} />
      <BottomNav active="explore" onNav={onNav} />
    </div>
  );
}

Object.assign(window, { SearchBar, ShieldBanner, FAB, Home, Explore, FeaturedCard });