// Multi-step booking form

function Booking() {
  const { t } = useTheme();
  const s = useStyles();
  const { route, navigate } = useRouter();
  const preClinicId = route.params.clinic;
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    clinic: preClinicId || '',
    service: '',
    date: '',
    time: '',
    name: '', phone: '', email: '', note: '',
  });
  const update = (patch) => setData(d => ({ ...d, ...patch }));

  const selectedClinic = CLINICS.find(c => c.id === data.clinic);
  const canNext1 = !!data.clinic && !!data.service;
  const canNext2 = !!data.date && !!data.time;
  const canSubmit = data.name.trim() && data.phone.trim().length >= 9;

  const steps = [
    { n: 1, label: 'Chọn dịch vụ' },
    { n: 2, label: 'Chọn thời gian' },
    { n: 3, label: 'Thông tin liên hệ' },
    { n: 4, label: 'Xác nhận' },
  ];

  return (
    <div style={{ maxWidth: 920, margin: '0 auto', padding: '28px 32px 60px' }}>
      <div style={{ fontSize: 12, color: t.textMuted, marginBottom: 10 }}>
        <a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / Đặt lịch
      </div>
      <h1 style={{ fontSize: 28, fontWeight: 800, margin: '0 0 6px', color: t.primary, letterSpacing: -0.5 }}>Đặt lịch hẹn miễn phí</h1>
      <p style={{ fontSize: 13.5, color: t.textMuted, margin: '0 0 26px' }}>Phòng khám sẽ xác nhận lịch qua SMS trong vòng 15 phút.</p>

      {/* Stepper */}
      <div style={{ display: 'flex', gap: 0, marginBottom: 28, background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2, padding: 4 }}>
        {steps.map((st, i) => {
          const active = st.n === step, done = st.n < step;
          return (
            <div key={st.n} style={{ flex: 1, padding: '10px 14px', borderRadius: t.radius, background: active ? t.primary : 'transparent', color: active ? '#fff' : (done ? t.primary : t.textMuted), display: 'flex', alignItems: 'center', gap: 10, fontWeight: active ? 600 : 500, fontSize: 13 }}>
              <div style={{ width: 24, height: 24, borderRadius: 12, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, background: active ? '#fff' : (done ? t.primary : t.surface), color: active ? t.primary : (done ? '#fff' : t.textMuted), border: done || active ? 'none' : `1px solid ${t.border}` }}>
                {done ? <Icon.Check size={12}/> : st.n}
              </div>
              <span>{st.label}</span>
            </div>
          );
        })}
      </div>

      <div style={{ background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2, padding: 28 }}>
        {step === 1 && (
          <>
            <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 16px' }}>Chọn phòng khám & dịch vụ</h2>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: t.textMuted, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>Phòng khám</label>
            <div style={{ display: 'grid', gap: 8, marginBottom: 20 }}>
              {CLINICS.slice(0, 4).map(c => (
                <div key={c.id} onClick={() => update({ clinic: c.id })} style={{ padding: 14, border: `2px solid ${data.clinic === c.id ? t.primary : t.border}`, borderRadius: t.radius, cursor: 'pointer', display: 'flex', gap: 12, alignItems: 'center', background: data.clinic === c.id ? t.blueLight : '#fff' }}>
                  <ImgPlaceholder hue={c.hue} sat={35} style={{ width: 48, height: 48, borderRadius: 8, flexShrink: 0 }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: t.primary }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: t.textMuted, display: 'flex', gap: 8 }}>
                      <span>{c.address}</span><span>·</span>
                      <span><StarRow rating={c.rating} size={10}/> {c.rating}</span>
                    </div>
                  </div>
                  <div style={{ width: 20, height: 20, borderRadius: 10, border: `2px solid ${data.clinic === c.id ? t.primary : t.border}`, background: data.clinic === c.id ? t.primary : '#fff', display: 'grid', placeItems: 'center' }}>
                    {data.clinic === c.id && <div style={{ width: 8, height: 8, borderRadius: 4, background: '#fff' }}/>}
                  </div>
                </div>
              ))}
            </div>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: t.textMuted, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 0.5 }}>Dịch vụ cần khám</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {SERVICES.map(sv => (
                <div key={sv.id} onClick={() => update({ service: sv.id })} style={{ padding: 12, border: `2px solid ${data.service === sv.id ? t.primary : t.border}`, borderRadius: t.radius, cursor: 'pointer', background: data.service === sv.id ? t.blueLight : '#fff' }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: t.primary }}>{sv.name}</div>
                  <div style={{ fontSize: 11.5, color: t.textMuted, marginTop: 2 }}>{sv.min}—{sv.max} {sv.unit}</div>
                </div>
              ))}
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 16px' }}>Chọn ngày & giờ</h2>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: t.textMuted, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>Ngày</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 22 }}>
              {Array.from({ length: 14 }).map((_, i) => {
                const d = new Date(); d.setDate(d.getDate() + i);
                const day = ['CN','T2','T3','T4','T5','T6','T7'][d.getDay()];
                const key = `${d.getDate()}/${d.getMonth() + 1}`;
                const sel = data.date === key;
                return (
                  <div key={i} onClick={() => update({ date: key })} style={{ padding: '10px 4px', textAlign: 'center', border: `1.5px solid ${sel ? t.primary : t.border}`, borderRadius: t.radius, cursor: 'pointer', background: sel ? t.primary : '#fff', color: sel ? '#fff' : t.text }}>
                    <div style={{ fontSize: 10, opacity: 0.7 }}>{day}</div>
                    <div style={{ fontSize: 15, fontWeight: 700, fontFamily: t.numFont }}>{d.getDate()}</div>
                  </div>
                );
              })}
            </div>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: t.textMuted, marginBottom: 10, textTransform: 'uppercase', letterSpacing: 0.5 }}>Giờ</label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
              {['08:00','08:30','09:00','09:30','10:00','10:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30'].map(tm => (
                <div key={tm} onClick={() => update({ time: tm })} style={{ padding: '9px 0', textAlign: 'center', border: `1.5px solid ${data.time === tm ? t.primary : t.border}`, borderRadius: t.radius, cursor: 'pointer', background: data.time === tm ? t.primary : '#fff', color: data.time === tm ? '#fff' : t.text, fontSize: 12.5, fontWeight: 600, fontFamily: t.numFont }}>{tm}</div>
              ))}
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 16px' }}>Thông tin liên hệ</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
              {[
                { k: 'name', label: 'Họ và tên *', ph: 'Nguyễn Văn A' },
                { k: 'phone', label: 'Số điện thoại *', ph: '09xx xxx xxx' },
                { k: 'email', label: 'Email (không bắt buộc)', ph: 'email@example.com' },
              ].map(f => (
                <div key={f.k} style={{ gridColumn: f.k === 'email' ? 'span 2' : 'auto' }}>
                  <label style={{ fontSize: 12, fontWeight: 600, color: t.textMuted, display: 'block', marginBottom: 6 }}>{f.label}</label>
                  <input value={data[f.k]} onChange={e => update({ [f.k]: e.target.value })} placeholder={f.ph} style={{ width: '100%', padding: '11px 14px', border: `1px solid ${t.border}`, borderRadius: t.radius, fontSize: 13.5, background: '#fff' }}/>
                </div>
              ))}
              <div style={{ gridColumn: 'span 2' }}>
                <label style={{ fontSize: 12, fontWeight: 600, color: t.textMuted, display: 'block', marginBottom: 6 }}>Triệu chứng / ghi chú</label>
                <textarea value={data.note} onChange={e => update({ note: e.target.value })} rows={3} placeholder="Mô tả triệu chứng hoặc nhu cầu cụ thể..." style={{ width: '100%', padding: '11px 14px', border: `1px solid ${t.border}`, borderRadius: t.radius, fontSize: 13.5, background: '#fff', resize: 'vertical', fontFamily: 'inherit' }}/>
              </div>
            </div>
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12, color: t.textMuted, marginTop: 14, lineHeight: 1.5, cursor: 'pointer' }}>
              <input type="checkbox" defaultChecked style={{ marginTop: 2, accentColor: t.primary }}/>
              Tôi đồng ý cho phòng khám liên hệ qua số điện thoại và email đã cung cấp để xác nhận lịch hẹn.
            </label>
          </>
        )}

        {step === 4 && (
          <>
            <div style={{ textAlign: 'center', padding: '16px 0 24px' }}>
              <div style={{ width: 64, height: 64, borderRadius: 32, background: t.mint, color: t.mintText, display: 'grid', placeItems: 'center', margin: '0 auto 14px' }}>
                <Icon.Check size={32}/>
              </div>
              <h2 style={{ fontSize: 22, fontWeight: 800, color: t.primary, margin: '0 0 6px' }}>Đặt lịch thành công!</h2>
              <p style={{ fontSize: 13.5, color: t.textMuted, margin: 0 }}>Phòng khám sẽ liên hệ với bạn qua SMS trong vòng 15 phút để xác nhận.</p>
            </div>
            <div style={{ background: t.surface, borderRadius: t.radius, padding: 20 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: t.textSubtle, marginBottom: 12 }}>Chi tiết lịch hẹn</div>
              {[
                ['Phòng khám', selectedClinic?.name || '—'],
                ['Dịch vụ', SERVICES.find(s => s.id === data.service)?.name || '—'],
                ['Ngày', data.date || '—'],
                ['Giờ', data.time || '—'],
                ['Họ tên', data.name || '—'],
                ['SĐT', data.phone || '—'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', fontSize: 13, borderBottom: `1px dashed ${t.border}` }}>
                  <span style={{ color: t.textMuted }}>{k}</span>
                  <span style={{ fontWeight: 600, color: t.text }}>{v}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {step < 4 && (
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 24, paddingTop: 20, borderTop: `1px solid ${t.border}` }}>
            <button className="btn-ghost" onClick={() => step > 1 ? setStep(step - 1) : navigate('/')} style={s.btnGhost}>← Quay lại</button>
            <button
              className="btn-primary"
              disabled={(step === 1 && !canNext1) || (step === 2 && !canNext2) || (step === 3 && !canSubmit)}
              onClick={() => setStep(step + 1)}
              style={{ ...s.btnPrimary, opacity: ((step === 1 && !canNext1) || (step === 2 && !canNext2) || (step === 3 && !canSubmit)) ? 0.5 : 1, cursor: ((step === 1 && !canNext1) || (step === 2 && !canNext2) || (step === 3 && !canSubmit)) ? 'not-allowed' : 'pointer' }}
            >
              {step === 3 ? 'Xác nhận đặt lịch' : 'Tiếp tục'} →
            </button>
          </div>
        )}
        {step === 4 && (
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 24 }}>
            <button className="btn-ghost" onClick={() => navigate('/')} style={s.btnGhost}>Về trang chủ</button>
            <button className="btn-primary" onClick={() => navigate('/articles')} style={s.btnPrimary}>Đọc kiến thức nha khoa</button>
          </div>
        )}
      </div>
    </div>
  );
}

function About() {
  const { t } = useTheme();
  const s = useStyles();
  const { navigate } = useRouter();
  return (
    <div>
      <section style={{ background: t.primary, color: '#fff', padding: '56px 32px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 10 }}>Giới thiệu</div>
          <h1 style={{ fontSize: 42, fontWeight: 800, margin: '0 0 14px', letterSpacing: -1, lineHeight: 1.1 }}>Cổng thông tin nha khoa độc lập đầu tiên tại Việt Nam.</h1>
          <p style={{ fontSize: 16, opacity: 0.85, margin: 0, lineHeight: 1.6, maxWidth: 680 }}>Chúng tôi tin rằng mỗi người đều xứng đáng có được thông tin minh bạch và trung thực khi chọn phòng khám nha khoa. Không quảng cáo trá hình. Không thiên vị. Chỉ sự thật đã được thẩm định.</p>
        </div>
      </section>

      <section style={{ maxWidth: 920, margin: '0 auto', padding: '48px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 48 }}>
          {[['1,240+','Phòng khám thẩm định'],['18,500+','Review đã xác minh'],['450+','Bài viết y khoa'],['28','Bác sĩ biên tập']].map(([v, l]) => (
            <div key={l} style={{ padding: 20, border: `1px solid ${t.border}`, borderRadius: t.radius + 2, background: '#fff' }}>
              <div style={{ fontSize: 28, fontWeight: 800, color: t.coral, fontFamily: t.numFont, letterSpacing: -0.5 }}>{v}</div>
              <div style={{ fontSize: 12.5, color: t.textMuted }}>{l}</div>
            </div>
          ))}
        </div>

        <h2 style={{ fontSize: 26, fontWeight: 800, color: t.primary, margin: '0 0 14px', letterSpacing: -0.5 }}>Quy trình thẩm định 5 bước</h2>
        <div style={{ display: 'grid', gap: 14, marginBottom: 48 }}>
          {[
            ['Xác minh giấy phép', 'Đối chiếu Giấy phép hoạt động và Giấy phép hành nghề với Bộ Y tế.'],
            ['Khảo sát cơ sở vật chất', 'Đội ngũ đến trực tiếp phòng khám để kiểm tra trang thiết bị và quy trình vô trùng.'],
            ['Phỏng vấn bệnh nhân', 'Thu thập phản hồi từ 30+ bệnh nhân thực tế trong 6 tháng gần nhất.'],
            ['Đối chiếu bảng giá', 'So sánh giá niêm yết với giá thực tế bệnh nhân đã chi trả.'],
            ['Tái thẩm định hàng năm', 'Phòng khám đã thẩm định được đánh giá lại mỗi 12 tháng.'],
          ].map(([title, desc], i) => (
            <div key={i} style={{ display: 'flex', gap: 16, padding: 18, border: `1px solid ${t.border}`, borderRadius: t.radius + 2, background: '#fff' }}>
              <div style={{ fontSize: 32, fontWeight: 800, color: t.coral, fontFamily: t.numFont, width: 48, flexShrink: 0, letterSpacing: -1 }}>0{i + 1}</div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700, color: t.primary, marginBottom: 4 }}>{title}</div>
                <div style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.6 }}>{desc}</div>
              </div>
            </div>
          ))}
        </div>

        <h2 style={{ fontSize: 26, fontWeight: 800, color: t.primary, margin: '0 0 14px', letterSpacing: -0.5 }}>Câu hỏi thường gặp</h2>
        <div>
          {FAQS.map((f, i) => (
            <details key={i} style={{ borderBottom: `1px solid ${t.border}`, padding: '16px 0', cursor: 'pointer' }}>
              <summary style={{ fontSize: 15, fontWeight: 600, color: t.primary, listStyle: 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{f.q}</span>
                <Icon.ChevronDown size={16} style={{ color: t.textMuted }}/>
              </summary>
              <div style={{ fontSize: 14, color: t.textMuted, lineHeight: 1.65, marginTop: 8 }}>{f.a}</div>
            </details>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Booking, About });