function App(){
  const {useState, useEffect, useRef} = React;
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(30);
  const [target, setTarget] = useState({x:50,y:50,size:80});
  const [running, setRunning] = useState(false);
  const gameRef = useRef();

  useEffect(()=>{
    let timer;
    if(running && timeLeft>0){
      timer = setInterval(()=>setTimeLeft(t=>t-1),1000);
    } else if(timeLeft===0){
      setRunning(false);
    }
    return ()=>clearInterval(timer);
  },[running,timeLeft]);

  useEffect(()=>{
    const handleResize = ()=>placeTarget();
    window.addEventListener('resize',handleResize);
    return ()=>window.removeEventListener('resize',handleResize);
  },[]);

  function placeTarget(){
    const el = gameRef.current;
    if(!el) return;
    const rect = el.getBoundingClientRect();
    const padding = 40;
    const size = Math.max(48, Math.floor(48 + Math.random()*80));
    const x = Math.floor(Math.random()*(rect.width - size - padding)) + padding/2;
    const y = Math.floor(Math.random()*(rect.height - size - padding)) + padding/2;
    setTarget({x,y,size});
  }

  function startGame(){
    setScore(0);
    setTimeLeft(30);
    placeTarget();
    setRunning(true);
  }

  function handleTap(e){
    if(!running) return;
    const rect = gameRef.current.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
    const dx = x - (target.x + target.size/2);
    const dy = y - (target.y + target.size/2);
    const dist = Math.sqrt(dx*dx + dy*dy);
    if(dist <= target.size/2){
      setScore(s=>s+1);
      // speed up: reduce time slightly
      setTimeLeft(t=>Math.max(0,t-1));
      placeTarget();
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center p-4">
      <div className="bg-white/90 rounded-2xl shadow-xl max-w-3xl w-full overflow-hidden">
        <header className="flex items-center justify-between p-4 border-b">
          <h1 className="text-xl font-bold">Touch-Game</h1>
          <div className="text-right">
            <div className="text-sm text-gray-500">Zeit</div>
            <div className="text-2xl font-semibold">{timeLeft}s</div>
          </div>
        </header>
        <main className="p-4">
          <div className="flex gap-4 mb-4 items-center">
            <div className="flex-1">
              <div className="text-sm text-gray-500">Punkte</div>
              <div className="text-3xl font-bold">{score}</div>
            </div>
            <div>
              <button onClick={startGame} className="bg-purple-600 text-white px-4 py-2 rounded-lg shadow">Start</button>
            </div>
          </div>

          <div ref={gameRef} onMouseDown={handleTap} onTouchStart={handleTap} className="relative bg-slate-100 rounded-lg h-96 touch-none" style={{userSelect:'none'}}>
            {/* target */}
            <div style={{position:'absolute', left:target.x, top:target.y, width:target.size, height:target.size, borderRadius:'50%', background:'radial-gradient(circle at 30% 30%, #fff7, #f43f5e)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 6px 18px rgba(0,0,0,0.2)'}}>
              <div style={{width:'70%', height:'70%', borderRadius:'50%', background:'#ef4444', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontWeight:700, fontSize:18}}>
                {Math.ceil((target.size)/10)}
              </div>
            </div>

            {/* big tap hint for touchscreens when not running */}
            {!running && (
              <div className="absolute inset-0 flex items-center justify-center text-center p-6">
                <div>
                  <div className="mb-3 text-lg font-medium">Tippe das Ziel an so oft du kannst</div>
                  <div className="text-sm text-gray-500">Empfohlen für Touchscreen. Start drücken um zu beginnen.</div>
                </div>
              </div>
            )}
          </div>

          <div className="mt-4 text-sm text-gray-600">Tipps: Je kleiner das Ziel, desto mehr Punkte pro Treffer.</div>
        </main>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('artifact_react'));