/* ============================================================
   VLF 2026 · EXTRA SCREENS
   Live · News/Article · Village · GolferPrep · VipTimeline
   GalaRSVP · Survey · Transfer · Attendees
   ============================================================ */
const KIND_COLOR = { sport: '#C9A24B', exp: '#3E8E7E', gala: '#A878BE', vip: '#C9A24B', move: '#6B3486' };

/* ---------- LIVE: livestream + diễn biến + highlights (L2) ---------- */
function Live({ 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-video">
          <div className="badge"><span className="v-live" style={{ color: '#fff' }}><i />{t('live')}</span></div>
          <div className="views v-num">12.4K {lang === 'en' ? 'watching' : 'đang xem'}</div>
          <div className="play"><Icon name="arrowR" size={26} sw={2} style={{ marginLeft: 3 }} /></div>
          <div className="cap">Legends 1 · {lang === 'en' ? 'Featured group' : 'Nhóm tâm điểm'} · Montgomerie Links</div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <button className="v-btn v-btn-primary" style={{ height: 46 }}><Icon name="arrowR" size={18} sw={2} />{t('watchLive')}</button>
          <button className="v-btn v-btn-ghost" style={{ height: 46, width: 'auto', padding: '0 16px' }} onClick={() => nav('compete', { sub: 'leaderboard' })}>{t('leaderboard')}</button>
        </div>

        <div className="v-sect"><h3>{t('liveUpdates')}</h3><span className="v-live" style={{ color: 'var(--vlf-under)', fontSize: 10.5 }}><i style={{ background: 'var(--vlf-under)' }} />{t('live')}</span></div>
        <div className="v-card">
          {window.VLF.liveUpdates.map((u, i) => {
            const dd = window.VLF.divById(u.tag);
            return (
              <div className="v-row" key={i} style={{ cursor: 'default', alignItems: 'flex-start' }}>
                <div style={{ flex: '0 0 64px', width: 64, textAlign: 'center', paddingTop: 1 }}>
                  <div className="v-num" style={{ fontWeight: 700, fontSize: 14, color: 'var(--vlf-purple-700)' }}>{u.time}</div>
                  {dd && <span className="v-tag" style={{ color: dd.accent, marginTop: 5, display: 'inline-block', maxWidth: '100%', whiteSpace: 'normal', lineHeight: 1.15, textAlign: 'center' }}>{dd.shortName}</span>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5, fontWeight: 500 }}>{E(u, 'text')}</div></div>
              </div>);

          })}
        </div>

        <div className="v-sect"><h3>{t('highlights')}</h3></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {window.VLF.highlights.map((h, i) =>
          <div className="v-card" key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 10, cursor: 'pointer' }}>
              <div className="v-hl-thumb"><Icon name="arrowR" size={18} sw={2} style={{ marginLeft: 2 }} /><span className="dur v-num">{h.dur}</span></div>
              <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.3 }}>{E(h, 'title')}</div></div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

/* ---------- NEWS helpers ---------- */
const NEWS_CAT = {
  'Trước giải': { accent: '#4E6CB0', ic: 'info' },
  'Tin giải': { accent: '#C9A24B', ic: 'trophy' },
  'Trải nghiệm': { accent: '#3E8E7E', ic: 'village' },
  'Dạ tiệc': { accent: '#6B3486', ic: 'gala' }
};
function newsCat(a) {return NEWS_CAT[a.tag] || { accent: '#6B3486', ic: a.ic || 'bell' };}
function newsDateVal(a) {const p = (a.date || '01/01').split('/').map(Number);return (p[1] || 0) * 100 + (p[0] || 0);}
function newsSorted() {return [...window.VLF.news].sort((x, y) => newsDateVal(y) - newsDateVal(x));}
function readMins(a, lang) {
  const E = (o, k) => window.VLF.L(lang, o, k);
  const txt = [E(a, 'lede'), ...(E(a, 'body') || [])].join(' ');
  return Math.max(1, Math.round(txt.trim().split(/\s+/).length / 160));
}

/* compact list row — dùng cho list & "đọc tiếp" */
function NewsRow({ a, lang, onClick, small }) {
  const E = (o, k) => window.VLF.L(lang, o, k);
  const cc = newsCat(a);
  return (
    <div className="v-nrow" onClick={onClick}>
      <div className="v-nthumb" style={{ '--acc': cc.accent }}><Icon name={cc.ic} size={small ? 18 : 20} /></div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="v-ntag" style={{ color: cc.accent }}>{E(a, 'tag')}</div>
        <div className="t" style={{ fontSize: small ? 13.5 : 14, fontWeight: 600, lineHeight: 1.3, marginTop: 2 }}>{E(a, 'title')}</div>
        {!small &&
        <div className="v-meta" style={{ marginTop: 5 }}><span className="v-num">{a.date}/2026</span><span className="d">·</span><span>{readMins(a, lang)} {lang === 'en' ? 'min' : 'phút'}</span></div>
        }
      </div>
      <span className="chev"><Icon name="chev" size={small ? 16 : 17} /></span>
    </div>);

}

/* ---------- NEWS list (L2) ---------- */
function News({ nav }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const T = (vi, en) => lang === 'en' ? en : vi;
  const [cat, setCat] = React.useState('all');

  const all = newsSorted();
  const cats = [];
  all.forEach((a) => {if (!cats.includes(a.tag)) cats.push(a.tag);});
  const list = cat === 'all' ? all : all.filter((a) => a.tag === cat);
  const hero = list[0];const rest = list.slice(1);

  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-pad" style={{ paddingBottom: 6 }}>
        <div className="v-chips">
          <div className={'v-chip' + (cat === 'all' ? ' on' : '')} onClick={() => setCat('all')}>
            {T('Tất cả', 'All')}<span className="v-chip-n">{all.length}</span>
          </div>
          {cats.map((c) => {
            const cc = NEWS_CAT[c] || {};
            const n = all.filter((a) => a.tag === c).length;
            return (
              <div key={c} className={'v-chip' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>
                <span className="dot" style={{ background: cc.accent }} />{E(all.find((a) => a.tag === c), 'tag')}<span className="v-chip-n">{n}</span>
              </div>);

          })}
        </div>
      </div>

      <div className="v-pad" style={{ paddingTop: 4, display: 'flex', flexDirection: 'column', gap: 13 }}>
        {hero &&
        <div className="v-card" style={{ overflow: 'hidden', cursor: 'pointer' }} onClick={() => nav('article', { id: hero.id })}>
            <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(hero, 'tag')}</span><h4>{E(hero, 'title')}</h4></div>
            </div>
            <div style={{ padding: '12px 14px' }}>
              <div className="v-muted" style={{ fontSize: 12.5, lineHeight: 1.45 }}>{E(hero, 'lede')}</div>
              <div className="v-meta" style={{ marginTop: 9 }}><span className="v-num">{hero.date}/2026</span><span className="d">·</span><span>{readMins(hero, lang)} {T('phút đọc', 'min read')}</span></div>
            </div>
          </div>
        }
        {rest.length > 0 &&
        <div className="v-card">
            {rest.map((a) => <NewsRow key={a.id} a={a} lang={lang} onClick={() => nav('article', { id: a.id })} />)}
          </div>
        }
      </div>
    </div>);

}

/* ---------- ARTICLE detail (L2) ---------- */
function Article({ id, nav }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const T = (vi, en) => lang === 'en' ? en : vi;
  const a = window.VLF.news.find((x) => x.id === id);
  if (!a) return null;

  // gợi ý đọc tiếp: ưu tiên cùng chủ đề → mới nhất
  const others = newsSorted().filter((x) => x.id !== id);
  const ranked = [...others.filter((x) => x.tag === a.tag), ...others.filter((x) => x.tag !== a.tag)];
  const up = ranked[0];const more = ranked.slice(1, 3);
  const sameTopic = up && up.tag === a.tag;

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-feat" style={{ height: 180, borderRadius: 0 }}>
        <div className="ov" />
        <div className="tx"><span className="v-pill v-pill-gold" style={{ marginBottom: 7 }}>{E(a, 'tag')}</span><h4 style={{ fontSize: 22 }}>{E(a, 'title')}</h4></div>
      </div>
      <div className="v-pad">
        <div className="v-meta" style={{ margin: '4px 0 14px' }}>
          <span className="v-num">{a.date}/2026</span><span className="d">·</span><span>{readMins(a, lang)} {T('phút đọc', 'min read')}</span><span className="d">·</span><span>Vietnam Legends Festival</span>
        </div>
        <p style={{ fontSize: 15.5, lineHeight: 1.55, fontWeight: 600, color: 'var(--vlf-ink-900)', margin: '0 0 16px' }}>{E(a, 'lede')}</p>
        {E(a, 'body').map((p, i) =>
        <p key={i} style={{ fontSize: 14.5, lineHeight: 1.62, color: 'var(--vlf-ink-700)', margin: '0 0 14px' }}>{p}</p>
        )}

        {up &&
        <React.Fragment>
            <div className="v-sect" style={{ marginTop: 26 }}><h3>{T('Đọc tiếp', 'Read next')}</h3></div>
            <div className="v-readnext" onClick={() => nav('article', { id: up.id })}>
              <div className="v-feat" style={{ height: 116, borderRadius: 0 }}>
                <div className="ov" />
                <div className="tx">
                  <span className="v-pill v-pill-gold" style={{ marginBottom: 6 }}>{sameTopic ? T('Cùng chủ đề', 'Same topic') : T('Bài tiếp theo', 'Up next')}</span>
                  <h4 style={{ fontSize: 17 }}>{E(up, 'title')}</h4>
                </div>
              </div>
              <div className="rn-foot">
                <span className="v-num">{up.date}/2026 · {readMins(up, lang)} {T('phút đọc', 'min read')}</span>
                <span className="go">{T('Đọc', 'Read')} <Icon name="arrowR" size={15} /></span>
              </div>
            </div>
            {more.length > 0 &&
          <div className="v-card" style={{ marginTop: 12 }}>
                {more.map((m) => <NewsRow key={m.id} a={m} lang={lang} small onClick={() => nav('article', { id: m.id })} />)}
              </div>
          }
          </React.Fragment>
        }
      </div>
    </div>);

}

/* ---------- VLF VILLAGE (L2) ---------- */
function Village({ nav }) {
  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 hours = {
    fan: T('Sân khấu hoàng hôn từ 17:30', 'Sunset stage from 17:30'),
    food: '10:00 – 22:00',
    kids: '09:00 – 18:00',
    merch: '09:00 – 18:00',
    luxury: T('Trưng bày theo lịch · có hẹn riêng', 'Scheduled showcase · by appointment')
  };
  const shows = [
  { tm: '17:30', n: T('DJ & acoustic hoàng hôn', 'Sunset DJ & acoustic') },
  { tm: '19:00', n: T('Ban nhạc khách mời', 'Guest live band') },
  { tm: '20:30', n: T('Trình diễn nghệ thuật', 'Art performance') }];

  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-feat" style={{ height: 156, borderRadius: 0 }}>
        <div className="ov" />
        <div className="tx">
          <span className="v-pill v-pill-gold" style={{ marginBottom: 7 }}>3.000+ {lang === 'en' ? 'visitors/day' : 'khách/ngày'}</span>
          <h4 style={{ fontSize: 23 }}>VLF Village</h4>
          <p>{lang === 'en' ? 'The festival’s experience hub — open all 6 days' : 'Trái tim trải nghiệm của lễ hội — mở cửa cả 6 ngày'}</p>
        </div>
      </div>
      <div className="v-pad">
        {/* cửa hàng lưu niệm — nổi bật */}
        <div className="v-card" style={{ overflow: 'hidden', cursor: 'pointer', marginTop: 2 }} onClick={() => nav('shop')}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14 }}>
            <div style={{ width: 46, height: 46, borderRadius: 13, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-700)', color: 'var(--vlf-gold-300)' }}><Icon name="ticket" size={22} sw={1.7} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t" style={{ fontSize: 15, fontWeight: 700 }}>{T('Cửa hàng lưu niệm', 'Official store')}</div>
              <div className="s">{T('Đặt quà chính hãng · giao tận nơi / nhận tại sự kiện', 'Order official merch · ship or pick up')}</div>
            </div>
            <Icon name="chev" size={20} style={{ color: 'var(--vlf-ink-500)' }} />
          </div>
          <div style={{ display: 'flex', gap: 0 }}>
            {window.VLF.shop.slice(0, 3).map((p) =>
            <div key={p.id} style={{ flex: 1, height: 64, background: 'linear-gradient(150deg,' + p.tint + ',#1F0D26)' }} />
            )}
          </div>
        </div>

        <div className="v-sect"><h3>{T('Khu trải nghiệm', 'Experience zones')}</h3></div>
        <div className="v-card">
          {window.VLF.village.map((z, i) =>
          <div className="v-vz" key={i} style={{ cursor: 'pointer' }} onClick={() => nav('villagezone', { id: z.id })}>
              <div className="ic" style={{ color: z.accent }}><Icon name={z.ic} size={22} sw={1.7} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="nm">{E(z, 'name')}</div>
                <div className="ds">{E(z, 's')}</div>
                {hours[z.id] && <div className="hr">{hours[z.id]}</div>}
              </div>
              <Icon name="chev" size={18} style={{ color: 'var(--vlf-ink-500)', alignSelf: 'center', flex: '0 0 auto' }} />
            </div>
          )}
        </div>

        <div className="v-sect"><h3>{T('Sân khấu hoàng hôn', 'Sunset stage')}</h3><span className="v-muted" style={{ fontSize: 12 }}>Fan Zone</span></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {shows.map((s, i) =>
          <div className="v-row" key={i} style={{ cursor: 'default' }}>
              <div className="v-tee-time v-num" style={{ fontSize: 17, flex: '0 0 52px', textAlign: 'center' }}>{s.tm}</div>
              <div style={{ flex: 1 }}><div className="t" style={{ fontSize: 14 }}>{s.n}</div></div>
            </div>
          )}
        </div>

        <button className="v-btn v-btn-ghost" style={{ marginTop: 14 }} onClick={() => nav('map', { focusZone: 'village' })}><Icon name="map" size={18} sw={1.7} />{lang === 'en' ? 'See on event map' : 'Xem trên bản đồ sự kiện'}</button>
      </div>
    </div>);

}

/* ---------- VILLAGE ZONE DETAIL (L2) ---------- */
const VZ_DETAIL = {
  fan: { hero: '#C9A24B', tagline: { vi: 'Trung tâm sôi động của lễ hội', en: 'The festival’s buzzing heart' },
    about: { vi: 'Sân khấu hoàng hôn với màn hình khổng lồ tường thuật trực tiếp, khu cổ vũ, photo-op và DJ mỗi tối. Nơi khán giả tụ họp sau giờ thi đấu.', en: 'A sunset stage with a giant live-broadcast screen, cheer zone, photo-ops and a nightly DJ — where fans gather after play.' },
    points: { vi: ['Màn hình LED 40m² tường thuật trực tiếp', 'Khu check-in & photo-op chính thức', 'DJ và ban nhạc khách mời mỗi tối', 'Quầy đồ uống & ghế lounge'], en: ['40m² LED live-broadcast wall', 'Official check-in & photo-op', 'Nightly DJ and guest bands', 'Drinks bar & lounge seating'] } },
  food: { hero: '#D08A3E', tagline: { vi: 'Tinh hoa ẩm thực Đà Nẵng – Hội An', en: 'The best of Da Nang – Hoi An cuisine' },
    about: { vi: 'Hơn 20 gian hàng đặc sản miền Trung, khu bia thủ công và quầy cà phê đặc sản, phục vụ liên tục từ sáng tới khuya.', en: 'Over 20 Central-Vietnam specialty stalls, a craft-beer garden and a specialty-coffee bar, served from morning to late night.' },
    points: { vi: ['20+ gian hàng đặc sản miền Trung', 'Khu bia thủ công & cà phê đặc sản', 'Khu vực chỗ ngồi có mái che', 'Thanh toán không tiền mặt'], en: ['20+ Central-Vietnam specialty stalls', 'Craft-beer & specialty-coffee bar', 'Covered seating area', 'Cashless payment'] } },
  kids: { hero: '#3E8E7E', tagline: { vi: 'Sân chơi cho cả gia đình', en: 'A playground for the whole family' },
    about: { vi: 'Khu golf mini, trò chơi vận động, lớp học golf nhập môn cho trẻ và khu vẽ tranh — để phụ huynh yên tâm thưởng thức giải.', en: 'A mini-golf course, active games, a kids’ intro-golf clinic and an art corner — so parents can enjoy the tournament.' },
    points: { vi: ['Golf mini 9 hố cho trẻ em', 'Lớp golf nhập môn (có HLV)', 'Khu vẽ tranh & trò chơi vận động', 'Nhân viên trông trẻ hỗ trợ'], en: ['9-hole kids mini-golf', 'Intro-golf clinic (with coach)', 'Art corner & active games', 'Supervising staff on hand'] } },
  merch: { hero: '#6B3486', tagline: { vi: 'Quà lưu niệm chính hãng VLF 2026', en: 'Official VLF 2026 merchandise' },
    about: { vi: 'Toàn bộ bộ sưu tập quà chính thức: áo, mũ, bóng và phụ kiện giới hạn. Mua tại quầy hoặc đặt ngay trong ứng dụng, nhận tại sự kiện hoặc giao tận nơi.', en: 'The full official collection: apparel, caps, balls and limited accessories. Buy at the booth or order in-app for pickup or delivery.' },
    points: { vi: ['Bộ sưu tập áo · mũ · bóng · phụ kiện', 'Phiên bản giới hạn có đánh số', 'Đặt trong app · nhận tại sự kiện', 'Giao tận nơi toàn quốc'], en: ['Apparel · caps · balls · accessories', 'Numbered limited editions', 'Order in-app · pick up on site', 'Nationwide delivery'] }, shop: true },
  luxury: { hero: '#4E6CB0', tagline: { vi: 'Không gian trưng bày thượng lưu', en: 'A premium lifestyle showcase' },
    about: { vi: 'Khu trưng bày xe sang, đồng hồ và các thương hiệu lifestyle cao cấp đồng hành cùng giải, mở cửa theo lịch và có hẹn riêng cho khách VIP.', en: 'A showcase of luxury cars, watches and premium lifestyle partners, open on schedule with private VIP appointments.' },
    points: { vi: ['Trưng bày xe sang & siêu xe', 'Bộ sưu tập đồng hồ cao cấp', 'Tư vấn riêng cho khách VIP', 'Khu tiếp khách lounge riêng'], en: ['Luxury & supercar display', 'High-end watch collection', 'Private VIP consultation', 'Dedicated lounge'] } }
};
function VillageZone({ id, nav }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const VZ_MAP = { fan: 'stage', food: 'beer', kids: 'activation', merch: 'village', luxury: 'village' };
  const mapZone = VZ_MAP[id] || 'village';
  const z = window.VLF.village.find((x) => x.id === id) || window.VLF.village[0];
  const d = VZ_DETAIL[id] || VZ_DETAIL.fan;
  const hours = { fan: T('Sân khấu từ 17:30', 'Stage from 17:30'), food: '10:00 – 22:00', kids: '09:00 – 18:00', merch: '09:00 – 18:00', luxury: T('Theo lịch · có hẹn riêng', 'Scheduled · by appointment') };
  return (
    <div className="v-screen" style={{ paddingBottom: d.shop ? 92 : 24 }}>
      <div className="v-feat" style={{ height: 150, borderRadius: 0, background: 'linear-gradient(150deg,' + d.hero + ',#1F0D26)' }}>
        <div className="ov" />
        <div className="tx"><span className="v-pill v-pill-gold" style={{ marginBottom: 7 }}>VLF Village</span><h4 style={{ fontSize: 23 }}>{window.VLF.L(lang, z, 'name')}</h4><p>{d.tagline[lang] || d.tagline.vi}</p></div>
      </div>
      <div className="v-pad">
        <div className="v-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, marginTop: 2 }}>
          <div style={{ width: 46, height: 46, borderRadius: 13, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: z.accent }}><Icon name={z.ic} size={22} sw={1.7} /></div>
          <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>{T('Giờ mở cửa', 'Opening hours')}</div><div className="s">{hours[id]}</div></div>
          <button className="v-pill v-pill-purple" style={{ border: 'none', cursor: 'pointer' }} onClick={() => nav('map', { focusZone: mapZone })}><Icon name="pin" size={13} sw={2} />{T('Bản đồ', 'Map')}</button>
        </div>

        <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--vlf-ink-700)', margin: '16px 0 0' }}>{d.about[lang] || d.about.vi}</p>

        <div className="v-sect"><h3>{T('Điểm nổi bật', 'Highlights')}</h3></div>
        <div className="v-card" style={{ padding: '6px 14px' }}>
          {(d.points[lang] || d.points.vi).map((p, i) =>
          <div className="v-perk" key={i} style={{ padding: '9px 0' }}><Icon name="check" size={16} sw={2.4} />{p}</div>
          )}
        </div>

        {!d.shop &&
        <button className="v-btn v-btn-ghost" style={{ marginTop: 14 }} onClick={() => nav('map', { focusZone: mapZone })}><Icon name="map" size={18} sw={1.7} />{T('Xem trên bản đồ sự kiện', 'See on event map')}</button>
        }
      </div>
      {d.shop &&
      <div className="v-cta"><button className="v-btn v-btn-primary" onClick={() => nav('shop')}><Icon name="ticket" size={18} sw={1.7} />{T('Vào cửa hàng lưu niệm', 'Enter the store')}</button></div>
      }
    </div>);

}

/* ---------- GOLFER PREP — hậu cần (L2) ---------- */
function GolferPrep({ nav, intl }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  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-screen" style={{ paddingBottom: 24 }}>
      <div className="v-gd-hero" style={{ paddingBottom: 18 }}>
        <span className="v-pill" style={{ background: 'rgba(201,162,75,.2)', color: 'var(--vlf-gold-300)' }}>{lang === 'en' ? 'Logistics' : 'Hậu cần'}</span>
        <h2 style={{ fontSize: 22, margin: '12px 0 4px' }}>{lang === 'en' ? 'Prepare for VLF 2026' : 'Chuẩn bị cho VLF 2026'}</h2>
        <div style={{ fontSize: 12.5, opacity: .82 }}>{done}/{items.length} {lang === 'en' ? 'steps ready' : 'mục đã sẵn sàng'} · {lang === 'en' ? 'reminders via Zalo / WhatsApp' : 'nhắc qua Zalo / WhatsApp'}</div>
      </div>
      <div className="v-pad">
        <div className="v-card">
          {items.map((it, i) =>
          <div className="v-row" key={i} style={{ cursor: 'default', alignItems: 'flex-start' }}>
              <div className={'v-prep-ic' + (it.done ? ' done' : '')}><Icon name={it.done ? 'check' : it.ic} size={18} sw={it.done ? 2.4 : 1.7} fill={false} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{E(it, 't')}{it.done && <span className="v-tag" style={{ color: '#3E8E7E', background: 'rgba(62,142,126,.12)' }}>{t('verified')}</span>}</div>
                <div className="s">{E(it, 's')}</div>
              </div>
              {it.id === 'pickup' && <Icon name="arrowR" size={18} className="chev" />}
            </div>
          )}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.55, padding: '12px 2px 0' }}>{lang === 'en' ? 'International golfers use WhatsApp; Vietnamese golfers use Zalo. A liaison supports you 1-1 throughout the week.' : 'Khách quốc tế dùng WhatsApp; khách Việt dùng Zalo. Có liaison hỗ trợ 1-1 suốt tuần lễ hội.'}</p>
      </div>
    </div>);

}

/* ---------- VIP TIMELINE (L2) ---------- */
function VipTimeline({ 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={{ padding: 14, display: 'flex', gap: 11, marginTop: 6 }}>
          <div className="v-vip-ic"><Icon name="shield" size={20} sw={1.7} /></div>
          <div style={{ flex: 1 }}><div className="t" style={{ fontWeight: 700 }}>{t('fastlane')}</div><div className="s">{lang === 'en' ? 'Dedicated entry lane at all VIP/Hospitality gates' : 'Lối vào riêng tại mọi cổng VIP/Hospitality'}</div></div>
        </div>
        <div className="v-card" style={{ padding: 14, display: 'flex', gap: 11, marginTop: 11, cursor: 'pointer' }}>
          <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')}</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="arrowR" size={18} className="chev" />
        </div>

        <div className="v-sect"><h3>{t('vipDay')}</h3><span className="v-muted" style={{ fontSize: 12 }}>24/09 · T5</span></div>
        <div className="v-card" style={{ padding: '2px 14px' }}>
          {window.VLF.vipTimeline.map((it, i) =>
          <div className="v-tl" key={i}>
              <div className="v-tl-time v-num">{it.time}</div>
              <div className="v-tl-line"><span style={{ background: KIND_COLOR[it.k] }} /></div>
              <div className="v-tl-body"><div className="t">{E(it, 't')}</div><div className="s">{E(it, 's')}</div></div>
            </div>
          )}
        </div>
        <div className="v-sect"><h3>{t('parking')}</h3></div>
        <div className="v-card v-vippass">
          <div className="v-vippass-top">
            <div><div className="lab">{lang === 'en' ? 'VIP PARKING PASS' : 'THẺ ĐẬU XE VIP'}</div><div className="zone">{lang === 'en' ? 'VIP Lot · Gate B' : 'Bãi VIP · Cổng B'}</div></div>
            <Icon name="shield" size={26} sw={1.5} style={{ color: 'var(--vlf-gold-300)' }} />
          </div>
          <div className="v-vippass-bd">
            <QR seed={'PARK-VIP-DN43A-' + window.VLF.personas.vip.me.name} size={120} />
            <div className="v-vippass-meta">
              <div><div className="l">{lang === 'en' ? 'Plate' : 'Biển số'}</div><div className="v">43A–888.88</div></div>
              <div><div className="l">{lang === 'en' ? 'Valid' : 'Hiệu lực'}</div><div className="v">22–27/09</div></div>
              <div><div className="l">{lang === 'en' ? 'Shuttle' : 'Trung chuyển'}</div><div className="v">{lang === 'en' ? 'every 15 min' : 'mỗi 15 phút'}</div></div>
            </div>
          </div>
          <div className="v-vippass-foot">{lang === 'en' ? 'Scan at the VIP lot barrier · valet & shuttle on standby' : 'Quét tại barie bãi VIP · có valet & xe trung chuyển túc trực'}</div>
        </div>
      </div>
    </div>);

}
function GalaRSVP({ nav }) {
  const t = useT();const lang = t.lang;
  const [going, setGoing] = useState('yes');
  const [seats, setSeats] = useState(2);
  const [done, setDone] = useState(false);
  if (done) return <SuccessScreen badge={t('done')} title={lang === 'en' ? 'Attendance confirmed' : 'Đã xác nhận tham dự'} sub={lang === 'en' ? 'Thank you. Your seat at the Gala Dinner on Sep 24 is reserved. Details are saved to your journey.' : 'Cảm ơn anh/chị. Chỗ ngồi tại Gala Dinner 24/09 đã được giữ. Thông tin đã lưu vào hành trình của bạn.'} cta={lang === 'en' ? 'Back to home' : 'Về trang chủ'} onCta={() => nav('home')} />;
  return (
    <div className="v-screen" style={{ paddingBottom: 96 }}>
      <div className="v-feat" style={{ height: 132, borderRadius: 0 }}>
        <div className="ov" /><div className="tx"><span className="v-pill v-pill-gold" style={{ marginBottom: 6 }}>24/09 · 18:30</span><h4>Gala Dinner & {lang === 'en' ? 'charity auction' : 'đấu giá từ thiện'}</h4></div>
      </div>
      <div className="v-pad">
        <p className="v-muted" style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 4 }}>{lang === 'en' ? 'Montgomerie Links banquet hall · dress code: formal. Please confirm before Sep 22.' : 'Sảnh tiệc Montgomerie Links · dress code: trang trọng. Vui lòng xác nhận trước 22/09.'}</p>
        <div className="v-me-group"><div className="lbl">{lang === 'en' ? 'Will you attend?' : 'Anh/chị có tham dự?'}</div>
          <Segmented value={going} onChange={setGoing} items={[{ id: 'yes', label: lang === 'en' ? 'Yes, I’ll attend' : 'Có, tôi tham dự' }, { id: 'no', label: lang === 'en' ? 'Cannot attend' : 'Không thể dự' }]} />
        </div>
        {going === 'yes' &&
        <div className="v-me-group"><div className="lbl">{lang === 'en' ? 'Number of seats' : 'Số chỗ ngồi'}</div>
            <div className="v-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px' }}>
              <span style={{ fontSize: 15, fontWeight: 600 }}>{lang === 'en' ? 'Seats' : 'Số ghế'}</span>
              <div className="v-step"><button onClick={() => setSeats((s) => Math.max(1, s - 1))}>−</button><b className="v-num">{seats}</b><button onClick={() => setSeats((s) => Math.min(6, s + 1))}>+</button></div>
            </div>
          </div>
        }
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" onClick={() => setDone(true)}>{going === 'yes' ? lang === 'en' ? 'Confirm attendance' : 'Xác nhận tham dự' : lang === 'en' ? 'Send response' : 'Gửi phản hồi'}</button></div>
    </div>);

}

/* ---------- SURVEY NPS (L3 task) ---------- */
function Survey({ nav, persona }) {
  const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi;
  const cats = window.VLF.post.personaSurvey(persona || 'spectator');
  const [stars, setStars] = useState({});
  const [reasons, setReasons] = useState({}); // {catId: Set(reasonKey)}
  const [comment, setComment] = useState('');
  const [score, setScore] = useState(null);
  const [done, setDone] = useState(false);

  const band = (n) => n >= 4 ? 'good' : n <= 2 ? 'bad' : 'mixed';
  function setStar(id, n) {
    const prev = stars[id];
    if (prev && band(prev) !== band(n)) setReasons((rs) => {const c = { ...rs };delete c[id];return c;});
    setStars((s) => ({ ...s, [id]: n }));
  }
  function reasonList(cat, n) {
    const b = band(n);
    const mk = (arr, p, tone) => arr.map((x, i) => ({ key: p + i, vi: x.vi, en: x.en, tone }));
    if (b === 'good') return mk(cat.pos, 'p', 'good');
    if (b === 'bad') return mk(cat.neg, 'n', 'bad');
    return [...mk(cat.pos.slice(0, 3), 'p', 'good'), ...mk(cat.neg.slice(0, 3), 'n', 'bad')];
  }
  function toggleReason(id, key) {
    setReasons((rs) => {const set = new Set(rs[id] || []);set.has(key) ? set.delete(key) : set.add(key);return { ...rs, [id]: set };});
  }
  const rated = Object.keys(stars).length;
  const bandHead = { good: T('Điều bạn hài lòng nhất', 'What you loved'), bad: T('Điều cần cải thiện', 'What to improve'), mixed: T('Cảm nhận của bạn', 'Your take') };

  if (done) return <SuccessScreen badge="NPS" title={T('Cảm ơn phản hồi của bạn', 'Thank you for your feedback')} sub={T('Phản hồi của bạn giúp VLF hoàn thiện hơn. Ưu đãi mua vé sớm VLF 2027 đã được gửi tới bạn qua Zalo.', 'Your feedback helps VLF improve. An early-bird offer for VLF 2027 has been sent to you via Zalo.')} cta={T('Về trang chủ', 'Back to home')} onCta={() => nav('home')} />;

  return (
    <div className="v-screen" style={{ paddingBottom: 100 }}>
      <div className="v-pad">
        <div className="v-post-intro">
          <div className="ic"><Icon name="survey" size={22} sw={1.7} /></div>
          <div><div className="t">{T('Đánh giá trải nghiệm', 'Rate your experience')}</div>
            <div className="s">{T('Chấm sao từng hạng mục bạn đã tham gia — chọn lý do để chúng tôi hiểu rõ hơn.', 'Rate each item you took part in — pick reasons so we understand better.')}</div></div>
        </div>
        <div className="v-survey-prog">{rated}/{cats.length} {T('hạng mục đã đánh giá', 'items rated')}</div>

        {cats.map((c) => {
          const n = stars[c.id] || 0;
          const list = n ? reasonList(c, n) : [];
          const sel = reasons[c.id] || new Set();
          return (
            <div className={'v-rate-card' + (n ? ' rated' : '')} key={c.id}>
              <div className="top">
                <div className="lbl">{lang === 'en' ? c.en : c.vi}</div>
                <div className="stars">
                  {[1, 2, 3, 4, 5].map((s) =>
                  <button key={s} className={'st' + (n >= s ? ' on' : '')} onClick={() => setStar(c.id, s)} aria-label={'star ' + s}>
                      <Icon name="star" size={23} sw={1.6} fill={n >= s} />
                    </button>
                  )}
                </div>
              </div>
              {n > 0 &&
              <div className="reasons">
                  <div className={'rh ' + band(n)}>{bandHead[band(n)]}<span>{T('chọn nhiều', 'multi-select')}</span></div>
                  <div className="chips">
                    {list.map((rz) =>
                  <button key={rz.key} className={'rchip ' + rz.tone + (sel.has(rz.key) ? ' on' : '')} onClick={() => toggleReason(c.id, rz.key)}>
                        {sel.has(rz.key) && <Icon name="check" size={12} sw={3} />}{lang === 'en' ? rz.en : rz.vi}
                      </button>
                  )}
                  </div>
                </div>
              }
            </div>);

        })}

        {/* comment tự do */}
        <div className="v-sect"><h3 style={{ fontSize: 15 }}>{T('Góp ý thêm', 'Anything else?')}</h3><span className="v-muted" style={{ fontSize: 11.5 }}>{T('không bắt buộc', 'optional')}</span></div>
        <textarea className="v-comment" rows={3} value={comment} onChange={(e) => setComment(e.target.value)}
        placeholder={T('Chia sẻ chi tiết để giúp chúng tôi cải thiện mùa sau…', 'Share details to help us improve next year…')} />

        {/* NPS */}
        <div className="v-sect"><h3 style={{ fontSize: 15 }}>{T('Bạn sẽ giới thiệu VLF chứ?', 'Would you recommend VLF?')}</h3></div>
        <p className="v-muted" style={{ fontSize: 12.5, margin: '0 2px 10px' }}>{T('0 = không, 10 = chắc chắn giới thiệu', '0 = not at all, 10 = extremely likely')}</p>
        <div className="v-nps2">
          <div className="v-nps2-row">
            {Array.from({ length: 11 }).map((_, x) => {
              const seg = x <= 6 ? 'det' : x <= 8 ? 'pas' : 'pro';
              return <button key={x} className={'v-nps2-n v-num seg-' + seg + (score === x ? ' on' : '')} onClick={() => setScore(x)}>{x}</button>;
            })}
          </div>
          <div className="v-nps2-track" aria-hidden="true">
            <span className="seg-det" style={{ flex: 7 }} />
            <span className="seg-pas" style={{ flex: 2 }} />
            <span className="seg-pro" style={{ flex: 2 }} />
          </div>
          <div className="v-nps2-bands">
            <span className="seg-det" style={{ flex: 7 }}>{T('Chưa hài lòng', 'Detractors')}</span>
            <span className="seg-pas" style={{ flex: 2 }}>{T('Trung lập', 'Passives')}</span>
            <span className="seg-pro" style={{ flex: 2 }}>{T('Sẽ giới thiệu', 'Promoters')}</span>
          </div>
          {score !== null &&
          <div className={'v-nps2-tag seg-' + (score <= 6 ? 'det' : score <= 8 ? 'pas' : 'pro')}>
            {score <= 6 ? T('Người chưa hài lòng', 'Detractor') : score <= 8 ? T('Khách trung lập', 'Passive') : T('Người sẽ giới thiệu VLF', 'Promoter')}
          </div>
          }
        </div>
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" disabled={score === null} onClick={() => setDone(true)}>{t('send')}</button></div>
    </div>);

}

/* ---------- TRANSFER vé (L3 task) ---------- */
function Transfer({ nav }) {
  const t = useT();const lang = t.lang;
  const [email, setEmail] = useState('');
  const [done, setDone] = useState(false);
  const ok = /\S+@\S+\.\S+/.test(email) || email.trim().length > 5;
  if (done) return <SuccessScreen badge={t('done')} title={lang === 'en' ? 'Ticket transferred' : 'Đã chuyển nhượng vé'} sub={lang === 'en' ? 'The old QR is voided. The recipient receives a new QR ticket instantly via their preferred channel.' : 'QR cũ đã huỷ. Người nhận có vé QR mới ngay qua kênh đã đăng ký.'} cta={lang === 'en' ? 'Back to my tickets' : 'Về vé của tôi'} onCta={() => nav('ticket')} />;
  return (
    <div className="v-screen" style={{ paddingBottom: 96 }}>
      <div className="v-pad">
        <div style={{ textAlign: 'center', padding: '14px 8px 4px' }}>
          <div className="v-success-ic" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="share" size={32} sw={1.7} /></div>
          <h3 style={{ fontSize: 21, margin: '14px 0 6px', fontWeight: 700 }}>{t('transferTitle')}</h3>
        </div>
        <div className="v-hint" style={{ marginBottom: 16 }}>{lang === 'en' ? 'Enter the recipient’s email. Your current QR will be voided and a new one issued to them.' : 'Nhập email người nhận. QR hiện tại của bạn sẽ bị huỷ và cấp QR mới cho người nhận.'}</div>
        <div className="v-field"><label>Email {lang === 'en' ? 'recipient' : 'người nhận'}</label><input value={email} onChange={(e) => setEmail(e.target.value)} inputMode="email" placeholder="ten@email.com" /></div>
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" disabled={!ok} onClick={() => setDone(true)}>{lang === 'en' ? 'Transfer ticket' : 'Chuyển nhượng'}</button></div>
    </div>);

}

/* ---------- KHAI BÁO NGƯỜI THAM DỰ (L2) ---------- */
function Attendees({ nav, tickets }) {
  const t = useT();const lang = t.lang;
  const base = tickets && tickets[0] ? tickets[0] : { attendee: 'Khách VLF', tag: 'VIP' };
  const [names, setNames] = useState([base.attendee || '', '', '']);
  const [done, setDone] = useState(false);
  const filled = names.filter((n) => n.trim()).length;
  if (done) return <SuccessScreen badge={t('done')} title={lang === 'en' ? 'Attendees saved' : 'Đã lưu người tham dự'} sub={lang === 'en' ? 'Each named ticket can now check in. Unnamed tickets are blocked at the gate until declared.' : 'Mỗi vé đã khai tên có thể check-in. Vé chưa khai sẽ bị chặn tại cổng cho tới khi khai báo.'} cta={lang === 'en' ? 'Back to my tickets' : 'Về vé của tôi'} onCta={() => nav('ticket')} />;
  return (
    <div className="v-screen" style={{ paddingBottom: 96 }}>
      <div className="v-pad">
        <div className="v-sect" style={{ marginTop: 6 }}><h3>{t('attendees')}</h3></div>
        <div className="v-hint" style={{ marginBottom: 16 }}>{lang === 'en' ? 'Multi-ticket orders must declare each attendee’s name before entry. Tickets without a name are blocked at check-in.' : 'Đơn nhiều vé phải khai tên từng người trước khi vào cổng. Vé chưa khai tên sẽ bị chặn check-in.'}</div>
        {names.map((n, i) =>
        <div className="v-field" key={i}><label>{lang === 'en' ? 'Attendee' : 'Người tham dự'} {i + 1} · {base.tag}{i === 0 ? lang === 'en' ? ' (you)' : ' (bạn)' : ''}</label>
            <input value={n} onChange={(e) => {const a = [...names];a[i] = e.target.value;setNames(a);}} placeholder={i === 0 ? '' : t('optional')} />
          </div>
        )}
      </div>
      <div className="v-cta"><button className="v-btn v-btn-primary" disabled={!filled} onClick={() => setDone(true)}>{t('save')} ({filled})</button></div>
    </div>);

}

Object.assign(window, { Live, News, Article, Village, VillageZone, GolferPrep, VipTimeline, GalaRSVP, Survey, Transfer, Attendees });