import { useTranslation } from "next-i18next";
import Head from "next/head";
import { useRouter } from "next/router";

export default function PolicyPage() {
  const router = useRouter();
  const { i18n } = useTranslation();
  const lang = i18n.language || router.locale || "en";

  return (
    <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 pt-8 sm:pt-12 bg-white mab-policy">
      <Head>
        <title>
          {lang == "en"
            ? "Privacy Policy | SendMN"
            : "Мэдээллийн аюулгүй байдлын бодлого | SendMN"}
        </title>
      </Head>
      <div className="flex justify-center">
        <span className="inline-flex items-center rounded-full border border-border bg-transparent px-3 py-1 text-sm lg:text-lg text-main font-semibold">
          Information Security
        </span>
      </div>

      <main className="mab-main">
        <div className="card">
          <div className="card-header">
            <div className="card-icon">🏢</div>
            <h2>Танилцуулга</h2>
          </div>
          <p>
            &quot;Сэнд Эм Эн ББСБ&quot; ХХК /цаашид &quot;Сэнд Эм Эн&quot; гэх/
            нь Санхүүгийн Зохицуулах Хороогоос &quot;Зээл&quot;, &quot;Валют
            арилжаа&quot;, &quot;Цахим төлбөр тооцоо, Мөнгөн гуйвуулга&quot;,
            &quot;Итгэлцэл&quot;-ийн тусгай зөвшөөрлийн хүрээнд үйл
            ажиллагаагаа явуулдаг олон улсын мөнгөн гуйвуулгын финтек компани
            юм.
          </p>
          <p>
            2019 оноос уламжлалт мөнгөн гуйвуулгын үйлчилгээг орчин үеийн
            мэдээллийн технологийн шийдэлтэй хослуулан &quot;SendMN&quot;
            аппликейшнийг зах зээлд нэвтрүүлэн ажиллаж байна. Финтек
            компанийн хувьд бид харилцагч, хамтран ажиллагчдын болон үйл
            ажиллагааны онцлогоос хамаарч маш их мэдээллийг цуглуулж,
            хадгалж, дамжуулж, боловсруулдаг. 2025 оноос ISO/IEC 27001:2022
            стандартыг амжилттай нэвтрүүлэн хэрэгжүүлж байна.
          </p>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-icon">🎯</div>
            <h2>Бодлогын Зорилго</h2>
          </div>
          <p>
            Энэхүү бодлого нь компанийн мэдээллийн хөрөнгийн нууцлал, бүрэн
            бүтэн байдал, хүртээмжтэй байдлыг хангах зорилгоор мэдээллийн
            аюулгүй байдлын удирдлагын тогтолцоог хэрэгжүүлэх үндэс суурь
            болно. Уг бодлого нь ISO/IEC 27001:2022 стандарт, холбогдох хууль
            тогтоомж болон гэрээний шаардлагад нийцсэн байна.
          </p>
          <div className="principles">
            <div className="principle-box">
              <div className="label">Нууцлал</div>
              <p>Мэдээлэлд зөвхөн эрх бүхий этгээд хандах</p>
            </div>
            <div className="principle-box">
              <div className="label">Бүрэн бүтэн байдал</div>
              <p>Мэдээллийг зөвшөөрөлгүй өөрчлөх, устгахаас хамгаалах</p>
            </div>
            <div className="principle-box">
              <div className="label">Хүртээмжтэй байдал</div>
              <p>
                Зөвшөөрөгдсөн хэрэглэгч шаардлагатай үедээ мэдээлэлд хандах
                боломжтой байх
              </p>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-icon">🔍</div>
            <h2>Хамрах Хүрээ</h2>
          </div>
          <p>
            Энэхүү бодлого нь компанийн бүх алба нэгж, ажилтан, гэрээт
            ажилтан, зөвлөх, ханган нийлүүлэгч болон компанийн мэдээллийн
            хөрөнгөд хандах эрх бүхий гуравдагч этгээдэд хамаарна. Бодлого нь
            дараах хүрээнд үйлчилнэ:
          </p>
          <div className="coverage-grid">
            <div className="coverage-item">Бүх физик байршил, салбар, оффис</div>
            <div className="coverage-item">
              Үндсэн систем, API, санхүүгийн систем, CRM, сүлжээ, үүлэн орчин
            </div>
            <div className="coverage-item">
              Хувийн, санхүүгийн болон харилцагчийн мэдээлэл
            </div>
            <div className="coverage-item">
              Хандалтын хяналт, аудит, мониторингийн үйл ажиллагаа
            </div>
            <div className="coverage-item">
              Мэдээллийн хөрөнгийн болон эрсдэлийн удирдлага
            </div>
            <div className="coverage-item">
              Бизнесийн тасралтгүй байдлын удирдлага
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-icon">📋</div>
            <h2>Бодлогын Үндсэн Чиглэлүүд</h2>
          </div>
          <p>
            Компани нь дараах бодлогуудыг хэрэгжүүлж, мэдээллийн аюулгүй
            байдлаа хамгаалдаг:
          </p>
          <div className="areas">
            <div className="area-tag">
              <span>🔑</span> Хандах эрхийн хяналт
            </div>
            <div className="area-tag">
              <span>🔒</span> Нууц үг ба баталгаажуулалт
            </div>
            <div className="area-tag">
              <span>🔐</span> Криптографийн хамгаалалт
            </div>
            <div className="area-tag">
              <span>📱</span> Хөдөлгөөнт төхөөрөмж ба зайнаас ажиллах
            </div>
            <div className="area-tag">
              <span>🛡️</span> Эмзэг байдлын удирдлага
            </div>
            <div className="area-tag">
              <span>📊</span> Лог бүртгэлийн хяналт
            </div>
            <div className="area-tag">
              <span>🔄</span> Нөөцлөлт ба сэргээлт
            </div>
            <div className="area-tag">
              <span>🏢</span> Бодит орчны аюулгүй байдал
            </div>
            <div className="area-tag">
              <span>🤝</span> Нийлүүлэгч ба гуравдагч этгээд
            </div>
            <div className="area-tag">
              <span>⚠️</span> Зөрчлийн удирдлага
            </div>
            <div className="area-tag">
              <span>📜</span> Нийцлийн бодлого
            </div>
            <div className="area-tag">
              <span>🎓</span> Сургалт ба мэдлэг олгох
            </div>
            <div className="area-tag">
              <span>👤</span> Хувийн нууц хамгаалах
            </div>
            <div className="area-tag">
              <span>♾️</span> Бизнесийн тасралтгүй байдал
            </div>
            <div className="area-tag">
              <span>🖥️</span> Програм хангамж аюулгүй хөгжүүлэлт
            </div>
            <div className="area-tag">
              <span>🗂️</span> Баримт бичиг бүртгэлийн хяналт
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-icon">👥</div>
            <h2>Үүрэг Хариуцлага</h2>
          </div>
          <p>
            Мэдээллийн аюулгүй байдлын хэрэгжилтийг дараах бүтцийн дагуу
            хариуцна:
          </p>
          <div className="coverage-grid">
            <div className="coverage-item">
              Төлөөлөн удирдах зөвлөл — бодлогыг батлах, хяналт тавих
            </div>
            <div className="coverage-item">
              Гүйцэтгэх удирдлага — стратеги, нөөц, дотоод аудитыг удирдан
              зохион байгуулах
            </div>
            <div className="coverage-item">
              МАБ-ын баг — эрсдэлийн үнэлгээ, бодлогыг сурталчлах, мэдээлэх
            </div>
            <div className="coverage-item">
              Алба нэгжийн удирдлага — нэгждээ хэрэгжүүлэх, мөрдүүлэх
            </div>
            <div className="coverage-item">
              Ажилтнууд — бодлого журмын шаардлагыг өдөр тутам мөрдөх
            </div>
            <div className="coverage-item">
              Гадаад ханган нийлүүлэгчид — гэрээний болон МАБ-ын шаардлагыг
              дагаж мөрдөх
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-icon">📅</div>
            <h2>Баримт Бичгийн Хяналт</h2>
          </div>
          <p>
            Энэхүү бодлогыг жилд нэг удаа хянаж, шаардлагатай тохиолдолд
            өөрчлөлтийг хийж, компанийн Төлөөлөн удирдах зөвлөлөөр батлуулна.
          </p>
        </div>
      </main>

      <style jsx>{`
        .mab-policy {
          --blue-dark: #0b2545;
          --blue-mid: #1b4f8a;
          --blue-light: #2e7fd9;
          --accent: #00b4d8;
          --bg: #f5f8fc;
          --surface: #ffffff;
          --text: #1a2235;
          --muted: #5a6d87;
          --border: #d4e1f0;
          --radius: 10px;
          color: var(--text);
          line-height: 1.7;
          font-size: 15px;
        }

        .mab-main {
          max-width: 860px;
          margin: 0 auto;
          padding: 40px 0 64px;
        }

        .card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--radius);
          padding: 28px 32px;
          margin-bottom: 20px;
        }
        .card-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 14px;
        }
        .card-icon {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, var(--blue-light), var(--accent));
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 17px;
          flex-shrink: 0;
        }
        .card h2 {
          font-size: 16px;
          font-weight: 700;
          color: var(--blue-dark);
        }
        .card p {
          color: var(--text);
          font-size: 14.5px;
          line-height: 1.75;
        }
        .card p + p {
          margin-top: 10px;
        }

        .principles {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 14px;
          margin-top: 16px;
        }
        .principle-box {
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 16px;
        }
        .principle-box .label {
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.07em;
          color: var(--blue-light);
          margin-bottom: 6px;
        }
        .principle-box p {
          font-size: 13.5px;
          color: var(--muted);
        }

        .coverage-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 10px;
          margin-top: 14px;
        }
        .coverage-item {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          font-size: 13.5px;
          color: var(--muted);
        }
        .coverage-item::before {
          content: "→";
          color: var(--blue-light);
          font-weight: 700;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .areas {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
          gap: 10px;
          margin-top: 14px;
        }
        .area-tag {
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: 6px;
          padding: 9px 13px;
          font-size: 13px;
          color: var(--blue-dark);
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 7px;
        }
        .area-tag span {
          color: var(--blue-light);
          font-size: 15px;
        }
      `}</style>
    </div>
  );
}
