// Toast notification system — small ephemeral confirmations.
// Plus a few action sheets for previously-stub buttons:
// engine start, SOS, navigation, edit profile, about, terms, forgot pwd.

const tT = THEMES.c;

// ─────────────────────────────────────────────────────────────
// TOASTS — global queue, useToast() hook anywhere in the tree.
// ─────────────────────────────────────────────────────────────
const ToastCtx = React.createContext({ push: () => {} });
const useToast = () => React.useContext(ToastCtx);
window.useToast = useToast;

function ToastProvider({ children }) {
  const [items, setItems] = React.useState([]);
  const api = React.useMemo(() => ({
    push: (msg, opts = {}) => {
      const id = Math.random().toString(36).slice(2);
      const item = { id, msg, icon: opts.icon || 'check', kind: opts.kind || 'ok', dur: opts.dur || 2400 };
      setItems((cur) => [...cur, item]);
      setTimeout(() => setItems((cur) => cur.filter((x) => x.id !== id)), item.dur);
    },
  }), []);
  return (
    <ToastCtx.Provider value={api}>
      {children}
      <ToastRail items={items}/>
    </ToastCtx.Provider>
  );
}
window.ToastProvider = ToastProvider;

function ToastRail({ items }) {
  return (
    <div style={{ position: 'absolute', top: 70, left: 0, right: 0, zIndex: 300,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'none' }}>
      {items.map((it) => {
        const I = Icons[it.icon] || Icons.check;
        const tint = it.kind === 'err' ? '#E84848' : it.kind === 'warn' ? tT.warn : tT.ok;
        return (
          <div key={it.id} style={{
            background: 'rgba(20,25,30,0.92)', backdropFilter: 'blur(20px) saturate(160%)',
            border: '1px solid rgba(255,255,255,0.08)', borderRadius: 22,
            padding: '12px 18px 12px 14px', display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 8px 28px rgba(0,0,0,0.4)',
            animation: 'c-fall .3s', maxWidth: 320,
          }}>
            <div style={{ width: 24, height: 24, borderRadius: 12, background: `${tint}22`, color: tint,
                          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <I size={14} stroke={2.4}/>
            </div>
            <div style={{ fontSize: 13, fontWeight: 500, color: tT.text }}>{it.msg}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ENGINE START — 3-2-1 countdown then "Engine running" state
// ─────────────────────────────────────────────────────────────
function EngineStartSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];
  const toast = useToast();
  const [phase, setPhase] = React.useState('confirm');  // confirm | counting | running
  const [count, setCount] = React.useState(3);
  const [mins, setMins] = React.useState(2);
  const ticker = React.useRef();

  const begin = () => {
    setPhase('counting');
    setCount(3);
    let n = 3;
    ticker.current = setInterval(() => {
      n--;
      if (n <= 0) {
        clearInterval(ticker.current);
        setPhase('running');
        toast.push(T(tw.lang, 'Engine started — runs for 2 min', 'Đã khởi động — chạy 2 phút'), { icon: 'engine' });
      } else setCount(n);
    }, 700);
  };

  React.useEffect(() => () => clearInterval(ticker.current), []);

  if (phase === 'running') {
    return (
      <Sheet onClose={nav.closeSheet}>
        <div style={{ padding: '14px 28px 0', textAlign: 'center' }}>
          <div style={{ width: 84, height: 84, margin: '0 auto 18px', borderRadius: 42,
                        background: tT.accent, color: tT.accentInk,
                        display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: 42, border: `1px solid ${tT.accent}`, animation: 'c-pulse-strong 1.6s infinite' }}/>
            <Icons.engine size={36} stroke={1.6}/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 6 }}>
            {T(tw.lang, 'Engine running', 'Máy đang nổ')}
          </div>
          <div style={{ fontSize: 13, color: tT.textDim, marginBottom: 22 }}>
            {T(tw.lang, 'Climate is pre-conditioning the cabin', 'Đang điều hòa khoang lái')}
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, padding: '12px 22px', borderRadius: 18,
                        background: 'rgba(212,165,116,0.14)', color: tT.accent }}>
            <div style={{ fontSize: 36, fontWeight: 300, fontVariantNumeric: 'tabular-nums', letterSpacing: -1 }}>{mins}:00</div>
            <div style={{ fontSize: 11, fontFamily: tT.mono, letterSpacing: 1 }}>{T(tw.lang, 'REMAINING', 'CÒN LẠI')}</div>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
            <button onClick={() => setMins(Math.min(10, mins + 2))}
                    style={{ flex: 1, height: 48, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 24, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 13, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
              +2 {T(tw.lang, 'min', 'phút')}
            </button>
            <button onClick={() => { nav.closeSheet(); toast.push(T(tw.lang, 'Engine stopped', 'Đã tắt máy'), { icon: 'close' }); }}
                    style={{ flex: 1, height: 48, border: 'none', borderRadius: 24, background: '#E84848', color: '#fff', fontSize: 13, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
              {T(tw.lang, 'Stop engine', 'Tắt máy')}
            </button>
          </div>
        </div>
      </Sheet>
    );
  }

  if (phase === 'counting') {
    return (
      <Sheet onClose={() => { clearInterval(ticker.current); nav.closeSheet(); }}>
        <div style={{ padding: '40px 28px 24px', textAlign: 'center' }}>
          <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 3, marginBottom: 18 }}>{T(tw.lang, 'STARTING ENGINE', 'ĐANG KHỞI ĐỘNG')}</div>
          <div style={{ fontSize: 120, fontWeight: 200, letterSpacing: -6, lineHeight: 1, color: tT.accent, fontVariantNumeric: 'tabular-nums' }}>{count}</div>
        </div>
      </Sheet>
    );
  }

  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '14px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, borderRadius: 32, background: 'rgba(212,165,116,0.14)', color: tT.accent,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>
          <Icons.engine size={32} stroke={1.6}/>
        </div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 8 }}>
          {T(tw.lang, 'Start engine remotely?', 'Khởi động máy từ xa?')}
        </div>
        <div style={{ fontSize: 13, color: tT.textDim, lineHeight: 1.5, maxWidth: 290, margin: '0 auto' }}>
          {T(tw.lang,
            'The engine will run for 2 minutes with climate active. Doors stay locked.',
            'Máy sẽ chạy 2 phút với điều hòa bật. Cửa vẫn khóa.')}
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
          <button onClick={nav.closeSheet}
                  style={{ flex: 1, height: 52, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 26, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 14, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
            {T(tw.lang, 'Cancel', 'Hủy')}
          </button>
          <button onClick={begin}
                  style={{ flex: 1, height: 52, border: 'none', borderRadius: 26, background: tT.accent, color: tT.accentInk, fontSize: 14, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
            {T(tw.lang, 'Start', 'Khởi động')}
          </button>
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// SOS — emergency call countdown
// ─────────────────────────────────────────────────────────────
function SOSSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const L = STRINGS[tw.lang];
  const toast = useToast();
  const [count, setCount] = React.useState(5);
  const [cancelled, setCancelled] = React.useState(false);
  const ticker = React.useRef();
  React.useEffect(() => {
    ticker.current = setInterval(() => {
      setCount((c) => {
        if (c <= 1) { clearInterval(ticker.current); return 0; }
        return c - 1;
      });
    }, 1000);
    return () => clearInterval(ticker.current);
  }, []);
  if (count === 0 && !cancelled) {
    setTimeout(() => {
      nav.closeSheet();
      toast.push(T(tw.lang, 'Connected · Thaco 1900 1276', 'Đã kết nối · Thaco 1900 1276'), { icon: 'sos', kind: 'err', dur: 3200 });
    }, 200);
  }
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '14px 28px 0', textAlign: 'center' }}>
        <div style={{ position: 'relative', width: 110, height: 110, margin: '0 auto 22px' }}>
          {[0, 0.5, 1].map((d) => (
            <div key={d} style={{ position: 'absolute', inset: 0, borderRadius: 55, border: '1px solid #E84848', animation: `c-pulse-strong 1.8s infinite ${d}s` }}/>
          ))}
          <div style={{ position: 'absolute', inset: 0, borderRadius: 55, background: '#E84848', color: '#fff',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 60px rgba(232,72,72,0.5)' }}>
            <Icons.sos size={48} stroke={1.8}/>
          </div>
        </div>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, marginBottom: 6 }}>{T(tw.lang, 'Emergency assistance', 'Cứu hộ khẩn cấp')}</div>
        <div style={{ fontSize: 13, color: tT.textDim, marginBottom: 22, lineHeight: 1.5 }}>
          {T(tw.lang, 'Calling Thaco Roadside 24/7 in…', 'Đang gọi Cứu hộ Thaco 24/7 trong…')}
        </div>
        <div style={{ fontSize: 72, fontWeight: 200, color: '#E84848', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{count}</div>
        <button onClick={() => { setCancelled(true); clearInterval(ticker.current); nav.closeSheet(); }}
                style={{ marginTop: 28, width: '100%', height: 52, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 26, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 14, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
          {T(tw.lang, 'Cancel call', 'Hủy gọi')}
        </button>
        <div style={{ marginTop: 14, fontSize: 11, color: tT.textDim, fontFamily: tT.mono, letterSpacing: 1 }}>
          {T(tw.lang, '24/7 · NATIONWIDE', '24/7 · TOÀN QUỐC')}
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// NAVIGATE — handoff to map
// ─────────────────────────────────────────────────────────────
function NavigateSheet({ to = 'Vincom Bà Triệu', distance = '0.4 km', dur = '6 min' }) {
  const nav = useRouter();
  const { tw } = useApp();
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '14px 24px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 2 }}>{T(tw.lang, 'OPEN IN', 'MỞ TRONG')}</div>
            <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginTop: 4 }}>{T(tw.lang, 'Choose map app', 'Chọn ứng dụng bản đồ')}</div>
          </div>
          <button onClick={nav.closeSheet}
                  style={{ width: 36, height: 36, borderRadius: 18, border: 'none', background: 'rgba(255,255,255,0.06)', color: tT.text, fontSize: 18, cursor: 'pointer' }}>×</button>
        </div>

        <div style={{ padding: '14px 16px', borderRadius: 16, background: 'rgba(212,165,116,0.08)', marginBottom: 16 }}>
          <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 1 }}>{T(tw.lang, 'TO', 'ĐẾN')}</div>
          <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>{to}</div>
          <div style={{ fontSize: 11, color: tT.textDim, marginTop: 4, fontFamily: tT.mono }}>{distance} · {dur} {T(tw.lang, 'walk', 'đi bộ')}</div>
        </div>

        {[
          { n: 'Google Maps', sub: T(tw.lang, 'Default · turn-by-turn', 'Mặc định · chỉ dẫn'), color: '#4285F4', letter: 'G' },
          { n: 'Apple Maps',  sub: T(tw.lang, 'Installed', 'Đã cài đặt'), color: '#888', letter: 'A' },
          { n: 'Vietmap',     sub: T(tw.lang, 'Local · live traffic', 'Trong nước · giao thông trực tiếp'), color: '#F2C641', letter: 'V' },
        ].map((a, i) => (
          <div key={i} onClick={nav.closeSheet}
               style={{ padding: 14, borderRadius: 16, background: 'rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', marginBottom: 8 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: a.color, color: '#fff',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700 }}>{a.letter}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{a.n}</div>
              <div style={{ fontSize: 11, color: tT.textDim, marginTop: 2 }}>{a.sub}</div>
            </div>
            <Icons.arrow size={16}/>
          </div>
        ))}
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// EDIT PROFILE — simple form sheet
// ─────────────────────────────────────────────────────────────
function EditProfileSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const [name, setName] = React.useState('An Nguyễn');
  const [phone, setPhone] = React.useState('912 84 02 19');
  const [email, setEmail] = React.useState('an.nguyen@gmail.com');
  const [addr, setAddr] = React.useState(tw.lang === 'vi' ? '12 Lò Đúc, Hoàn Kiếm, Hà Nội' : '12 Lò Đúc, Hoàn Kiếm, Hanoi');

  const Field = ({ label, value, onChange, type = 'text', prefix }) => (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 1, marginBottom: 6 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', height: 48, padding: '0 4px', background: 'rgba(255,255,255,0.05)', borderRadius: 14 }}>
        {prefix && <div style={{ padding: '0 12px', color: tT.accent, fontSize: 13, fontWeight: 600 }}>{prefix}</div>}
        <input type={type} value={value} onChange={(e) => onChange(e.target.value)}
               style={{ flex: 1, height: '100%', padding: '0 12px', border: 'none', background: 'transparent', color: tT.text, fontSize: 15, fontFamily: tT.font, outline: 'none' }}/>
      </div>
    </div>
  );

  return (
    <Sheet onClose={nav.closeSheet} height="80%">
      <div style={{ padding: '14px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div onClick={nav.closeSheet} style={{ fontSize: 13, color: tT.textDim, cursor: 'pointer' }}>{T(tw.lang, 'Cancel', 'Hủy')}</div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>{T(tw.lang, 'Edit profile', 'Sửa hồ sơ')}</div>
          <div onClick={() => { nav.closeSheet(); toast.push(T(tw.lang, 'Profile updated', 'Đã cập nhật hồ sơ')); }}
               style={{ fontSize: 13, color: tT.accent, fontWeight: 600, cursor: 'pointer' }}>{T(tw.lang, 'Save', 'Lưu')}</div>
        </div>

        <div style={{ flex: 1, overflowY: 'auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 22 }}>
            <div style={{ width: 80, height: 80, margin: '0 auto', borderRadius: 40,
                          background: 'conic-gradient(from 180deg, #D4A574, #7CB7FF, #D4A574)', padding: 2, position: 'relative' }}>
              <div style={{ width: '100%', height: '100%', borderRadius: '50%', background: tT.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, fontWeight: 500, color: tT.text }}>AN</div>
              <div style={{ position: 'absolute', bottom: -4, right: -4, width: 28, height: 28, borderRadius: 14, background: tT.accent, color: tT.accentInk,
                            display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3)' }}>
                <Icons.plus size={16} stroke={2.5}/>
              </div>
            </div>
            <div style={{ fontSize: 12, color: tT.accent, marginTop: 10 }}>{T(tw.lang, 'Change photo', 'Đổi ảnh đại diện')}</div>
          </div>

          <Field label={T(tw.lang, 'FULL NAME', 'HỌ VÀ TÊN').toUpperCase()} value={name} onChange={setName}/>
          <Field label={T(tw.lang, 'PHONE', 'SỐ ĐIỆN THOẠI')} value={phone} onChange={setPhone} prefix="+84"/>
          <Field label="EMAIL" value={email} onChange={setEmail} type="email"/>
          <Field label={T(tw.lang, 'ADDRESS', 'ĐỊA CHỈ')} value={addr} onChange={setAddr}/>
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// ABOUT — version info + credits
// ─────────────────────────────────────────────────────────────
function AboutSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '20px 24px 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <div style={{ display: 'flex', justifyContent: 'center', color: '#fff' }}>
            <Logo size={64}/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginTop: 14 }}>M·Connect</div>
          <div style={{ fontSize: 13, color: tT.textDim, marginTop: 4 }}>{T(tw.lang, 'Version 3.2.1 · build 4128', 'Phiên bản 3.2.1 · bản dựng 4128')}</div>
        </div>

        <div style={{ borderRadius: 16, background: 'rgba(255,255,255,0.04)' }}>
          {[
            { l: T(tw.lang, 'Released', 'Phát hành'),       v: T(tw.lang, '15 May 2026', '15/05/2026') },
            { l: T(tw.lang, 'Engine',   'Engine'),          v: 'Mazda Connect v8' },
            { l: T(tw.lang, 'Distributor', 'Nhà phân phối'), v: 'Trường Hải · Thaco' },
          ].map((r, i, arr) => (
            <div key={i} style={{ padding: '14px 16px', display: 'flex', justifyContent: 'space-between',
                                  borderBottom: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
              <div style={{ fontSize: 12, color: tT.textDim }}>{r.l}</div>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{r.v}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)',
                      textAlign: 'center', fontSize: 12, color: tT.textDim, lineHeight: 1.6 }}>
          {T(tw.lang, 'Designed in Vietnam for Mazda owners.', 'Thiết kế tại Việt Nam dành cho khách hàng Mazda.')}<br/>
          <span style={{ color: tT.accent2 }}>feedback@thaco.com.vn</span>
        </div>

        <button onClick={nav.closeSheet}
                style={{ marginTop: 20, width: '100%', height: 50, border: 'none', borderRadius: 25,
                         background: tT.accent, color: tT.accentInk, fontSize: 14, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
          {T(tw.lang, 'Done', 'Xong')}
        </button>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// TERMS / Privacy condensed
// ─────────────────────────────────────────────────────────────
function TermsSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const items = tw.lang === 'vi'
    ? [
        ['Dữ liệu xe',     'Chúng tôi thu thập vị trí, tốc độ và tình trạng xe để cung cấp dịch vụ.'],
        ['Chia sẻ',        'Dữ liệu chỉ chia sẻ với đại lý Thaco được ủy quyền khi bạn đặt lịch.'],
        ['Bảo mật',        'Mã hóa AES-256, lưu trữ tại trung tâm dữ liệu Hà Nội & TP.HCM.'],
        ['Quyền của bạn',  'Yêu cầu xuất, sửa hoặc xóa dữ liệu bất cứ lúc nào.'],
      ]
    : [
        ['Vehicle data',   'We collect location, speed, and status to provide services.'],
        ['Sharing',        'Data is only shared with authorized Thaco dealers when you book.'],
        ['Security',       'AES-256 encrypted, stored in Hanoi & HCMC data centers.'],
        ['Your rights',    'Request export, correction, or deletion at any time.'],
      ];
  return (
    <Sheet onClose={nav.closeSheet} height="78%">
      <div style={{ padding: '14px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div></div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>{T(tw.lang, 'Terms & Privacy', 'Điều khoản & Riêng tư')}</div>
          <div onClick={nav.closeSheet} style={{ fontSize: 13, color: tT.accent, fontWeight: 500, cursor: 'pointer' }}>{T(tw.lang, 'Done', 'Xong')}</div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 1, marginBottom: 14 }}>
            {T(tw.lang, 'EFFECTIVE 1 JANUARY 2026', 'HIỆU LỰC 01/01/2026')}
          </div>
          {items.map(([h, b], i) => (
            <div key={i} style={{ marginBottom: 18 }}>
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{i + 1}. {h}</div>
              <div style={{ fontSize: 13, color: tT.textDim, lineHeight: 1.6 }}>{b}</div>
            </div>
          ))}
          <div style={{ fontSize: 11, color: tT.textMute, lineHeight: 1.5, padding: '14px 0' }}>
            {T(tw.lang, 'Full policy at thaco.com.vn/privacy', 'Toàn văn tại thaco.com.vn/privacy')}
          </div>
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// FORGOT PASSWORD — phone → OTP stub
// ─────────────────────────────────────────────────────────────
function ForgotPwdSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const [phone, setPhone] = React.useState('912 84 02 19');
  const [sent, setSent] = React.useState(false);
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '14px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, margin: '0 auto 18px', borderRadius: 32, background: 'rgba(212,165,116,0.14)', color: tT.accent,
                      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icons.lock size={28} stroke={1.6}/>
        </div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 8 }}>
          {sent
            ? T(tw.lang, 'Code sent', 'Đã gửi mã')
            : T(tw.lang, 'Reset password', 'Đặt lại mật khẩu')}
        </div>
        <div style={{ fontSize: 13, color: tT.textDim, lineHeight: 1.5, marginBottom: 24 }}>
          {sent
            ? T(tw.lang, `We sent a 6-digit code to +84 ${phone}`, `Đã gửi mã 6 số đến +84 ${phone}`)
            : T(tw.lang, 'Enter your phone number and we’ll send a reset code.', 'Nhập số điện thoại để nhận mã đặt lại.')}
        </div>

        {!sent && (
          <div style={{ display: 'flex', alignItems: 'center', height: 52, padding: 4, background: 'rgba(255,255,255,0.05)', borderRadius: 14, marginBottom: 22 }}>
            <div style={{ padding: '0 14px', color: tT.accent, fontSize: 13, fontWeight: 600 }}>+84</div>
            <input value={phone} onChange={(e) => setPhone(e.target.value)} autoFocus
                   style={{ flex: 1, height: '100%', padding: '0 12px', border: 'none', background: 'transparent', color: tT.text, fontSize: 16, fontVariantNumeric: 'tabular-nums', fontFamily: tT.font, outline: 'none' }}/>
          </div>
        )}

        {sent && (
          <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 22 }}>
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} style={{ width: 40, height: 48, borderRadius: 10, border: `1px solid ${i < 3 ? tT.accent : 'rgba(255,255,255,0.1)'}`,
                                    background: i < 3 ? 'rgba(212,165,116,0.08)' : 'rgba(255,255,255,0.03)',
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    fontSize: 22, fontWeight: 500, color: tT.text, fontFamily: tT.mono }}>
                {i < 3 ? '•' : ''}
              </div>
            ))}
          </div>
        )}

        <button onClick={() => {
                  if (!sent) setSent(true);
                  else { nav.closeSheet(); toast.push(T(tw.lang, 'Password reset · sign in again', 'Đã đặt lại mật khẩu · đăng nhập lại')); }
                }}
                style={{ width: '100%', height: 52, border: 'none', borderRadius: 26, background: tT.accent, color: tT.accentInk, fontSize: 14, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
          {sent ? T(tw.lang, 'Verify code', 'Xác nhận mã') : T(tw.lang, 'Send code', 'Gửi mã')}
        </button>
        <div onClick={nav.closeSheet} style={{ marginTop: 14, fontSize: 13, color: tT.textDim, cursor: 'pointer' }}>
          {T(tw.lang, 'Back to sign in', 'Quay lại đăng nhập')}
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// SIGN UP — placeholder showing the call goes to a flow
// ─────────────────────────────────────────────────────────────
function SignUpSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '20px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 64, height: 64, margin: '0 auto 18px', borderRadius: 32, background: 'rgba(124,183,255,0.14)', color: tT.accent2,
                      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icons.user size={28} stroke={1.6}/>
        </div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 8 }}>
          {T(tw.lang, 'Create an account', 'Tạo tài khoản')}
        </div>
        <div style={{ fontSize: 13, color: tT.textDim, lineHeight: 1.5, marginBottom: 22, maxWidth: 300, margin: '0 auto 22px' }}>
          {T(tw.lang,
            'Sign up requires a Mazda VIN. Visit any Thaco dealer to register your account, or open the in-car infotainment to pair.',
            'Đăng ký cần số VIN xe Mazda. Hãy đến đại lý Thaco để đăng ký tài khoản, hoặc dùng màn hình giải trí trong xe để ghép nối.')}
        </div>
        <button onClick={() => { nav.closeSheet(); nav.go('pair'); }}
                style={{ width: '100%', height: 52, border: 'none', borderRadius: 26, background: tT.accent, color: tT.accentInk, fontSize: 14, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
          {T(tw.lang, 'I have a VIN — pair now', 'Tôi có VIN — ghép nối ngay')}
        </button>
        <button onClick={nav.closeSheet}
                style={{ marginTop: 10, width: '100%', height: 52, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 26, background: 'transparent', color: tT.text, fontSize: 14, fontFamily: tT.font, cursor: 'pointer' }}>
          {T(tw.lang, 'Find a dealer', 'Tìm đại lý')}
        </button>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// DOWNLOAD progress sheet (for owner manual PDF)
// ─────────────────────────────────────────────────────────────
function DownloadPDFSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const tk = setInterval(() => {
      setPct((p) => {
        const next = Math.min(100, p + 6 + Math.random() * 10);
        if (next >= 100) {
          clearInterval(tk);
          setTimeout(() => { nav.closeSheet(); toast.push(T(tw.lang, 'Manual saved · offline ready', 'Đã lưu sách hướng dẫn · sẵn sàng ngoại tuyến'), { icon: 'check' }); }, 350);
        }
        return next;
      });
    }, 280);
    return () => clearInterval(tk);
  }, []);
  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '20px 28px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 2 }}>{T(tw.lang, 'DOWNLOADING', 'ĐANG TẢI')}</div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginTop: 6 }}>{T(tw.lang, 'Owner’s manual', 'Sách hướng dẫn')}</div>
        <div style={{ fontSize: 13, color: tT.textDim, marginTop: 4 }}>{T(tw.lang, 'PDF · 38 MB', 'PDF · 38 MB')}</div>
        <div style={{ marginTop: 28, marginBottom: 6, fontSize: 36, fontWeight: 300, fontVariantNumeric: 'tabular-nums', letterSpacing: -1 }}>{Math.round(pct)}<span style={{ fontSize: 16, color: tT.textDim }}>%</span></div>
        <div style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.08)', overflow: 'hidden', marginBottom: 18 }}>
          <div style={{ width: pct + '%', height: '100%', background: tT.accent, transition: 'width .2s' }}/>
        </div>
        <div style={{ fontSize: 11, color: tT.textDim, fontFamily: tT.mono, marginBottom: 22 }}>
          {Math.round(38 * pct / 100)} {T(tw.lang, 'of', '/')} 38 MB
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// NOTIFICATION DETAIL — rich notification view
// Opens when a notification is tapped. Shows full body, map snapshot for
// location-tied events, a timeline of related events, and contextual actions.
// ─────────────────────────────────────────────────────────────
function NotificationDetailSheet({ id }) {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const lang = tw.lang;

  // Look up the rich payload by id. Fallback to a generic body if unknown.
  const DETAILS = {
    mx5: {
      ic: 'car', kind: 'promo',
      title:    T(lang, 'The new Mazda MX-5 arrives.', 'Mazda MX-5 mới đã có mặt.'),
      when:     T(lang, 'Today · 16:20 · Mazda Vietnam', 'Hôm nay · 16:20 · Mazda Việt Nam'),
      place:    T(lang, 'Mazda MX-5 2026 · Soul Red Crystal', 'Mazda MX-5 2026 · Soul Red Crystal'),
      addr:     T(lang, 'From 1.49 tỷ ₫ · 2.0L SKYACTIV-G · 184 hp', 'Từ 1,49 tỷ ₫ · 2.0L SKYACTIV-G · 184 mã lực'),
      body:     T(lang,
        'The MX-5 returns to Vietnam this autumn. New retractable hard top, refined interior, and Mazda Connect built in. Pre-order opens this Saturday at all Thaco showrooms — the first 50 reservations receive a complimentary track day at Đại Nam.',
        'MX-5 trở lại Việt Nam mùa thu này. Mui cứng gập điện mới, nội thất tinh tế, tích hợp sẵn Mazda Connect. Đặt cọc mở từ thứ Bảy này tại các showroom Thaco — 50 khách đầu tiên được tặng ngày trải nghiệm trường đua Đại Nam.'),
      events: [
        { tm: T(lang, 'Today', 'Hôm nay'), t: T(lang, 'Reservations open Saturday', 'Mở đặt cọc thứ Bảy'),         tone: 'mute' },
        { tm: '08/2026',                    t: T(lang, 'Vehicles arrive at dealers', 'Xe về đại lý'),               tone: 'mute' },
        { tm: '09/2026',                    t: T(lang, 'First deliveries to customers', 'Giao xe đầu tiên'),        tone: 'mute' },
      ],
      actions: [
        { i: 'arrow',  l: T(lang, 'Reserve', 'Đặt cọc'),            primary: true, sheet: 'mx5Reserve' },
        { i: 'pin',    l: T(lang, 'Find dealer', 'Tìm đại lý'),      go: 'dealer' },
        { i: 'doc',    l: T(lang, 'Brochure',    'Catalog'),         sheet: 'downloadPDF' },
      ],
      showHero: true,
    },
    n1: {
      ic: 'lock', kind: 'alert',
      title:    T(lang, 'Vehicle unlocked', 'Xe đã mở khóa'),
      when:     T(lang, 'Today · 14:32 · 10 min ago', 'Hôm nay · 14:32 · 10 phút trước'),
      place:    'Vincom Bà Triệu',
      addr:     T(lang, '191 Bà Triệu, Hai Bà Trưng, Hà Nội', '191 Bà Triệu, Hai Bà Trưng, Hà Nội'),
      body:     T(lang,
        'Your CX-5 was unlocked using the driver-side door handle. All four doors are now open. The alarm is disarmed.',
        'Xe CX-5 của bạn đã được mở khóa bằng tay nắm cửa tài. Cả 4 cửa hiện đang mở. Hệ thống chống trộm đã tắt.'),
      events: [
        { tm: '14:32', t: T(lang, 'Doors unlocked', 'Mở khóa cửa'),         tone: 'warn' },
        { tm: '14:32', t: T(lang, 'Alarm disarmed', 'Tắt báo động'),         tone: 'warn' },
        { tm: '14:28', t: T(lang, 'Key approached', 'Chìa khóa lại gần'),    tone: 'mute' },
        { tm: '11:08', t: T(lang, 'Parked at Vincom', 'Đỗ tại Vincom'),      tone: 'mute' },
      ],
      actions: [
        { i: 'lock',  l: T(lang, 'Lock now',  'Khóa ngay'),   primary: true, sheet: 'lockConfirm' },
        { i: 'horn',  l: T(lang, 'Sound horn', 'Bấm còi'),    sheet: 'hornFeedback' },
        { i: 'pin',   l: T(lang, 'Find car',   'Tìm xe'),     go: 'find' },
      ],
      showMap: true,
    },
    n2: {
      ic: 'wrench', kind: 'info',
      title: T(lang, 'Service due soon', 'Bảo dưỡng sắp đến hạn'),
      when:  T(lang, 'Today · 08:10', 'Hôm nay · 08:10'),
      place: T(lang, '10,000 km maintenance', 'Bảo dưỡng 10,000 km'),
      addr:  T(lang, 'Recommended at Thaco Long Biên', 'Đề xuất tại Thaco Long Biên'),
      body:  T(lang,
        'Your CX-5 has 9,700 km on the odometer. Mazda recommends scheduled maintenance every 10,000 km to keep your warranty valid and the engine running smoothly.',
        'Xe CX-5 của bạn đã đi 9,700 km. Mazda khuyến nghị bảo dưỡng định kỳ mỗi 10.000 km để giữ bảo hành và máy vận hành êm.'),
      events: [
        { tm: '08:10', t: T(lang, 'Reminder created', 'Tạo nhắc nhở'), tone: 'mute' },
        { tm: '06:42', t: T(lang, '+12 km · home → office', '+12 km · nhà → văn phòng'), tone: 'mute' },
      ],
      actions: [
        { i: 'wrench', l: T(lang, 'Book service', 'Đặt lịch'), primary: true, tab: 'service' },
        { i: 'doc',    l: T(lang, 'Service history', 'Lịch sử bảo dưỡng'), go: 'trip' },
      ],
      showMap: false,
    },
    n3: {
      ic: 'fuel', kind: 'info',
      title: T(lang, 'Fuel level low', 'Nhiên liệu thấp'),
      when:  T(lang, 'Yesterday · 18:44', 'Hôm qua · 18:44'),
      place: T(lang, 'At 18% · 115 km remaining', 'Còn 18% · ~ 115 km'),
      addr:  T(lang, 'Petrolimex Bà Triệu · 21,340 ₫/L · 120 m', 'Petrolimex Bà Triệu · 21.340 ₫/L · 120 m'),
      body:  T(lang,
        'Fuel dropped below 20%. Nearest Petrolimex stations have RON95 in stock today at the official ceiling price.',
        'Nhiên liệu xuống dưới 20%. Các trạm Petrolimex gần đây hôm nay có RON95 với giá trần chính thức.'),
      events: [
        { tm: '18:44', t: T(lang, 'Fuel below 20%', 'Nhiên liệu dưới 20%'), tone: 'warn' },
        { tm: '12:01', t: T(lang, 'Fuel below 30%', 'Nhiên liệu dưới 30%'), tone: 'mute' },
        { tm: '08:11', t: T(lang, 'Trip · 18 km · 1.5 L', 'Chuyến đi · 18 km · 1,5 L'), tone: 'mute' },
      ],
      actions: [
        { i: 'pin',  l: T(lang, 'Navigate to fuel', 'Đường đến trạm xăng'), primary: true, sheet: 'navigate', sheetProps: { to: 'Petrolimex Bà Triệu', distance: '120 m', dur: '2 min' } },
        { i: 'fuel', l: T(lang, 'Nearby stations', 'Trạm gần đây'),         go: 'find' },
      ],
      showMap: false,
    },
  };

  const d = DETAILS[id] || DETAILS.n1;
  const I = Icons[d.ic];
  const accent = d.kind === 'alert' ? THEMES.c.warn
               : d.kind === 'promo' ? '#C8102E'
               : THEMES.c.accent;

  return (
    <Sheet onClose={nav.closeSheet} height="86%">
      <div style={{ padding: '0 24px', height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22, paddingTop: 4 }}>
          <div onClick={nav.closeSheet} style={{ fontSize: 13, color: THEMES.c.textDim, cursor: 'pointer' }}>
            {T(lang, 'Close', 'Đóng')}
          </div>
          <div style={{ fontSize: 13, color: THEMES.c.accent, fontWeight: 500, cursor: 'pointer' }}
               onClick={() => toast.push(T(lang, 'Notification shared', 'Đã chia sẻ thông báo'), { icon: 'check' })}>
            {T(lang, 'Share', 'Chia sẻ')}
          </div>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
          {/* Title block */}
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 18 }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, flexShrink: 0,
                          background: `${accent}22`, color: accent,
                          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <I size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.2 }}>{d.title}</div>
              <div style={{ fontSize: 11, color: THEMES.c.textDim, fontFamily: THEMES.c.mono, marginTop: 6, letterSpacing: 0.5 }}>{d.when}</div>
            </div>
          </div>

          {/* Place / context strip */}
          <div style={{ padding: '14px 16px', borderRadius: 16, background: 'rgba(255,255,255,0.04)', marginBottom: 18 }}>
            <div style={{ fontSize: 10, fontFamily: THEMES.c.mono, color: THEMES.c.textDim, letterSpacing: 1.2 }}>
              {d.kind === 'alert' ? T(lang, 'LOCATION', 'VỊ TRÍ') : T(lang, 'DETAILS', 'CHI TIẾT')}
            </div>
            <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>{d.place}</div>
            <div style={{ fontSize: 12, color: THEMES.c.textDim, marginTop: 4 }}>{d.addr}</div>
          </div>

          {/* Hero (promo) — full-bleed gradient with car silhouette */}
          {d.showHero && (
            <div style={{ borderRadius: 18, overflow: 'hidden', position: 'relative', height: 180, marginBottom: 18,
                          background: `linear-gradient(135deg, ${accent} 0%, #5C0019 100%)` }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 80% at 80% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%)' }}/>
              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
                <CarSideModel model="mazda3" width={420} color="#A50019"/>
              </div>
              <div style={{ position: 'absolute', top: 16, left: 18, fontSize: 10, fontFamily: THEMES.c.mono, color: '#fff', letterSpacing: 2, opacity: 0.85 }}>
                {T(lang, 'NEW · AUTUMN 2026', 'MỚI · MÙA THU 2026')}
              </div>
              <div style={{ position: 'absolute', top: 16, right: 18, padding: '4px 10px', borderRadius: 999,
                            background: 'rgba(255,255,255,0.18)', color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: 1.5,
                            backdropFilter: 'blur(8px)' }}>
                ROADSTER
              </div>
              <div style={{ position: 'absolute', bottom: 14, left: 18, color: '#fff', fontSize: 22, fontWeight: 500, letterSpacing: -0.4, textShadow: '0 2px 8px rgba(0,0,0,0.5)' }}>
                MX-5
              </div>
            </div>
          )}

          {/* Map snapshot (only for location-tied alerts) */}
          {d.showMap && (
            <div style={{ borderRadius: 16, overflow: 'hidden', height: 140, position: 'relative', marginBottom: 18 }}>
              <HanoiMap/>
              <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(40% 60% at 52% 50%, ${accent}33, transparent 70%)` }}/>
              <div style={{ position: 'absolute', top: '50%', left: '52%', transform: 'translate(-50%,-50%)' }}>
                <div style={{ width: 36, height: 36, borderRadius: 18, background: accent, color: THEMES.c.accentInk,
                              display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 4px 16px ${accent}88` }}>
                  <Icons.car size={20}/>
                </div>
              </div>
            </div>
          )}

          {/* Body copy */}
          <div style={{ fontSize: 14, color: THEMES.c.text, lineHeight: 1.6, marginBottom: 22 }}>
            {d.body}
          </div>

          {/* Timeline of related events */}
          <div style={{ fontSize: 10, fontFamily: THEMES.c.mono, color: THEMES.c.textDim, letterSpacing: 1.5, marginBottom: 10 }}>
            {T(lang, 'TIMELINE', 'TIẾN TRÌNH')}
          </div>
          <div style={{ marginBottom: 24 }}>
            {d.events.map((e, i, arr) => {
              const dotColor = e.tone === 'warn' ? THEMES.c.warn : 'rgba(255,255,255,0.35)';
              return (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  {/* dot + line column */}
                  <div style={{ width: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                    <div style={{ width: 8, height: 8, borderRadius: 4, background: dotColor, marginTop: 6,
                                  boxShadow: e.tone === 'warn' ? `0 0 0 4px ${THEMES.c.warn}22` : 'none' }}/>
                    {i < arr.length - 1 && (
                      <div style={{ width: 1, flex: 1, background: 'rgba(255,255,255,0.1)', minHeight: 28, marginTop: 2 }}/>
                    )}
                  </div>
                  <div style={{ flex: 1, paddingBottom: 14 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                      <div style={{ fontSize: 13, fontWeight: e.tone === 'warn' ? 500 : 400, color: e.tone === 'warn' ? THEMES.c.text : THEMES.c.textDim }}>
                        {e.t}
                      </div>
                      <div style={{ fontSize: 11, color: THEMES.c.textMute, fontFamily: THEMES.c.mono, flexShrink: 0 }}>{e.tm}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Sticky actions */}
        <div style={{ display: 'flex', gap: 10, paddingTop: 14, paddingBottom: 8, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          {d.actions.map((a, i) => {
            const AI = Icons[a.i];
            const isPrimary = a.primary;
            const onClick = () => {
              if (a.sheet) {
                nav.closeSheet();
                setTimeout(() => nav.openSheet(a.sheet, a.sheetProps || {}), 150);
              } else if (a.go) {
                nav.closeSheet();
                setTimeout(() => nav.go(a.go), 150);
              } else if (a.tab) {
                nav.closeSheet();
                setTimeout(() => nav.tab(a.tab), 150);
              }
            };
            return (
              <button key={i} onClick={onClick}
                      style={{ flex: isPrimary ? 2 : 1, height: 52, border: isPrimary ? 'none' : '1px solid rgba(255,255,255,0.12)',
                               borderRadius: 26,
                               background: isPrimary ? accent : 'rgba(255,255,255,0.04)',
                               color: isPrimary ? (d.kind === 'alert' ? '#fff' : THEMES.c.accentInk) : THEMES.c.text,
                               fontSize: 13, fontWeight: isPrimary ? 600 : 500, fontFamily: THEMES.c.font,
                               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer' }}>
                <AI size={16} stroke={isPrimary ? 2 : 1.6}/>
                {a.l}
              </button>
            );
          })}
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// MX-5 RESERVE — small reservation flow for the promo notification
// ─────────────────────────────────────────────────────────────
function MX5ReserveSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const lang = tw.lang;
  const [color, setColor] = React.useState('red');
  const [done, setDone] = React.useState(false);

  const colors = [
    { id: 'red',    name: 'Soul Red Crystal',  hex: '#C8102E' },
    { id: 'white',  name: 'Snowflake White',   hex: '#E8E5DD' },
    { id: 'grey',   name: 'Machine Grey',      hex: '#3D3F44' },
    { id: 'blue',   name: 'Deep Crystal Blue', hex: '#0E2C5E' },
  ];

  if (done) {
    return (
      <Sheet onClose={() => { nav.closeSheet(); }}>
        <div style={{ padding: '20px 28px 0', textAlign: 'center' }}>
          <div style={{ width: 80, height: 80, margin: '0 auto 22px', borderRadius: 40, background: THEMES.c.ok,
                        display: 'flex', alignItems: 'center', justifyContent: 'center', color: THEMES.c.bg, position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: 40, border: `1px solid ${THEMES.c.ok}`, animation: 'c-pulse-strong 2s infinite' }}/>
            <Icons.check size={42} stroke={2.5}/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 8 }}>
            {T(lang, 'You’re on the list', 'Đã ghi danh')}
          </div>
          <div style={{ fontSize: 13, color: THEMES.c.textDim, lineHeight: 1.5, maxWidth: 290, margin: '0 auto 24px' }}>
            {T(lang,
              'Position #38 · Thaco Long Biên will contact you Saturday to confirm the 100 triệu deposit.',
              'Thứ tự #38 · Thaco Long Biên sẽ liên hệ thứ Bảy để xác nhận cọc 100 triệu.')}
          </div>
          <div style={{ padding: 14, borderRadius: 14, background: 'rgba(255,255,255,0.04)', marginBottom: 18, textAlign: 'left' }}>
            <Row k={T(lang, 'Model', 'Phiên bản')} v="MX-5 RF · 2.0L"/>
            <Row k={T(lang, 'Colour', 'Màu')} v={colors.find((c) => c.id === color).name}/>
            <Row k={T(lang, 'Reservation ID', 'Mã đặt cọc')} v="#MX5-26-0038" last/>
          </div>
          <button onClick={nav.closeSheet}
                  style={{ width: '100%', height: 50, border: 'none', borderRadius: 25, background: THEMES.c.accent, color: THEMES.c.accentInk, fontSize: 14, fontWeight: 600, fontFamily: THEMES.c.font, cursor: 'pointer' }}>
            {T(lang, 'Done', 'Xong')}
          </button>
        </div>
      </Sheet>
    );
  }

  return (
    <Sheet onClose={nav.closeSheet} height="78%">
      <div style={{ padding: '14px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div onClick={nav.closeSheet} style={{ fontSize: 13, color: THEMES.c.textDim, cursor: 'pointer' }}>{T(lang, 'Cancel', 'Hủy')}</div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>{T(lang, 'Reserve MX-5', 'Đặt cọc MX-5')}</div>
          <div style={{ width: 40 }}/>
        </div>

        <div style={{ flex: 1, overflowY: 'auto' }}>
          {/* hero strip */}
          <div style={{ borderRadius: 16, overflow: 'hidden', position: 'relative', height: 130, marginBottom: 18,
                        background: `linear-gradient(135deg, ${colors.find((c) => c.id === color).hex} 0%, #2a0008 100%)`, transition: 'background .3s' }}>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
              <CarSideModel model="mazda3" width={360} color={colors.find((c) => c.id === color).hex}/>
            </div>
          </div>

          {/* Colour picker */}
          <div style={{ fontSize: 10, fontFamily: THEMES.c.mono, color: THEMES.c.textDim, letterSpacing: 1.5, marginBottom: 10 }}>
            {T(lang, 'COLOUR', 'MÀU XE')}
          </div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 22 }}>
            {colors.map((c) => (
              <div key={c.id} onClick={() => setColor(c.id)}
                   style={{ flex: 1, padding: 8, borderRadius: 14, cursor: 'pointer',
                            border: `1px solid ${color === c.id ? THEMES.c.accent : 'rgba(255,255,255,0.08)'}`,
                            background: color === c.id ? 'rgba(212,165,116,0.08)' : 'rgba(255,255,255,0.03)' }}>
                <div style={{ height: 32, borderRadius: 8, background: c.hex, marginBottom: 6,
                              boxShadow: 'inset 0 -8px 12px rgba(0,0,0,0.3)' }}/>
                <div style={{ fontSize: 10, color: THEMES.c.textDim, textAlign: 'center', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</div>
              </div>
            ))}
          </div>

          {/* Summary */}
          <div style={{ padding: 16, borderRadius: 16, background: 'rgba(255,255,255,0.04)', marginBottom: 18 }}>
            <Row k={T(lang, 'Model', 'Phiên bản')}     v="MX-5 RF · 2.0L SKYACTIV-G"/>
            <Row k={T(lang, 'Power',  'Công suất')}    v={T(lang, '184 hp · 205 Nm', '184 mã lực · 205 Nm')}/>
            <Row k={T(lang, 'Price',  'Giá')}          v={T(lang, 'From 1.49 tỷ ₫', 'Từ 1,49 tỷ ₫')}/>
            <Row k={T(lang, 'Deposit','Tiền cọc')}     v={T(lang, '100 triệu · refundable', '100 triệu · hoàn lại')}/>
            <Row k={T(lang, 'ETA',    'Dự kiến')}      v={T(lang, 'September 2026', 'Tháng 9/2026')} last/>
          </div>

          <div style={{ marginBottom: 16, fontSize: 11, color: THEMES.c.textDim, lineHeight: 1.5, padding: '0 4px' }}>
            {T(lang,
              'Reservations are non-binding until deposit is confirmed at the dealer.',
              'Đặt chỗ không ràng buộc cho đến khi xác nhận tiền cọc tại đại lý.')}
          </div>
        </div>

        <button onClick={() => setDone(true)}
                style={{ width: '100%', height: 56, border: 'none', borderRadius: 28, background: '#C8102E', color: '#fff', fontSize: 14, fontWeight: 600, fontFamily: THEMES.c.font, cursor: 'pointer', marginBottom: 8 }}>
          {T(lang, 'Reserve my MX-5', 'Đặt cọc MX-5 của tôi')}
        </button>
      </div>
    </Sheet>
  );
}

function Row({ k, v, last }) {
  return (
    <div style={{ padding: '8px 0', display: 'flex', justifyContent: 'space-between',
                  borderBottom: last ? 'none' : '1px solid rgba(255,255,255,0.05)' }}>
      <div style={{ fontSize: 12, color: THEMES.c.textDim }}>{k}</div>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{v}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// WINDOWS — slider per door + all-up/all-down quick actions
// ─────────────────────────────────────────────────────────────
function WindowsControlSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const lang = tw.lang;
  // 0 = fully up (closed), 100 = fully down
  const [w, setW] = React.useState({ fl: 0, fr: 0, rl: 0, rr: 0 });

  const all = (v) => setW({ fl: v, fr: v, rl: v, rr: v });

  const WindowSlider = ({ k, name }) => (
    <div style={{ padding: '12px 4px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{name}</div>
        <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, fontVariantNumeric: 'tabular-nums' }}>
          {w[k] === 0 ? T(lang, 'closed', 'đóng') : w[k] === 100 ? T(lang, 'open', 'mở') : `${w[k]}%`}
        </div>
      </div>
      <input type="range" min="0" max="100" step="5" value={w[k]}
             onChange={(e) => setW({ ...w, [k]: +e.target.value })}
             style={{ width: '100%', accentColor: tT.accent }}/>
    </div>
  );

  return (
    <Sheet onClose={nav.closeSheet} height="auto">
      <div style={{ padding: '4px 24px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 2 }}>{T(lang, 'WINDOWS', 'CỬA KÍNH')}</div>
            <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginTop: 4 }}>{T(lang, 'Control all four', 'Điều khiển 4 cửa')}</div>
          </div>
          <button onClick={nav.closeSheet}
                  style={{ width: 36, height: 36, borderRadius: 18, border: 'none', background: 'rgba(255,255,255,0.06)', color: tT.text, fontSize: 18, cursor: 'pointer' }}>×</button>
        </div>

        <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
          <button onClick={() => { all(0); toast.push(T(lang, 'All windows up', 'Đóng tất cả cửa kính'), { icon: 'check' }); }}
                  style={{ flex: 1, height: 48, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 24, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 13, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
            ↑ {T(lang, 'Close all', 'Đóng tất cả')}
          </button>
          <button onClick={() => { all(100); toast.push(T(lang, 'All windows down', 'Mở tất cả cửa kính'), { icon: 'check' }); }}
                  style={{ flex: 1, height: 48, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 24, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 13, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
            ↓ {T(lang, 'Open all', 'Mở tất cả')}
          </button>
          <button onClick={() => { all(50); toast.push(T(lang, 'Ventilation mode', 'Chế độ thông gió'), { icon: 'check' }); }}
                  style={{ flex: 1, height: 48, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 24, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 13, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer' }}>
            ½ {T(lang, 'Vent', 'Thông gió')}
          </button>
        </div>

        <div style={{ padding: '6px 12px', borderRadius: 16, background: 'rgba(255,255,255,0.04)', marginBottom: 14 }}>
          <WindowSlider k="fl" name={T(lang, 'Driver · front left',     'Tài · trước trái')}/>
          <div style={{ height: 1, background: 'rgba(255,255,255,0.05)' }}/>
          <WindowSlider k="fr" name={T(lang, 'Passenger · front right', 'Phụ · trước phải')}/>
          <div style={{ height: 1, background: 'rgba(255,255,255,0.05)' }}/>
          <WindowSlider k="rl" name={T(lang, 'Rear left',               'Sau trái')}/>
          <div style={{ height: 1, background: 'rgba(255,255,255,0.05)' }}/>
          <WindowSlider k="rr" name={T(lang, 'Rear right',              'Sau phải')}/>
        </div>

        <div style={{ padding: '0 4px', marginBottom: 14, fontSize: 11, color: tT.textDim, lineHeight: 1.5,
                      display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ fontSize: 10, fontFamily: tT.mono, color: tT.accent2, letterSpacing: 1.5, paddingTop: 1, flexShrink: 0, minWidth: 32 }}>
            {T(lang, 'NOTE', 'LƯU Ý')}
          </div>
          <div style={{ flex: 1 }}>
            {T(lang,
              'Windows work only when the engine is off and no key is detected inside. Park brake must be set.',
              'Cửa kính chỉ hoạt động khi máy tắt và không có chìa trong xe. Phanh tay phải gài.')}
          </div>
        </div>
      </div>
    </Sheet>
  );
}

// ─────────────────────────────────────────────────────────────
// TRUNK — hold to open
// ─────────────────────────────────────────────────────────────
function TrunkControlSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const lang = tw.lang;
  const [open, setOpen] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const holding = React.useRef(false);
  const raf = React.useRef();

  const start = () => {
    if (open) return;
    holding.current = true;
    const t0 = performance.now();
    const tick = (now) => {
      if (!holding.current) return;
      const p = Math.min(100, ((now - t0) / 900) * 100);
      setProgress(p);
      if (p >= 100) {
        setOpen(true);
        toast.push(T(lang, 'Trunk released', 'Đã mở cốp sau'), { icon: 'check' });
        return;
      }
      raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
  };
  const stop = () => {
    holding.current = false;
    cancelAnimationFrame(raf.current);
    if (!open) setProgress(0);
  };

  return (
    <Sheet onClose={nav.closeSheet} height="auto">
      <div style={{ padding: '4px 24px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 11, fontFamily: tT.mono, color: tT.textDim, letterSpacing: 2 }}>{T(lang, 'TRUNK', 'CỐP SAU')}</div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginTop: 4, marginBottom: 18 }}>
          {open
            ? T(lang, 'Trunk is open', 'Cốp đang mở')
            : T(lang, 'Hold to release', 'Giữ để mở cốp')}
        </div>

        {/* SVG showing trunk state */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
          <TrunkVisual open={open} progress={progress}/>
        </div>

        <div onMouseDown={start} onMouseUp={stop} onMouseLeave={stop}
             onTouchStart={start} onTouchEnd={stop}
             style={{ position: 'relative', height: 60, borderRadius: 30,
                      background: open ? 'rgba(101,212,154,0.18)' : 'rgba(212,165,116,0.14)',
                      border: `1px solid ${open ? tT.ok : tT.accent}`,
                      cursor: open ? 'default' : 'pointer', overflow: 'hidden', userSelect: 'none',
                      marginBottom: 18 }}>
          {/* progress fill */}
          {!open && (
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: progress + '%',
                          background: tT.accent, opacity: 0.5 }}/>
          )}
          <div style={{ position: 'relative', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 14, fontWeight: 600, color: open ? tT.ok : tT.text, letterSpacing: 0.5 }}>
            {open
              ? T(lang, '✓ Open', '✓ Đã mở')
              : T(lang, 'HOLD TO OPEN', 'GIỮ ĐỂ MỞ')}
          </div>
        </div>

        {open && (
          <button onClick={() => { setOpen(false); setProgress(0); toast.push(T(lang, 'Trunk close requested', 'Yêu cầu đóng cốp'), { icon: 'check' }); }}
                  style={{ width: '100%', height: 48, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 24, background: 'rgba(255,255,255,0.04)', color: tT.text, fontSize: 13, fontWeight: 500, fontFamily: tT.font, cursor: 'pointer', marginBottom: 14 }}>
            {T(lang, 'Close trunk', 'Đóng cốp')}
          </button>
        )}

        <div style={{ padding: '0 4px', marginBottom: 14, fontSize: 11, color: tT.textDim, lineHeight: 1.5,
                      display: 'flex', gap: 10, alignItems: 'flex-start', textAlign: 'left' }}>
          <div style={{ fontSize: 10, fontFamily: tT.mono, color: tT.accent2, letterSpacing: 1.5, paddingTop: 1, flexShrink: 0, minWidth: 32 }}>
            {T(lang, 'NOTE', 'LƯU Ý')}
          </div>
          <div style={{ flex: 1 }}>
            {T(lang,
              'Make sure nothing is on top of the trunk. The car will alert anyone nearby.',
              'Đảm bảo không có vật gì đặt trên cốp. Xe sẽ phát cảnh báo cho người xung quanh.')}
          </div>
        </div>
      </div>
    </Sheet>
  );
}

// Simple trunk-from-rear visualization with hatch lifting based on state.
function TrunkVisual({ open, progress }) {
  const t = open ? 1 : progress / 100;
  // Hatch lifts 0deg → -42deg around hinge at top center
  const angle = -42 * t;
  return (
    <svg width="220" height="140" viewBox="0 0 220 140" style={{ display: 'block' }}>
      {/* car body, viewed from rear */}
      <path d="M30 110 L30 84 Q30 76 38 76 L182 76 Q190 76 190 84 L190 110 Z" fill={VEHICLES.cx30.color} opacity="0.85"/>
      <rect x="30" y="106" width="160" height="14" fill="rgba(0,0,0,0.4)"/>
      {/* tail lights */}
      <rect x="34" y="86" width="22" height="14" rx="2" fill="rgba(220,60,60,0.65)"/>
      <rect x="164" y="86" width="22" height="14" rx="2" fill="rgba(220,60,60,0.65)"/>
      {/* license plate */}
      <rect x="92" y="92" width="36" height="10" rx="1" fill="#fff" opacity="0.7"/>
      {/* hatch — pivots around top edge (y=76) */}
      <g transform={`rotate(${angle} 110 76)`}>
        <path d="M40 76 L40 50 Q40 38 50 38 L170 38 Q180 38 180 50 L180 76 Z"
              fill={VEHICLES.cx30.color}
              stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>
        {/* rear window */}
        <path d="M52 72 L60 44 L160 44 L168 72 Z" fill="rgba(0,0,0,0.5)"/>
      </g>
      {/* ground shadow */}
      <ellipse cx="110" cy="128" rx="100" ry="5" fill="rgba(0,0,0,0.35)"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// HOOD — service-only control with strong warning
// ─────────────────────────────────────────────────────────────
function HoodControlSheet() {
  const nav = useRouter();
  const { tw } = useApp();
  const toast = useToast();
  const lang = tw.lang;
  const [confirmed, setConfirmed] = React.useState(false);
  const [released, setReleased] = React.useState(false);

  if (released) {
    return (
      <Sheet onClose={nav.closeSheet}>
        <div style={{ padding: '4px 24px 0', textAlign: 'center' }}>
          <div style={{ width: 80, height: 80, margin: '0 auto 22px', borderRadius: 40, background: tT.ok,
                        display: 'flex', alignItems: 'center', justifyContent: 'center', color: tT.bg }}>
            <Icons.check size={42} stroke={2.5}/>
          </div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4, marginBottom: 8 }}>
            {T(lang, 'Hood released', 'Đã mở khóa nắp ca-pô')}
          </div>
          <div style={{ fontSize: 13, color: tT.textDim, lineHeight: 1.5, maxWidth: 290, margin: '0 auto 24px' }}>
            {T(lang,
              'Walk to the front of the vehicle and pull the safety latch underneath the hood to fully open.',
              'Đi đến đầu xe và kéo chốt an toàn bên dưới nắp để mở hoàn toàn.')}
          </div>
          <button onClick={nav.closeSheet}
                  style={{ width: '100%', height: 52, border: 'none', borderRadius: 26, background: tT.accent, color: tT.accentInk, fontSize: 14, fontWeight: 600, fontFamily: tT.font, cursor: 'pointer' }}>
            {T(lang, 'Done', 'Xong')}
          </button>
        </div>
      </Sheet>
    );
  }

  return (
    <Sheet onClose={nav.closeSheet}>
      <div style={{ padding: '4px 24px 0' }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}>
          <div style={{ width: 64, height: 64, margin: '0 auto 16px', borderRadius: 32,
                        background: 'rgba(232,72,72,0.18)', color: '#E84848',
                        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 9v4"/><path d="M12 17h.01"/><circle cx="12" cy="12" r="10"/>
            </svg>
          </div>
          <div style={{ fontSize: 11, fontFamily: tT.mono, color: '#E84848', letterSpacing: 2, marginBottom: 4 }}>{T(lang, 'SERVICE ONLY', 'CHỈ DÀNH CHO BẢO DƯỠNG')}</div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.4 }}>
            {T(lang, 'Release hood latch?', 'Mở khóa nắp ca-pô?')}
          </div>
        </div>

        <div style={{ padding: 16, borderRadius: 16, background: 'rgba(232,72,72,0.08)', marginBottom: 18, fontSize: 13, color: tT.text, lineHeight: 1.6 }}>
          {T(lang,
            'This unlocks the primary latch only. The hood will not fully open until you pull the secondary safety latch beneath it.',
            'Thao tác này chỉ mở chốt chính. Nắp ca-pô sẽ không mở hoàn toàn cho đến khi bạn kéo chốt an toàn bên dưới.')}
        </div>

        <div onClick={() => setConfirmed(!confirmed)}
             style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 0', cursor: 'pointer', marginBottom: 14 }}>
          <div style={{ width: 22, height: 22, borderRadius: 6, border: `1.5px solid ${confirmed ? tT.accent : 'rgba(255,255,255,0.25)'}`,
                        background: confirmed ? tT.accent : 'transparent', color: tT.accentInk,
                        display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1, flexShrink: 0 }}>
            {confirmed && <Icons.check size={14} stroke={3}/>}
          </div>
          <div style={{ flex: 1, fontSize: 13, color: tT.text, lineHeight: 1.5 }}>
            {T(lang,
              'I confirm the engine is off and I am standing outside the vehicle.',
              'Tôi xác nhận máy đã tắt và tôi đang đứng ngoài xe.')}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, marginBottom: 8 }}>
          <button onClick={nav.closeSheet}
                  style={{ flex: 1, height: 52, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 26, background: 'transparent', color: tT.text, fontSize: 14, fontFamily: tT.font, cursor: 'pointer' }}>
            {T(lang, 'Cancel', 'Hủy')}
          </button>
          <button onClick={() => confirmed && setReleased(true)}
                  disabled={!confirmed}
                  style={{ flex: 1, height: 52, border: 'none', borderRadius: 26,
                           background: confirmed ? '#E84848' : 'rgba(255,255,255,0.06)',
                           color: confirmed ? '#fff' : tT.textMute,
                           fontSize: 14, fontWeight: 600, fontFamily: tT.font,
                           cursor: confirmed ? 'pointer' : 'not-allowed' }}>
            {T(lang, 'Release', 'Mở khóa')}
          </button>
        </div>
      </div>
    </Sheet>
  );
}

window.WindowsControlSheet = WindowsControlSheet;
window.TrunkControlSheet = TrunkControlSheet;
window.HoodControlSheet = HoodControlSheet;
window.SOSSheet = SOSSheet;
window.NavigateSheet = NavigateSheet;
window.EditProfileSheet = EditProfileSheet;
window.AboutSheet = AboutSheet;
window.TermsSheet = TermsSheet;
window.ForgotPwdSheet = ForgotPwdSheet;
window.SignUpSheet = SignUpSheet;
window.DownloadPDFSheet = DownloadPDFSheet;