/* VietCanThi — Resources, About, Contact, Science pages (Bước 4) */
const { useState: mpS } = React;

/* ---- Tài nguyên ---- */
function TaiNguyen() {
  const [email, setEmail] = mpS('');
  const [sent, setSent] = mpS(false);
  const [err, setErr] = mpS('');
  const submitGate = (e) => {
    e.preventDefault();
    if (!window.isEmail(email)) { setErr('Email chưa hợp lệ.'); return; }
    setErr(''); window.submitForm('resource_downloads', { email, asset: 'pdf-quy-trinh-ksct' });
    setSent(true); window.toast({ kind: 'ok', title: 'Đã gửi tài liệu!', sub: 'Kiểm tra email để tải bộ quy trình PDF.' });
  };
  return (
    <main>
      <header className="page-hero">
        <div className="field-bg" />
        <div className="deco" aria-hidden="true"><Sunburst size={300} color="amber" /></div>
        <div className="wrap">
          <span className="eyebrow on-navy mk">Tài nguyên</span>
          <h1 style={{ marginTop: 10 }}>Kho tài liệu &amp; kiến thức KSCT</h1>
          <p className="sub">Bộ quy trình setup, hướng dẫn, FAQ và bài viết kiến thức Kiểm soát cận thị cho phòng khám.</p>
        </div>
      </header>

      <SSec head={false}>
        <div className="gate reveal">
          <div className="field-bg" />
          <div className="left">
            <span className="badge badge-amber">Tài liệu nổi bật</span>
            <h2 style={{ margin: '12px 0' }}>{window.SITE4.PDF_FORM.title}</h2>
            <p>{window.SITE4.PDF_FORM.desc}</p>
            <ul className="sb" style={{ marginTop: 18 }}>
              {['Quy trình đón tiếp – tư vấn', 'Phác đồ điều trị (Atropine/Ortho-K/tròng kính)', 'Biểu mẫu thăm khám & form theo dõi'].map((x) => (
                <li key={x}><span className="b"><Sunburst size={20} color="var(--amber)" /></span><span style={{ color: '#fff', fontWeight: 600 }}>{x}</span></li>
              ))}
            </ul>
          </div>
          <div className="right">
            {sent ? (
              <div style={{ textAlign: 'center' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(255,177,60,.18)', color: 'var(--amber)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}><Icon name="check" /></div>
                <h3 style={{ color: '#fff' }}>Đã gửi tới {email}</h3>
                <p style={{ color: '#cdd7f7' }}>Vui lòng kiểm tra hộp thư. <span className="placeholder">CẦN LINK PDF THẬT</span></p>
              </div>
            ) : (
              <form onSubmit={submitGate} noValidate>
                <div className="field"><label>Email nhận tài liệu</label><input className={'input' + (err ? ' bad' : '')} type="email" placeholder="email@phongkham.com" value={email} onChange={(e) => { setEmail(e.target.value); setErr(''); }} />{err && <div className="err-msg" style={{ color: '#ffd9a8' }}>⚠ {err}</div>}</div>
                <button className="btn btn-accent btn-block btn-lg"><Icon name="download" /> Tải bộ quy trình PDF</button>
              </form>
            )}
          </div>
        </div>
      </SSec>

      <SSec id="bai-viet" alt eyebrow="Bài viết" title="Kiến thức Kiểm soát cận thị">
        <div className="grid g4">
          {window.SITE4.ARTICLES.map((a) => (
            <div className="article reveal" key={a.t} onClick={() => window.toast({ title: 'Bài viết', sub: 'Nội dung blog sẽ bổ sung sau.' })}>
              <div className="thumb"><span className="atag">{a.tag}</span></div>
              <h3>{a.t}</h3><p>{a.d}</p>
            </div>
          ))}
        </div>
        <p className="muted center" style={{ marginTop: 18 }}><span className="placeholder">NỘI DUNG MẪU</span> — bài viết thật sẽ bổ sung dần.</p>
      </SSec>

      <SSec eyebrow="Hỏi đáp" title="Câu hỏi thường gặp">
        <FaqList items={window.SITE4.RESOURCE_FAQ} />
      </SSec>
    </main>
  );
}

/* ---- Về chúng tôi ---- */
function VeChungToi() {
  return (
    <main>
      <header className="page-hero">
        <div className="field-bg" />
        <div className="deco" aria-hidden="true"><Sunburst size={300} color="amber" /></div>
        <div className="wrap">
          <span className="eyebrow on-navy mk">Về chúng tôi</span>
          <h1 style={{ marginTop: 10 }}>Giúp đôi mắt trẻ luôn sáng — trọn đời</h1>
          <p className="sub">VietCanThi đồng hành cùng phòng khám mắt xây dựng dịch vụ Kiểm soát cận thị bài bản, lấy bằng chứng làm gốc.</p>
        </div>
      </header>

      <SSec eyebrow="Sứ mệnh" title="Vì sao chúng tôi tồn tại"
        lead="Cận thị học đường đang gia tăng. VietCanThi giúp phòng khám chuẩn hóa quy trình, cá nhân hóa phác đồ và số hóa theo dõi — để mỗi đứa trẻ được kiểm soát tiến triển đúng cách.">
        <div className="grid g3">
          {window.SITE4.ABOUT_VALUES.map((v) => (
            <div className="card feature reveal" key={v.t}><div className="ic"><Icon name={v.icon} /></div><h3 style={{ fontSize: '1.1rem' }}>{v.t}</h3><p>{v.d}</p></div>
          ))}
        </div>
      </SSec>

      <SSec alt eyebrow="Đội ngũ" title="Chuyên gia đồng hành" lead="Bác sĩ nhãn khoa, chuyên gia khúc xạ và đội ngũ công nghệ.">
        <div className="team">
          {[1, 2, 3, 4].map((i) => (
            <div className="member reveal" key={i}>
              <div className="av ph">[ Ảnh ]</div>
              <b>[ Họ tên ]</b><span>[ Chức danh ]</span>
            </div>
          ))}
        </div>
        <p className="muted center" style={{ marginTop: 18 }}><span className="placeholder">CẦN ẢNH & THÔNG TIN ĐỘI NGŨ THẬT</span></p>
      </SSec>

      <SSec eyebrow="Đối tác & khách hàng" title="Được tin tưởng bởi" head>
        <div className="partners">
          {[1, 2, 3, 4, 5].map((i) => <div className="partner-ph" key={i}>[ Logo {i} ]</div>)}
        </div>
        <p className="muted center" style={{ marginTop: 18 }}><span className="placeholder">LOGO ĐỐI TÁC THẬT</span></p>
      </SSec>
    </main>
  );
}

/* ---- Liên hệ ---- */
function LienHe() {
  const [v, setV] = mpS({});
  const [errors, setErrors] = mpS({});
  const [busy, setBusy] = mpS(false);
  const [done, setDone] = mpS(false);
  const set = (k, val) => { setV((p) => ({ ...p, [k]: val })); setErrors((p) => (p[k] ? { ...p, [k]: '' } : p)); };
  async function submit(e) {
    e.preventDefault();
    const er = {};
    if (!v.hoTen) er.hoTen = 'Vui lòng nhập họ tên.';
    if (!window.isPhoneVN(v.sdt)) er.sdt = 'Số điện thoại chưa hợp lệ.';
    if (!window.isEmail(v.email)) er.email = 'Email chưa hợp lệ.';
    if (!v.nhuCau) er.nhuCau = 'Vui lòng chọn nhu cầu.';
    setErrors(er);
    if (Object.keys(er).length) { window.toast({ kind: 'err', title: 'Kiểm tra lại thông tin' }); return; }
    setBusy(true);
    try { await window.submitForm('contact_requests', v); setDone(true); window.toast({ kind: 'ok', title: 'Đã gửi liên hệ!', sub: 'VietCanThi sẽ phản hồi sớm.' }); }
    catch { setBusy(false); window.toast({ kind: 'err', title: 'Gửi chưa thành công', sub: 'Vui lòng thử lại.' }); }
  }
  const C = window.VTC.CONTACT;
  return (
    <main>
      <header className="page-hero">
        <div className="field-bg" />
        <div className="deco" aria-hidden="true"><Sunburst size={300} color="amber" /></div>
        <div className="wrap">
          <span className="eyebrow on-navy mk">Liên hệ</span>
          <h1 style={{ marginTop: 10 }}>Trao đổi với đội ngũ VietCanThi</h1>
          <p className="sub">Để lại thông tin — chúng tôi sẽ tư vấn dịch vụ phù hợp với phòng khám của bạn.</p>
        </div>
      </header>

      <SSec head={false}>
        <div className="contact-grid">
          <div className="form-card">
            {done ? (
              <div style={{ textAlign: 'center', padding: '20px 0' }}>
                <div className="ring" style={{ width: 80, height: 80 }}><Sunburst size={48} color="var(--navy)" /></div>
                <h2 style={{ marginTop: 16 }}>Cảm ơn bạn đã liên hệ!</h2>
                <p className="muted">Đội ngũ VietCanThi sẽ phản hồi trong thời gian sớm nhất.</p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="grid g2">
                  <div className="field"><label>Họ và tên <span className="req">*</span></label><input className={'input' + (errors.hoTen ? ' bad' : '')} value={v.hoTen || ''} onChange={(e) => set('hoTen', e.target.value)} />{errors.hoTen && <div className="err-msg">⚠ {errors.hoTen}</div>}</div>
                  <div className="field"><label>Đơn vị / phòng khám</label><input className="input" value={v.donVi || ''} onChange={(e) => set('donVi', e.target.value)} /></div>
                </div>
                <div className="grid g2">
                  <div className="field"><label>Số điện thoại <span className="req">*</span></label><input className={'input' + (errors.sdt ? ' bad' : '')} value={v.sdt || ''} onChange={(e) => set('sdt', e.target.value)} placeholder="0901 234 567" />{errors.sdt && <div className="err-msg">⚠ {errors.sdt}</div>}</div>
                  <div className="field"><label>Email <span className="req">*</span></label><input className={'input' + (errors.email ? ' bad' : '')} type="email" value={v.email || ''} onChange={(e) => set('email', e.target.value)} />{errors.email && <div className="err-msg">⚠ {errors.email}</div>}</div>
                </div>
                <div className="field"><label>Nhu cầu <span className="req">*</span></label>
                  <select className={'input' + (errors.nhuCau ? ' bad' : '')} value={v.nhuCau || ''} onChange={(e) => set('nhuCau', e.target.value)}>
                    <option value="" disabled>— Chọn nhu cầu —</option>
                    {window.SITE4.NEEDS.map((n) => <option key={n}>{n}</option>)}
                  </select>{errors.nhuCau && <div className="err-msg">⚠ {errors.nhuCau}</div>}
                </div>
                <div className="field" style={{ marginBottom: 0 }}><label>Lời nhắn</label><textarea className="input" rows="4" value={v.loiNhan || ''} onChange={(e) => set('loiNhan', e.target.value)} placeholder="Mô tả ngắn nhu cầu của bạn…" /></div>
                <button className="btn btn-accent btn-lg btn-block" style={{ marginTop: 22 }} disabled={busy}>{busy ? <><span className="spin" /> Đang gửi…</> : <>Gửi liên hệ <Icon name="arrow" /></>}</button>
              </form>
            )}
          </div>
          <div>
            <div className="contact-info">
              <div className="row"><span className="ic"><Icon name="mail" /></span><span><b>Email</b><span>{C.email}</span></span></div>
              <div className="row"><span className="ic"><Icon name="phone" /></span><span><b>Hotline</b><span>{C.hotline} <span className="placeholder">TODO</span></span></span></div>
              <div className="row"><span className="ic"><Icon name="pin" /></span><span><b>Văn phòng</b><span><span className="placeholder">ĐỊA CHỈ THẬT</span></span></span></div>
            </div>
            <div className="map-ph">[ Bản đồ / Google Maps embed ]</div>
          </div>
        </div>
      </SSec>
    </main>
  );
}

/* ---- Căn cứ khoa học ---- */
function CanCu() {
  return (
    <main>
      <header className="page-hero">
        <div className="field-bg" />
        <div className="deco" aria-hidden="true"><Sunburst size={300} color="amber" /></div>
        <div className="wrap">
          <span className="eyebrow on-navy mk">Căn cứ khoa học</span>
          <h1 style={{ marginTop: 10 }}>Phương pháp &amp; nguồn tham khảo</h1>
          <p className="sub">Bộ luật phân tầng của VietCanThi dựa trên các chỉ số được công nhận trong y văn — minh bạch, có thể tra cứu.</p>
        </div>
      </header>
      <SSec eyebrow="Phương pháp" title="Các chỉ số nền tảng">
        <div className="refs">
          {window.SITE4.SCIENCE.map((s) => (
            <div className="ref reveal" key={s.t}><h3>{s.t}</h3><p>{s.d}</p></div>
          ))}
        </div>
        <div className="disclaimer-strip" style={{ marginTop: 36 }}>
          <Icon name="shield" />
          <span>Giọng trung lập, dẫn nguồn. <span className="placeholder">BẢNG NGUỒN THAM KHẢO CHI TIẾT — CẦN BỔ SUNG</span>. Công cụ hỗ trợ quyết định lâm sàng, không thay thế chẩn đoán của bác sĩ.</span>
        </div>
      </SSec>
    </main>
  );
}

Object.assign(window, { TaiNguyen, VeChungToi, LienHe, CanCu });