تطبيق حماية من الاحتيال

import React, { useEffect, useState } from 'react';
import './App.css';

const App = () => {
  const [notifications, setNotifications] = useState([]);
  const tips = [
    'Do not open suspicious links.',
    'When was the last time you changed your Wi-Fi password?',
    'Always use strong and unique passwords.',
    'Enable two-factor authentication wherever possible.',
    'Be cautious of phishing emails and messages.',
    'Regularly update your software and apps.',
    'Avoid using public Wi-Fi for sensitive transactions.'
  ];

  useEffect(() => {
    const interval = setInterval(() => {
      const randomTip = tips[Math.floor(Math.random() * tips.length)];
      setNotifications(prev => [...prev, randomTip]);
    }, 900000); // 15 minutes in milliseconds

    return () => clearInterval(interval);
  }, [tips]);

  const handleCloseApp = () => {
    console.log('App is running in the background.');
  };

  return (
    <div className='App bg-gray-100 min-h-screen p-8'>
      <div className='max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-6'>
        <h1 className='text-3xl font-bold text-center text-blue-600 mb-6'>
          Cyber Security Tips App
        </h1>
        <p className='text-gray-700 text-lg mb-6'>
          This app sends you continuous notifications and provides tips and guidance to protect you from the risks of cyber fraud and extortion.
        </p>
        <p className='text-gray-700 text-lg mb-6'>
          Designed and implemented by Engineer Abdul Rahim bin Abdullah bin Nouri Al Balushi, Technical and Cyber Security Consultant.
        </p>
        <p className='text-gray-700 text-lg mb-6'>
          Note: You must enable notification permissions for the app to send continuous notifications.
        </p>
        <p className='text-gray-700 text-lg mb-6'>
          After exiting the app, it will continue to send notifications.
        </p>
        <p className='text-gray-700 text-lg mb-6'>
          Maintain your digital security easily and share the app with others to enhance collective protection.
        </p>
        <p className='text-gray-700 text-lg mb-6'>
          We wish you success and safety always.
        </p>
        <button
          onClick={handleCloseApp}
          className='bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 transition duration-300'
        >
          Close App
        </button>
        <div className='mt-8'>
          <h2 className='text-2xl font-bold text-blue-600 mb-4'>Notifications</h2>
          <ul className='space-y-2'>
            {notifications.map((notification, index) => (
              <li key={index} className='bg-gray-50 p-3 rounded-lg shadow-sm'>
                {notification}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;