import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
import { AirbuddyAnim } from "../components/AirbuddyAnim";
import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
import { useTabNavigation } from "../utils/TabNavigation";

export function Home() {
  useTabNavigation();

  return (
    <div className="row mt-4">
      <div className="col" id="erstecol">
        <div  className="col">
          <div style={{'position': 'relative',
                       'zIndex': '1', 
                       'top': '10vh',
                       'left': '0vw',
                       'scale': '0.25'}}>
            <img src="https://static.igem.wiki/teams/5247/landing/indicator.webp"></img>
          </div>
          <div id="scrollstart"></div>
          <Breathe></Breathe>
          
          <Problems></Problems>
          
          {/* Spacing Block */}
          <div className='col' style={{ 'height': '150vh' }}></div>
          
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-1-text.webp'></FadeIn>
          
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty-no-bg-cropped.gif" bg=''></FadeIn>
          
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-2-text.webp'></FadeIn>
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-3-text.webp'></FadeIn>
          
          
          <FadeIn  filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
          

          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
          <AirbuddyAnim></AirbuddyAnim>
          
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>
          <PrimeGuideAnimOne></PrimeGuideAnimOne>
          <PrimeGuideAnimTwo></PrimeGuideAnimTwo>

          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif" bg=''></FadeIn>
          
          {/* Spacing Block */}
          <div className='col' style={{ 'height': '100vh' }}></div>
        </div>
      </div> 
    </div> 
  );
}