const { Button, StatusBadge, FieldInput } = window.AquanixDesignSystem_4effac;
const P = './assets/photos/opt/';
function fresh(src) {
  if (src.includes('feeding.jpg')) return src + '?v=5';
  if (src.includes('audience-owner.webp')) return src + '?v=4';
  return src;
}
const card = { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)', boxShadow: 'var(--shadow-card)' };
const photo = { width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-xl)' };
const FOCUS = { 'feeding.jpg': '42% 62%', 'water-test.jpg': '74% 50%', 'farmer-phone.jpg': '20% 50%', 'harvest-scan.jpg': '30% 50%' };
const CONTACT_PHONE = '0915347496';
const CONTACT_PHONE_TEL = '+84915347496';
const B = './assets/brochure/';
function Statement({ children, cite, note, onDark }) {
  return <figure className={'statement' + (onDark ? ' on-dark' : '')}>
    <blockquote className="quote">{children}</blockquote>
    {cite || note ? <figcaption className="quote-meta">
      {cite ? <div className="t-body-strong">{cite}</div> : null}
      {note ? <div className="t-caption quote-note">{note}</div> : null}
    </figcaption> : null}
  </figure>;
}
function PhotoQuote({ src, cite, note, children }) {
  return <section style={{ position: 'relative', color: '#fff', overflow: 'hidden' }}>
    <img src={src} alt="" loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(11,42,51,.92) 0%, rgba(11,42,51,.55) 60%, rgba(11,42,51,.25) 100%)' }}></div>
    <div className="wrap sec" style={{ position: 'relative' }}>
      <Statement onDark cite={cite} note={note}>{children}</Statement>
    </div>
  </section>;
}
// App screenshot in a uniform rounded device frame
// app-home / app-account already carry a device bezel — show them bare; the others get a frame
const BEZELED = ['app-home.png', 'app-account.png'];
const TRIM = { 'app-home.png': 'app-home-trim.webp', 'app-account.png': 'app-account-trim.webp' };
function Phone({ src, style, className }) {
  if (BEZELED.includes(src)) return <div className={className} style={{ position: 'relative', ...style }}><img src={P + TRIM[src]} alt="Màn hình app Aquanix" loading="lazy" decoding="async" style={{ width: '100%', display: 'block', filter: 'drop-shadow(0 24px 40px rgba(11,42,51,.28))' }} /></div>;
  return <div className={className} style={{ borderRadius: 36, overflow: 'hidden', background: 'var(--ink)', padding: 6, boxShadow: '0 24px 48px rgba(11,42,51,.28)', ...style }}><img src={P + src} alt="Màn hình app Aquanix" loading="lazy" decoding="async" style={{ width: '100%', display: 'block', borderRadius: 30 }} /></div>;
}
// Photo + phone side by side, phone slightly tucked over the photo with a white ring so both stay legible
function PhotoPhone({ src, app, h = 440 }) {
  const photoSrc = src.includes('/') ? src : P + src;
  return <div className="pp" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,32%)', alignItems: 'center' }}>
    <div className="pp-photo" style={{ height: h, borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-card)' }}><img src={photoSrc} alt="" loading="lazy" decoding="async" style={{ ...photo, objectPosition: FOCUS[src] || '50% 50%' }} /></div>
    <Phone src={app} className="pp-phone" style={{ marginLeft: '-12%', outline: BEZELED.includes(app) ? 'none' : '8px solid var(--surface)', position: 'relative' }} />
  </div>;
}
function Day() {
  const steps = [
    ['04:30', 'Cá nổi đầu', 'DO ao A03 giảm. Camera AI phát hiện cá nổi đầu.', 'Hệ thống tự động bật quạt nước, hú còi và gửi cảnh báo cho kỹ thuật trực.', B + 'aerators.webp', null, 'stop', 'Ao A03 · cá nổi đầu'],
    ['07:00', 'Máy cho ăn', 'Máy cho ăn chạy theo lịch.', 'Camera AI thấy cá giảm bắt mồi → giảm lượng thức ăn.', 'feeding.jpg', null, 'ok', 'Giảm lượng thức ăn'],
    ['08:15', 'Đo nước', 'Đo pH, đo oxy như thường lệ. Nhập hai con số.', 'Oxy tụt, app báo ngay ở trang chủ và nói rõ việc cần làm — bật quạt, giảm cám.', 'water-test.jpg', 'app-home.png', 'stop', 'Ao A06 · Oxy 3,2 mg/L · thấp'],
    ['10:00', 'Chế phẩm', 'Kỹ thuật ghi nhật ký xử lý chế phẩm vi sinh cho ao A05.', 'Ứng dụng lưu vào hồ sơ lô nuôi.', 'farmer-phone.jpg', 'app-log.jpg', 'ok', 'Ao A05 · lưu hồ sơ lô'],
    ['15:00', 'Cá chết', 'Camera AI phát hiện cá chết nổi ở ao A07 và gửi ảnh cảnh báo.', 'Chủ trại xem camera trực tiếp và chỉ đạo xử lý từ xa.', B + 'cameras.webp', null, 'warn', 'Ao A07 · cá chết nổi'],
    ['21:00', 'Báo cáo ngày', 'Báo cáo cuối ngày: lượng thức ăn, chỉ tiêu môi trường, cảnh báo, công việc tồn.', '', 'lake-cages.jpg', 'app-home.png', 'ok', 'Báo cáo cuối ngày'],
  ];
  return <section id="day"><div className="wrap sec">
    <h2 className="t-display-l one-line" style={{ margin: '0 0 var(--space-2)' }}>Việc vẫn làm như cũ. Chỉ thêm một chạm.</h2>
    <p className="t-body-lg" style={{ margin: '0 0 var(--space-7)', color: 'var(--ink-muted)', maxWidth: 640 }}>Việc trong ngày — app ghi lại, bạn không phải nhớ.</p>
    <div className="steps" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>
      {steps.map(([t, h, d1, d2, pic, app, st, badge], i) => <div key={t} className={'step' + (i % 2 ? ' rev' : '') + (i === 0 ? ' first' : '') + (i === steps.length - 1 ? ' last' : '')}>
        <div className="step-text">
          <div className="t-code" style={{ color: 'var(--brand-500)', marginBottom: 'var(--space-2)' }}>{t}</div>
          <h3 className="t-display-m day-h3" style={{ margin: '0 0 var(--space-3)', fontSize: 28, lineHeight: '36px' }}>{h}</h3>
          <p className="t-body-lg" style={{ margin: '0 0 var(--space-2)' }}>{d1}</p>
          {d2 ? <p className="t-body-lg" style={{ margin: '0 0 var(--space-4)', color: 'var(--ink-muted)' }}>{d2}</p> : null}
          <StatusBadge status={st} style={{ whiteSpace: 'normal' }}>{badge}</StatusBadge>
        </div>
        <div className="step-rail" aria-hidden="true"><span className="step-no">{i + 1}</span></div>
        <div className="step-media">{app ? <PhotoPhone src={pic} app={app} /> : <div className="solo-photo" style={{ height: 440, borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-card)' }}><img src={fresh(pic.includes('/') ? pic : P + pic)} alt="" loading="lazy" decoding="async" style={{ ...photo, objectPosition: FOCUS[pic] || '50% 50%' }} /></div>}</div>
      </div>)}
    </div>
    <p className="t-caption" style={{ margin: 'var(--space-6) 0 0', color: 'var(--ink-muted)', fontStyle: 'italic' }}>Kịch bản minh họa; ngưỡng cảnh báo và lịch vận hành được cài đặt theo từng trang trại.</p>
  </div></section>;
}
function Sell() {
  return <section id="sell" style={{ background: 'var(--surface-sunken)' }}><div className="wrap sec">
    <div className="g2" style={{ gap: 'var(--space-7)', alignItems: 'center' }}>
      <div>
        <h2 className="t-display-l" style={{ margin: '0 0 var(--space-4)' }}>Nhập số cân. Hồ sơ cả vụ đã sẵn.</h2>
        <p className="t-body-lg" style={{ margin: '0 0 var(--space-3)' }}>Mọi lần cho ăn, đo nước, dùng thuốc đã nằm trong app từ đầu vụ. Bấm "Khai báo thu hoạch", nhập số cân — hồ sơ lô gửi thẳng cho nhà máy.</p>
        <p className="t-body-lg" style={{ margin: '0 0 var(--space-5)', color: 'var(--ink-muted)' }}>Nhà máy nhận cá kèm giấy tờ đủ: không hỏi lại, không trả về, không trừ giá.</p>
        <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}><StatusBadge status="ok">Đủ ngày ngưng thuốc</StatusBadge><StatusBadge>Hồ sơ đã gửi nhà máy</StatusBadge></div>
      </div>
      <PhotoPhone src="harvest-scan.jpg" app="app-trace.jpg" h={460} />
    </div>
  </div></section>;
}
function Voice() {
  return <PhotoQuote src={P + 'cooperative.jpg'} cite="Hộ nuôi ao A12" note="Trích dẫn minh hoạ">"Cho ăn xong bấm một cái, khỏi phải nhớ. Sắp bán, app báo còn mấy ngày. Nhà máy nhận cá không hỏi thêm câu nào."</PhotoQuote>;
}
// QR codes for the store links — URLs live in install-links.jsx
const LINKS = window.STORE_LINKS;
function Qr({ text, label, sub }) {
  const ref = React.useRef();
  React.useEffect(() => { if (window.QRCode && ref.current) { ref.current.innerHTML = ''; new QRCode(ref.current, { text, width: 132, height: 132, colorDark: '#0B2A33', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.M }); } }, [text]);
  return <a href={text} target="_blank" rel="noopener" aria-label={'Tải Aquanix trên ' + sub} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-2)', textAlign: 'center', textDecoration: 'none', color: 'var(--ink)' }}><div ref={ref} style={{ width: 120, height: 120, flex: 'none', background: '#fff', padding: 6, borderRadius: 'var(--radius-md)', border: '1px solid var(--border)', boxSizing: 'content-box' }}></div><div><div className="t-body-strong" style={{ color: 'var(--brand-600)', textDecoration: 'underline', textUnderlineOffset: 3 }}>{label}</div><div className="t-caption" style={{ color: 'var(--ink-muted)' }}>{sub}</div></div></a>;
}
function Download({ sent, sending, error, onSend }) {
  return <section id="download"><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-2)' }}>Bắt đầu vụ này cùng Aquanix</h2>
    <p className="t-body-lg" style={{ margin: '0 0 var(--space-6)', color: 'var(--ink-muted)', maxWidth: 560 }}>Tự cài trong một phút, hoặc để Aquanix đến tận ao cài giúp.</p>
    <div style={{ ...card, background: 'var(--brand-50)', borderColor: 'transparent' }}>
      <div className="g2" style={{ gap: 'var(--space-6)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <div><h3 className="t-display-m" style={{ margin: '0 0 var(--space-1)' }}>Tự cài app</h3><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>Mở máy ảnh điện thoại, đưa vào mã — app tự mở.</p></div>
          <div className="dl-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 'var(--space-5)', alignItems: 'center', flex: 1 }}>
            <Phone src="app-home.png" className="dl-phone" style={{ width: '100%', maxWidth: 190, justifySelf: 'center' }} />
            <div className="dl-qrs" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <Qr text={LINKS.android} label="Android" sub="Google Play" />
              <Qr text={LINKS.ios} label="iPhone" sub="App Store" />
            </div>
          </div>
        </div>
        <form style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }} onSubmit={e => {
          e.preventDefault();
          if (sending) return;
          const data = new FormData(e.currentTarget);
          onSend({
            form: 'install_help',
            name: data.get('name') || '',
            phone: data.get('phone') || '',
            address: data.get('address') || '',
            note: data.get('note') || '',
          });
        }}>
          <div><h3 className="t-display-m" style={{ margin: '0 0 var(--space-1)' }}>Để Aquanix cài giúp</h3><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>Điền thông tin, Aquanix gọi lại trong ngày và hẹn đến ao.</p></div>
          {sent ? <div style={{ padding: 'var(--space-4) 0' }}><StatusBadge status="ok">Đã nhận thông tin · Aquanix gọi lại trong hôm nay</StatusBadge></div> : <>
            <FieldInput name="name" label="Họ và tên hộ nuôi" autoComplete="name" required />
            <div className="g2 form-2" style={{ gap: 'var(--space-4)' }}><FieldInput name="phone" label="Số điện thoại" inputMode="tel" autoComplete="tel" required /><FieldInput name="address" label="Địa chỉ" autoComplete="street-address" placeholder="Xã, huyện, tỉnh hoặc tên vùng nuôi" /></div>
            <label style={{ display: 'block' }}><span style={{ display: 'block', fontSize: 12, fontWeight: 600, letterSpacing: '.08em', color: 'var(--ink-muted)', textTransform: 'uppercase', marginBottom: 8, lineHeight: '16px' }}>Nhu cầu / ghi chú</span><textarea name="note" rows={2} placeholder="Ví dụ: nhà có 3 ao, muốn được cài giúp tại ao." style={{ width: '100%', boxSizing: 'border-box', border: '1.5px solid var(--border)', borderRadius: 'var(--radius-md)', padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--ink)', background: 'var(--surface)', resize: 'vertical' }}></textarea></label>
            {error ? <p role="alert" className="t-caption" style={{ margin: 0, color: 'var(--danger)' }}>{error}</p> : null}
            <Button type="submit" variant="accent" fullWidth disabled={sending}>{sending ? 'Đang gửi…' : 'Gửi đề nghị'}</Button>
          </>}
        </form>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3) var(--space-5)', marginTop: 'var(--space-6)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border)' }}>
        <a href={`tel:${CONTACT_PHONE_TEL}`} className="t-body" style={{ color: 'var(--brand-600)', fontWeight: 600, textDecoration: 'none' }}>Hotline: {CONTACT_PHONE.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3')}</a>
        <a href="mailto:info@aquanix.co" className="t-body" style={{ color: 'var(--brand-600)', fontWeight: 600, textDecoration: 'none' }}>info@aquanix.co</a>
        <span className="t-body" style={{ color: 'var(--ink-muted)' }}>Công Ty TNHH Công Nghệ Aquanix</span>
      </div>
    </div>
  </div></section>;
}
function Challenges() {
  const rows = [
    ['Ghi chép nhật ký bằng sổ tay', 'Dữ liệu thất lạc, sai sót, khó tổng hợp và không thể phân tích'],
    ['Không giám sát môi trường liên tục', 'Phát hiện chậm thiếu oxy, biến động pH, nhiệt độ – nhất là ban đêm'],
    ['Cho ăn theo cảm tính', 'Lãng phí thức ăn, FCR cao, ô nhiễm nền đáy'],
    ['Không thể canh ao 24/7', 'Cá chết, cá ngạt khí, quạt nước hỏng không được phát hiện kịp thời'],
    ['Thiết bị vận hành thủ công', 'Phụ thuộc nhân công, dễ quên bật/tắt, tốn điện năng'],
    ['Không truy xuất được nguồn gốc', 'Khó đáp ứng yêu cầu của nhà máy chế biến và thị trường xuất khẩu'],
    ['Không hạch toán chi phí theo ao, theo vụ', 'Không biết chính xác giá thành, lãi/lỗ của từng ao'],
  ];
  return <section id="challenges" style={{ background: 'var(--surface-sunken)' }}><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-3)' }}>Thách thức của trang trại thủy sản hiện nay</h2>
    <p className="t-body-lg" style={{ margin: '0 0 var(--space-6)', color: 'var(--ink-muted)', maxWidth: 720 }}>Nuôi trồng thủy sản ngày càng đòi hỏi năng suất cao, chi phí thấp và minh bạch nguồn gốc. Tuy nhiên, phần lớn trang trại vẫn vận hành theo kinh nghiệm và ghi chép thủ công:</p>
    <div className="g3" style={{ gap: 'var(--space-4)' }}>{rows.map(([t, d]) => <div key={t} style={card}><h3 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 20, lineHeight: '28px' }}>{t}</h3><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>{d}</p></div>)}</div>
    <p className="t-body-lg" style={{ margin: 'var(--space-6) 0 0', maxWidth: 760 }}>Aquanix ra đời để giải quyết đồng thời các vấn đề này – trên một nền tảng duy nhất, dễ dùng trên điện thoại, phù hợp thực tế trang trại Việt Nam.</p>
    <div className="solo-photo" style={{ height: 420, marginTop: 'var(--space-6)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-card)' }}><img src={B + 'cages-aerial.webp'} alt="Ao nuôi lồng trên hồ, nhìn từ trên cao" loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></div>
  </div></section>;
}
function About() {
  return <section id="about"><div className="wrap sec">
    <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <h2 className="t-display-l" style={{ margin: '0 0 var(--space-4)' }}>Aquanix là gì?</h2>
      <p className="t-body-lg" style={{ margin: 0 }}>Aquanix là hệ thống vận hành trang trại thủy sản thông minh do Công ty TNHH Công nghệ Aquanix phát triển. Hệ thống kết hợp ứng dụng di động, thiết bị IoT, tự động hóa và Camera AI để giúp chủ trại ghi chép, giám sát, điều khiển và quản lý hiệu quả kinh tế của từng ao nuôi – mọi lúc, mọi nơi.</p>
    </div>
  </div></section>;
}
function AboutQuote() {
  return <PhotoQuote src={P + 'aerial-dawn.jpg'} cite="Công ty TNHH Công nghệ Aquanix">
    <p>Chúng tôi hiểu rằng, phía sau mỗi ao cá là biết bao công sức, những đêm mất ngủ, những nỗi lo khi thời tiết đổi thay và cả những hy vọng gửi gắm vào từng vụ nuôi.</p>
    <p>Aquanix ra đời từ mong muốn rất giản dị: giúp bà con bớt đi một chút vất vả, bớt đi một chút âu lo, để mỗi ngày chăm cá thêm an tâm và mỗi mùa thu hoạch có thêm niềm vui.</p>
    <p>Bởi chúng tôi tin rằng, công nghệ chỉ thực sự có ý nghĩa khi giúp cuộc sống của người nuôi tốt đẹp hơn.</p>
  </PhotoQuote>;
}
function Modules() {
  const details = [
    ['1. Nhật ký thủy sản điện tử', 'Số hóa toàn bộ hoạt động nuôi trên ứng dụng Aquanix, thay thế sổ ghi chép giấy.', ['Quản lý trang trại, ao/lồng, vụ nuôi và lô giống.', 'Ghi nhật ký thả giống, cho ăn, sử dụng thuốc – hóa chất – chế phẩm.', 'Ghi nhận chỉ tiêu môi trường, hao hụt, kiểm tra tăng trưởng.', 'Nhắc lịch công việc, giao việc cho công nhân và theo dõi hoàn thành.', 'Dữ liệu lưu trên hệ thống, xem lại theo ngày, tuần, vụ nuôi.'], 'Dữ liệu đầy đủ, chính xác, không thất lạc – nền tảng cho mọi phân tích và truy xuất.', B + 'app-poster.webp', 'Ứng dụng nhật ký Aquanix trên điện thoại'],
    ['2. IoT quan trắc môi trường', 'Cảm biến lắp tại ao đo liên tục các chỉ tiêu quan trọng và gửi dữ liệu về ứng dụng theo thời gian thực.', ['Chỉ tiêu quan trắc: DO (oxy hòa tan), nhiệt độ, pH và các chỉ tiêu mở rộng theo nhu cầu.', 'Biểu đồ diễn biến theo giờ, ngày, tuần.', 'Cảnh báo tức thì qua ứng dụng khi chỉ tiêu vượt ngưỡng cài đặt.', 'Theo dõi nhiều ao, nhiều trang trại trên một màn hình.'], 'Phát hiện sớm rủi ro thiếu oxy, đặc biệt vào ban đêm và rạng sáng – giảm thiệt hại do cá chết.', B + 'iot.webp', 'Cảm biến, quạt nước và máy cho ăn kết nối trên ao nuôi'],
    ['3. Tự động hóa thiết bị', 'Kết nối và điều khiển thiết bị trang trại từ điện thoại hoặc theo kịch bản tự động, liên kết trực tiếp với dữ liệu quan trắc.', ['Máy cho ăn tự động: hẹn giờ, lập lịch, điều chỉnh lượng thức ăn từ xa.', 'Quạt nước, sục khí: bật/tắt từ xa; tự động kích hoạt khi DO xuống dưới ngưỡng an toàn.', 'Còi cảnh báo tại trang trại: tự động hú còi khi có sự cố môi trường, thiết bị hoặc cảnh báo từ camera – đánh thức người trực ca đêm.', 'Camera giám sát: xem trực tiếp ao nuôi, khu thiết bị, kho từ điện thoại.', 'Theo dõi trạng thái và thời gian chạy của từng thiết bị.'], 'Giảm phụ thuộc nhân công, vận hành đúng lúc, phản ứng nhanh khi có sự cố, tiết kiệm điện năng và thức ăn.', B + 'aerators.webp', 'Quạt nước trên ao nuôi'],
    ['4. Camera AI thông minh', 'Camera AI quan sát ao nuôi 24/7 và tự động nhận diện các tình huống cần xử lý, kết hợp với dữ liệu IoT để cảnh báo và điều khiển thiết bị.', ['Hoạt động cá ăn: đánh giá mức độ bắt mồi để tăng, giảm hoặc dừng máy cho ăn – hạn chế thức ăn dư thừa, cải thiện FCR.', 'Cá chết: phát hiện cá chết nổi trên mặt ao, gửi cảnh báo kèm hình ảnh để xử lý kịp thời.', 'Thiết bị quạt nước: xác nhận quạt có quay, nước có chuyển động; cảnh báo khi quạt bật nhưng không hoạt động.', 'Cá có biểu hiện bất thường: phát hiện cá nổi đầu, ngạt khí, tập trung bất thường → bật quạt nước, hú còi, cảnh báo về app.'], 'Có “mắt” giám sát ao liên tục, phát hiện sớm sự cố mà cảm biến chưa thấy, kiểm chứng chéo hoạt động của thiết bị.', B + 'camera-ai.webp', 'Camera AI giám sát ao nuôi, nhận diện quạt nước và cá ăn'],
    ['5. Truy xuất nguồn gốc', 'Kết nối dữ liệu từ vùng nuôi đến cơ sở chế biến, tạo hồ sơ minh bạch cho từng lô sản phẩm.', ['Hồ sơ lô nuôi: nguồn giống, thức ăn, thuốc – hóa chất, thời gian nuôi.', 'Tra cứu thông tin lô hàng bằng mã QR.', 'Hỗ trợ đáp ứng yêu cầu của nhà máy chế biến và các tiêu chuẩn chứng nhận.'], 'Tăng uy tín sản phẩm, thuận lợi khi bán cho nhà máy, chuỗi phân phối và thị trường xuất khẩu.', B + 'traceability.webp', 'Quét mã QR trên gói cá để xem hồ sơ lô nuôi'],
    ['6. Hạch toán kinh tế', 'Tự động tổng hợp chi phí từ nhật ký để chủ trại nắm rõ hiệu quả của từng ao, từng vụ.', ['Tổng hợp chi phí giống, thức ăn, thuốc, điện, nhân công.', 'Tính FCR, tỷ lệ sống, giá thành/kg theo ao và vụ nuôi.', 'So sánh hiệu quả giữa các ao, các vụ để rút kinh nghiệm.'], 'Biết chính xác lãi/lỗ, kiểm soát chi phí và ra quyết định đầu tư dựa trên số liệu.', P + 'harvest-scan.jpg', 'Cân cá lúc thu hoạch'],
  ];
  return <section id="modules"><div className="wrap sec">
    <h2 className="t-display-xl" style={{ margin: '0 0 var(--space-7)' }}>6 hệ giải pháp</h2>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-8)' }}>{details.map(([title, lede, items, value, src, alt], i) => <article key={title} className={'g2 feat' + (i % 2 ? ' rev' : '')} style={{ gap: 'var(--space-6)', alignItems: 'center' }}>
      <div className="mod-photo"><img src={src} alt={alt} loading="lazy" decoding="async" /></div>
      <div>
        <h3 className="t-display-m" style={{ margin: '0 0 var(--space-2)' }}>{title}</h3>
        <p className="t-body-lg" style={{ margin: '0 0 var(--space-3)' }}>{lede}</p>
        <ul style={{ margin: '0 0 var(--space-3)', paddingLeft: '1.15em' }}>{items.map(item => <li key={item} className="t-body" style={{ marginBottom: 6 }}>{item}</li>)}</ul>
        <p className="t-body" style={{ margin: 0 }}><strong>Giá trị mang lại: </strong>{value}</p>
      </div>
    </article>)}</div>
  </div></section>;
}
function Model() {
  const steps = [
    ['Bước 1', 'Thu thập', 'Nhật ký từ công nhân. Cảm biến IoT tại ao. Camera AI, thiết bị.'],
    ['Bước 2', 'Xử lý', 'AI nhận diện hình ảnh. So sánh ngưỡng. Tổng hợp, phân tích.'],
    ['Bước 3', 'Hành động', 'Cảnh báo app, còi. Điều khiển thiết bị. Nhắc việc, giao việc.'],
    ['Bước 4', 'Quản trị', 'Báo cáo, hạch toán. Truy xuất nguồn gốc. Tối ưu vụ nuôi sau.'],
  ];
  return <section id="model" style={{ background: 'var(--surface-sunken)' }}><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-3)' }}>Mô hình hoạt động</h2>
    <p className="t-body-lg" style={{ margin: '0 0 var(--space-6)', color: 'var(--ink-muted)', maxWidth: 680 }}>Aquanix kết nối con người, thiết bị và dữ liệu thành một vòng vận hành khép kín:</p>
    <div className="g4" style={{ gap: 'var(--space-4)' }}>{steps.map(([k, t, d], i) => <div key={t} style={card}><div className="t-code" style={{ color: 'var(--brand-500)', marginBottom: 'var(--space-2)' }}>{i + 1}</div><h3 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 22 }}>{t}</h3><p className="t-caption" style={{ margin: '0 0 var(--space-2)', color: 'var(--brand-600)', fontWeight: 700 }}>{k}</p><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>{d}</p></div>)}</div>
  </div></section>;
}
function Benefits() {
  const people = [
    ['chu-trai', 'Chủ trang trại', 'Quản lý từ xa nhiều ao; biết rõ chi phí, giá thành và lãi/lỗ; giảm rủi ro mất trắng', B + 'audience-owner.webp', 'Chủ trang trại nhìn ao từ phía sau, tay phải cầm máy tính bảng hiện biểu đồ đường'],
    ['ky-thuat', 'Kỹ thuật, quản lý ao', 'Nhận cảnh báo sớm, ghi chép nhanh trên điện thoại, giao việc và kiểm tra công nhân dễ dàng', B + 'audience-technician.webp', 'Kỹ thuật đo nước ao bằng điện thoại và cảm biến'],
    ['htx', 'HTX, doanh nghiệp liên kết vùng nuôi', 'Giám sát đồng bộ nhiều hộ nuôi, chuẩn hóa quy trình, lập kế hoạch thu hoạch chính xác', B + 'audience-cooperative.webp', 'Nhóm hộ nuôi họp bên bờ ao'],
    ['nha-may', 'Nhà máy chế biến, người mua', 'Nguồn nguyên liệu minh bạch, truy xuất được, đáp ứng yêu cầu thị trường', B + 'audience-buyer.webp', 'Nhân viên nhà máy kiểm tra cá bên ao'],
  ];
  const outcomes = [
    ['Giảm rủi ro', 'Cảnh báo và xử lý sớm sự cố môi trường, thiết bị'],
    ['Tiết kiệm chi phí', 'Cho ăn hợp lý, cải thiện FCR, giảm điện năng'],
    ['Tăng năng suất', 'Môi trường ổn định, cá khỏe, tỷ lệ sống cao hơn'],
    ['Minh bạch', 'Dữ liệu rõ ràng cho quản trị và truy xuất'],
  ];
  return <section id="benefits"><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-5)' }}>Lợi ích cho từng đối tượng</h2>
    <div className="aud-row" aria-label="Lợi ích cho từng đối tượng">
      {people.map(([id, name, text, photo, alt], i) => {
        const [benefit, detail] = outcomes[i];
        return <article key={id} className="aud-card" style={card}>
          <div className="aud-photo"><img src={fresh(photo)} alt={alt} decoding="async" /></div>
          <div>
            <h3 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 22 }}>{name}</h3>
            <p className="t-body" style={{ margin: '0 0 var(--space-4)', color: 'var(--ink-muted)' }}>{text}</p>
            <h4 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 20 }}>{benefit}</h4>
            <p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>{detail}</p>
          </div>
        </article>;
      })}
    </div>
  </div></section>;
}
function Packages() {
  const rowRef = React.useRef(null);
  React.useEffect(() => {
    const row = rowRef.current;
    const standard = row && row.querySelector('[data-pack="tieu-chuan"]');
    if (!standard) return;
    const align = () => {
      const phone = window.matchMedia('(max-width: 760px)').matches;
      if (!phone) { row.scrollLeft = 0; return; }
      row.scrollLeft = standard.getBoundingClientRect().left - row.getBoundingClientRect().left + row.scrollLeft;
    };
    align();
    const id = requestAnimationFrame(align);
    window.addEventListener('resize', align);
    return () => { cancelAnimationFrame(id); window.removeEventListener('resize', align); };
  }, []);
  const packs = [
    ['co-ban', 'Cơ bản', 'Hộ nuôi bắt đầu số hóa', ['Nhật ký điện tử trên app', 'Truy xuất nguồn gốc (mã QR)']],
    ['tieu-chuan', 'Tiêu chuẩn', 'Trang trại vừa', ['Mọi tính năng gói Cơ bản', 'IoT quan trắc + cảnh báo', 'Hạch toán kinh tế theo ao, vụ']],
    ['nang-cao', 'Nâng cao', 'Trang trại quy mô lớn', ['Mọi tính năng gói Tiêu chuẩn', 'Tự động hóa: máy cho ăn, quạt nước', 'Còi cảnh báo, camera giám sát', 'Tự động hóa theo ngưỡng/lịch']],
    ['toan-dien', 'Toàn diện', 'Doanh nghiệp, HTX liên kết', ['Mọi tính năng gói Nâng cao', 'Camera AI thông minh']],
  ];
  const steps = [
    ['Khảo sát', 'Đánh giá hiện trạng ao, thiết bị, nhu cầu'],
    ['Tư vấn', 'Đề xuất gói và cấu hình phù hợp'],
    ['Lắp đặt', 'Lắp cảm biến, bộ điều khiển, cài app'],
    ['Đào tạo', 'Hướng dẫn chủ trại, kỹ thuật, công nhân'],
    ['Đồng hành', 'Hỗ trợ kỹ thuật, bảo trì, nâng cấp'],
  ];
  return <section id="packages" style={{ background: 'var(--surface-sunken)' }}><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-3)' }}>Gói giải pháp và quy trình triển khai</h2>
    <p className="t-body-lg" style={{ margin: '0 0 var(--space-6)', color: 'var(--ink-muted)', maxWidth: 720 }}>Aquanix thiết kế theo dạng mô-đun – trang trại có thể bắt đầu từ gói cơ bản và nâng cấp dần theo nhu cầu.</p>
    <div className="g4 pack-row" ref={rowRef} style={{ gap: 'var(--space-4)' }}>{packs.map(([id, name, fit, items], i) => <div key={id} data-pack={id} className="pack-card" style={{ ...card, background: i === 3 ? 'var(--brand-50)' : 'var(--surface)', borderColor: i === 3 ? 'transparent' : 'var(--border)' }}><h3 className="t-display-m" style={{ margin: '0 0 var(--space-1)', fontSize: 22 }}>{name}</h3><p className="t-caption" style={{ margin: '0 0 var(--space-3)', color: 'var(--brand-600)', fontWeight: 700 }}>{fit}</p><ul style={{ margin: 0, paddingLeft: '1.1em' }}>{items.map(item => <li key={item} className="t-body" style={{ marginBottom: 6 }}>{item}</li>)}</ul></div>)}</div>
    <aside className="offer" aria-labelledby="offer-title">
      <div className="offer-rail" aria-hidden="true"></div>
      <div className="offer-main">
        <div className="offer-copy">
          <h3 id="offer-title" className="t-display-m offer-title">Khảo sát và tư vấn</h3>
          <p className="offer-value">Miễn phí</p>
          <p className="t-body offer-conditions">Báo giá được xây dựng theo quy mô trang trại và cấu hình thiết bị.</p>
        </div>
        <Button onClick={() => { const el = document.getElementById('download'); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' }); }}>Liên hệ Aquanix</Button>
      </div>
    </aside>
    <h3 className="t-display-m" style={{ margin: '0 0 var(--space-5)' }}>Quy trình triển khai</h3>
    <ol className="flow">{steps.map(([t, d], i) => <li key={t} className="flow-step">
      <div className="flow-mark" aria-hidden="true"><span className="flow-no">{i + 1}</span></div>
      <div className="flow-copy"><h4 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 20, color: 'var(--ink)' }}>{t}</h4><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>{d}</p></div>
    </li>)}</ol>
  </div></section>;
}
function WhyAquanix() {
  const rows = [
    ['Hiểu thực tế trang trại', 'Đội ngũ sáng lập có nhiều năm vận hành vùng nuôi và chuỗi cung ứng thủy sản – giải pháp được thiết kế từ nhu cầu thật của người nuôi'],
    ['Giải pháp trọn gói', 'Phần mềm, IoT quan trắc, tự động hóa và Camera AI trên một nền tảng; một đầu mối hỗ trợ'],
    ['Dễ sử dụng', 'Giao diện tiếng Việt, thao tác đơn giản trên điện thoại, phù hợp công nhân trang trại'],
    ['Linh hoạt, mở rộng', 'Bắt đầu nhỏ, nâng cấp từng bước theo quy mô và ngân sách'],
    ['Kết nối chuỗi giá trị', 'Liên thông dữ liệu từ vùng nuôi đến nhà máy chế biến và người mua'],
  ];
  const qs = [
    ['Có tốn tiền không?', 'Không. Hộ nuôi dùng miễn phí — không giới hạn số ao, số lần ghi.'],
    ['Ở ao mạng yếu thì sao?', 'Vẫn ghi được. App lưu vào máy, có mạng thì tự gửi lên. Bạn không cần làm gì thêm.'],
    ['Điện thoại cũ có dùng được?', 'Được. Android từ 2018, iPhone từ đời 8. Nút to, chữ to, nhìn rõ ngoài nắng.'],
    ['Ai xem được dữ liệu ao của tôi?', 'Chỉ bạn và Aquanix. Nhà máy chỉ thấy hồ sơ lô bạn gửi khi bán cá.'],
    ['Ghi nhầm thì sửa được không?', 'Sửa được trong ngày. Bản sửa lưu kèm bản cũ, hồ sơ vẫn rõ ràng.'],
    ['Ai cài giúp tôi?', 'Aquanix đến tận ao, cài và hướng dẫn trong 10 phút. Để lại số điện thoại ở cuối trang.'],
  ];
  return <section id="why-aquanix"><div className="wrap sec">
    <h2 className="t-display-l" style={{ margin: '0 0 var(--space-6)' }}>Vì sao chọn Aquanix và câu hỏi thường gặp</h2>
    <div className="g2" style={{ gap: 'var(--space-4)' }}>{rows.map(([t, d]) => <div key={t} style={card}><h3 className="t-display-m" style={{ margin: '0 0 var(--space-2)', fontSize: 22 }}>{t}</h3><p className="t-body" style={{ margin: 0, color: 'var(--ink-muted)' }}>{d}</p></div>)}</div>
    <h3 className="t-display-m" style={{ margin: 'var(--space-7) 0 var(--space-4)' }}>Hộ nuôi hay hỏi</h3>
    <div className="faq">{qs.map(([q, a], i) => <details key={q} className="faq-item" open={i === 0}><summary>{q}</summary><p className="t-body" style={{ color: 'var(--ink-muted)' }}>{a}</p></details>)}</div>
  </div></section>;
}
function Footer() {
  return <footer style={{ borderTop: '1px solid var(--border)' }}><div className="wrap" style={{ padding: 'var(--space-6) var(--space-5)', display: 'flex', alignItems: 'center', gap: 'var(--space-5)', flexWrap: 'wrap' }}>
    <img src="./assets/logo/aquanix-lockup.png?v=1" alt="Aquanix — Hệ thống vận hành trang trại thuỷ sản thông minh" style={{ height: 112 }} />
    <InstallLinks tone="onLight" />
    <div style={{ marginLeft: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
      <a href={`tel:${CONTACT_PHONE_TEL}`} className="t-caption" style={{ color: 'var(--brand-600)', fontWeight: 600, textDecoration: 'none', whiteSpace: 'nowrap' }}>
        Hotline: {CONTACT_PHONE.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3')}
      </a>
      <a href="mailto:info@aquanix.co" className="t-caption" style={{ color: 'var(--brand-600)', fontWeight: 600, textDecoration: 'none' }}>info@aquanix.co</a>
      <span className="t-caption" style={{ color: 'var(--ink-muted)' }}>Công Ty TNHH Công Nghệ Aquanix</span>
    </div>
  </div></footer>;
}
Object.assign(window, { Challenges, About, AboutQuote, Modules, Model, Benefits, Packages, WhyAquanix, Day, Sell, Voice, Download, Footer });