src/App.js

import React, { useState, useEffect } from 'react';

const translations = {
  vi: {
    home: 'Trang chủ',
    privacy: 'Chính sách Bảo mật',
    terms: 'Điều khoản Dịch vụ',
    subtitle: {
      home: 'Trang chủ',
      privacy: 'Chính sách Bảo mật',
      tos: 'Điều khoản Dịch vụ',
    },
  },
  en: {
    home: 'Home',
    privacy: 'Privacy Policy',
    terms: 'Terms of Service',
    subtitle: {
      home: 'Home',
      privacy: 'Privacy Policy',
      tos: 'Terms of Service',
    },
  },
};

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem('language') || 'vi');
  const [tab, setTab] = useState('home');
  const [theme, setTheme] = useState(() => {
    const stored = localStorage.getItem('theme');
    if (stored) return stored;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  });

  // Handle Theme Effect
  useEffect(() => {
    const root = document.documentElement;
    if (theme === 'dark') {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
    localStorage.setItem('theme', theme);
  }, [theme]);

  // Handle Language Effect
  useEffect(() => {
    document.documentElement.setAttribute('lang', lang);
    localStorage.setItem('language', lang);
  }, [lang]);

  // Handle URL Hash sync
  useEffect(() => {
    const handleHashChange = () => {
      const hash = window.location.hash.substring(1);
      if (hash && ['home', 'privacy', 'tos'].includes(hash)) {
        setTab(hash);
      } else {
        setTab('home');
      }
    };

    handleHashChange();
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  const switchTab = (newTab) => {
    setTab(newTab);
    window.location.hash = newTab;
  };

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
  };

  return (
    <div className="p-4 md:p-8 max-w-4xl mx-auto">
      {/* HEADER */}
      <header className="text-center mb-8 relative">
        <div className="absolute top-0 right-0 flex items-center space-x-2">
          <div className="flex items-center space-x-1">
            <button
              onClick={() => setLang('vi')}
              className={`lang-button ${lang === 'vi' ? 'active' : ''}`}
            >
              VI
            </button>
            <button
              onClick={() => setLang('en')}
              className={`lang-button ${lang === 'en' ? 'active' : ''}`}
            >
              EN
            </button>
          </div>
          <button
            onClick={toggleTheme}
            aria-label="Toggle Theme"
            className="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 transition-colors"
          >
            {theme === 'dark' ? (
              <svg className="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 640 640">
                <path d="M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z" />
              </svg>
            ) : (
              <svg className="w-6 h-6 text-gray-700 dark:text-gray-200" fill="currentColor" viewBox="0 0 640 640">
                <path d="M210.2 53.9C217.6 50.8 226 51.7 232.7 56.1L320.5 114.3L408.3 56.1C415 51.7 423.4 50.9 430.8 53.9C438.2 56.9 443.4 63.5 445 71.3L465.9 174.5L569.1 195.4C576.9 197 583.5 202.4 586.5 209.7C589.5 217 588.7 225.5 584.3 232.2L526.1 320L584.3 407.8C588.7 414.5 589.5 422.9 586.5 430.3C583.5 437.7 576.9 443.1 569.1 444.6L465.8 465.4L445 568.7C443.4 576.5 438 583.1 430.7 586.1C423.4 589.1 414.9 588.3 408.2 583.9L320.4 525.7L232.6 583.9C225.9 588.3 217.5 589.1 210.1 586.1C202.7 583.1 197.3 576.5 195.8 568.7L175 465.4L71.7 444.5C63.9 442.9 57.3 437.5 54.3 430.2C51.3 422.9 52.1 414.4 56.5 407.7L114.7 320L56.5 232.2C52.1 225.5 51.3 217.1 54.3 209.7C57.3 202.3 63.9 196.9 71.7 195.4L175 174.6L195.9 71.3C197.5 63.5 202.9 56.9 210.2 53.9zM239.6 320C239.6 275.6 275.6 239.6 320 239.6C364.4 239.6 400.4 275.6 400.4 320C400.4 364.4 364.4 400.4 320 400.4C275.6 400.4 239.6 364.4 239.6 320zM448.4 320C448.4 249.1 390.9 191.6 320 191.6C249.1 191.6 191.6 249.1 191.6 320C191.6 390.9 249.1 448.4 320 448.4C390.9 448.4 448.4 390.9 448.4 320z" />
              </svg>
            )}
          </button>
        </div>
        <h1 class="text-4xl md:text-5xl font-bold mb-2 text-gray-900 dark:text-white">Katto Bot</h1>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          {translations[lang].subtitle[tab]}
        </p>
      </header>

      {/* CARD CONTAINER */}
      <div className="card-container">
        {/* NAV TABS */}
        <nav className="flex border-b border-gray-200 dark:border-gray-700">
          <button
            onClick={() => switchTab('home')}
            className={`tab-button ${tab === 'home' ? 'active' : ''}`}
          >
            {translations[lang].home}
          </button>
          <button
            onClick={() => switchTab('privacy')}
            className={`tab-button ${tab === 'privacy' ? 'active' : ''}`}
          >
            {translations[lang].privacy}
          </button>
          <button
            onClick={() => switchTab('tos')}
            className={`tab-button ${tab === 'tos' ? 'active' : ''}`}
          >
            {translations[lang].terms}
          </button>
        </nav>

        {/* MAIN CONTENT AREA */}
        <main className="p-6 md:p-10 max-h-[65vh] overflow-y-auto custom-scrollbar">
          {/* ================= VIETNAMESE CONTENT ================= */}
          {lang === 'vi' && (
            <div>
              {/* HOME VI */}
              {tab === 'home' && (
                <section className="content-section text-center">
                  <h1>Chào mừng đến với Katto Bot!</h1>
                  <p>
                    Katto là một bot Discord đa năng thế hệ mới được phát triển bởi <strong>KattoLabs</strong> nhằm nâng cao trải nghiệm cho máy chủ của bạn. Với hệ sinh thái phong phú từ phát nhạc chất lượng cao, trò chơi tương tác (Coinflip, Vinoga, Cờ vua), hệ thống kinh tế &amp; tra cứu ngoại tệ tích hợp biểu đồ thời gian thực, đến các công cụ quản lý máy chủ mạnh mẽ.
                  </p>
                  <p>
                    Khám phá các tính năng đỉnh cao và mời Katto gia nhập cộng đồng của bạn ngay hôm nay!
                  </p>
                  <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-6">
                    <a
                      href="https://discord.com/api/oauth2/authorize?client_id=1353912565989638144&permissions=8&scope=bot%20applications.commands"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="invite-button"
                    >
                      Thêm bot vào máy chủ
                    </a>
                    <a
                      href="https://discord.gg/jKkWadnQhT"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-block bg-gray-700 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-bold transition-colors mt-4 sm:mt-0 text-decoration-none"
                    >
                      Máy chủ hỗ trợ Discord
                    </a>
                  </div>
                </section>
              )}

              {/* PRIVACY VI */}
              {tab === 'privacy' && (
                <section className="content-section">
                  <h1>Chính sách Bảo mật cho Katto</h1>
                  <p>Ngày có hiệu lực: 20 tháng 7 năm 2026</p>
                  <p>
                    Bot Katto ("chúng tôi", "của chúng tôi") là một dịch vụ Discord đa năng được phát triển và vận hành bởi <strong>KattoLabs</strong>. Chính sách bảo mật này giải thích minh bạch cách chúng tôi <strong>thu thập, sử dụng và bảo vệ thông tin</strong> của bạn khi bạn tương tác với Katto.
                  </p>
                  <p>
                    Bằng việc tương tác hoặc thêm Katto vào máy chủ, bạn <strong>đồng ý với việc thu thập và sử dụng thông tin</strong> được mô tả chi tiết trong chính sách này.
                  </p>

                  <h2>1. Thông tin chúng tôi thu thập</h2>
                  <h3>Thông tin tự động thu thập</h3>
                  <ul>
                    <li>
                      <strong>Định danh Discord</strong>: ID người dùng (User ID), ID máy chủ (Guild ID), ID kênh (Channel ID) để xác thực câu lệnh và quản lý dữ liệu cá nhân hóa.
                    </li>
                    <li>
                      <strong>Trạng thái kênh thoại (Voice State)</strong>: Thông tin thời điểm bạn tham gia/rời kênh thoại phục vụ trình phát nhạc DisTube.
                    </li>
                    <li>
                      <strong>Dữ liệu Hệ thống Kinh tế &amp; Trò chơi</strong>: Số dư tiền ảo, lịch sử lật xu (Coinflip), kết quả trò chơi (Vinoga, Cờ vua) và thưởng hàng ngày (`daily`).
                    </li>
                    <li>
                      <strong>Tùy chỉnh cá nhân</strong>: Tùy chọn chủ đề đồ thị (`canvasTheme`), cài đặt ngôn ngữ và cấu hình máy chủ.
                    </li>
                    <li>
                      <strong>Nội dung tương tác tin nhắn</strong>: Lệnh được xử lý tức thì trong bộ nhớ để thực thi và <strong>không lưu trữ nội dung tin nhắn riêng tư</strong> của bạn lâu dài.
                    </li>
                  </ul>

                  <h2>2. Cách chúng tôi sử dụng thông tin của bạn</h2>
                  <ul>
                    <li>
                      <strong>Cung cấp &amp; Duy trì Dịch vụ</strong>: Vận hành các tính năng phát nhạc (DisTube), trò chơi giải trí, tra cứu tỷ giá ngoại tệ (XE API) và các lệnh quản lý.
                    </li>
                    <li>
                      <strong>Cá nhân hóa trải nghiệm</strong>: Lưu trữ cài đặt chủ đề hiển thị biểu đồ, xếp hạng kinh tế và lưu giữ ưu tiên ngôn ngữ của người dùng.
                    </li>
                    <li>
                      <strong>Bảo mật &amp; Phòng chống lạm dụng</strong>: Phát hiện các hành vi gian lận tự động (auto-bot), spam lệnh hoặc hành vi phá hoại tài nguyên dịch vụ.
                    </li>
                  </ul>

                  <h2>3. Chia sẻ thông tin &amp; Dịch vụ Bên thứ ba</h2>
                  <p>
                    Katto sử dụng một số API &amp; dịch vụ bên thứ ba đáng tin cậy để phục vụ tính năng (như YouTube, SoundCloud, Spotify qua DisTube, XE Currency API, và QuickChart API). Dữ liệu truyền đi chỉ bao gồm các tham số cần thiết để lấy kết quả (ví dụ: mã tiền tệ, tên bài hát) và không chứa thông tin nhận dạng cá nhân nhạy cảm.
                  </p>

                  <h2>4. Bảo mật dữ liệu</h2>
                  <p>
                    Chúng tôi áp dụng các biện pháp mã hóa và bảo vệ cơ sở dữ liệu nghiêm ngặt để đảm bảo an toàn cho dữ liệu người dùng. Tuy nhiên, không có phương thức truyền tải qua Internet nào an toàn tuyệt đối 100%.
                  </p>

                  <h2>5. Quyền hạn của bạn</h2>
                  <p>
                    Bạn có quyền yêu cầu trích xuất, điều chỉnh hoặc xóa toàn bộ dữ liệu cá nhân khỏi hệ thống Katto bất kỳ lúc nào.
                  </p>

                  <h2>6. Liên hệ chúng tôi</h2>
                  <p>Nếu bạn có bất kỳ thắc mắc nào về Chính sách Bảo mật này, vui lòng tham gia và gửi yêu cầu tại:</p>
                  <ul>
                    <li>
                      Máy chủ Discord hỗ trợ chính thức của KattoLabs:{' '}
                      <a
                        href="https://discord.gg/jKkWadnQhT"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-500 hover:underline font-bold"
                      >
                        discord.gg/jKkWadnQhT
                      </a>
                    </li>
                  </ul>
                </section>
              )}

              {/* TERMS VI */}
              {tab === 'tos' && (
                <section className="content-section">
                  <h1>Điều khoản Dịch vụ cho Katto</h1>
                  <p>Ngày có hiệu lực: 20 tháng 7 năm 2026</p>
                  <p>
                    Chào mừng bạn đến với Katto! Katto là bot Discord đa năng được phát triển bởi <strong>KattoLabs</strong> ("chúng tôi", "của chúng tôi"). Các Điều khoản dịch vụ này ("Điều khoản") quy định việc sử dụng Katto của bạn.
                  </p>
                  <p>
                    Bằng việc thêm Katto vào máy chủ hoặc tương tác với bot dưới bất kỳ hình thức nào, bạn <strong>đồng ý bị ràng buộc bởi các Điều khoản này</strong>.
                  </p>

                  <h2>1. Chấp nhận Điều khoản &amp; Điều kiện đủ</h2>
                  <ul>
                    <li>
                      Bạn phải tuân thủ nghiêm ngặt <strong>Điều khoản Dịch vụ của Discord</strong>.
                    </li>
                    <li>
                      Bạn phải từ <strong>13 tuổi trở lên</strong> để sử dụng Discord và Katto.
                    </li>
                  </ul>

                  <h2>2. Quy tắc sử dụng &amp; Ứng xử</h2>
                  <p>Khi sử dụng Katto, bạn cam kết không:</p>
                  <ul>
                    <li>Sử dụng bot vào bất kỳ mục đích bất hợp pháp hoặc gian lận nào.</li>
                    <li>Khai thác lỗi (bug/exploit), tự động hóa lệnh (botting/spamming) làm gián đoạn tài nguyên dịch vụ.</li>
                    <li>Quấy rối, đe dọa hoặc mạo danh người khác hoặc đại diện của KattoLabs.</li>
                    <li>Sử dụng bot để phát tán nội dung vi phạm bản quyền hoặc vi phạm quy định cộng đồng.</li>
                  </ul>

                  <h2>3. Hệ thống Kinh tế &amp; Tiền ảo</h2>
                  <p>
                    Tất cả tài sản, số dư tiền tệ ảo và vật phẩm trong Katto chỉ phục vụ mục đích giải trí nội bộ. Chúng <strong>không có giá trị tiền thật</strong> và không thể quy đổi hay mua bán bằng tiền thật dưới mọi hình thức.
                  </p>

                  <h2>4. Giới hạn Trách nhiệm</h2>
                  <p>
                    Katto được cung cấp trên cơ sở <strong>"nguyên trạng" (As-Is) và "sẵn có" (As-Available)</strong>. KattoLabs không chịu trách nhiệm cho bất kỳ thiệt hại gián tiếp hay sự gián đoạn dịch vụ nào phát sinh từ các sự cố hạ tầng bên ngoài.
                  </p>

                  <h2>5. Chấm dứt Quyền truy cập</h2>
                  <p>
                    KattoLabs có quyền đình chỉ hoặc cấm (ban) người dùng/máy chủ truy cập dịch vụ Katto ngay lập tức nếu phát hiện hành vi vi phạm Điều khoản mà không cần thông báo trước.
                  </p>

                  <h2>6. Liên hệ &amp; Hỗ trợ</h2>
                  <p>Mọi thắc mắc hoặc báo lỗi dịch vụ xin vui lòng liên hệ:</p>
                  <ul>
                    <li>
                      Máy chủ Discord hỗ trợ KattoLabs:{' '}
                      <a
                        href="https://discord.gg/jKkWadnQhT"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-500 hover:underline font-bold"
                      >
                        discord.gg/jKkWadnQhT
                      </a>
                    </li>
                  </ul>
                </section>
              )}
            </div>
          )}

          {/* ================= ENGLISH CONTENT ================= */}
          {lang === 'en' && (
            <div>
              {/* HOME EN */}
              {tab === 'home' && (
                <section className="content-section text-center">
                  <h1>Welcome to Katto Bot!</h1>
                  <p>
                    Katto is a next-generation versatile Discord bot developed by <strong>KattoLabs</strong> designed to elevate your community experience. Featuring rich modules from high-fidelity music streaming, interactive minigames (Coinflip, Vinoga, Chess), live exchange rates &amp; charting, to comprehensive server management tools.
                  </p>
                  <p>
                    Explore our features and invite Katto to your server today!
                  </p>
                  <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-6">
                    <a
                      href="https://discord.com/api/oauth2/authorize?client_id=1353912565989638144&permissions=8&scope=bot%20applications.commands"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="invite-button"
                    >
                      Add Bot to Server
                    </a>
                    <a
                      href="https://discord.gg/jKkWadnQhT"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-block bg-gray-700 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-bold transition-colors mt-4 sm:mt-0 text-decoration-none"
                    >
                      Discord Support Server
                    </a>
                  </div>
                </section>
              )}

              {/* PRIVACY EN */}
              {tab === 'privacy' && (
                <section className="content-section">
                  <h1>Privacy Policy for Katto</h1>
                  <p>Effective Date: July 20, 2026</p>
                  <p>
                    The Katto bot ("we", "us", "our") is a multi-functional Discord service developed and maintained by <strong>KattoLabs</strong>. This Privacy Policy outlines how we <strong>collect, use, and protect your information</strong> when you interact with Katto.
                  </p>
                  <p>
                    By using Katto, you <strong>agree to the collection and use of information</strong> in accordance with this policy.
                  </p>

                  <h2>1. Information We Collect</h2>
                  <h3>Automatically Collected Information</h3>
                  <ul>
                    <li>
                      <strong>Discord Identifiers</strong>: User ID, Guild ID, Channel ID when executing commands to deliver customized responses.
                    </li>
                    <li>
                      <strong>Voice State Data</strong>: Voice channel join/leave status required for DisTube music playback controls.
                    </li>
                    <li>
                      <strong>Economy &amp; Gaming Data</strong>: Virtual currency balance, Coinflip history, minigame scores (Vinoga, Chess), and daily claim timers.
                    </li>
                    <li>
                      <strong>User Preferences</strong>: Chart theme settings (`canvasTheme`), language choices, and server configurations.
                    </li>
                    <li>
                      <strong>Interaction Content</strong>: Messages are processed strictly in-memory to execute commands and <strong>private message contents are never stored</strong> long-term.
                    </li>
                  </ul>

                  <h2>2. How We Use Your Information</h2>
                  <ul>
                    <li>
                      <strong>Service Operation &amp; Maintenance</strong>: To run music playback (DisTube), interactive minigames, exchange rate conversion (XE API), and moderation modules.
                    </li>
                    <li>
                      <strong>Personalization</strong>: To save theme preferences, maintain leaderboards, and retain user choices.
                    </li>
                    <li>
                      <strong>Safety &amp; Fraud Prevention</strong>: To detect auto-botting exploits, spamming, or resource abuse.
                    </li>
                  </ul>

                  <h2>3. Third-Party Integrations</h2>
                  <p>
                    Katto interacts with reliable third-party APIs (e.g. YouTube, SoundCloud, Spotify via DisTube, XE Currency API, and QuickChart API). Only non-personal query parameters required to fetch data are shared.
                  </p>

                  <h2>4. Data Security</h2>
                  <p>
                    We employ modern encryption and access controls to safeguard your data. However, no electronic transmission over the internet can be guaranteed 100% secure.
                  </p>

                  <h2>5. Your Rights</h2>
                  <p>
                    You have the right to request access to, correction of, or complete deletion of your stored data from Katto at any time.
                  </p>

                  <h2>6. Contact Us</h2>
                  <p>If you have any questions regarding this Privacy Policy, please reach out via:</p>
                  <ul>
                    <li>
                      Official KattoLabs Discord Support Server:{' '}
                      <a
                        href="https://discord.gg/jKkWadnQhT"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-500 hover:underline font-bold"
                      >
                        discord.gg/jKkWadnQhT
                      </a>
                    </li>
                  </ul>
                </section>
              )}

              {/* TERMS EN */}
              {tab === 'tos' && (
                <section className="content-section">
                  <h1>Terms of Service for Katto</h1>
                  <p>Effective Date: July 20, 2026</p>
                  <p>
                    Welcome to Katto! Katto is a multi-functional Discord bot operated by <strong>KattoLabs</strong> ("we", "us", "our"). These Terms of Service ("Terms") govern your access to and use of Katto.
                  </p>
                  <p>
                    By adding Katto to your server or using it in any way, you <strong>agree to be bound by these Terms</strong>.
                  </p>

                  <h2>1. Eligibility &amp; Compliance</h2>
                  <ul>
                    <li>You must comply with <strong>Discord's Terms of Service</strong>.</li>
                    <li>You must be <strong>at least 13 years of age</strong> to use Discord and Katto.</li>
                  </ul>

                  <h2>2. Code of Conduct</h2>
                  <p>When using Katto, you agree not to:</p>
                  <ul>
                    <li>Use the bot for any illegal, fraudulent, or unauthorized activities.</li>
                    <li>Exploit bugs, automate command usage (botting/spamming), or disrupt service infrastructure.</li>
                    <li>Harass, threaten, or impersonate any user or KattoLabs staff.</li>
                    <li>Distribute copyrighted or illicit materials via bot commands.</li>
                  </ul>

                  <h2>3. Virtual Currency &amp; Assets</h2>
                  <p>
                    All virtual currency, scores, and items within Katto are purely for entertainment. They hold <strong>no real-world monetary value</strong> and cannot be redeemed, sold, or exchanged for real currency.
                  </p>

                  <h2>4. Limitation of Liability</h2>
                  <p>
                    Katto is provided on an <strong>"As-Is" and "As-Available"</strong> basis. KattoLabs shall not be liable for any indirect, incidental, or consequential damages arising from service downtime or third-party API outages.
                  </p>

                  <h2>5. Termination</h2>
                  <p>
                    KattoLabs reserves the right to suspend or ban any user or guild from accessing Katto immediately upon breach of these Terms without prior notice.
                  </p>

                  <h2>6. Contact &amp; Support</h2>
                  <p>For support or service inquiries, please contact us exclusively at:</p>
                  <ul>
                    <li>
                      KattoLabs Discord Support Server:{' '}
                      <a
                        href="https://discord.gg/jKkWadnQhT"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-blue-500 hover:underline font-bold"
                      >
                        discord.gg/jKkWadnQhT
                      </a>
                    </li>
                  </ul>
                </section>
              )}
            </div>
          )}
        </main>
      </div>

      {/* FOOTER */}
      <footer className="text-center mt-6 text-sm text-gray-500 dark:text-gray-400">
        <p>&copy; 2026 KattoLabs. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;