/* ============================================================
   VLF 2026 · MISC — Map · Schedule · Messages · Account/MyTour
   ============================================================ */

/* ---------- BẢN ĐỒ → xem vlf-map.jsx (Leaflet · ảnh vệ tinh thật) ---------- */

/* ---------- LỊCH TRÌNH 7 NGÀY (L1) ---------- */
function Schedule({ nav, persona, phase, tickets }) {
  const t = useT(); const lang = t.lang; const E = (o, k) => window.VLF.L(lang, o, k);
  const LL = (o) => (o ? (lang === 'en' ? o.en : o.vi) : '');
  const legEn = { sport: 'Competition', gala: 'Gala & Entertainment', exp: 'Experience & Trade' };
  const colorOf = {};
  window.VLF.scheduleLegend.forEach((l) => { colorOf[l.id] = l.color; });
  const [view, setView] = useState((persona === 'spectator' || !persona) ? 'programme' : 'mine');
  return (
    <div className="v-screen" style={{ paddingBottom: 'calc(60px + var(--zalo-safe-bottom))' }}>
      <div className="v-pad">
        <SponsorBanner nav={nav} />
        <div style={{ paddingTop: 4 }}>
          <Segmented value={view} onChange={setView} items={[{ id: 'mine', label: lang === 'en' ? 'My agenda' : 'Lịch của tôi' }, { id: 'programme', label: lang === 'en' ? 'Programme' : 'Chương trình' }, { id: 'system', label: lang === 'en' ? 'Competition' : 'Hệ thống' }]} />
        </div>

        {view === 'mine' ? (
          <MySchedule persona={persona} phase={phase} tickets={tickets} nav={nav} setView={setView} />
        ) : view === 'programme' ? (<>
        <div className="v-leg" style={{ margin: '14px 0 6px' }}>
          {window.VLF.scheduleLegend.map((l) => (
            <div className="it" key={l.id}><i style={{ background: l.color }} />{lang === 'en' ? legEn[l.id] : l.name}</div>
          ))}
        </div>
        <div className="v-card" style={{ padding: '0 14px' }}>
          {window.VLF.schedule.map((d, i) => (
            <div className="v-day" key={i}>
              <div className="when"><div className="dd v-num">{d.date.slice(0, 2)}</div><div className="dw">{d.dow}</div></div>
              <div className="body">
                <div className="theme">{E(d, 'theme')}</div>
                {d.items.map((it, j) => (
                  <div className="v-evt" key={j}><i style={{ background: colorOf[it.k] }} />{it.tm && <b className="v-num" style={{ color: 'var(--vlf-purple-700)', fontWeight: 700, marginRight: 7, minWidth: 38, display: 'inline-block' }}>{it.tm}</b>}{E(it, 't')}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '12px 2px 0' }}>{lang === 'en' ? 'Spectator tickets by day: Thu Sep 24 → Sun Sep 27, or Full pass. All costs are borne by organisers & sponsors.' : 'Vé khán giả theo ngày: T5 24/09 → CN 27/09, hoặc Trọn giải. Toàn bộ kinh phí do đơn vị tổ chức & nhà tài trợ chịu trách nhiệm.'}</p>
        </>) : (<>
        <div className="v-card" style={{ padding: '2px 14px', marginTop: 14 }}>
          {window.VLF.competition.map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 0', borderTop: i ? '1px solid var(--vlf-line)' : 'none' }}>
              <div style={{ flex: '0 0 38px', textAlign: 'center' }}>
                <div className="v-num" style={{ fontWeight: 700, fontSize: 13.5, color: 'var(--vlf-purple-700)' }}>{lang === 'en' ? c.dayEn : c.dow}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="v-tag" style={{ color: c.fmt === 'Shotgun' ? 'var(--vlf-gold-700)' : 'var(--vlf-purple-700)' }}>{c.fmt}</span>
                  <span className="v-num" style={{ fontWeight: 700, fontSize: 13 }}>{c.start}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--vlf-ink-500)', marginTop: 3, lineHeight: 1.4 }}>{window.VLF.L(lang, c, 'who')} · {window.VLF.L(lang, c, 'note')}</div>
              </div>
            </div>
          ))}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '10px 2px 0' }}>{window.VLF.competitionNote[lang] || window.VLF.competitionNote.vi}</p>
        <div className="v-sect"><h3>{lang === 'en' ? 'Main divisions' : 'Bảng đấu chính'}</h3></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {window.VLF.divRules.filter((r) => r.tier === 'main').map((r, i) => (
            <div key={r.id} onClick={() => nav('comprule', { id: r.id })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 0', borderTop: i ? '1px solid var(--vlf-line)' : 'none', cursor: 'pointer' }}>
              <span style={{ width: 9, height: 9, borderRadius: 9, flex: '0 0 auto', background: r.accent }} />
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.3 }}>{LL(r.name)}</div><div style={{ fontSize: 11.5, color: 'var(--vlf-ink-500)', marginTop: 2 }}>{lang === 'en' ? 'Main division' : 'Giải chính'}</div></div>
              <Icon name="chev" size={18} className="chev" />
            </div>
          ))}
        </div>

        <div className="v-sect"><h3>{lang === 'en' ? 'Side boards · 5 stations (Driving Range)' : 'Bảng phụ · 5 trạm (Driving Range)'}</h3></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {window.VLF.divRules.filter((r) => r.tier === 'side').map((r, i) => (
            <div key={r.id} onClick={() => nav('comprule', { id: r.id })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 0', borderTop: i ? '1px solid var(--vlf-line)' : 'none', cursor: 'pointer' }}>
              <span style={{ width: 9, height: 9, borderRadius: 9, flex: '0 0 auto', background: r.accent }} />
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 14, lineHeight: 1.3 }}>{LL(r.name)}</div><div style={{ fontSize: 11.5, color: 'var(--vlf-ink-500)', marginTop: 2 }}>{lang === 'en' ? '5 skills stations · not 18 holes' : '5 trạm kỹ thuật · không đánh 18 hố'}</div></div>
              <Icon name="chev" size={18} className="chev" />
            </div>
          ))}
        </div>
        {window.VLF.scheduleCharityNote && <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '12px 2px 0' }}><b style={{ color: 'var(--vlf-gold-700)' }}>{lang === 'en' ? 'Charity' : 'Thiện nguyện'}:</b> {window.VLF.scheduleCharityNote[lang] || window.VLF.scheduleCharityNote.vi}</p>}
        </>)}
      </div>
    </div>
  );
}

/* ---------- CỦA TÔI · lịch trình cá nhân hoá theo persona ---------- */
function MySchedule({ persona, phase, tickets, nav, setView }) {
  const t = useT(); const lang = t.lang;
  const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const me = window.VLF.personas[persona].me;
  const isGolfer = persona === 'golfer' || persona === 'golfer_intl';

  const galaCard = (
    <div className="v-card" style={{ padding: 14, display: 'flex', gap: 12, marginTop: 12, cursor: 'pointer', alignItems: 'center' }} onClick={() => nav('rsvp')}>
      <div className="v-vip-ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-600)' }}><Icon name="gala" size={20} sw={1.7} /></div>
      <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>Gala Dinner</div><div className="s">{T('24/09 · 18:30 · xác nhận tham dự (RSVP)', 'Sep 24 · 18:30 · confirm attendance (RSVP)')}</div></div>
      <Icon name="chev" size={18} style={{ color: 'var(--vlf-ink-500)' }} />
    </div>
  );

  return (
    <div style={{ marginTop: 14 }}>
      {persona === 'vip' && (<>
        <div className="v-sect" style={{ marginTop: 2 }}><h3>{t('vipDay')}</h3><a onClick={() => nav('viptimeline')}>{t('viewAll')} ›</a></div>
        <div className="v-card" style={{ cursor: 'pointer' }} onClick={() => nav('viptimeline')}>
          {window.VLF.vipTimeline.slice(0, 4).map((it, i) => (
            <div className="v-row" key={i} style={{ cursor: 'pointer' }}>
              <div className="v-tee-time v-num" style={{ fontSize: 16, flex: '0 0 46px', textAlign: 'center' }}>{it.time}</div>
              <div style={{ flex: 1 }}><div className="t" style={{ fontSize: 14 }}>{E(it, 't')}</div><div className="s">{E(it, 's')}</div></div>
            </div>
          ))}
        </div>
        <div className="v-card" style={{ padding: 14, display: 'flex', gap: 11, marginTop: 12, cursor: 'pointer', alignItems: 'center' }} onClick={() => nav('viptimeline')}>
          <div className="v-vip-ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-600)' }}><Icon name="bell" size={20} sw={1.7} /></div>
          <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>{t('concierge')} · {t('fastlane')}</div><div className="s">{lang === 'en' ? 'Ms. Hương · +84 94 552 028 · 24/7' : 'Ms. Hương · 094 552 028 · trực 24/7'}</div></div>
          <Icon name="chev" size={18} style={{ color: 'var(--vlf-ink-500)' }} />
        </div>
        {galaCard}
      </>)}

      {isGolfer && (<>
        <div className="v-sect" style={{ marginTop: 2 }}><h3>{t('prep')}</h3><a onClick={() => nav('prep')}>{t('viewAll')} ›</a></div>
        {(() => {
          const intl = persona === 'golfer_intl';
          const items = window.VLF.golferPrep.filter((x) => intl || (x.id !== 'visa' && x.id !== 'pickup' && x.id !== 'flight'));
          const done = items.filter((x) => x.done).length;
          return (
            <div className="v-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => nav('prep')}>
              <div className="v-vip-ic" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="shield" size={20} sw={1.7} /></div>
              <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>{T('Chuẩn bị & hậu cần', 'Prep & logistics')}</div><div className="s">{done}/{items.length} {T('mục sẵn sàng', 'items ready')}{intl ? T(' · visa · đón sân bay', ' · visa · pickup') : ''}</div></div>
              <Icon name="chev" size={18} style={{ color: 'var(--vlf-ink-500)' }} />
            </div>
          );
        })()}
        {(() => {
          const myTees = [];
          Object.entries(window.VLF.teeTimes).forEach(([dayId, gs]) => gs.forEach((g) => { if (g.g.includes(me.name)) myTees.push({ dayId, ...g }); }));
          if (!myTees.length) return null;
          return (<>
            <div className="v-sect"><h3>{T('Ngày thi đấu của tôi', 'My competition days')}</h3><a onClick={() => nav('compete', { sub: 'teetime' })}>{t('viewAll')} ›</a></div>
            <div className="v-card">
              {myTees.map((g, i) => {
                const day = window.VLF.teeDays.find((x) => x.id === g.dayId);
                return (
                  <div className="v-row" key={i} style={{ cursor: 'pointer' }} onClick={() => nav('compete', { sub: 'teetime' })}>
                    <div style={{ textAlign: 'center', flex: '0 0 auto' }}><div className="v-tee-time v-num" style={{ fontSize: 18 }}>{g.time}</div><div className="v-muted" style={{ fontSize: 10.5 }}>{day.dow} {day.date}</div></div>
                    <div style={{ flex: 1, minWidth: 0 }}><div className="t">{day.label} · {lang === 'en' ? 'Hole' : 'Hố'} {g.hole}</div><div className="s">{T('Cùng', 'With')} {g.g.filter((n) => n !== me.name).join(', ') || '—'}</div></div>
                    <Icon name="chev" size={18} className="chev" />
                  </div>
                );
              })}
            </div>
          </>);
        })()}
        {galaCard}
      </>)}

      {persona === 'guest' && (<>
        <div className="v-sect" style={{ marginTop: 2 }}><h3>{T('Vé & ngày tham dự', 'Pass & days')}</h3>{tickets && tickets.length > 0 && <a onClick={() => nav('ticket')}>{t('myticket')} ›</a>}</div>
        <div className="v-card" style={{ padding: 14, display: 'flex', gap: 12, cursor: 'pointer', alignItems: 'center' }} onClick={() => nav('ticket')}>
          <div className="v-vip-ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-600)' }}><Icon name="ticket" size={20} sw={1.7} /></div>
          <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>{tickets && tickets.length ? (lang === 'en' && tickets[0].nameEn ? tickets[0].nameEn : tickets[0].name) : T('Vé mời', 'Invitation')}</div><div className="s">{tickets && tickets.length ? tickets[0].span : T('Trọn giải · khán đài VIP', 'Full pass · VIP grandstand')}</div></div>
          <Icon name="chev" size={18} style={{ color: 'var(--vlf-ink-500)' }} />
        </div>
        {galaCard}
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '12px 2px 0' }}>{T('Khách mời có lịch trình riêng · liên hệ ban tổ chức để biết chi tiết đưa đón và chỗ ngồi.', 'Guests have a tailored itinerary · contact organisers for transport & seating.')}</p>
      </>)}

      {persona === 'spectator' && (<>
        <div className="v-sect" style={{ marginTop: 2 }}><h3>{T('Ngày bạn có thể đến', 'Days you can attend')}</h3></div>
        <div className="v-card" style={{ padding: 14 }}>
          <div className="t" style={{ fontWeight: 700 }}>{T('Vé khán giả theo ngày', 'Spectator tickets by day')}</div>
          <div className="s" style={{ marginTop: 4 }}>{T('T5 24/09 → CN 27/09 · hoặc Trọn giải', 'Thu 24 → Sun 27 Sep · or Full pass')}</div>
        </div>
        {(!tickets || !tickets.length) && (
          <button className="v-btn v-btn-primary" style={{ marginTop: 12, height: 46 }} onClick={() => nav('buy')}>{t('buy')}</button>
        )}
      </>)}

      <div className="v-mt-buy" style={{ marginTop: 14 }} onClick={() => setView('programme')}>
        <div className="ic"><Icon name="calendar" size={20} sw={1.8} /></div>
        <div className="tx"><div className="t">{T('Khung chương trình 7 ngày', 'Full 7-day programme')}</div><div className="s">{T('Toàn bộ hoạt động · thi đấu · dạ tiệc', 'All activities · competition · galas')}</div></div>
        <Icon name="chev" size={20} className="chev" />
      </div>
    </div>
  );
}

/* ---------- TIN NHẮN (L2) ---------- */
const MSG_ICON = { ticket: { ic: 'ticket', c: '#522367' }, schedule: { ic: 'calendar', c: '#3E8E7E' }, urgent: { ic: 'bell', c: '#C0392B' }, gala: { ic: 'gala', c: '#C9A24B' }, survey: { ic: 'survey', c: '#4E6CB0' } };
function Messages({ nav }) {
  const t = useT(); const lang = t.lang; const E = (o, k) => window.VLF.L(lang, o, k);
  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-pad">
        <div className="v-card" style={{ marginTop: 6 }}>
          {window.VLF.campaigns.map((m) => {
            const mi = MSG_ICON[m.kind] || MSG_ICON.ticket;
            return (
              <div className={'v-msg' + (m.kind === 'urgent' ? ' v-urgent' : '')} key={m.id} onClick={() => nav('message', { id: m.id })}>
                <div className="ic" style={{ background: mi.c }}><Icon name={mi.ic} size={20} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row1"><div className="ti">{E(m, 'title')}</div></div>
                  <div className="bd">{E(m, 'body')}</div>
                  <div className="ch">{m.channels.map((c) => <span className="v-chn" key={c}>{c}</span>)}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="v-sect"><h3>{t('support')}</h3></div>
        <div className="v-card">
          {window.VLF.faq.slice(0, 5).map((f, i) => (
            <div className="v-row" key={i} onClick={() => nav('faq', { i })}>
              <div style={{ flex: 1 }}><div className="t">{f.q}</div></div>
              <Icon name="chev" size={18} className="chev" />
            </div>
          ))}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, padding: '10px 2px 0', lineHeight: 1.5 }}>{lang === 'en' ? 'Unified inbox: Email · Zalo · WhatsApp · Messenger. AI bot on duty 22:00–07:00.' : 'Inbox gộp Email · Zalo · WhatsApp · Messenger. Bot AI trực đêm 22:00–07:00.'}</p>
      </div>
    </div>
  );
}

function MessageDetail({ id, nav }) {
  const t = useT(); const lang = t.lang; const E = (o, k) => window.VLF.L(lang, o, k);
  const m = window.VLF.campaigns.find((x) => x.id === id);
  if (!m) return null;
  const mi = MSG_ICON[m.kind] || MSG_ICON.ticket;
  const ctaGo = { ticket: ['ticket'], schedule: ['compete', { sub: 'teetime' }], urgent: ['compete', { sub: 'teetime' }], gala: ['rsvp'], survey: ['survey'] };
  return (
    <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%', paddingBottom: 96 }}>
      <div className="v-msg-detail" style={{ flex: 1 }}>
        <div className="ic" style={{ width: 48, height: 48, borderRadius: 13, background: mi.c, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}><Icon name={mi.ic} size={22} sw={1.7} /></div>
        {m.kind === 'urgent' && <span className="v-pill" style={{ background: 'rgba(192,57,43,.12)', color: 'var(--vlf-under)', marginBottom: 8 }}>{lang === 'en' ? 'Urgent · dual sign-off' : 'Khẩn · 2 chữ ký duyệt'}</span>}
        <div className={'ti' + (m.kind === 'urgent' ? ' v-score-under' : '')}>{E(m, 'title')}</div>
        <div className="when">{m.when} · {m.channels.join(' · ')}</div>
        <div className="bd">{E(m, 'body')}</div>
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" onClick={() => nav(...(ctaGo[m.kind] || ['back']))}>{E(m, 'cta')}</button></div>
    </div>
  );
}

function FaqDetail({ i }) {
  const t = useT();
  const f = window.VLF.faq[i];
  if (!f) return null;
  return (
    <div className="v-msg-detail">
      <div className="ti v-serif">{f.q}</div>
      <div className="when">Mẫu trả lời CSKH · song ngữ</div>
      <div className="v-card" style={{ padding: 16, marginBottom: 12 }}>
        <div className="v-tag" style={{ marginBottom: 8 }}>Tiếng Việt</div>
        <div className="bd" style={{ fontSize: 14.5 }}>{f.vi}</div>
      </div>
      <div className="v-card" style={{ padding: 16 }}>
        <div className="v-tag" style={{ marginBottom: 8 }}>English</div>
        <div className="bd" style={{ fontSize: 14.5 }}>{f.en}</div>
      </div>
    </div>
  );
}

/* ---------- TÀI KHOẢN / MY TOUR (L1) ---------- */
function Account({ persona, phase, setPhase, salePhase, setSalePhase, platform, setPlatform, switchPersona, nav, tickets, followed, lang, setLang, onSwitchPersona, orders }) {
  const t = useT();
  const T = (vi, en) => (lang === 'en' ? en : vi);
  const me = window.VLF.personas[persona].me;
  const pInfo = window.VLF.personas[persona];
  const followedList = window.VLF.players.filter((p) => followed.has(p.name));

  return (
    <div className="v-screen" style={{ paddingBottom: 'calc(60px + var(--zalo-safe-bottom))' }}>
      <div className="v-me-hero">
        <div className="row">
          <Ava name={me.name} size={56} style={{ background: 'rgba(255,255,255,.14)' }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2>{me.name}</h2>
            <div className="sub">{window.VLF.L(lang, pInfo, 'name')}{pInfo.sub ? ' · ' + window.VLF.L(lang, pInfo, 'sub') : ''}</div>
          </div>
        </div>
      </div>

      <div className="v-pad">
        {/* vé của tôi */}
        <div className="v-me-group">
          <div className="lbl">{t('myticket')}</div>
          <div className="v-card">
            <div className="v-row" onClick={() => nav('ticket')}>
              <div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="ticket" size={20} sw={1.7} /></div>
              <div style={{ flex: 1 }}>
                <div className="t">{tickets.length ? tickets[0].name : 'Chưa có vé'}</div>
                <div className="s">{tickets.length ? tickets[0].span + ' · ' + tickets.length + ' vé' : 'Mua hoặc kích hoạt vé mời'}</div>
              </div>
              <Icon name="chev" size={18} className="chev" />
            </div>
          </div>
        </div>

        {/* golfer theo dõi */}
        <div className="v-me-group">
          <div className="lbl">{t('following')} ({followedList.length})</div>
          <div className="v-card">
            {followedList.length === 0
              ? <div className="v-row"><div className="s" style={{ color: 'var(--vlf-ink-500)' }}>Chưa theo dõi golfer nào. Mở Players để thêm.</div></div>
              : followedList.map((p, i) => (
                <div className="v-prow" key={i} onClick={() => nav('golfer', { name: p.name })}>
                  <Ava name={p.name} size={38} />
                  <div style={{ flex: 1 }}><div className="nm" style={{ fontSize: 13.5 }}>{p.name}</div><div className="meta"><CountryDot cc={p.cc} /></div></div>
                  <Icon name="chev" size={18} className="chev" />
                </div>
              ))}
          </div>
        </div>

        {/* tiện ích */}
        <div className="v-me-group">
          <div className="lbl">{t('utilities')}</div>
          <div className="v-card">
            {(persona === 'golfer' || persona === 'golfer_intl') && (
              <div className="v-row" onClick={() => nav('prep')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="shield" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('prep')}</div><div className="s">{lang === 'en' ? 'Visa · flight · pickup · tee reminders' : 'Visa · lịch bay · đón sân bay · nhắc tee'}</div></div><Icon name="chev" size={18} className="chev" /></div>
            )}
            {persona === 'vip' && (
              <div className="v-row" onClick={() => nav('viptimeline')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="shield" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('vipDay')}</div><div className="s">{t('concierge')} · {t('fastlane')}</div></div><Icon name="chev" size={18} className="chev" /></div>
            )}
            {phase === 'live' && (
              <div className="v-row" onClick={() => nav('live')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(192,57,43,.1)', color: 'var(--vlf-under)' }}><Icon name="arrowR" size={20} sw={1.9} /></div><div style={{ flex: 1 }}><div className="t">{t('live')} & {t('highlights')}</div><div className="s">{lang === 'en' ? 'Livestream · live updates' : 'Livestream · diễn biến trực tiếp'}</div></div><Icon name="chev" size={18} className="chev" /></div>
            )}
            <div className="v-row" onClick={() => nav('messages')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="bell" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('messages')}</div><div className="s">{lang === 'en' ? '6 campaigns · bilingual support' : '6 chiến dịch · CSKH song ngữ'}</div></div><Icon name="chev" size={18} className="chev" /></div>
            <div className="v-row" onClick={() => nav('news')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="info" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('news')}</div><div className="s">{t('newsSide')}</div></div><Icon name="chev" size={18} className="chev" /></div>
            <div className="v-row" onClick={() => nav('village')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="village" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('village')}</div><div className="s">{lang === 'en' ? 'Fan Zone · food · Kids · merch' : 'Fan Zone · ẩm thực · Kids · quà'}</div></div><Icon name="chev" size={18} className="chev" /></div>
            <div className="v-row" onClick={() => nav('schedule')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="calendar" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('schedule')}</div><div className="s">{lang === 'en' ? '7-day programme' : 'Khung chương trình 7 ngày'}</div></div><Icon name="chev" size={18} className="chev" /></div>
            <div className="v-row" onClick={() => nav('map')}><div className="ic" style={{ width: 42, height: 42, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="map" size={20} sw={1.7} /></div><div style={{ flex: 1 }}><div className="t">{t('nav_map')}</div><div className="s">{lang === 'en' ? 'Event map & touchpoints' : 'Bản đồ sự kiện & điểm chạm'}</div></div><Icon name="chev" size={18} className="chev" /></div>
          </div>
        </div>

        {/* ngôn ngữ */}
        <div className="v-me-group">
          <div className="lbl"><Icon name="globe" size={13} sw={2} style={{ verticalAlign: '-2px', marginRight: 5 }} />Ngôn ngữ</div>
          <div className="v-lang">
            <button className={lang === 'vi' ? 'on' : ''} onClick={() => setLang('vi')}>Tiếng Việt</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>English</button>
          </div>
        </div>

        {/* cài đặt bản demo — đổi nền tảng / giai đoạn / vai trò ngay trên điện thoại */}
        <div className="v-me-group">
          <div className="lbl"><Icon name="survey" size={13} sw={2} style={{ verticalAlign: '-2px', marginRight: 5 }} />{T('Cài đặt bản demo', 'Demo settings')}</div>
          <div className="v-card" style={{ padding: 14 }}>
            <div className="v-dfield">
              <div className="dlbl">{T('Loại ứng dụng', 'App type')}</div>
              <div className="v-dseg">
                <button className={platform === 'zalo' ? 'on' : ''} onClick={() => setPlatform('zalo')}><b>Zalo Mini App</b><small>{T('trong Zalo', 'in Zalo')}</small></button>
                <button className={platform === 'ios' ? 'on' : ''} onClick={() => setPlatform('ios')}><b>iOS App</b><small>App Store</small></button>
                <button className={platform === 'android' ? 'on' : ''} onClick={() => setPlatform('android')}><b>Android</b><small>Play Store</small></button>
              </div>
            </div>
            <div className="v-dfield">
              <div className="dlbl">{T('Giai đoạn giải', 'Tournament phase')}</div>
              <div className="v-dseg">
                <button className={phase === 'pre' ? 'on' : ''} onClick={() => setPhase('pre')}><b>{T('Trước giải', 'Pre')}</b><small>{T('đếm ngược · vé', 'countdown')}</small></button>
                <button className={phase === 'live' ? 'on' : ''} onClick={() => setPhase('live')}><b>{T('Trong giải', 'Live')}</b><small>leaderboard</small></button>
                <button className={phase === 'post' ? 'on' : ''} onClick={() => setPhase('post')}><b>{T('Sau giải', 'Post')}</b><small>{T('kết quả · ảnh', 'results')}</small></button>
              </div>
            </div>
            <div className="v-dfield">
              <div className="dlbl">{T('Giai đoạn mở bán vé', 'Ticket sale phase')}</div>
              <div className="v-dseg">
                <button className={salePhase === 'gift' ? 'on' : ''} onClick={() => setSalePhase('gift')}><b>{T('Vé tặng', 'Gift')}</b><small>{T('3 ngày · ngược', '3 days')}</small></button>
                <button className={salePhase === 'early' ? 'on' : ''} onClick={() => setSalePhase('early')}><b>Early Bird</b><small>−20%</small></button>
                <button className={salePhase === 'standard' ? 'on' : ''} onClick={() => setSalePhase('standard')}><b>{T('Giá chính thức', 'Standard')}</b><small>standard</small></button>
              </div>
            </div>
            <div className="v-dfield" style={{ marginBottom: 0 }}>
              <div className="dlbl">{T('Vai trò (persona) — chọn để reset đúng vai trò', 'Role (persona) — resets to that role')}</div>
              <div className="v-dsel-wrap">
                <select className="v-dsel" value={persona} onChange={(e) => switchPersona(e.target.value)}>
                  <option value="golfer">{T('Golfer nội địa', 'Golfer · domestic')}</option>
                  <option value="golfer_intl">{T('Golfer quốc tế', "Golfer · int'l")}</option>
                  <option value="guest">{T('Khách mời', 'Guest')}</option>
                  <option value="spectator">{T('Khán giả', 'Spectator')}</option>
                  <option value="vip">{T('VIP & Chính Quyền', 'VIP & Government')}</option>
                </select>
                <Icon name="chev" size={16} sw={2} className="v-dsel-chev" />
              </div>
            </div>
          </div>
          <p className="v-muted" style={{ fontSize: 11, lineHeight: 1.5, padding: '8px 2px 0' }}>{T('Khu điều khiển bản demo — đổi nền tảng, giai đoạn, vai trò để xem mọi trạng thái ngay trên điện thoại.', 'Demo controls — switch platform, phase and role to preview every state right on a phone.')}</p>
        </div>

        <button className="v-btn v-btn-ghost" onClick={onSwitchPersona}>{t('changeRole')}</button>
        <p className="v-muted" style={{ fontSize: 11, textAlign: 'center', lineHeight: 1.5, marginTop: 12 }}>
          {lang === 'en' ? 'Indicated by UBND Đà Nẵng · Vietnam Legends Festival 2026' : 'Chỉ đạo: UBND TP Đà Nẵng · Vietnam Legends Festival 2026'}
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { Schedule, MySchedule, Messages, MessageDetail, FaqDetail, Account, SponsorDetail, DivisionRule });

/* ---------- ĐIᡲU Lᡸ THI ĐẤU (L2 · comprule) ---------- */
function DivisionRule({ id, nav }) {
  const t = useT(); const lang = t.lang;
  const LL = (o) => (o ? (lang === 'en' ? o.en : o.vi) : '');
  const rules = window.VLF.divRules;
  const idx = Math.max(0, rules.findIndex((r) => r.id === id));
  const rule = rules[idx] || rules[0];
  const aw = window.VLF.awardGroups[idx];
  const resultMap = { legends: ['final'], amateurs: ['le1', 'le2', 'final'], alliance: ['le1', 'le2'], proam: ['pa1', 'pa2'], side: [] };
  const results = (resultMap[rule.id] || []).map((rid) => window.VLF.results.find((r) => r.id === rid)).filter(Boolean);

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-pad">
        <div className="v-card" style={{ padding: '14px 15px', borderTop: '3px solid ' + rule.accent, marginTop: 8 }}>
          <span className="v-pill" style={{ background: rule.accent + '22', color: rule.accent }}>{rule.tier === 'side' ? (lang === 'en' ? 'Side board' : 'Bảng phụ') : (lang === 'en' ? 'Main division' : 'Bảng chính')}</span>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, marginTop: 8, lineHeight: 1.25 }}>{LL(rule.name)}</div>
        </div>

        <div className="v-sect"><h3>{lang === 'en' ? 'Format & rules' : 'Thể thức & điều lệ'}</h3></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {rule.rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '11px 0', borderTop: i ? '1px solid var(--vlf-line)' : 'none' }}>
              <div style={{ flex: '0 0 98px', fontSize: 12, fontWeight: 700, color: 'var(--vlf-ink-500)' }}>{LL(r.l)}</div>
              <div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.45 }}>{LL(r.v)}</div>
            </div>
          ))}
        </div>

        {rule.id === 'side' && (<>
          <div className="v-sect"><h3>{lang === 'en' ? '5 skills stations' : '5 trạm kỹ thuật'}</h3></div>
          <div className="v-card" style={{ padding: '2px 14px' }}>
            {window.VLF.stations.map((s, i) => (
              <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderTop: i ? '1px solid var(--vlf-line)' : 'none' }}>
                <div style={{ width: 38, height: 38, borderRadius: 11, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: s.accent }}><Icon name={s.ic} size={19} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontWeight: 700, fontSize: 14 }}>{s.name}</div><div style={{ fontSize: 12, color: 'var(--vlf-ink-500)', marginTop: 2 }}>{window.VLF.L(lang, s, 'sub')}</div></div>
                <span className="v-tag">{i + 1}/5</span>
              </div>
            ))}
          </div>
          <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '10px 2px 0' }}>{window.VLF.stationsNote[lang] || window.VLF.stationsNote.vi}</p>
        </>)}

        {aw && (<>
          <div className="v-sect"><h3>{lang === 'en' ? 'Awards structure' : 'Cơ cấu giải thưởng'}</h3></div>
          <div className="v-card" style={{ padding: '13px 14px' }}>
            <div style={{ fontWeight: 700, fontSize: 13 }}>{LL(aw.title)}</div>
            <div className="v-awgrid">{aw.items.map((a, i) => <span className="v-awchip" key={i}>{LL(a)}</span>)}</div>
          </div>
        </>)}

        {results.length > 0 && (<>
          <div className="v-sect"><h3>{lang === 'en' ? 'Winners (demo)' : 'Bảng điểm người thắng (demo)'}</h3></div>
          {results.map((d) => (
            <div className="v-card v-res" key={d.id} style={{ marginBottom: 11, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 9, marginBottom: 9, flexWrap: 'wrap' }}>
                <span className="v-pill" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}>{d.dow} · {d.date}</span>
                <span style={{ fontSize: 11.5, color: 'var(--vlf-ink-500)', fontWeight: 600, lineHeight: 1.35 }}>{LL(d.fmt)}</span>
              </div>
              {d.teams && d.teams.map((tm) => (
                <div className="v-res-row" key={tm.pos}><b className={tm.pos === 1 ? 'win' : ''}>{tm.pos}</b><span className="nm">{tm.name}</span><span className="sc">{tm.sc}</span></div>
              ))}
              {d.legends && d.legends.map((g) => (
                <div className="v-res-row" key={g.pos}><b className={g.pos === 1 ? 'win' : ''}>{g.pos}</b><span className="nm">{g.name} <i className="cc">{g.cc}</i></span><span className="sc">{g.sc}</span></div>
              ))}
              {d.qualTitle && <div className="v-res-qt">{LL(d.qualTitle)}</div>}
              {d.qual && <div className="v-res-qual">{d.qual.map((q, i) => <span className="q" key={i}>{q.name}{q.tag ? ' · ' + q.tag : ''} <b>{q.pts}</b></span>)}</div>}
              {d.skills && <div className="v-res-sk">{d.skills.map((sk, i) => <div className="skrow" key={i}><span>{LL(sk.k)}</span><b>{sk.who}</b></div>)}</div>}
            </div>
          ))}
        </>)}
      </div>
    </div>
  );
}

function SponsorDetail({ id }) {
  const t = useT(); const lang = t.lang; const E = (o, k) => window.VLF.L(lang, o, k);
  const s = window.VLF.sponsors.find((x) => x.id === id) || window.VLF.sponsors[0];
  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-feat" style={{ height: 150, borderRadius: 0 }}>
        <div className="ov" />
        <div className="tx"><span className="v-pill v-pill-gold" style={{ marginBottom: 7 }}>{E(s, 'tag')}</span><h4 style={{ fontSize: 24 }}>{s.name}</h4></div>
      </div>
      <div className="v-pad">
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', margin: '4px 0 14px' }}>
          <div className="v-logo" style={{ flex: '0 0 72px', aspectRatio: '1', borderColor: 'var(--vlf-purple-100)' }}><span style={{ color: 'var(--vlf-purple-700)' }}>{s.name}</span></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 16 }}>{s.name}</div><div className="v-muted" style={{ fontSize: 12.5, marginTop: 2 }}>{E(s, 'tag')} · Vietnam Legends Festival 2026</div></div>
        </div>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--vlf-ink-700)', margin: 0 }}>{E(s, 'blurb')}</p>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, marginTop: 16 }}>{lang === 'en' ? 'Sponsor information is shown inside the app — no external link.' : 'Thông tin nhà tài trợ hiển thị ngay trong ứng dụng — không thoát ra web ngoài.'}</p>
      </div>
    </div>
  );
}