export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-black text-white font-sans">
      <header className="relative h-[100vh] flex flex-col items-center justify-center text-center px-4 bg-gradient-to-b from-gray-800 to-black">
        <img
          src="/1000008222.png"
          alt="StageX.GE Logo"
          className="w-48 mb-6 drop-shadow-[0_10px_20px_rgba(255,0,0,0.5)]"
        />
        <h1 className="text-5xl font-extrabold tracking-widest text-yellow-400 drop-shadow-xl">
          StageX.GE
        </h1>
        <p className="text-xl mt-3 text-gray-300 italic">
          ??? ???????? • ECU ??-??????? • ?????????? ??????
        </p>
        <a
          href="#contact"
          className="mt-8 inline-block bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-full text-lg font-bold shadow-lg transition duration-300 hover:scale-105"
        >
          ?????????????? ??????
        </a>
      </header>

      <section className="py-20 px-6 bg-gradient-to-tr from-gray-900 to-gray-800">
        <h2 className="text-4xl font-bold text-center text-yellow-400 mb-12 drop-shadow-lg">
          ????? ???????????
        </h2>
        <div className="grid md:grid-cols-3 gap-10">
          <div className="bg-gray-900 p-6 rounded-2xl shadow-xl hover:scale-105 transition-transform duration-300 border border-yellow-500">
            <h3 className="text-2xl font-semibold text-yellow-300 text-center mb-3">?????????? ??????</h3>
            <p className="text-gray-300 text-center">
              ECU ??????????? ?????? ??????????? ??????????????.
            </p>
          </div>
          <div className="bg-gray-900 p-6 rounded-2xl shadow-xl hover:scale-105 transition-transform duration-300 border border-red-500">
            <h3 className="text-2xl font-semibold text-red-300 text-center mb-3">?????????? ????????</h3>
            <p className="text-gray-300 text-center">
              DPF, EGR, AdBlue ?????????? ????? ?? ??????? ???????????.
            </p>
          </div>
          <div className="bg-gray-900 p-6 rounded-2xl shadow-xl hover:scale-105 transition-transform duration-300 border border-green-500">
            <h3 className="text-2xl font-semibold text-green-300 text-center mb-3">??? ????????</h3>
            <p className="text-gray-300 text-center">
              ???????? ?????????? ????????? ?? ????????????? ????.
            </p>
          </div>
        </div>
      </section>

      <section id="contact" className="bg-gradient-to-br from-black to-gray-900 py-20 px-6 text-center border-t border-gray-700">
        <h2 className="text-4xl font-bold text-yellow-400 mb-6 drop-shadow">
          ??????????????
        </h2>
        <p className="text-md text-gray-300 mb-4">
          ????????? ??????????? ?? ??????? ?????????? ?? ?????????.
        </p>
        <div className="text-gray-200 text-lg space-y-2">
          <p>
            ?? <span className="font-bold text-white">+995 595 254 477</span>
          </p>
          <p>
            ?? <span className="font-bold text-white">info@stagex.ge</span>
          </p>
          <p>
            ?? ???????, ??????????
          </p>
        </div>
      </section>

      <footer className="bg-black text-center py-4 text-gray-500 text-xs border-t border-gray-800">
        © {new Date().getFullYear()} StageX.GE — ????? ?????? ???????.
      </footer>
    </div>
  );
}