import React from "react";
import { Sparkles } from "lucide-react";

export default function Header() {
  return (
    <header className="text-center mb-8 space-y-4 relative">

      {/* 🔗 About + Privacy Links oben rechts (aktuell vollständig versteckt) */}
      <div
        className="fixed top-4 right-4 z-50 flex gap-6 text-sm"
        aria-hidden="true"
        style={{ display: "none" }} // 🔧 Sichtbar machen = einfach löschen
      >
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            document.getElementById("about")?.scrollIntoView({ behavior: "smooth" });
            window.history.replaceState(null, '', window.location.pathname);
          }}
          className="text-white hover:underline cursor-pointer"
        >
          About
        </a>

        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            document.getElementById("privacy")?.scrollIntoView({ behavior: "smooth" });
            window.history.replaceState(null, '', window.location.pathname);
          }}
          className="text-white hover:underline cursor-pointer"
        >
          Privacy
        </a>
      </div>

      {/* 🔥 Logo + Titel */}
      <div className="flex items-center justify-center gap-3 mb-4 mt-[250px]">
        <Sparkles className="w-8 h-8 text-yellow-300 animate-pulse" />
        <h1 className="text-4xl md:text-5xl font-black text-white tracking-tight">
          FancyText
        </h1>
        <Sparkles className="w-8 h-8 text-yellow-300 animate-pulse" />
      </div>

      <p className="text-xl text-white/90 font-medium mb-2">
        Coole Schriftarten für Instagram & TikTok
      </p>

      <p className="text-white/80 mb-6">
        30+ Fancy Fonts zum Kopieren – perfekt für deine Bio ✨
      </p>
      
    </header>
  );
}