// static/js/landing.LandingPage.jsx

function LandingPage() {
    const { setView } = useContext(AuthContext);

    return (
        <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
            <div className="max-w-5xl w-full grid gap-8 md:grid-cols-2">
                {/* Левый блок: текст и преимущества */}
                <div className="space-y-6">
                    <span className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-xs font-semibold uppercase tracking-wide">
                        Для компаний и команд
                    </span>

                    <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 leading-snug">
                        Система тестирования сотрудников,
                        <span className="block text-blue-600 mt-1">
                            которая экономит часы HR и руководителям
                        </span>
                    </h1>

                    <p className="text-gray-600 text-sm sm:text-base leading-relaxed">
                        Наш сервис создан специально для организаций. Вы за несколько минут
                        можете создать тест из JSON, выдать доступ сотрудникам и получить
                        понятную аналитику: кто прошёл, кто завалил, какие темы «проседают».
                    </p>

                    <ul className="space-y-3 text-sm sm:text-base">
                        <li className="flex items-start gap-2">
                            <span className="mt-1 inline-block w-2 h-2 rounded-full bg-blue-500"></span>
                            <span>Запуск тестирования сотрудников за 5 минут.</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="mt-1 inline-block w-2 h-2 rounded-full bg-blue-500"></span>
                            <span>Импорт готовых тестов из JSON за считанные минуты.</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="mt-1 inline-block w-2 h-2 rounded-full bg-blue-500"></span>
                            <span>Аналитика: кто прошёл, кто нет, баллы и время прохождения.</span>
                        </li>
                        <li className="flex items-start gap-2">
                            <span className="mt-1 inline-block w-2 h-2 rounded-full bg-blue-500"></span>
                            <span>Роли и отделы: администраторы, руководители, специалисты, стажёры.</span>
                        </li>
                    </ul>

                    <div className="flex flex-col sm:flex-row gap-3 pt-2">
                        <button
                            onClick={() => setView('register_org')}
                            className="inline-flex justify-center items-center px-4 py-2.5 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold shadow-sm"
                        >
                            Зарегистрировать организацию
                        </button>
                        <button
                            onClick={() => setView('register_invite')}
                            className="inline-flex justify-center items-center px-4 py-2.5 rounded-md bg-white hover:bg-gray-50 text-sm font-semibold text-gray-800 border border-gray-200"
                        >
                            Регистрация по инвайт-коду
                        </button>
                        <button
                            onClick={() => setView('login')}
                            className="inline-flex justify-center items-center px-4 py-2.5 rounded-md text-sm font-semibold text-gray-600 hover:text-blue-600"
                        >
                            Войти в систему
                        </button>
                    </div>
                </div>

                {/* Правый блок: карточка с мини-описанием процесса */}
                <div className="bg-white rounded-xl shadow-md p-5 sm:p-6 flex flex-col justify-between">
                    <div className="space-y-4">
                        <h2 className="text-lg font-semibold text-gray-900">
                            Как работает сервис
                        </h2>
                        <ol className="space-y-3 text-sm sm:text-base text-gray-700">
                            <li>
                                <span className="font-semibold text-blue-600">1.</span>{" "}
                                Регистрируете организацию и создаёте аккаунты сотрудников.
                            </li>
                            <li>
                                <span className="font-semibold text-blue-600">2.</span>{" "}
                                Загружаете тест из JSON или создаёте его вручную в админ-панели.
                            </li>
                            <li>
                                <span className="font-semibold text-blue-600">3.</span>{" "}
                                Сотрудники проходят тесты в удобном интерфейсе.
                            </li>
                            <li>
                                <span className="font-semibold text-blue-600">4.</span>{" "}
                                Вы видите результаты, проценты прохождения и слабые места команды.
                            </li>
                        </ol>
                    </div>

                    <div className="mt-6 text-xs text-gray-500 border-t pt-3">
                        Платформа разработана для внутренних HR-процессов компаний. Вы сами
                        контролируете доступ и хранение данных сотрудников.
                    </div>
                </div>
            </div>
        </div>
    );
}