import { useEffect, useState } from 'react';
import '../css/global.css';
import BlackButton from './components/customButton';
import LoadingScene from './components/loadingScene';

function HomePage() {
  const [loading, setLoading] = useState(true); // Track loading state

  useEffect(() => {
    const controller = new AbortController();

    const fetchVideo = async () => {
      try {
        const res = await fetch(`${import.meta.env.VITE_ASSETS_URL}/hallway_FFF.mp4`, {
          signal: controller.signal,
          cache: 'force-cache',
        });

        await res.blob(); // Read into memory to trigger caching
        console.log('Video prefetched successfully.');
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Video prefetch failed:', err);
        }
      } finally {
        setLoading(false); // Done loading either way
      }
    };

    fetchVideo();

    return () => controller.abort();
  }, []);

  if (loading) {
    return (
      <LoadingScene/>
    );
  }

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      flexDirection: 'column',
    }}>
      <label className='title'>Fifty Shades <br /> of Bully</label>

      <div style={{ height: '8vh' }} />

      <BlackButton text="Start" to='/warn' />
    </div>
  );
}

export default HomePage;