function App() {
  return (
    <div className="min-h-screen bg-black text-white p-8">
      <div className="text-center max-w-2xl mx-auto pt-20">
        <span className="text-primary text-sm font-medium tracking-widest uppercase">Full-Stack Entwickler</span>
        <h1 className="text-7xl font-bold mt-4 mb-6 leading-tight">Robert Bretz</h1>
        <p className="text-xl text-gray-400 max-w-lg mx-auto leading-relaxed">
          Ich baue moderne Webanwendungen mit React, .NET und Docker. Minimalistisch, schnell und zuverlässig.
        </p>
        <div className="mt-10 flex gap-4 justify-center">
          <a
            href="#"
            className="px-6 py-3 bg-primary text-black font-semibold rounded-full hover:opacity-80 transition"
          >
            Projekte
          </a>
          <a
            href="#"
            className="px-6 py-3 border border-gray-700 text-gray-300 font-semibold rounded-full hover:border-primary hover:text-primary transition"
          >
            Kontakt
          </a>
        </div>
      </div>

      {/* SCROLL-TEST: Diese Blöcke erzwingen Scrollen */}
      <div className="mt-20 space-y-8 max-w-2xl mx-auto">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="h-64 bg-gray-900 rounded-xl flex items-center justify-center text-gray-500 text-2xl">
            Sektion {i + 1}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;
