/* Landing page — hero + countdown, objectives, agenda, speaker, audience, benefits, software teaser */
const { useState: useS, useEffect: useE } = React;

function Countdown({ iso }) {
  const target = new Date(iso).getTime();
  const calc = () => {
    const d = Math.max(0, target - Date.now());
    return {
      done: d <= 0,
      days: Math.floor(d / 86400000),
      hours: Math.floor(d % 86400000 / 3600000),
      mins: Math.floor(d % 3600000 / 60000),
      secs: Math.floor(d % 60000 / 1000)
    };
  };
  const [t, setT] = useS(calc);
  useE(() => {const id = setInterval(() => setT(calc()), 1000);return () => clearInterval(id);}, []);
  const W = window.VTC.WEBINAR;
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="cd-card">
      <div className="ttl"><span className="dot">●</span> {t.done ? 'Webinar đang diễn ra' : 'Sự kiện bắt đầu sau'}</div>
      <div className="cd">
        {[['Ngày', t.days], ['Giờ', t.hours], ['Phút', t.mins], ['Giây', t.secs]].map(([l, n]) =>
        <div className="unit" key={l}><div className="num">{pad(n)}</div><div className="lbl">{l}</div></div>
        )}
      </div>
      <div className="gift">
        <Icon name="gift" />
        <span>Hoàn tất khảo sát cuối webinar → nhận <b>bộ quy trình PDF</b> + <b>tài khoản dùng thử phần mềm</b>.</span>
      </div>
    </div>);

}

function Hero() {
  const W = window.VTC.WEBINAR;
  return (
    <header className="hero">
      <div className="field-bg" />
      <div className="deco" aria-hidden="true"><Sunburst size={380} color="amber" /></div>
      <span className="spark s1" aria-hidden="true"><Sunburst size={50} color="white" /></span>
      <span className="spark s2" aria-hidden="true"><Sunburst size={32} color="white" /></span>
      <span className="spark s3" aria-hidden="true"><Sunburst size={26} color="amber" /></span>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <h1>{W.title.replace(/^WEBINAR\s+/, 'WEBINAR\n').split('\n').map((line, i) => <React.Fragment key={i}>{i > 0 && <br />}{line}</React.Fragment>)}</h1>
            <p className="sub">{W.subtitle}</p>
            <div className="meta-badges">
              <span className="meta-badge"><Icon name="calendar" /> {W.dateText}</span>
              <span className="meta-badge"><Icon name="clock" /> {W.timeText}</span>
              <a className="meta-badge meta-link" href={W.zoomLink} target="_blank" rel="noopener noreferrer"><Icon name="video" /> {W.platform}</a>
            </div>
            <div className="btns">
              <a className="btn btn-accent btn-lg" onClick={() => window.scrollToId('dang-ky')}>Đăng ký tham dự</a>
              <a className="btn btn-ghost btn-lg" onClick={() => window.navigate('/trai-nghiem-phan-mem')}>Trải nghiệm phần mềm</a>
            </div>
          </div>
          <Countdown iso={W.dateISO} />
        </div>
      </div>
    </header>);

}

function Section({ id, alt, eyebrow, title, lead, children }) {
  return (
    <section id={id} className={alt ? 'alt' : ''}>
      <div className="wrap">
        {(eyebrow || title) &&
        <div className="sec-head reveal">
            {eyebrow && <span className="eyebrow mk">{eyebrow}</span>}
            {title && <h2>{title}</h2>}
            {lead && <p className="lead">{lead}</p>}
          </div>
        }
        {children}
      </div>
    </section>);

}

function Objectives() {
  return (
    <Section id="gioi-thieu" eyebrow="Vì sao nên tham dự" title="4 mục tiêu bạn mang về sau 60 phút"
    lead="Từ chuẩn hóa mô hình đến số hóa dữ liệu — đủ để bắt tay triển khai ngay tại đơn vị.">
      <div className="grid g4">
        {window.VTC.OBJECTIVES.map((o) =>
        <div className="card feature reveal" key={o.title}>
            <div className="ic"><Icon name={o.icon} /></div>
            <h3>{o.title}</h3>
            <p>{o.desc}</p>
          </div>
        )}
      </div>
    </Section>);

}

function Agenda() {
  return (
    <Section id="agenda" alt eyebrow="Chương trình" title="Agenda · Bắt đầu 20h00"
    lead="Từ bức tranh dịch tễ học, đến bằng chứng khoa học và ứng dụng trên vận hành lâm sàng.">
      <div className="agenda">
        {window.VTC.AGENDA.map((a, i) =>
        <div className="ag-item reveal" key={a.title}>
            <div className="ag-left">
              <span className="ag-num">{String(i + 1).padStart(2, '0')}</span>
              <div><span className="ag-tag">{a.tag}</span></div>
            </div>
            <div className="ag-body"><h3>{a.title}</h3><p>{a.desc}</p></div>
          </div>
        )}
      </div>
    </Section>);

}

function Speaker() {
  return (
    <Section id="dien-gia" eyebrow="Diễn giả" title="Người chia sẻ">
      <div className="card card-pad-lg speaker reveal">
        <img className="portrait" src="brand-assets/speaker-huy.png" alt="TS.BS. Trần Đình Minh Huy" />
        <div>
          <h2 style={{ margin: '0 0 4px' }}>TS.BS. Trần Đình Minh Huy</h2>
          <p style={{ fontWeight: 800, color: 'var(--amber-600)', margin: 0 }}>Chuyên gia quản lý cận thị tại Việt Nam · Cố vấn chuyên môn VietCanThi</p>
          <p className="muted" style={{ marginTop: 14 }}>Hơn 15 năm kinh nghiệm nhãn khoa và kiểm soát tiến triển cận thị, đã và đang trực tiếp tư vấn setup mô hình quản lý cận thị cho nhiều phòng khám, bệnh viện &amp; trung tâm mắt. Chia sẻ phác đồ cá nhân hóa điều trị và vận hành số hóa đánh giá theo dõi trong nghiên cứu chuyên sâu &amp; thực hành lâm sàng.</p>
        </div>
      </div>
    </Section>);

}

function Audience() {
  return (
    <Section id="doi-tuong" alt eyebrow="Đối tượng tham dự" title="Webinar dành cho ai?">
      <div className="aud-grid">
        {window.VTC.AUDIENCE.map((a, i) =>
        <div className="aud reveal" key={a.title}>
            <span className="idx">{String(i + 1).padStart(2, '0')}</span>
            <span className="sig" aria-hidden="true" />
            <div className="ic"><Icon name={a.icon} /></div>
            <h3>{a.title}</h3>
            <p>{a.desc}</p>
          </div>
        )}
      </div>
    </Section>);

}

function Benefits() {
  return (
    <Section id="qua-tang" eyebrow="Quyền lợi & Quà tặng" title="Hoàn tất khảo sát — nhận trọn bộ đặc quyền"
    lead="Hai phần quà chính kích hoạt khi bạn hoàn tất khảo sát cuối webinar.">
      <div className="grid g2">
        {window.VTC.BENEFITS.map((b) => {
          const clickable = b.title === 'Bộ quy trình setup';
          return (
          <div className={'card card-pad-lg benefit reveal' + (b.highlight ? ' hl' : '') + (clickable ? ' clickable' : '')} key={b.title}
            onClick={clickable ? () => window.flashCond() : undefined}
            role={clickable ? 'button' : undefined} tabIndex={clickable ? 0 : undefined}
            onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.flashCond(); } } : undefined}>
            {b.highlight && <span className="tag badge badge-amber">Quà tặng</span>}
            <div className="ic"><Icon name={b.icon} /></div>
            <h3>{b.title}</h3>
            <p>{b.desc}</p>
          </div>
          );
        })}
      </div>
      <div id="dieu-kien-qua" className="card" style={{ marginTop: 24, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center', background: 'var(--sky)', border: 'none', scrollMarginTop: '90px' }}>
        <Sunburst size={26} color="var(--amber-600)" />
        <span style={{ fontWeight: 700, color: 'var(--navy)' }}>Điều kiện nhận quà: hoàn tất Khảo sát cuối Webinar.</span>
        <a className="btn btn-outline" onClick={() => window.navigate('/khao-sat')}>Mở form khảo sát</a>
      </div>
    </Section>);

}

function SoftwareTeaser() {
  const feats = [
  { icon: 'layers', t: 'Hồ sơ sinh trắc điện tử', d: 'Lưu OD/OS: Sph/Cyl/Axis, AL, K, cyclo theo từng lần khám.' },
  { icon: 'chart', t: 'Biểu đồ tiến triển AL', d: 'Đường percentile theo tuổi, tốc độ mm/năm trước–sau điều trị.' },
  { icon: 'bell', t: 'Nhắc tái khám tự động', d: 'Lịch hẹn & nhắc lịch qua SMS/Zalo (sắp ra mắt).' }];

  return (
    <Section id="phan-mem" alt eyebrow="Trải nghiệm phần mềm" title="Phần mềm Quản lý & Kiểm soát cận thị VietCanThi"
    lead="Số hóa hồ sơ, phân tầng nguy cơ và báo cáo phụ huynh mang thương hiệu phòng khám của bạn.">
      <div className="grid g2" style={{ alignItems: 'center' }}>
        <div className="app-shot reveal">
          <div className="bar"><i /><i /><i /></div>
          <div className="body">
            <div className="ph" style={{ aspectRatio: '16/10', borderRadius: 'var(--r-md)' }}>[ Ảnh app — đã re-skin navy/amber<br />biểu đồ percentile AL ]</div>
          </div>
        </div>
        <div className="reveal">
          <ul className="sb" style={{ gap: 18 }}>
            {feats.map((f) =>
            <li key={f.t}><span className="b"><Sunburst size={22} color="var(--amber-600)" /></span>
                <span><b style={{ color: 'var(--navy)', display: 'block', fontSize: '1.05rem' }}>{f.t}</b><span className="muted" style={{ fontWeight: 400 }}>{f.d}</span></span>
              </li>
            )}
          </ul>
          <div className="btns" style={{ display: 'flex', gap: 14, marginTop: 26 }}>
            <a className="btn btn-primary" onClick={() => window.navigate('/trai-nghiem-phan-mem')}>Đăng ký tài khoản trải nghiệm</a>
          </div>
        </div>
      </div>
    </Section>);

}

function Landing() {
  return (
    <main>
      <Hero />
      <Objectives />
      <Agenda />
      <Speaker />
      <Audience />
      <Benefits />
      <Section id="dang-ky-wrap"><div style={{ maxWidth: 720, margin: '0 auto' }}><RegisterForm /></div></Section>
      <SoftwareTeaser />
    </main>);

}

Object.assign(window, { Landing, Countdown });