// page-contact.jsx — /contact

const Contact = ({ lang }) => {
  const vi = lang === 'vi';
  const L = (en, v) => (vi ? v : en);
  const email = window.SN_SUPPORT_EMAIL;
  const legal = window.SN_LEGAL || {};
  const subject = encodeURIComponent(`Snapovo ${window.SN_VERSION || '1.0.0'} — ${vi ? 'Phản hồi' : 'Feedback'}`);
  return (
  <main>
    <section className="ph">
      <div className="container">
        <div className="ph-inner">
          <Eyebrow>{L('Contact', 'Liên hệ')}</Eyebrow>
          <h1 style={{ marginTop: 14 }}>{L('Talk to the person who makes Snapovo.', 'Nói chuyện trực tiếp với người làm Snapovo.')}</h1>
          <p>{L(
            'Snapovo is a one-person project. Email is the only channel — no ticket queue, no chatbot. Bug reports, licence problems and feature ideas all land in the same inbox, usually answered within a business day.',
            'Snapovo do một người làm. Email là kênh duy nhất — không hàng chờ ticket, không chatbot. Báo lỗi, vấn đề giấy phép hay ý tưởng tính năng đều vào cùng một hộp thư, thường được trả lời trong một ngày làm việc.'
          )}</p>
        </div>
      </div>
    </section>

    <section className="section--tight">
      <div className="container">
        <div className="dl-card">
          <div>
            <a className="btn btn--primary btn--xl" href={`mailto:${email}?subject=${subject}`}>
              <Icon.Mail size={18} /> {L('Email support', 'Gửi email hỗ trợ')}
            </a>
            <div style={{ marginTop: 14, fontSize: 13, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', wordBreak: 'break-all' }}>{email}</div>
            <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--border)', fontSize: 14, color: 'var(--text-muted)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div><strong style={{ color: 'var(--text)' }}>{L('Reporting a bug?', 'Báo lỗi?')}</strong> {L('Include your macOS version, your Mac model, and what you did right before it went wrong. If a preset misbehaves, say which apps were in it.', 'Cho biết phiên bản macOS, dòng máy Mac, và bạn vừa làm gì trước khi lỗi xảy ra. Nếu một preset chạy sai, cho biết preset đó gồm những app nào.')}</div>
              <div><strong style={{ color: 'var(--text)' }}>{L('Licence trouble?', 'Vấn đề giấy phép?')}</strong> {L('Send the email address you bought with, or your licence key from Settings → License — either is enough to find your order and re-issue a key.', 'Gửi email bạn đã dùng khi mua, hoặc license key trong Cài đặt → License — một trong hai là đủ để tìm đơn hàng và cấp lại key.')}</div>
              <div><strong style={{ color: 'var(--text)' }}>{L('Want a refund?', 'Muốn hoàn tiền?')}</strong> {L(`Any request within ${legal.refundWindow} days of purchase is approved, no reason needed. Email us with either the address you used at checkout or your licence key (Settings → License) — either one finds your order. Once approved, the money can take up to 10 days to show on your statement, so please email here rather than disputing the charge with your bank.`, `Mọi yêu cầu trong ${legal.refundWindow} ngày kể từ khi mua đều được chấp thuận, không cần lý do. Gửi email kèm hoặc địa chỉ bạn đã dùng khi mua, hoặc license key (Cài đặt → License) — một trong hai là đủ để tìm đơn hàng. Sau khi được chấp thuận, tiền có thể mất tới 10 ngày mới hiện trên sao kê, nên hãy email tại đây thay vì khiếu nại với ngân hàng.`)} <a href="#/terms">{L('Full refund policy', 'Chính sách đầy đủ')}</a></div>
              <div><strong style={{ color: 'var(--text)' }}>{L('Feature idea?', 'Ý tưởng tính năng?')}</strong> {L('Describe the moment in your day it would help, not the button you want. That is what shapes the roadmap.', 'Hãy kể khoảnh khắc trong ngày bạn cần nó, thay vì mô tả cái nút bạn muốn. Đó là thứ định hình lộ trình.')}</div>
            </div>
          </div>
          <div className="dl-meta">
            <div>
              <div className="dl-meta-label">{L('Response time', 'Thời gian trả lời')}</div>
              <div className="dl-meta-val">{L('~1 business day', '~1 ngày làm việc')}</div>
            </div>
            <div>
              <div className="dl-meta-label">{L('Languages', 'Ngôn ngữ')}</div>
              <div className="dl-meta-val">{L('English, Vietnamese', 'Tiếng Việt, English')}</div>
            </div>
            <div>
              <div className="dl-meta-label">{L('Refunds', 'Hoàn tiền')}</div>
              <div className="dl-meta-val">{L(`${legal.refundWindow} days, no questions`, `${legal.refundWindow} ngày, không cần lý do`)}</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 48, fontSize: 14, color: 'var(--text-muted)' }}>
          {L('Looking for setup help first? The', 'Cần hướng dẫn cài đặt trước? Xem')} <a href="#/docs">{L('documentation', 'tài liệu')}</a> {L('covers permissions, hotkeys and troubleshooting.', 'có phần quyền, phím tắt và xử lý sự cố.')}
        </div>
      </div>
    </section>
  </main>
  );
};

window.Contact = Contact;