/* VietCanThi — Software page /phan-mem (Bước 3) */
const { useState: pmS } = React;

function PSection({ 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>
  );
}

/* clean percentile chart — navy line, sky percentile band, amber 'now' point, coral threshold (brand §6.6) */
function ALChart() {
  // x: 380 wide plot from 50..400 ; y: 210 tall plot from 30..210
  const xs = [50, 120, 190, 260, 330, 400];
  const ages = ['6', '8', '10', '12', '14', '16'];
  // patient AL line (mm) mapped to y (higher mm -> higher up)
  const pts = [180, 160, 138, 120, 108, 100];
  const p95 = [150, 132, 116, 102, 92, 84];
  const p50 = [196, 182, 168, 156, 146, 138];
  const path = (arr) => arr.map((y, i) => `${i ? 'L' : 'M'}${xs[i]},${y}`).join(' ');
  const band = `M${xs[0]},${p95[0]} ${xs.slice(1).map((x, i) => `L${x},${p95[i + 1]}`).join(' ')} L${xs[xs.length - 1]},${p50[p50.length - 1]} ${[...p50].reverse().map((y, i) => `L${[...xs].reverse()[i]},${y}`).join(' ')} Z`;
  return (
    <div>
      <svg className="alchart" viewBox="0 0 430 250" role="img" aria-label="Biểu đồ percentile chiều dài trục nhãn cầu theo tuổi">
        {/* grid */}
        {[40, 90, 140, 190].map((y) => <line key={y} x1="50" y1={y} x2="410" y2={y} stroke="#E4EBFB" strokeWidth="1" />)}
        {/* axes */}
        <line x1="50" y1="20" x2="50" y2="215" stroke="#C9D4F4" strokeWidth="1.5" />
        <line x1="50" y1="215" x2="415" y2="215" stroke="#C9D4F4" strokeWidth="1.5" />
        {/* percentile band */}
        <path d={band} fill="#E4EBFB" opacity="0.85" />
        {/* threshold (coral dashed) */}
        <line x1="50" y1="78" x2="410" y2="78" stroke="#E8703A" strokeWidth="1.6" strokeDasharray="5 5" />
        {/* patient line */}
        <path d={path(pts)} fill="none" stroke="#052698" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        {pts.slice(0, -1).map((y, i) => <circle key={i} cx={xs[i]} cy={y} r="3.5" fill="#052698" />)}
        {/* 'now' point amber */}
        <circle cx={xs[pts.length - 1]} cy={pts[pts.length - 1]} r="7" fill="#FFB13C" stroke="#fff" strokeWidth="2.5" />
        {/* labels */}
        {xs.map((x, i) => <text key={i} x={x} y="232" textAnchor="middle" fontSize="11" fontWeight="700" fill="#50608F">{ages[i]}</text>)}
        <text x="12" y="120" fontSize="11" fontWeight="700" fill="#50608F" transform="rotate(-90 12 120)" textAnchor="middle">AL (mm)</text>
      </svg>
      <div className="chart-legend">
        <span><i style={{ background: '#052698' }} />AL bệnh nhân</span>
        <span><i style={{ background: '#E4EBFB' }} />Dải percentile</span>
        <span><i style={{ background: '#FFB13C' }} />Hiện tại</span>
        <span><i style={{ background: '#E8703A' }} />Ngưỡng cảnh báo</span>
      </div>
    </div>
  );
}

function UspMedia({ kind, label }) {
  if (kind === 'chart') return <ALChart />;
  if (kind === 'report') return (
    <div className="report-mock">
      <div className="head">
        <span className="lg"><img src="brand-assets/logo-rays-navy.svg" alt="" /> Báo cáo</span>
        <span className="badge badge-amber">Phụ huynh</span>
      </div>
      <div className="statbox"><div><small>Chiều dài trục nhãn cầu</small><div className="v">24.1 mm</div></div><span className="badge badge-avail" style={{ background: 'rgba(255,255,255,.14)', color: '#fff' }}>Đúng lộ trình</span></div>
      <p style={{ margin: '6px 0 2px', fontWeight: 700, color: 'var(--navy)' }}>Tăng trưởng đang chậm lại — tuyệt vời!</p>
      <div className="line m" /><div className="line" /><div className="line s" />
      <div style={{ fontSize: '.75rem', color: 'var(--ink-soft)', fontFamily: 'ui-monospace,Menlo,monospace', marginTop: 4 }}>{label}</div>
    </div>
  );
  // rules
  const rows = [['Thấp / An toàn', '#22A06B', 'percentile AL < 50'], ['Trung bình / Theo dõi', '#E8A93C', 'AL/CR 3.0–3.2'], ['Cao', '#E8703A', '≥ 0.3 mm/năm'], ['Rất cao', '#D7263D', 'AL/CR > 3.2']];
  return (
    <div className="rules-mock">
      {rows.map(([t, c, s]) => (
        <div className="rule-row" key={t}>
          <span className="risk" style={{ background: c, fontSize: '.78rem', padding: '5px 11px' }}>{t}</span>
          <span className="rk">{s}</span>
          <span className="src">§ nguồn</span>
        </div>
      ))}
      <div style={{ fontSize: '.75rem', color: 'var(--ink-soft)', fontFamily: 'ui-monospace,Menlo,monospace', marginTop: 4 }}>{label}</div>
    </div>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = pmS(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 PhanMem() {
  const S = window.SITE;
  return (
    <main>
      <header className="sw-hero">
        <div className="field-bg" />
        <div className="wrap">
          <div className="sw-hero-grid">
            <div>
              <span className="eyebrow on-navy mk">Phần mềm VietCanThi MCP</span>
              <h1 style={{ marginTop: 14 }}>Phần mềm Quản lý &amp; Kiểm soát Cận thị</h1>
              <p className="sub">Hồ sơ sinh trắc theo thời gian · Phân tầng nguy cơ tự động · Báo cáo phụ huynh mang thương hiệu phòng khám.</p>
              <div className="pills">
                <span><Icon name="check" /> Chuẩn lâm sàng, dẫn nguồn</span>
                <span><Icon name="check" /> Không hộp đen</span>
                <span><Icon name="check" /> Tuân thủ NĐ 13/2023</span>
              </div>
              <div className="btns">
                <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/trai-nghiem-phan-mem')}>Dùng thử miễn phí</a>
                <a className="btn btn-ghost btn-lg" onClick={() => window.toast({ title: 'Đặt lịch demo', sub: 'Form đặt lịch demo 1-1 (placeholder).' })}>Đặt lịch demo</a>
              </div>
            </div>
            <div className="laptop reveal">
              <div className="screen">
                <div className="bar"><i /><i /><i /></div>
                <div style={{ background: '#fff', padding: 18 }}><ALChart /></div>
              </div>
              <div className="base" />
            </div>
          </div>
        </div>
      </header>

      <PSection id="modules" eyebrow="Bộ module" title="Một suite, minh bạch theo lộ trình"
        lead="Trung thực về trạng thái phát triển — bạn biết chính xác cái gì đã có và cái gì sắp ra mắt.">
        <div className="modules">
          {S.MODULES.map((m) => (
            <div className="card module reveal" key={m.title}>
              <div className="top">
                <span className="ic"><Icon name={m.icon} /></span>
                {m.status === 'avail'
                  ? <span className="badge badge-avail"><span className="badge-dot" />Có sẵn</span>
                  : <span className="badge badge-soon">Sắp ra mắt</span>}
              </div>
              <h3>{m.title}</h3>
              <p>{m.desc}</p>
              <span className="phase">{m.phase}</span>
            </div>
          ))}
        </div>
      </PSection>

      <PSection id="usp" alt eyebrow="Vì sao chọn VietCanThi" title="Ba điều làm nên khác biệt" head>
        <div style={{ display: 'grid', gap: 18 }}>
          {S.USPS.map((u) => (
            <div className="usp reveal" key={u.title}>
              <div>
                <span className="eyebrow">{u.eyebrow}</span>
                <h2>{u.title}</h2>
                <p className="lead" style={{ fontSize: '1.05rem' }}>{u.desc}</p>
              </div>
              <div className="usp-media">
                <div className="bar"><i /><i /><i /></div>
                <div className="pane"><UspMedia kind={u.shot} label={u.shotLabel} /></div>
              </div>
            </div>
          ))}
        </div>
      </PSection>

      <PSection id="compare" eyebrow="So sánh" title="Sổ giấy / Excel vs VietCanThi" head>
        <div className="compare reveal">
          <div className="crow h"><div>Hạng mục</div><div className="old">Sổ giấy / Excel</div><div className="vtc">VietCanThi</div></div>
          {S.COMPARE.map((r) => (
            <div className="crow" key={r.k}>
              <div className="k">{r.k}</div>
              <div className="old">{r.old}</div>
              <div className="vtc"><span className="ck"><Icon name="check" /></span><span>{r.vtc}</span></div>
            </div>
          ))}
        </div>
      </PSection>

      <PSection id="bao-mat" alt eyebrow="An toàn dữ liệu" title="Dữ liệu bệnh nhân được bảo vệ nghiêm túc">
        <div className="grid g4">
          {S.SECURITY.map((s) => (
            <div className="card feature reveal" key={s.t}>
              <div className="ic"><Icon name={s.icon} /></div>
              <h3 style={{ fontSize: '1.08rem' }}>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </PSection>

      <PSection head={false}>
        <div className="pricing reveal">
          <span className="eyebrow">Giá</span>
          <h2 style={{ marginTop: 8 }}>Miễn phí trong giai đoạn trải nghiệm</h2>
          <p className="lead mx-auto" style={{ marginTop: 8 }}>Phòng khám đối tác dùng miễn phí khi tham gia giai đoạn trải nghiệm. Bảng giá chính thức sẽ liên hệ báo giá theo quy mô.</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#/trai-nghiem-phan-mem')}>Đăng ký dùng thử</a>
            <a className="btn btn-outline btn-lg" onClick={() => window.toast({ title: 'Liên hệ báo giá', sub: 'Form liên hệ (placeholder — Bước 4).' })}>Liên hệ báo giá</a>
          </div>
        </div>
      </PSection>

      <PSection id="faq" eyebrow="Hỏi đáp" title="Câu hỏi thường gặp về phần mềm">
        <div className="faq">
          {S.SW_FAQ.map((f) => <FaqItem key={f.q} q={f.q} a={f.a} />)}
        </div>
        <div className="disclaimer-strip" style={{ marginTop: 40 }}>
          <Icon name="shield" />
          <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>
      </PSection>
    </main>
  );
}

Object.assign(window, { PhanMem });