// Path: Frontend/src/routes/index.tsx

import { useNavigate } from "@solidjs/router";
import { type Component } from "solid-js";
import styles from "./landing.module.scss";

const HomePage: Component = () => {
	const navigate = useNavigate();

	const handleNavigation = () => {
		navigate("/auth/login");
	};

	return (
		<main class={styles.landingPage}>
			<div class={styles.pageShell}>
				<section class={styles.heroCard}>
					<div class={styles.heroContent}>
						<p class={styles.eyebrow}>Boost AI demo</p>
						<img class={styles.brandLogo} src="/brand/boost-ai-logo-purple.png" alt="Boost AI" />
						<h1>A better homework workflow for Maths and English.</h1>
						<p class={styles.heroText}>
							Boost AI helps teachers assign homework, review student understanding, and choose the right next
							step without heavy admin overhead.
						</p>

						<p class={styles.heroSubtext}>
							Personalised practice, clearer review, and a better homework workflow for classrooms.
						</p>

						<div class={styles.ctaRow}>
							<button type="button" class={styles.primaryButton} onClick={handleNavigation}>
								Try Boost AI
							</button>
							<button type="button" class={styles.secondaryButton} onClick={handleNavigation}>
								Sign in to demo
							</button>
						</div>

						<div class={styles.inlineHighlights}>
							<span>Maths + English</span>
							<span>Personalised homework</span>
							<span>Assign, review, next step</span>
						</div>
					</div>
				</section>
			</div>
		</main>
	);
};

export default HomePage;
