/* VietCanThi homepage (Bước 2) — hero dual-entry, trust, services, software, 3-level, event, CTA */
const { useState: hS, useEffect: hE } = React;

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

function HomeHero() {
  return (
    <header className="home-hero">
      <div className="field-bg" />
      <div className="deco" aria-hidden="true"><Sunburst size={420} color="amber" /></div>
      <div className="wrap">
        <div className="home-hero-grid">
          <div>
            <span className="eyebrow on-navy mk">Trung tâm KSCT trẻ em · Giải pháp cho phòng khám đối tác</span>
            <h1 style={{ marginTop: 14 }}><span className="b2c">Giúp đôi mắt trẻ luôn sáng — trọn đời</span></h1>
            <p className="b2b">Giải pháp &amp; phần mềm Kiểm soát cận thị cho phòng khám mắt: tư vấn setup — thiết bị — đào tạo quy trình — số hóa tiến triển.</p>
            <div className="btns">
              <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/trai-nghiem-phan-mem')}>Đăng ký tài khoản</a>
              <a className="btn btn-ghost btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Nhận tư vấn cho phòng khám</a>
            </div>
          </div>
          <div className="entry-stack reveal">
            <button className="entry" onClick={() => window.scrollToId('phan-mem')}>
              <span className="ic"><Icon name="users" /></span>
              <span><h3>Tôi là phụ huynh</h3><p>Hiểu chỉ số của con &amp; theo dõi tiến triển cận thị.</p></span>
              <span className="go"><Icon name="arrow" /></span>
            </button>
            <button className="entry" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>
              <span className="ic"><Icon name="clinic" /></span>
              <span><h3>Tôi là phòng khám</h3><p>Triển khai / nâng cấp dịch vụ KSCT bài bản.</p></span>
              <span className="go"><Icon name="arrow" /></span>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

function TrustBar() {
  return (
    <div className="trust">
      <div className="wrap">
        {window.SITE.TRUST.map((s) => (
          <div className="stat" key={s.l}><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
        ))}
      </div>
    </div>
  );
}

function Services() {
  return (
    <HSection id="dich-vu" eyebrow="Dịch vụ" title="Đối tác toàn diện cho dịch vụ Kiểm soát cận thị"
      lead="Từ khảo sát hiện trạng tới đồng hành sau triển khai — bốn trụ cột dịch vụ của VietCanThi.">
      <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>
    </HSection>
  );
}

function SoftwareTeaser() {
  return (
    <HSection id="phan-mem" alt eyebrow="Phần mềm VietCanThi" title="Số hóa hồ sơ &amp; theo dõi tiến triển cận thị"
      lead="Phần mềm quản lý chuyên cho KSCT — chuẩn lâm sàng, minh bạch, không hộp đen.">
      <div className="grid g2" style={{ alignItems: 'center', gap: 48 }}>
        <div className="laptop reveal">
          <div className="screen">
            <div className="bar"><i /><i /><i /></div>
            <div className="ph" style={{ aspectRatio: '16/10', borderRadius: 0, border: 'none' }}>[ Ảnh app MCP — đã re-skin navy/amber<br/>biểu đồ percentile AL theo tuổi ]</div>
          </div>
          <div className="base" />
        </div>
        <div className="reveal">
          <ul className="sb" style={{ gap: 20 }}>
            {window.SITE.SOFTWARE_FEATURES.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.08rem' }}>{f.t}</b><span className="muted" style={{ fontWeight: 400 }}>{f.d}</span></span></li>
            ))}
          </ul>
          <div className="btns" style={{ display: 'flex', gap: 14, marginTop: 28 }}>
            <a className="btn btn-primary" onClick={() => window.go('/phan-mem')}>Khám phá phần mềm</a>
            <a className="btn btn-outline" onClick={() => window.go('webinar.html#/trai-nghiem-phan-mem')}>Dùng thử miễn phí</a>
          </div>
        </div>
      </div>
    </HSection>
  );
}

function Levels() {
  const Ck = () => <span className="ck"><Icon name="check" /></span>;
  return (
    <HSection id="mo-hinh" eyebrow="Mô hình 3 cấp độ" title="Lộ trình rõ ràng theo năng lực của bạn"
      lead="Bắt đầu từ nền tảng và nâng cấp dần — bảng kiểm 5 phút 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>
      <div className="center" style={{ marginTop: 32 }}>
        <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Xác định cấp độ của tôi →</a>
      </div>
    </HSection>
  );
}

function MiniCountdown() {
  const iso = window.VTC.WEBINAR.dateISO;
  const calc = () => { const d = Math.max(0, new Date(iso).getTime() - Date.now()); return { days: Math.floor(d / 86400000), hours: Math.floor((d % 86400000) / 3600000), mins: Math.floor((d % 3600000) / 60000) }; };
  const [t, setT] = hS(calc);
  hE(() => { const id = setInterval(() => setT(calc()), 30000); return () => clearInterval(id); }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="ec-cd">
      {[['Ngày', t.days], ['Giờ', t.hours], ['Phút', t.mins]].map(([l, n]) => (
        <div className="u" key={l}><div className="n">{pad(n)}</div><div className="x">{l}</div></div>
      ))}
    </div>
  );
}

function UpcomingEvent() {
  const W = window.VTC.WEBINAR;
  return (
    <HSection id="su-kien" alt eyebrow="Sự kiện sắp tới" title="Webinar Kiểm soát Cận thị 2026">
      <div className="event-card reveal">
        <div className="field-bg" />
        <div className="ec-main">
          <span className="badge badge-amber">Trực tuyến · Miễn phí</span>
          <h3>{W.title}</h3>
          <p style={{ color: '#cdd7f7', margin: 0, maxWidth: '42ch' }}>{W.subtitle}</p>
          <div className="ec-meta">
            <span><Icon name="calendar" /> {W.dateText}</span>
            <span><Icon name="clock" /> {W.timeText}</span>
            <span><Icon name="video" /> Zoom Webinar</span>
          </div>
          <div className="btns" style={{ display: 'flex', gap: 14 }}>
            <a className="btn btn-accent" onClick={() => window.go('webinar.html')}>Đăng ký tham dự</a>
            <a className="btn btn-ghost" onClick={() => window.go('webinar.html#agenda')}>Xem chương trình</a>
          </div>
        </div>
        <div className="ec-side">
          <div style={{ fontWeight: 800, color: '#fff', marginBottom: 16 }}>Bắt đầu sau</div>
          <MiniCountdown />
        </div>
      </div>
    </HSection>
  );
}

function Testimonial() {
  return (
    <HSection eyebrow="Cảm nhận" title="Phòng khám nói gì về VietCanThi">
      <div className="grid g2">
        {[1, 2].map((i) => (
          <div className="quote reveal" key={i}>
            <div className="mark">“</div>
            <p>Bộ quy trình và phần mềm giúp chúng tôi chuẩn hóa tư vấn KSCT, phụ huynh hiểu chỉ số của con nhanh hơn hẳn. <span className="placeholder">NỘI DUNG THẬT — CẦN DUYỆT</span></p>
            <div className="who"><span className="av" /><span><b>BS. [Tên]</b><br /><span className="muted">[Phòng khám] · [Tỉnh/Thành]</span></span></div>
          </div>
        ))}
      </div>
    </HSection>
  );
}

function FinalCTA() {
  return (
    <section>
      <div className="wrap">
        <div className="cta-final reveal">
          <div className="field-bg" />
          <div className="inner">
            <span className="eyebrow on-navy mk">Bắt đầu trong 5 phút</span>
            <h2 style={{ marginTop: 12 }}>Bảng kiểm 5 phút — nhận lộ trình setup riêng cho phòng khám của bạn</h2>
            <p>Trả lời 9 phần ngắn về nhân sự, thiết bị và quy trình; đội ngũ VietCanThi sẽ đề xuất cấp độ &amp; lộ trình phù hợp.</p>
            <div className="btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 26 }}>
              <a className="btn btn-accent btn-lg" onClick={() => window.go('webinar.html#/bang-kiem-phong-kham')}>Điền bảng kiểm ngay</a>
              <a className="btn btn-ghost btn-lg" onClick={() => window.go('/dich-vu')}>Tìm hiểu dịch vụ</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home() {
  return (
    <main>
      <HomeHero />
      <TrustBar />
      <Services />
      <SoftwareTeaser />
      <Levels />
      <UpcomingEvent />
      <Testimonial />
      <FinalCTA />
    </main>
  );
}

Object.assign(window, { Home });