import { Settings, Cpu, Users } from "lucide-react";

export const Panel = () => {
  return (
    <section className="py-24 bg-slate-900">
      <div className="container mx-auto px-4 max-w-screen-xl">
        <div className="flex flex-col md:flex-row items-center gap-12">
          <div className="flex-1">
            <div>
              <img
                src="https://cdn.pterodactyl.io/site-assets/mockup-macbook-grey-1.0.png"
                alt="Control Panel"
                className="rounded-md w-full"
              />
            </div>
          </div>
          <div className="flex-1">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Intuitive Control Panel
            </h2>
            <p className="text-xl text-gray-300 mb-8 leading-relaxed">
              Take full control of your Minecraft server with our custom-built
              panel. Manage plugins, monitor performance, and configure settings
              with ease. Perfect for both beginners and experienced server
              administrators.
            </p>
            <ul className="space-y-4 mb-8">
              <li className="flex items-center text-gray-300">
                <div className="bg-slate-950 p-2 rounded-md mr-3">
                  <Settings className="w-6 h-6 text-blue-500" />
                </div>
                One-click plugin installation and configuration
              </li>
              <li className="flex items-center text-gray-300">
                <div className="bg-slate-950 p-2 rounded-md mr-3">
                  <Cpu className="w-6 h-6 text-blue-500" />
                </div>
                Real-time performance monitoring and optimization
              </li>
              <li className="flex items-center text-gray-300">
                <div className="bg-slate-950 p-2 rounded-md mr-3">
                  <Users className="w-6 h-6 text-blue-500" />
                </div>
                Advanced user and permission management
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Panel;
