import Image from "next/image"
import Link from "next/link"
import { AlertTriangle, FileCode, Shield } from "lucide-react"

export default function IntroductionPage() {
  return (
    <div className="w-full max-w-4xl mx-auto px-4 py-8 text-gray-900">
      {/* Logo + Title Section */}
      <div className="flex items-start mb-6">
        <Image 
          src="https://macrimi.github.io/ProxMenux/logo.png" 
          alt="ProxMenux Logo" 
          width={80} 
          height={80} 
          className="mr-4"
        />
        <p className="mb-4">
        ProxMenux is a tool designed to make Proxmox VE accessible to all users, regardless of their experience and technical knowledge.
        </p>
      </div>

      <p className="mb-4">
      Designed with a menu-based interface, ProxMenux simplifies the execution of commands to perform actions on:
      </p>
      <ul className="list-disc list-inside mb-4 ml-4">
        <li>The Proxmox server</li>
        <li>Virtual machines (VMs)</li>
        <li>Containers (LXC)</li>
      </ul>

      <h2 className="text-2xl font-semibold mt-8 mb-4">Core Features</h2>
      <p className="mb-4">
        ProxMenux enables streamlined management of:
      </p>
      <ul className="list-disc list-inside mb-6 ml-4">
        <li>System resources</li>
        <li>Network and storage configurations</li>
        <li>VM and LXC container administration</li>
        <li>Hardware integration and optimizations</li>
        <li>Automated server maintenance</li>
      </ul>

      <h2 className="text-2xl font-semibold mt-8 mb-4">Key Advantages</h2>
      <ul className="list-disc list-inside mb-6 ml-4">
        <li>Intuitive menu-driven interface</li>
        <li>Simplification of management tasks</li>
      </ul>

      <p className="mt-6">
        The following sections provide detailed instructions on installing and using ProxMenux, along with comprehensive documentation on its available functionalities.
      </p>

      {/* Guides Link */}
      <p className="mt-6">
        For additional Proxmox-related information, including official documentation, forums, and discussions, visit the{" "}
        <Link href="/guides" className="text-blue-500 hover:underline">
          Guides
        </Link>{" "} 
        section.
      </p>

      {/* Security Notice */}
      <div className="bg-white border rounded-lg shadow-sm p-4 my-4">
        <h3 className="text-lg font-medium mb-2 flex items-center">
          <AlertTriangle className="h-5 w-5 text-yellow-500 mr-2" />
          Security Information
        </h3>
        <p className="mb-3">Be careful when copying scripts from the internet. Always remember to check the source!</p>
        <div className="flex flex-wrap gap-2">
          <a 
            href="https://github.com/MacRimi/ProxMenux/blob/main/install_proxmenux.sh" 
            className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-600 hover:bg-blue-700 text-white"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FileCode className="h-4 w-4 mr-2" />
            View Source Code
          </a>
          <a 
            href="https://github.com/MacRimi/ProxMenux?tab=coc-ov-file#-2-security--code-responsibility" 
            className="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md bg-green-600 hover:bg-green-700 text-white"
            target="_blank"
            rel="noopener noreferrer"
          >
            <Shield className="h-4 w-4 mr-2" />
            Code of Conduct
          </a>
        </div>
      </div>

    </div>
  )
}