import React from 'react';

const Manual = () => {
  return (
    <div className="max-h-[400px] overflow-y-scroll bg-gray-900 text-gray-100 flex flex-col justify-start items-center p-4">
    <div className="w-full max-w-xl">


        <div className="text-lg mb-4">
            <p>🚀 To purchase Leumas Tokens, follow these steps:</p>
            <ol className="list-decimal pl-5 mt-2">
                <li>
                    <strong>Install MetaMask:</strong> If you don't have it already, install the MetaMask wallet{' '}
                   <a href="https://metamask.io/" className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">
                      here
                    </a>
                    .
                </li>
                <li>
                    <strong>Send ETH to this Contract Address:</strong> Use MetaMask to send Ether (ETH) to the following contract address:
                    <div className="relative group">
                        <pre className="text-yellow-300 mt-2">0xe6EFa7f8807ff859ccC2BD2231A34c0CD1C3CF58</pre>
                       <button
                           className="absolute right-0 top-0 mt-1 mr-2 text-gray-500 group-hover:text-gray-300 focus:outline-none"
                           onClick={() => {
                               const el = document.createElement('textarea');
                               el.value = '0xe6EFa7f8807ff859ccC2BD2231A34c0CD1C3CF58';
                               document.body.appendChild(el);
                               el.select();
                               document.execCommand('copy');
                               document.body.removeChild(el);
                           }}
                       >
                           Copy
                       </button>
                   </div>
               </li>
               <li>
                   <strong>Receive Your Leumas Tokens:</strong> After the transaction is confirmed, you'll receive Leumas Tokens in your MetaMask wallet.
               </li>
           </ol>
       </div>

       <details className="text-lg mb-4">
           <summary className="cursor-pointer text-blue-500 hover:underline">FAQ: How to Purchase Leumas Tokens</summary>
           <div className="mt-2">
               <strong>Q1:</strong> What is MetaMask and why do I need it?
               <p>
                   <strong>A1:</strong> MetaMask is a cryptocurrency wallet and gateway to blockchain apps. You need it to interact with Leumas Token and store your tokens securely.
               </p>

               <strong>Q2:</strong> How do I add ETH to my MetaMask wallet?
               <p>
                   <strong>A2:</strong> You can purchase ETH from a cryptocurrency exchange, then send it to your MetaMask wallet by copying your wallet address.
               </p>

               <strong>Q3:</strong> How do I check my Leumas Token balance?
               <p>
                   <strong>A3:</strong> Use the MetaMask wallet to view your token balance. Leumas Tokens will appear alongside your ETH balance.
               </p>

               <strong>Q4:</strong> Can I use Leumas Tokens for something?
               <p>
                   <strong>A4:</strong> Yes, Leumas Tokens have various use cases, including shopping at the Leumas Shop and accessing Leumas tools and services.
               </p>
           </div>
       </details>

       <div className="text-lg">
           <p>🛠️ Leumas Token Use Cases:</p>
           <ul className="list-disc pl-5 mt-2">
               <li>🛒 Leumas Shop: Purchase items and services with Leumas Tokens.</li>
               <li>🔧 Leumas Tools: Access various tools and services such as bulk forging, list launching, chatbots, hosting, and more, all powered by Leumas Tokens.</li>
               <li>🌐 Microtransactions: Perform web3 in-app microtransactions using Leumas Tokens.</li>
           </ul>
       </div>

       <div className="text-lg mt-4">
           <p>📂 Leumas Token Source Code Download:</p>
           <p>
               You can download the source code for Leumas Token from our website. Click the button below to get the contract code.
           </p>
           <button
               className="mt-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded font-bold focus:outline-none focus:ring-2 focus:ring-blue-400"
               onClick={() => {
                   // Add logic to trigger the download of the contract source code.
                   alert("Download source code button clicked.");
               }}
           >
               Download Source Code
           </button>
       </div>
   </div>
</div>
  )
}

export default Manual