import React from 'react';
import Navigation from './Navigation';

function NewHome() {
  return (
    <div className="min-h-screen bg-gray-100 flex flex-col">
      <Navigation />
      <main className="flex-grow flex flex-col items-center justify-center text-center p-4">
        <div className="relative w-full max-w-4xl mx-auto mb-8 overflow-hidden rounded-lg shadow-lg">
          <video
            src="https://5omqe7wpghgv44jg.public.blob.vercel-storage.com/assets/galaxy-full-bleed-Unq4IRYlPB88MNh37YNNMn4QZo18m4.mp4"
            poster="https://cdn.sanity.io/images/jpb4ed5r/production/daef88d9c5c6dad2c2ad1198ec7ec35559e4251c-1920x1080.png"
            aria-label="Looping video of Tenstorrent Galaxy Server rotating on gray background (no audio)"
            className="w-full h-auto object-cover"
            playsInline
            autoPlay
            muted
            loop
            preload="metadata"
          ></video>
        </div>
        <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
          As ThreeFold Galaxy we deliver the future of Datacenters
        </h1>
        <p className="text-xl text-gray-600 max-w-2xl">
          resulting in better performance, greener and more security.
        </p>
      </main>
      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
        </div>
      </footer>
    </div>
  );
}

export default NewHome;