/* HNQ Tech v3 — sections part B: Cases, Stack, Counters, Testimonials, Pricing, FAQ, Contact, Footer */
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

function ICheckB() {
  return <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 8 7 12 13 4"/></svg>;
}

/* ---------- Case Studies ---------- */
function CaseStudies() {
  const cases = [
    {
      id: 'clinic', tab: 'Phòng khám sản', icon: '⚕',
      industry: 'Y tế · Healthcare',
      title: <>Hồ sơ mẹ bầu <span className="serif grad-text">đồng bộ</span> với phòng khám.</>,
      desc: 'Hệ thống quản lý phòng khám sản đi kèm ứng dụng riêng cho mẹ bầu — xem hồ sơ thai kỳ, đặt lịch khám, theo dõi cân nặng, lịch tiêm chủng… tất cả đồng bộ với hệ thống bác sĩ.',
      features: ['Hồ sơ thai kỳ điện tử', 'Ứng dụng cho mẹ bầu (iOS & Android)', 'Đặt lịch 24/7', 'Nhắc lịch tiêm chủng', 'AI gợi ý chăm sóc', 'Tích hợp BHYT'],
      stats: [
        { n: '72', s: '%', l: 'Giảm thời gian đặt lịch' },
        { n: '38', s: '%', l: 'Tăng tỷ lệ quay lại khám' },
        { n: '12k', s: '+', l: 'Mẹ bầu đang dùng' },
      ],
      Visual: CaseClinic,
    },
    {
      id: 'fnb', tab: 'Quán ăn · Nhà hàng', icon: '◉',
      industry: 'F&B · Chuỗi nhà hàng',
      title: <>Vận hành chuỗi quán <span className="serif grad-text">êm ru</span>, từ bếp đến bàn.</>,
      desc: 'Bộ phần mềm bán hàng tại quầy (POS), màn hình bếp, app gọi món bằng QR và bảng điều khiển cho chủ chuỗi — vận hành ổn định cho 14 cửa hàng tại TP.HCM.',
      features: ['POS web & tablet', 'Màn hình bếp đơn giản', 'Gọi món QR tại bàn', 'Quản lý nguyên liệu', 'Báo cáo theo thời gian thật', 'Tích hợp ví điện tử'],
      stats: [
        { n: '14', s: '', l: 'Chi nhánh đang dùng' },
        { n: '2.4k', s: '/d', l: 'Đơn xử lý mỗi ngày' },
        { n: '99.9', s: '%', l: 'Thời gian online' },
      ],
      Visual: CaseFnb,
    },
    {
      id: 'retail', tab: 'Cửa hàng bán lẻ', icon: '◈',
      industry: 'Retail · Bán lẻ',
      title: <>Quản lý cửa hàng <span className="serif grad-text">tinh gọn</span> cho chủ shop.</>,
      desc: 'Phần mềm quản lý bán hàng, kho, công nợ và CRM cho chuỗi cửa hàng — tối ưu để chủ shop tự vận hành mà không cần đội IT.',
      features: ['Bán hàng đa kênh', 'Quản lý kho FIFO', 'Công nợ nhà cung cấp', 'CRM khách thân thiết', 'Voucher & flash sale', 'Báo cáo tài chính'],
      stats: [
        { n: '3.5', s: 'h', l: 'Tiết kiệm/ngày' },
        { n: '24', s: '+', l: 'Cửa hàng triển khai' },
        { n: '4.8', s: '/5', l: 'Đánh giá hài lòng' },
      ],
      Visual: CaseRetail,
    },
    {
      id: 'edu', tab: 'Trung tâm Anh ngữ', icon: '✦',
      industry: 'Giáo dục · EdTech',
      title: <>Vận hành trung tâm Anh ngữ <span className="serif grad-text">trơn tru</span>.</>,
      desc: 'Hệ thống quản lý học viên, lớp học, học phí và app phụ huynh cho chuỗi trung tâm — đồng bộ điểm danh, bài tập, phản hồi giáo viên.',
      features: ['Quản lý học viên', 'Xếp lớp tự động', 'App cho phụ huynh', 'Học phí & công nợ', 'Báo cáo học tập', 'Nhắc lịch qua Zalo/SMS'],
      stats: [
        { n: '8', s: '', l: 'Trung tâm áp dụng' },
        { n: '5.2k', s: '', l: 'Học viên active' },
        { n: '92', s: '%', l: 'Tái đăng ký khóa mới' },
      ],
      Visual: CaseEdu,
    },
  ];
  const [active, setActive] = useStateB(0);
  const c = cases[active];
  const Visual = c.Visual;
  return (
    <section id="cases">
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>04 — Dự án tiêu biểu</span></div>
          <h2 style={{marginTop: 20}}>
            Sản phẩm chúng tôi <br/>
            <span className="serif grad-text">đã bàn giao.</span>
          </h2>
          <p className="lead">Mỗi dự án bắt đầu từ một bài toán cụ thể của khách hàng — không phải sản phẩm rập khuôn.</p>
        </div>
        <div className="cases-tabs">
          {cases.map((cc, i) => (
            <button key={cc.id} className={'case-tab' + (active === i ? ' active' : '')} onClick={() => setActive(i)}>
              <span className="industry-dot"></span>{cc.tab}
            </button>
          ))}
        </div>
        <div className="case-content" key={c.id}>
          <div className="case-info">
            <div className="industry-tag"><span style={{fontSize: 14}}>{c.icon}</span> {c.industry}</div>
            <h3>{c.title}</h3>
            <p>{c.desc}</p>
            <div className="case-features">
              {c.features.map((f, i) => <div key={i}><ICheckB/>{f}</div>)}
            </div>
            <div className="case-stats">
              {c.stats.map((s, i) => (
                <div key={i}>
                  <div className="num"><span className="accent">{s.n}</span>{s.s}</div>
                  <div className="lbl">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          <Visual />
        </div>
      </div>
    </section>
  );
}

/* ---------- Stack ---------- */
function Stack() {
  const items = [
    { kind: 'react',    name: 'React',         cat: 'Web' },
    { kind: 'next',     name: 'Next.js',       cat: 'Web' },
    { kind: 'swift',    name: 'iOS · Swift',   cat: 'Mobile' },
    { kind: 'flutter',  name: 'Flutter',       cat: 'Mobile' },
    { kind: 'node',     name: 'Node.js',       cat: 'Backend' },
    { kind: 'postgres', name: 'PostgreSQL',    cat: 'Database' },
    { kind: 'aws',      name: 'AWS',           cat: 'Cloud' },
    { kind: 'docker',   name: 'Docker',        cat: 'DevOps' },
    { kind: 'openai',   name: 'OpenAI · LLM',  cat: 'AI' },
    { kind: 'tf',       name: 'TensorFlow',    cat: 'AI' },
    { kind: 'figma',    name: 'Figma',         cat: 'Design' },
    { kind: 'stripe',   name: 'Stripe · VNPay', cat: 'Payments' },
  ];
  return (
    <section id="stack" className="stack">
      <div className="container">
        <div className="sec-head sec-head-center reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>05 — Công nghệ chúng tôi dùng</span></div>
          <h2 style={{marginTop: 20}}>
            Công nghệ <span className="serif grad-text">hiện đại</span>,<br/>
            được lựa chọn cẩn thận.
          </h2>
          <p className="lead" style={{textAlign:'center'}}>
            Lựa chọn theo bài toán — không chạy theo trend. AI, cloud, mobile-first — tất cả đều ổn định, có cộng đồng lớn, dễ tuyển người maintain.
          </p>
        </div>
        <div className="stack-grid">
          {items.map((it, i) => (
            <div className="stack-cell reveal" key={it.kind} style={{transitionDelay: (i * 40) + 'ms'}}>
              <div className="logo"><StackLogo kind={it.kind} /></div>
              <div>
                <div className="name">{it.name}</div>
                <div className="cat">{it.cat}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Counters ---------- */
function Counters() {
  const ref = useRefB(null);
  const [run, setRun] = useStateB(false);
  useEffectB(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setRun(true); }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const v1 = useCounter(40, run);
  const v2 = useCounter(6, run);
  const v3 = useCounter(28, run);
  const v4 = useCounter(99, run);
  const items = [
    { n: v1, s: '+', l: 'Dự án đã giao' },
    { n: v2, s: ' năm', l: 'Đồng hành khách hàng' },
    { n: v3, s: '+', l: 'Khách hàng tin tưởng' },
    { n: v4, s: '%', l: 'Vẫn dùng sau 2 năm' },
  ];
  return (
    <section ref={ref}>
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>06 — Vài con số</span></div>
          <h2 style={{marginTop: 20}}>Con số <span className="serif grad-text">thay cho lời hứa.</span></h2>
        </div>
        <div className="counters reveal">
          {items.map((it, i) => (
            <div className="counter-cell" key={i}>
              <div className="counter-num">{it.n}<span className="suffix">{it.s}</span></div>
              <div className="counter-lbl">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonials ---------- */
function Testimonials() {
  const items = [
    {
      quote: 'App cho mẹ bầu đẹp và dễ dùng hơn cả những app lớn chúng tôi từng thử. Đội HNQ chịu khó nghe phản hồi từ các bác sĩ rồi tinh chỉnh từng chi tiết.',
      name: 'BS. Nguyễn Thị Hà',
      role: 'GĐ Phòng khám MaternityCare',
      avatar: 'NH', cls: '',
      featured: true,
    },
    {
      quote: 'Hệ thống POS chạy ổn định suốt giờ cao điểm. Đội bếp dùng KDS quen sau một buổi.',
      name: 'Trần Quốc Hưng',
      role: 'Founder, chuỗi Phở 14 chi nhánh',
      avatar: 'QH', cls: 'a2',
    },
    {
      quote: 'Khác với agency cũ chỉ làm xong rồi biến mất, HNQ đồng hành tới 18 tháng sau go-live.',
      name: 'Lê Thanh Vy',
      role: 'COO, ClassFlow Education',
      avatar: 'TV', cls: 'a3',
    },
  ];
  return (
    <section id="testimonials">
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>07 — Khách hàng nói gì</span></div>
          <h2 style={{marginTop: 20}}>Họ chọn chúng tôi <span className="serif grad-text">vì điều gì.</span></h2>
        </div>
        <div className="testimonials-grid">
          {items.map((t, i) => (
            <div className={'testimonial reveal' + (t.featured ? ' featured' : '')} key={i} style={{transitionDelay: (i * 80) + 'ms'}}>
              <div className="quote-stars">{'★★★★★'}</div>
              <blockquote>"{t.quote}"</blockquote>
              <div className="testimonial-meta">
                <div className={'avatar ' + t.cls}>{t.avatar}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing() {
  const plans = [
    {
      name: 'Starter', en: 'MVP một sản phẩm', price: 'từ 120tr', unit: '/ dự án',
      list: ['Phù hợp ứng dụng MVP đơn giản', '1 web app hoặc 1 mobile app', 'Phân tích & thiết kế cơ bản', '6–8 tuần triển khai', 'Bảo hành 3 tháng'],
      cta: 'Bắt đầu nhỏ',
    },
    {
      name: 'Standard', en: 'Dự án trọn gói', price: 'từ 320tr', unit: '/ dự án', featured: true,
      list: ['Web + mobile đồng bộ', 'Phân tích nghiệp vụ chi tiết', 'Tích hợp AI nâng cao', 'Design system riêng', '10–14 tuần triển khai', 'SLA bảo hành 12 tháng'],
      cta: 'Phổ biến nhất',
    },
    {
      name: 'Enterprise', en: 'Hệ thống đa module', price: 'liên hệ', unit: '',
      list: ['Hệ thống đa module, đa chi nhánh', 'Tích hợp ERP / CRM / 3rd-party', 'AI model riêng', 'Đội dev riêng ≥ 4 người', 'SLA 24/7 + on-site support', 'Đồng hành lâu dài'],
      cta: 'Đặt lịch tư vấn',
    },
  ];
  return (
    <section id="pricing">
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>08 — Bảng giá</span></div>
          <h2 style={{marginTop: 20}}>Gói dịch vụ <span className="serif grad-text">linh hoạt</span> theo quy mô.</h2>
          <p className="lead">Khung giá tham khảo — báo giá chính thức được điều chỉnh theo phạm vi thực tế sau buổi tư vấn miễn phí.</p>
        </div>
        <div className="pricing-grid">
          {plans.map((p, i) => (
            <div className={'price-card reveal' + (p.featured ? ' featured' : '')} key={i} style={{transitionDelay: (i * 80) + 'ms'}}>
              {p.featured && <span className="price-tag">Đề xuất</span>}
              <div className="price-name">{p.name}</div>
              <h3>{p.en}</h3>
              <div className="price-val">{p.price}<small>{p.unit}</small></div>
              <ul className="price-list">
                {p.list.map((l, j) => <li key={j}><ICheckB/>{l}</li>)}
              </ul>
              <a href="#contact" className={'btn ' + (p.featured ? 'btn-primary' : 'btn-ghost')} style={{justifyContent:'center', marginTop:'auto'}}>{p.cta} <span className="arrow">↗</span></a>
            </div>
          ))}
        </div>
        <p className="pricing-note">Tất cả gói đều bao gồm: tư vấn miễn phí · source code thuộc về bạn · đào tạo đội ngũ · tài liệu chi tiết.</p>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const items = [
    { q: 'Mất bao lâu để triển khai một dự án?', a: 'Tùy phạm vi — MVP đơn giản 6–8 tuần, dự án trọn gói 10–14 tuần, hệ thống đa module có thể 4–6 tháng. Trước khi báo giá chúng tôi luôn có buổi tư vấn để ước lượng chính xác.' },
    { q: 'Tôi không rành kỹ thuật, có làm việc được không?', a: 'Hoàn toàn được — đa số khách hàng của chúng tôi là chủ doanh nghiệp, bác sĩ, giáo viên. Chúng tôi nói bằng ngôn ngữ nghiệp vụ chứ không bằng từ kỹ thuật, mọi tài liệu đều có bản dễ hiểu.' },
    { q: 'Có dùng AI thật, hay chỉ là chiêu marketing?', a: 'Chúng tôi tích hợp AI thật vào sản phẩm khi nó giải quyết được vấn đề thực — như chatbot tư vấn, gợi ý sản phẩm, phân loại tự động, hay tóm tắt báo cáo. AI là công cụ, không phải đích đến.' },
    { q: 'Sau khi bàn giao có hỗ trợ tiếp không?', a: 'Có. Mỗi dự án đi kèm SLA bảo hành 3–12 tháng tùy gói. Hết bảo hành, bạn có thể thuê chúng tôi maintain theo gói tháng — phần lớn khách hàng vẫn tiếp tục với chúng tôi.' },
    { q: 'Quyền sở hữu source code thuộc về ai?', a: 'Thuộc về bạn — 100%. Sau khi thanh toán đủ, chúng tôi bàn giao toàn bộ source code, tài liệu, design file. Bạn có thể chuyển cho team in-house hoặc bên khác bất cứ lúc nào.' },
    { q: 'Có nhận dự án nhỏ không?', a: 'Có, từ những dự án 40–80 triệu chúng tôi vẫn nhận nếu bài toán rõ ràng và phù hợp. Quan trọng là chúng ta hiểu nhau, không phải giá trị hợp đồng.' },
  ];
  const [open, setOpen] = useStateB(0);
  return (
    <section id="faq">
      <div className="container container-narrow">
        <div className="sec-head sec-head-center reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>09 — Câu hỏi thường gặp</span></div>
          <h2 style={{marginTop: 20}}>Những câu khách hàng <span className="serif grad-text">hay hỏi.</span></h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="qrow">
                  <span className="qnum">0{i + 1}</span>
                  <span>{it.q}</span>
                </div>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner"><p>{it.a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function Contact() {
  const [budget, setBudget] = useStateB('120-300tr');
  const [type, setType] = useStateB([]);
  const [status, setStatus] = useStateB('');
  const toggle = (t) => setType(type.includes(t) ? type.filter(x => x !== t) : [...type, t]);
  const submit = (e) => {
    e.preventDefault();
    setStatus('✓ Đã nhận. Chúng tôi sẽ liên hệ trong 24 giờ.');
    setTimeout(() => setStatus(''), 5000);
  };
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info reveal">
            <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>10 — Kết nối với chúng tôi</span></div>
            <h2 style={{marginTop: 20}}>
              Kể chúng tôi nghe<br/>
              <span className="serif grad-text">về bài toán của bạn.</span>
            </h2>
            <p className="lead">
              Một buổi tư vấn 60 phút — miễn phí, không cam kết. Cuối buổi bạn có một bản tóm tắt phạm vi và ước lượng sơ bộ.
            </p>
            <div className="contact-meta">
              <div className="contact-meta-item">
                <div className="lbl">Email</div>
                <div className="val glow">hello@hnqtech.vn</div>
              </div>
              <div className="contact-meta-item">
                <div className="lbl">Hotline</div>
                <div className="val">+84 28 7300 0188 · (T2–T7, 9:00–18:00)</div>
              </div>
              <div className="contact-meta-item">
                <div className="lbl">Văn phòng</div>
                <div className="val">Tầng 7, 22 Lê Thánh Tôn, Q.1, TP.HCM</div>
              </div>
            </div>
          </div>
          <form className="contact-form reveal" onSubmit={submit}>
            <div className="form-header">
              <h4>Gửi yêu cầu tư vấn</h4>
              <p>Phản hồi trong 24 giờ làm việc</p>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Họ và tên</label>
                <input type="text" required placeholder="Nguyễn Văn A" />
              </div>
              <div className="field">
                <label>Công ty</label>
                <input type="text" placeholder="(tuỳ chọn)" />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label>Email</label>
                <input type="email" required placeholder="you@company.com" />
              </div>
              <div className="field">
                <label>Số điện thoại</label>
                <input type="tel" placeholder="0xxx xxx xxx" />
              </div>
            </div>
            <div className="field">
              <label>Loại sản phẩm</label>
              <div className="chip-group">
                {['Web app', 'Mobile app', 'POS / Retail', 'Healthcare', 'Education', 'AI / Tự động hoá', 'Khác'].map(t => (
                  <span key={t} className={'chip' + (type.includes(t) ? ' active' : '')} onClick={() => toggle(t)}>{t}</span>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Ngân sách dự kiến</label>
              <div className="chip-group">
                {['< 120tr', '120-300tr', '300tr-1 tỷ', '> 1 tỷ', 'Chưa rõ'].map(b => (
                  <span key={b} className={'chip' + (budget === b ? ' active' : '')} onClick={() => setBudget(b)}>{b}</span>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Mô tả ngắn về dự án</label>
              <textarea required placeholder="Bạn muốn giải quyết vấn đề gì? Đối tượng người dùng là ai?"></textarea>
            </div>
            <button type="submit" className="btn btn-primary" style={{width:'100%', justifyContent:'center'}}>
              Gửi yêu cầu tư vấn <span className="arrow">↗</span>
            </button>
            <div className="form-status">{status}</div>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="brand">
              <div className="brand-mark">H</div>
              <div className="brand-name">
                <b>HNQ Tech</b>
                <small>Human · Neat · Qualified</small>
              </div>
            </div>
            <p className="footer-tag">Phần mềm thông minh cho con người — kết hợp AI hiện đại với thiết kế lấy người dùng làm trung tâm.</p>
          </div>
          <div>
            <h4>Dịch vụ</h4>
            <div className="footer-links">
              <a href="#services">Tư vấn nghiệp vụ</a>
              <a href="#services">Thiết kế UX/UI</a>
              <a href="#services">Phát triển phần mềm</a>
              <a href="#services">Tích hợp AI</a>
              <a href="#services">Bảo trì & nâng cấp</a>
            </div>
          </div>
          <div>
            <h4>Lĩnh vực</h4>
            <div className="footer-links">
              <a href="#cases">Healthcare</a>
              <a href="#cases">F&B · Restaurant</a>
              <a href="#cases">Retail · Cửa hàng</a>
              <a href="#cases">Education · EdTech</a>
              <a href="#cases">Doanh nghiệp SME</a>
            </div>
          </div>
          <div>
            <h4>Liên hệ</h4>
            <div className="footer-links">
              <a href="mailto:hello@hnqtech.vn">hello@hnqtech.vn</a>
              <a href="tel:+842873000188">+84 28 7300 0188</a>
              <a href="#">22 Lê Thánh Tôn, Q.1, TP.HCM</a>
              <a href="#">LinkedIn · GitHub</a>
            </div>
          </div>
        </div>
        <div className="footer-bot">
          <div>© 2026 HNQ Tech Co., Ltd · All rights reserved</div>
          <div className="right">
            <a href="#">Chính sách bảo mật</a>
            <a href="#">Điều khoản dịch vụ</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CaseStudies, Stack, Counters, Testimonials, Pricing, FAQ, Contact, Footer });