"use client";

import { useRouter } from "next/navigation";

export default function Home() {
  const router = useRouter();

  return (
    <main style={styles.container}
      style={styles.container}
      onClick={() => router.push("/dashboard")}
    >

      <h1 style={styles.title}>Planner Danner</h1>

      <p style={styles.slogan}>
        your tasks, perfectly organized...
      </p>

      <p style={styles.hint}>
        click anywhere to start planning
      </p>
    </main>
  );
}

const styles = {
  container: {
    background: "linear-gradient(to bottom, #38bdf8, #0ea5e9)",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column" as const,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center" as const,
    cursor: "pointer",
  },

  title: {
    fontSize: "90px",
    fontWeight: "900",
    color: "white",
    letterSpacing: "2px",
    textShadow: `
      0 4px 0 #0284c7,
      0 8px 20px rgba(0,0,0,0.2)
    `,
    marginBottom: "20px",
  },

  slogan: {
    fontSize: "28px", // ⬅️ bigger now
    fontWeight: "600",
    color: "#e0f2fe",
    marginBottom: "25px",
  },

  hint: {
    fontSize: "14px", // ⬅️ smaller than everything
    color: "#bae6fd",
    opacity: 0.8,
    letterSpacing: "1px",
  },
};