"use client"

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

const PROFILES = [
  { id: "isabella", label: "Isabella", emoji: "👧", color: "bg-pink-500" },
  { id: "francesca", label: "Francesca", emoji: "👦", color: "bg-blue-500" },
  { id: "sebastian", label: "Sebastián", emoji: "🧒", color: "bg-green-500" },
]

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

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

    const params = new URLSearchParams(window.location.search)
    const preselected = params.get("profile")
    if (preselected && PROFILES.find(p => p.id === preselected)) {
      router.replace(`/child/${preselected}`)
    }
  }, [router])

  return (
    <div className="min-h-dvh bg-background flex flex-col items-center justify-center p-6 gap-8">
      <h1 className="text-4xl font-display font-bold text-center">¿Quién sos?</h1>

      <div className="flex flex-col gap-4 w-full max-w-sm">
        {PROFILES.map((p) => (
          <button
            key={p.id}
            onClick={() => router.push(`/child/${p.id}`)}
            className={`${p.color} text-white touch-target-lg rounded-2xl flex items-center gap-4 px-6 py-8 text-2xl font-display font-bold shadow-lg active:scale-95 transition-transform`}
          >
            <span className="text-4xl">{p.emoji}</span>
            <span>{p.label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}