"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation"

const PROFILES = [
  {
    id: "isabella",
    label: "Isabella",
    edad: "4 años",
    emoji: "👧",
    color: "from-pink-400 to-pink-500",
    desc: "Letras, números y primeras palabras",
  },
  {
    id: "francesca",
    label: "Francesca",
    edad: "6 años",
    emoji: "👦",
    color: "from-blue-400 to-blue-500",
    desc: "Matemáticas, lectura y ortografía",
  },
  {
    id: "sebastian",
    label: "Sebastián",
    edad: "8 años",
    emoji: "🧒",
    color: "from-green-400 to-green-500",
    desc: "Matemáticas avanzadas, historia y geografía",
  },
]

export default function RootPage() {
  const router = useRouter()

  useEffect(() => {
    const host = window.location.hostname
    if (host.includes("simulacro")) {
      router.replace("/parent")
    }
  }, [router])

  const handleSelect = (id: string) => {
    if (id === "isabella") {
      router.push("/child")
    } else {
      router.push(`/${id}`)
    }
  }

  return (
    <div className="min-h-dvh bg-background flex flex-col items-center justify-center p-6 gap-6 relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary via-accent to-secondary opacity-30" />

      {/* Logo area */}
      <div className="text-center space-y-1 mb-4">
        <div className="text-5xl">📚</div>
        <h1 className="text-3xl font-display font-bold text-foreground">
          EduEasy
        </h1>
        <p className="text-muted-foreground text-sm">¿Quién va a aprender hoy?</p>
      </div>

      <div className="flex flex-col gap-4 w-full max-w-sm">
        {PROFILES.map((p) => (
          <button
            key={p.id}
            onClick={() => handleSelect(p.id)}
            className={`bg-gradient-to-r ${p.color} text-white touch-target-lg rounded-2xl flex items-center gap-4 px-6 py-6 text-left shadow-lg active:scale-95 transition-all hover:shadow-xl font-display`}
          >
            <span className="text-5xl shrink-0">{p.emoji}</span>
            <div className="flex-1 min-w-0">
              <div className="text-xl font-bold">{p.label}</div>
              <div className="text-sm opacity-80">{p.edad}</div>
              <div className="text-xs opacity-70 mt-1">{p.desc}</div>
            </div>
            <span className="text-2xl opacity-60">→</span>
          </button>
        ))}
      </div>

      <div className="fixed bottom-4 text-center">
        <button
          onClick={() => router.push("/parent")}
          className="text-sm text-muted-foreground underline underline-offset-2"
        >
          Mamá / Papá
        </button>
      </div>
    </div>
  )
}