/* HNQ Tech v3 — sections part A: Nav, Hero, Services, Values, Process */
const { useState, useEffect, useRef } = React;

/* ---------- hooks ---------- */
function useTyping(words, speed = 90, hold = 1400) {
  const [text, setText] = useState('');
  const [wi, setWi] = useState(0);
  const [del, setDel] = useState(false);
  useEffect(() => {
    const w = words[wi];
    let t;
    if (!del && text === w) { t = setTimeout(() => setDel(true), hold); }
    else if (del && text === '') { setDel(false); setWi((wi + 1) % words.length); }
    else {
      t = setTimeout(() => {
        setText(del ? w.slice(0, text.length - 1) : w.slice(0, text.length + 1));
      }, del ? speed / 2.2 : speed);
    }
    return () => clearTimeout(t);
  }, [text, wi, del]);
  return text;
}

function useCounter(target, run, dur = 1500) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!run) return;
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, target]);
  return v;
}

/* ---------- check icon ---------- */
function ICheck() {
  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>;
}

/* ---------- Nav ---------- */
function Nav({ theme, setTheme }) {
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 8);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? (window.scrollY / h) * 100 : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="brand" href="#top">
          <div className="brand-mark">H</div>
          <div className="brand-name">
            <b>HNQ Tech</b>
            <small>Human · Neat · Qualified</small>
          </div>
        </a>
        <div className="nav-links">
          <a href="#services">Dịch vụ</a>
          <a href="#values">Giá trị</a>
          <a href="#process">Quy trình</a>
          <a href="#cases">Dự án</a>
          <a href="#stack">Công nghệ</a>
          <a href="#pricing">Bảng giá</a>
        </div>
        <div style={{display:'flex', alignItems:'center'}}>
          <button className="theme-toggle" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="Đổi giao diện">
            {theme === 'dark' ? '☀' : '☾'}
          </button>
          <a className="nav-cta" href="#contact">Tư vấn miễn phí →</a>
        </div>
      </div>
      <div className="nav-progress" style={{ width: progress + '%' }}></div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  const typed = useTyping([
    'phòng khám',
    'quán ăn',
    'cửa hàng',
    'trung tâm',
    'doanh nghiệp',
  ]);
  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="hero-grid-bg"></div>
      <div className="hero-orb o1"></div>
      <div className="hero-orb o2"></div>
      <div className="hero-orb o3"></div>
      <div className="container">
        <div className="hero-inner">
          <span className="tag-pill"><span className="badge">AI</span> Phần mềm làm theo yêu cầu · từ 2019</span>
          <h1>
            Phần mềm <span className="grad-text serif">thông minh</span><br/>
            cho <span className="typed">{typed}</span>
          </h1>
          <p className="lead hero-lead">
            HNQ Tech kết hợp <b style={{color:'var(--ink)'}}>thiết kế lấy con người làm trung tâm</b> với công nghệ AI hiện đại — xây phần mềm vừa khít với cách đội ngũ bạn đang làm việc.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact">Đặt lịch tư vấn miễn phí <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="#cases">Xem dự án đã làm <span className="arrow">↓</span></a>
          </div>
        </div>

        <div className="hero-stage reveal">
          <div className="hero-stage-inner">
            <HeroPhone />
            <HeroMain />
            <HeroAI />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Services ---------- */
function Services() {
  const items = [
    {
      kind: 'listen',
      tag: '01 · Discovery',
      title: <>Lắng nghe <span className="em">đúng vấn đề</span></>,
      desc: 'Chúng tôi không bán giải pháp có sẵn — ngồi xuống nghe bạn kể về công việc, rồi mới đề xuất hướng đi phù hợp.',
      list: ['Buổi tư vấn 60–90 phút', 'Tóm tắt vấn đề bằng ngôn ngữ của bạn', 'Đề xuất giải pháp khả thi'],
    },
    {
      kind: 'design',
      tag: '02 · Design',
      title: <>Thiết kế <span className="em">dễ dùng</span></>,
      desc: 'Giao diện gọn gàng, ai cũng học được trong vài phút — kể cả nhân viên mới hay khách hàng lớn tuổi.',
      list: ['Mẫu bấm được trước khi code', 'Bộ nhận diện riêng cho thương hiệu', 'Tối ưu trải nghiệm thực tế'],
    },
    {
      kind: 'build',
      tag: '03 · Build',
      title: <>Xây dựng <span className="em">& đồng hành</span></>,
      desc: 'Code chất lượng cao, ứng dụng AI để tăng tốc và tối ưu, ở lại đồng hành sau khi go-live.',
      list: ['Web, iOS, Android — đồng bộ', 'Tích hợp AI tăng năng suất', 'Hỗ trợ 24/7 sau bàn giao'],
    },
  ];
  return (
    <section id="services">
      <div className="container">
        <div className="sec-head-row">
          <div className="reveal">
            <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>01 — Chúng tôi làm gì</span></div>
            <h2 style={{marginTop: 20}}>
              Một đội ngũ duy nhất,<br/>
              <span className="serif grad-text">ý tưởng tới vận hành.</span>
            </h2>
          </div>
          <p className="lead reveal">
            Bạn không cần đi qua nhiều bên — chúng tôi nhận yêu cầu, lắng nghe, thiết kế, lập trình, và ở lại hỗ trợ trong nhiều năm.
          </p>
        </div>
        <div className="services-grid">
          {items.map((it, i) => (
            <div className="service-card reveal" key={i} style={{transitionDelay: (i * 100) + 'ms'}}>
              <div className="service-visual">
                <ServiceVisual kind={it.kind} />
              </div>
              <div className="service-content">
                <div className="eyebrow"><span className="dot"></span>{it.tag}</div>
                <h3>{it.title}</h3>
                <p>{it.desc}</p>
                <ul className="service-list">
                  {it.list.map((l, j) => <li key={j}><ICheck/>{l}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Values ---------- */
function Values() {
  const items = [
    {
      letter: 'H',
      vmeta: 'H — Human',
      title: 'Con người trước, công nghệ sau',
      desc: 'Phần mềm tốt phải bắt đầu từ con người thực — nhân viên, khách hàng, và cả khách hàng của khách hàng. AI là công cụ, không phải đích đến.',
    },
    {
      letter: 'N',
      vmeta: 'N — Neat',
      title: 'Gọn gàng, có hệ thống',
      desc: 'Từ giao diện, tài liệu đến cách chúng tôi gặp bạn — tất cả đều ngăn nắp và minh bạch. Bạn luôn biết mình đang ở đâu trong quy trình.',
    },
    {
      letter: 'Q',
      vmeta: 'Q — Qualified',
      title: 'Chất lượng có thể đo lường',
      desc: 'Đội ngũ giàu kinh nghiệm thực chiến, quy trình kiểm thử chặt chẽ, cam kết SLA rõ ràng — chất lượng cam kết bằng văn bản.',
    },
  ];
  return (
    <section id="values" className="values">
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>02 — Vì sao chọn HNQ</span></div>
          <h2 style={{marginTop: 20}}>
            Ba chữ định hình<br/>
            <span className="serif grad-text">cách chúng tôi làm việc.</span>
          </h2>
          <p className="lead">Tên HNQ không phải viết tắt cho vui — đó là ba cam kết áp dụng vào mỗi dự án, dù lớn hay nhỏ.</p>
        </div>
        <div className="values-grid">
          {items.map((it, i) => (
            <div className="value-card reveal" key={i} style={{transitionDelay: (i * 120) + 'ms'}}>
              <span className="value-letter">{it.letter}</span>
              <div className="vmeta">●  {it.vmeta}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
function Process() {
  const steps = [
    {
      num: 1,
      title: <>Cùng ngồi xuống <span className="em">lắng nghe</span></>,
      desc: 'Cuộc gặp đầu tiên là để hiểu công việc của bạn — không phải để bán giải pháp. Chúng tôi hỏi nhiều, ghi chép kỹ, rồi tóm tắt lại bằng ngôn ngữ bạn hiểu.',
    },
    {
      num: 2,
      title: <>Hiểu sâu <span className="em">công việc của bạn</span></>,
      desc: 'Chúng tôi gặp những người sẽ dùng phần mềm — nhân viên, khách hàng — vẽ bản đồ quy trình hiện tại, kiểm tra mọi giả định với thực tế.',
    },
    {
      num: 3,
      title: <><span className="em">Vẽ trước</span>, code sau</>,
      desc: 'Thiết kế chi tiết, làm bản mẫu bấm được để bạn dùng thử — duyệt từng màn hình trước khi viết một dòng code nào.',
    },
    {
      num: 4,
      title: <>Xây dần, <span className="em">không bất ngờ</span></>,
      desc: 'Mỗi 2 tuần chúng tôi mời bạn xem demo — sản phẩm lớn lên trước mắt bạn, không phải hộp đen chờ đến cuối mới mở.',
    },
    {
      num: 5,
      title: <>Bàn giao <span className="em">& ở lại</span></>,
      desc: 'Triển khai chính thức, đào tạo đội ngũ của bạn, viết tài liệu dễ hiểu. Sau go-live, chúng tôi vẫn ở đây — không biến mất.',
    },
  ];
  return (
    <section id="process">
      <div className="container">
        <div className="sec-head reveal">
          <div className="eyebrow"><span className="dot"></span><span className="bar"></span><span>03 — Cách chúng tôi làm việc</span></div>
          <h2 style={{marginTop: 20}}>
            Quy trình minh bạch,<br/>
            <span className="serif grad-text">không có bất ngờ.</span>
          </h2>
          <p className="lead">Năm bước rõ ràng, mỗi bước có kết quả cụ thể, và bạn có thể dừng lại sau bất kỳ giai đoạn nào nếu chưa hài lòng.</p>
        </div>
        <div className="process-track">
          {steps.map((s, i) => (
            <div className="process-step reveal" key={i}>
              <div className="process-dot">{s.num}</div>
              <div>
                <h3>{s.title}</h3>
                <p className="pdesc">{s.desc}</p>
              </div>
              <div className="process-visual">
                <ProcessVisual step={s.num} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Services, Values, Process, useCounter });