/* HelpMe — design tokens + shared UI. Attaches components to window. */
const T = {
  navy:   '#102842',
  navy2:  '#0b1d33',
  navySoft:'#1b3a5c',
  cream:  '#f5efe3',
  cream2: '#efe7d6',
  card:   '#fffdf8',
  white:  '#ffffff',
  teal:   '#1c7d5e',
  tealDk: '#15614a',
  tealBg: '#e3f0ea',
  gold:   '#cf9a35',
  goldDk: '#b07f1f',
  goldBg: '#f6ecd4',
  ink:    '#14263b',
  body:   '#46586a',
  muted:  '#8595a3',
  line:   '#e7ded0',
  danger: '#c0473f',
  dangerBg:'#fbe9e6',
  warn:   '#d8a72e',
  warnBg: '#fbf2d8',
};
const DISP = "'Playfair Display', Georgia, serif";
const SANS = "'Figtree', system-ui, sans-serif";
const MONO = "'IBM Plex Mono', ui-monospace, monospace";
const BRAND = "'Poppins', system-ui, sans-serif"; /* GoWithMe wordmark */

/* status bar — 9:41 + 3G/wifi/battery */
function StatusBar({ light = false }) {
  const c = light ? '#fff' : T.ink;
  return (
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 26px 0 30px', flexShrink: 0, position: 'relative', zIndex: 5,
    }}>
      <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15, color: c, letterSpacing: 0.2 }}>9:41</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 12, color: c }}>3G</span>
        <svg width="17" height="12" viewBox="0 0 17 12" fill="none"><path d="M8.5 3C10.7 3 12.7 3.9 14.2 5.3l1-1.1A8.4 8.4 0 0 0 8.5 1.3 8.4 8.4 0 0 0 1.8 4.2l1 1.1A7 7 0 0 1 8.5 3Z" fill={c}/><path d="M8.5 6.4c1.3 0 2.5.5 3.4 1.4l1-1.1a6.3 6.3 0 0 0-8.8 0l1 1.1c.9-.9 2.1-1.4 3.4-1.4Z" fill={c}/><circle cx="8.5" cy="10" r="1.4" fill={c}/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke={c} strokeOpacity="0.4"/><rect x="2" y="2" width="18" height="8" rx="1.8" fill={c}/><path d="M23 4v4c.8-.3 1.3-1 1.3-2S23.8 4.3 23 4Z" fill={c} fillOpacity="0.5"/></svg>
      </div>
    </div>
  );
}

/* photo with gradient fallback baked behind */
function Img({ src, grad, alt = '', radius = 0, style, children, overlay, onClick }) {
  const [ok, setOk] = React.useState(true);
  const noAnim = typeof window !== 'undefined' && window.__noAnim;
  const [loaded, setLoaded] = React.useState(noAnim);
  const imgRef = React.useRef(null);
  React.useEffect(() => { if (imgRef.current && imgRef.current.complete) setLoaded(true); }, [src]);
  return (
    <div onClick={onClick} style={{ position: 'relative', overflow: 'hidden', background: grad || T.navy, borderRadius: radius, ...style }}>
      {src && ok && (
        <img ref={imgRef} src={src} alt={alt} loading="lazy" decoding="async" onError={() => setOk(false)} onLoad={() => setLoaded(true)}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            opacity: noAnim || loaded ? 1 : 0, transform: noAnim || loaded ? 'none' : 'scale(1.06)',
            transition: noAnim ? 'none' : 'opacity .55s ease, transform .8s cubic-bezier(.16,1,.3,1)' }} />
      )}
      {overlay}
      {children}
    </div>
  );
}

/* phone bezel + clipped screen. children render their own StatusBar. */
function PhoneFrame({ children, bg = T.cream }) {
  return (
    <div style={{
      width: 402, height: 870, borderRadius: 56, padding: 7, flexShrink: 0,
      background: 'linear-gradient(150deg,#2a2a2e,#0e0e10)',
      boxShadow: '0 40px 90px rgba(16,40,66,0.34), 0 6px 22px rgba(0,0,0,0.22)',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 50, overflow: 'hidden',
        position: 'relative', background: bg,
        display: 'flex', flexDirection: 'column', fontFamily: SANS,
      }}>{children}</div>
    </div>
  );
}

/* a screen = status bar + scrollable body (+ optional fixed footer rendered by caller) */
function Screen({ light, bg = T.cream, children, noScroll = false }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: bg }}>
      <StatusBar light={light} />
      <div style={{ flex: 1, overflowY: noScroll ? 'hidden' : 'auto', overflowX: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

function Chip({ label, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      flexShrink: 0, padding: '9px 18px', borderRadius: 999, cursor: 'pointer',
      fontFamily: SANS, fontWeight: 600, fontSize: 14,
      border: active ? `1px solid ${T.navy}` : `1px solid ${T.line}`,
      background: active ? T.navy : T.card,
      color: active ? '#fff' : T.body, whiteSpace: 'nowrap', transition: 'all .15s',
    }}>{label}</button>
  );
}

function Tag({ label }) {
  return <span style={{
    padding: '4px 11px', borderRadius: 7, background: T.cream2, color: T.body,
    fontFamily: SANS, fontWeight: 600, fontSize: 12.5,
  }}>{label}</span>;
}

function RatingPill({ value }) {
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 9,
    background: T.gold, color: '#fff', fontFamily: SANS, fontWeight: 700, fontSize: 13,
    boxShadow: '0 2px 8px rgba(207,154,53,0.4)',
  }}><Icon name="star" size={13} color="#fff" /> {value}</span>;
}

function CatBadge({ label }) {
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px', borderRadius: 9,
    background: 'rgba(12,22,38,0.62)', backdropFilter: 'blur(6px)', color: '#fff',
    fontFamily: SANS, fontWeight: 600, fontSize: 12.5,
  }}><span style={{ width: 6, height: 6, borderRadius: 9, background: T.gold }} />{label}</span>;
}

function PrimaryBtn({ children, onClick, icon, style, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: '100%', padding: '17px', borderRadius: 16, border: 'none', cursor: disabled ? 'default' : 'pointer',
      background: disabled ? '#cfd8d4' : T.navy, color: '#fff',
      fontFamily: SANS, fontWeight: 700, fontSize: 16.5,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
      boxShadow: disabled ? 'none' : '0 10px 24px rgba(16,40,66,0.28)', transition: 'all .15s', whiteSpace: 'nowrap', ...style,
    }}>{children}{icon && <Icon name={icon} size={19} color="#fff" />}</button>
  );
}

function GhostBtn({ children, onClick, light, style }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', padding: '16px', borderRadius: 16, cursor: 'pointer',
      background: 'transparent', color: light ? '#fff' : T.ink,
      border: `1.5px solid ${light ? 'rgba(255,255,255,0.4)' : T.line}`,
      fontFamily: SANS, fontWeight: 600, fontSize: 16, ...style,
    }}>{children}</button>
  );
}

/* place card used on home / explore */
function PlaceCard({ p, onClick, compact }) {
  return (
    <div onClick={onClick} className="gw-press" style={{
      background: T.card, borderRadius: 20, overflow: 'hidden', cursor: 'pointer',
      boxShadow: '0 6px 22px rgba(16,40,66,0.07)', border: `1px solid ${T.line}`,
    }}>
      <Img src={p.img} grad={p.grad} style={{ height: compact ? 130 : 178 }}
        overlay={<>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0) 38%,rgba(0,0,0,0.04))' }} />
          <div style={{ position: 'absolute', top: 12, left: 12 }}><CatBadge label={p.badge} /></div>
          <div style={{ position: 'absolute', top: 12, right: 12 }}><RatingPill value={p.rating} /></div>
        </>} />
      <div style={{ padding: '14px 16px 16px' }}>
        <div style={{ fontFamily: DISP, fontWeight: 700, fontSize: 20, color: T.ink, lineHeight: 1.15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 5, color: T.muted, fontSize: 13.5, fontWeight: 500 }}>
          <Icon name="map-pin" size={14} color={T.muted} />{p.location} · {p.distance} away
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
          <div style={{ display: 'flex', gap: 7 }}>{p.tags.slice(0, 2).map(t => <Tag key={t} label={t} />)}</div>
          <div style={{ fontFamily: SANS, fontWeight: 800, fontSize: 18, color: T.ink }}>
            ${p.price}<span style={{ fontSize: 12.5, fontWeight: 600, color: T.muted }}> / adult</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* bottom tab bar */
function BottomNav({ active, onNav }) {
  const tabs = [
    { id: 'home', label: 'Home', icon: 'home' },
    { id: 'explore', label: 'Explore', icon: 'compass' },
    { id: 'shield', label: 'Shield', icon: 'shield' },
    { id: 'bookings', label: 'Bookings', icon: 'ticket' },
    { id: 'profile', label: 'Profile', icon: 'user' },
  ];
  return (
    <div style={{
      flexShrink: 0, display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      padding: '10px 8px 16px', background: T.card, borderTop: `1px solid ${T.line}`,
      boxShadow: '0 -6px 20px rgba(16,40,66,0.05)',
    }}>
      {tabs.map(t => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onNav(t.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer', display: 'flex',
            flexDirection: 'column', alignItems: 'center', gap: 4, padding: '4px 6px', flex: 1,
          }}>
            <span className={on ? 'gw-tabpop' : ''} style={{ display: 'flex' }}>
              <Icon name={on ? (t.id === 'shield' ? 'shield-check' : t.icon) : t.icon} size={23}
                color={on ? T.navy : T.muted} strokeWidth={on ? 2.4 : 2} fill="none" />
            </span>
            <span style={{ fontFamily: SANS, fontSize: 11, fontWeight: on ? 700 : 500, color: on ? T.navy : T.muted, transition: 'color .25s ease' }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

/* navy curved header used across detail/booking/shield */
function CurvedHeader({ children, height, grad = T.navy, light = true }) {
  return (
    <div style={{ background: grad, paddingBottom: 22, borderBottomLeftRadius: 26, borderBottomRightRadius: 26 }}>
      <StatusBar light={light} />
      <div style={{ padding: '4px 22px 0' }}>{children}</div>
    </div>
  );
}

Object.assign(window, {
  T, DISP, SANS, MONO, StatusBar, Img, PhoneFrame, Screen, Chip, Tag,
  RatingPill, CatBadge, PrimaryBtn, GhostBtn, PlaceCard, BottomNav, CurvedHeader,
});