import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Header } from './components/Header.jsx';
import { Button } from './components/Button.jsx';
import { PageTransition } from './components/PageTransition.jsx';
import { loadCars } from './carStorage.js';
import { motion, useReducedMotion } from 'framer-motion';
import logo from './assets/CarKiddologo.png';

export default function LandingPage() {
  const navigate = useNavigate();
  const [count, setCount] = useState(0);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    loadCars().then((opts) => setCount(opts.length));
  }, []);

  return (
    <PageTransition>
      <div className="hero-bg" />
      <Header count={count} />
      <div className="start-container">
        <div className="start-card">
          <motion.img
            src={logo}
            alt="CarKiddo"
            className="w-20 h-20 sm:w-24 sm:h-24 mx-auto rounded-2xl"
            initial={reduceMotion ? false : { scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.4, type: 'spring', stiffness: 200 }}
          />
          <motion.h1
            className="text-2xl sm:text-3xl font-bold tracking-tight"
            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.1, duration: 0.3 }}
          >
            Kenteken Generator
          </motion.h1>
          <motion.p
            className="subtle text-sm sm:text-base -mt-1"
            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.2, duration: 0.3 }}
          >
            Genereer kentekens voor {count} kinderauto's
          </motion.p>
          <motion.div
            className="flex flex-col gap-3 mt-2"
            initial={reduceMotion ? false : { y: 10, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.3, duration: 0.3 }}
          >
            <Button onClick={() => navigate('/generate')} variant="primary">
              Kentekens genereren
            </Button>
            <Button onClick={() => navigate('/manage')} variant="ghost">
              Kinderauto's beheren
            </Button>
          </motion.div>
        </div>
      </div>
    </PageTransition>
  );
}
