"use client";

import React from "react";
import { useRouter } from "next/navigation";
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
import TabBar from "../components/TabBar";

const HomePage = () => {
  const router = useRouter();

  return (
    <div className="min-h-screen w-full bg-[#90D2F9] flex justify-center px-4">
      <div className="relative w-full max-w-md flex flex-col pb-20">
        {/* Основной контент: текст сверху, "Продолжить" внизу */}
        <main className="flex flex-col justify-between h-full pt-6">
          {/* Верх: текст + две второстепенные кнопки */}
          <div className="flex flex-col gap-4">
            <div className="space-y-3">
              <h1 className="font-montserrat font-extrabold text-2xl text-white">
                Добро Пожаловать!
              </h1>
              <p className="font-montserrat font-medium text-base text-white">
                Приложение предназначено для помощи мало-подвижным людям.
              </p>
              <p className="font-montserrat font-medium text-base text-white">
                Мы уже помогли более 200 людям с особенностями.
              </p>
            </div>

            <div className="mt-4 flex flex-col gap-3">
              <button
                type="button"
                className="w-full bg-[#E0B267] rounded-xl flex items-center justify-center py-3"
              >
                <span className="font-montserrat font-extrabold text-base text-white">
                  Инструкция
                </span>
              </button>

              <button
                type="button"
                className="w-full bg-[#E07567] rounded-xl flex items-center justify-center py-3"
              >
                <span className="font-montserrat font-extrabold text-base text-white">
                  Новые обновления
                </span>
              </button>
            </div>
          </div>

          {/* Низ: основная кнопка "Продолжить" */}
          <div className="mt-6">
            <button
              type="button"
              onClick={() => router.push("/createRequest")}
              className="w-full bg-[#94E067] rounded-xl flex items-center justify-center py-3"
            >
              <span className="font-montserrat font-extrabold text-base text-white">
                Создать заявку
              </span>
            </button>
          </div>
        </main>

        {/* TabBar фиксирован снизу, во всю ширину */}
       <TabBar />
      </div>
    </div>
  );
};

export default HomePage;