export default function NullTraceWebsite() { return ( <div className="min-h-screen bg-black text-white font-mono overflow-hidden relative"> {/* Background Glow */} <div className="absolute inset-0 bg-gradient-to-b from-black via-zinc-900 to-black opacity-90"></div>

{/* Static Overlay */}
  <div className="absolute inset-0 opacity-10 pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/asfalt-dark.png')]"></div>

  <div className="relative z-10 flex flex-col items-center px-6 py-16 text-center">
    {/* Title */}
    <h1 className="text-6xl md:text-8xl tracking-widest font-bold text-red-600 animate-pulse">
      NULLTRACE
    </h1>

    <p className="mt-4 text-zinc-400 italic text-lg md:text-xl max-w-xl">
      Every trace leads to nothing.
    </p>

    {/* Image */}
    <div className="mt-12 border border-zinc-700 rounded-2xl overflow-hidden shadow-2xl shadow-red-900/30 max-w-md">
      <img
        src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=1200&auto=format&fit=crop"
        alt="NullTrace"
        className="w-full h-full object-cover grayscale opacity-80"
      />
    </div>

    {/* Lore Section */}
    <div className="mt-16 max-w-3xl text-left space-y-6">
      <h2 className="text-3xl text-red-500 border-b border-zinc-700 pb-2">
        ARCHIVE LOG
      </h2>

      <p className="text-zinc-300 leading-relaxed">
        NullTrace was first discovered in abandoned Roblox servers around 2019.
        Players reported seeing a silent figure standing motionless in the distance.
        Moments later, game audio would distort, players would disconnect,
        and corrupted screenshots would appear online.
      </p>

      <p className="text-zinc-400 leading-relaxed">
        The Observer watches.
        TraceLost disappeared.
        TheFirstTrace searches for answers.
      </p>

      <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-4 text-red-400 text-sm">
        [WARNING] User "TraceLost" last seen: 2019
      </div>
    </div>

    {/* Character Cards */}
    <div className="grid md:grid-cols-3 gap-6 mt-20 w-full max-w-6xl">
      {[
        {
          name: 'The Observer',
          desc: 'A silent entity that watches from afar.',
        },
        {
          name: 'TraceLost',
          desc: 'A missing player connected to NullTrace.',
        },
        {
          name: 'TheFirstTrace',
          desc: 'Searching for the truth behind the corruption.',
        },
      ].map((char) => (
        <div
          key={char.name}
          className="bg-zinc-900/70 border border-zinc-800 rounded-2xl p-6 hover:border-red-700 transition"
        >
          <h3 className="text-2xl text-red-500 mb-3">{char.name}</h3>
          <p className="text-zinc-400">{char.desc}</p>
        </div>
      ))}
    </div>

    {/* Footer */}
    <div className="mt-20 max-w-2xl w-full bg-black/60 border border-red-900 rounded-2xl p-6 text-left">
      <h2 className="text-2xl text-red-500 mb-4">RECOVERED RECORDINGS</h2>
      <ul className="space-y-3 text-zinc-400">
        <li>▶ trace_lost_final.mp4</li>
        <li>▶ observer_sighting_01.mp4</li>
        <li>▶ nulltrace_joined.log</li>
        <li>▶ archive_corruption_event</li>
      </ul>
    </div>

    <div className="mt-10">
      <button className="bg-red-900 hover:bg-red-700 transition px-6 py-3 rounded-xl text-white tracking-widest shadow-lg shadow-red-900/40">
        ENTER THE ARCHIVE
      </button>
    </div>

    <div className="mt-24 text-zinc-600 text-sm tracking-widest">
      BEYOND THE TRACE • NULLTRACE ARCHIVES
    </div>
  </div>
</div>

); }