"use client"; import { useState } from "react"; import Link from "next/link"; import { useTranslations } from "next-intl"; import { cn } from "@/lib/utils"; import { analyticsKids } from "@/lib/analytics"; import { PixelRobot, PixelStar, PixelTree, PixelCastle } from "@/components/kids/elements/pixel-art"; export function KidsHomeContent() { const t = useTranslations("kids"); const [step, setStep] = useState(0); const totalSteps = 3; const nextStep = () => setStep((prev) => Math.min(prev + 1, totalSteps - 1)); const prevStep = () => setStep((prev) => Math.max(prev - 1, 0)); return (

{/* Main content area */}

{/* Step 0: Welcome */} {step === 0 && (

{t("home.badge")}

{t("home.title")}

{t("home.subtitle")}

{t("home.promiIntro.greeting")}

{t("home.promiIntro.message")}

)} {/* Step 1: Features */} {step === 1 && (

{t("home.whatYouLearn")}

{t("home.features.games.title")}

{t("home.features.games.description")}

{t("home.features.stories.title")}

{t("home.features.stories.description")}

{t("home.features.stars.title")}

{t("home.features.stars.description")}

)} {/* Step 2: Ready to start */} {step === 2 && (

{t("home.readyTitle")}

{t("home.readyMessage")}

analyticsKids.startGame()} className="inline-block pixel-btn pixel-btn-green text-xl md:text-2xl px-8 py-4" > {t("home.startButton")}

{t("home.ageNote")}

)}

{/* Navigation footer - pixel art style */}

{/* Buttons row */}

{/* Back button */} {/* Step indicators - desktop only, centered */}

{Array.from({ length: totalSteps }).map((_, i) => (

{/* Next button */} {step < totalSteps - 1 ? ( ) : ( {t("home.startButton")} )}

{/* Step indicators - mobile only, below buttons */}

{Array.from({ length: totalSteps }).map((_, i) => (

); } // Pixel art icons function PixelPlayIcon() { return ( ); } function PixelArrowLeft() { return ( ); } function PixelArrowRight() { return ( ); } function PixelGamepad() { return ( ); } function PixelBook() { return ( ); }