/* VietCanThi — Services pages /dich-vu + subpages (Bước 4) */
const { useState: svS } = React;

function SSec({ id, alt, eyebrow, title, lead, children, head = true }) {
  return (
    <section id={id} className={alt ? 'alt' : ''}>
      <div className="wrap">
        {head && (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>
  );
}

/* shared accordion (inline maxHeight for reliability) */
function FaqList({ items }) {
  return (
    <div className="faq">
      {items.map((f, i) => <FaqRow key={i} q={f.q} a={f.a} />)}
    </div>
  );
}
function FaqRow({ q, a }) {
  const [open, setOpen] = svS(false);
  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button className="faq-q" onClick={() => setOpen((o) => !o)} aria-expanded={open}>{q}<span className="pm">+</span></button>
      <div className="faq-a" style={{ maxHeight: open ? 360 : 0 }}><div>{a}</div></div>
    </div>
  );
}

function CoopSteps() {
  return (
    <SSec id="quy-trinh" alt eyebrow="Quy trình hợp tác" title="Bốn bước, rõ ràng từ đầu">
      <div className="coop">
        {window.SITE4.COOP_STEPS.map((s) => (
          <div className="step reveal" key={s.n}><div className="n">{s.n}</div><h3>{s.t}</h3><p>{s.d}</p></div>
        ))}
      </div>
    </SSec>
  );
}

function ServiceSub({ slug }) {
  const p = window.SITE4.SERVICE_PAGES[slug];
  if (!p) { window.go('/dich-vu'); return null; }
  return (
    <main>
      <header className="page-hero">
        <div className="field-bg" />
        <div className="deco" aria-hidden="true"><Sunburst size={300} /></div>
        <div className="wrap">
          <span className="crumb" onClick={() => window.go('/dich-vu')}>← Dịch vụ</span>
          <div className="ic-lg"><Icon name={p.icon} /></div>
          <span className="eyebrow on-navy mk">{p.eyebrow}</span>
          <h1 style={{ marginTop: 10 }}>{p.title}</h1>
          <p className="sub">{p.sub}</p>
          <div className="btns"><a className="btn btn-accent btn-lg" onClick={() => window.go(p.cta.to)}>{p.cta.label}</a></div>
        </div>
      </header>

      <SSec eyebrow="Vấn đề & Giải pháp" title="Chúng tôi giải quyết điều gì?">
        <div className="probsol">
          <div className="card col reveal">
            <h3>Thách thức thường gặp</h3>
            <ul className="problist bad">
              {p.problems.map((x) => <li key={x}><span className="mk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg></span><span>{x}</span></li>)}
            </ul>
          </div>
          <div className="card col reveal" style={{ background: 'var(--sky)', border: 'none' }}>
            <h3>VietCanThi mang lại</h3>
            <ul className="problist good">
              {p.solutions.map((x) => <li key={x}><span className="mk"><Icon name="check" /></span><span>{x}</span></li>)}
            </ul>
          </div>
        </div>
      </SSec>

      <CoopSteps />

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

      <section>
        <div className="wrap">
          <div className="cta-final reveal">
            <div className="field-bg" />
            <div className="inner">
              <h2>Sẵn sàng bắt đầu?</h2>
              <p>Điền bảng kiểm 5 phút để nhận lộ trình &amp; báo giá riêng cho đơn vị của bạn.</p>
              <div className="btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 24 }}>
                <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Điền bảng kiểm</a>
                <a className="btn btn-ghost btn-lg" onClick={() => window.go('/lien-he')}>Liên hệ tư vấn</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function DichVu() {
  const Ck = () => <span className="ck"><Icon name="check" /></span>;
  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">Dịch vụ</span>
          <h1 style={{ marginTop: 10 }}>Đối tác toàn diện cho dịch vụ Kiểm soát cận thị</h1>
          <p className="sub">Tư vấn setup — thiết bị — đào tạo quy trình — phần mềm. Một lộ trình rõ ràng theo năng lực của bạn.</p>
          <div className="btns"><a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Điền bảng kiểm nhận tư vấn</a></div>
        </div>
      </header>

      <SSec eyebrow="Bốn trụ cột" title="Dịch vụ của VietCanThi" head>
        <div className="grid g4">
          {window.SITE.SERVICES.map((s) => (
            <div className="card feature svc reveal" key={s.title}>
              <div className="ic"><Icon name={s.icon} /></div>
              <h3 style={{ fontSize: '1.12rem' }}>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="cta" onClick={() => window.go(s.to)}>{s.cta} <Icon name="arrow" /></span>
            </div>
          ))}
        </div>
      </SSec>

      <SSec id="mo-hinh" alt eyebrow="Mô hình 3 cấp độ" title="Standard · Advanced · Premium"
        lead="Bắt đầu từ nền tảng và nâng cấp dần — bảng kiểm giúp xác định cấp độ phù hợp.">
        <div className="levels">
          {window.SITE.LEVELS.map((lv) => (
            <div className={'level reveal' + (lv.recommended ? ' rec' : '')} key={lv.name}>
              {lv.recommended && <span className="rec-badge">Được chọn nhiều nhất</span>}
              <span className="lv-tag">{lv.tag}</span>
              <div className="lv-name">{lv.name}</div>
              <div className="lv-sub">{lv.sub}</div>
              <ul>{lv.items.map((it) => <li key={it}><Ck /><span>{it}</span></li>)}</ul>
            </div>
          ))}
        </div>
      </SSec>

      <CoopSteps />

      <section>
        <div className="wrap">
          <div className="cta-final reveal">
            <div className="field-bg" />
            <div className="inner">
              <h2>Không chắc nên bắt đầu từ đâu?</h2>
              <p>Bảng kiểm 5 phút sẽ giúp định vị hiện trạng và đề xuất cấp độ phù hợp cho phòng khám của bạn.</p>
              <div className="btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 24 }}>
                <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Điền bảng kiểm ngay</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { DichVu, ServiceSub, FaqList, SSec });