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";
import { H5 } from "../components/Headings";
import PreCyse from "../components/precyse";
import { useNavigation } from "../utils";

export function Home() {
  useTabNavigation();
  const {goToPageAndScroll} = useNavigation(); 
/* */
  return (
    <>
       <div className="col">
          <div className="col header-container landing-page-header" id="landing-page-header">
            <div className="row align-items-center">
              <img src="https://static.igem.wiki/teams/5247/photos/header/bild.webp" />
            </div>  
            <br/>
            <h3>And present our mRNA-based <b>gene therapy</b> for <b>targeted and safe</b> reconstitution of CFTR to restore the mucociliary clearance of patients with <b>Cystic Fibrosis</b>.</h3>
          </div>
        </div>
        <div className="col">
          <div className="col header-container landing-page-header" id="landing-page-header-2">
            <div className="row align-items-center">
            <div className="col header-button-row">
                <div><H5 text="Take a tour through our highlights:"/>  </div>
                <p>
                  &#8594; <a href="description?scrollTo=Abstract">What is <PreCyse/>? </a> <br/> <br/> 
                  &#8594; <a href="engineering?tab=tab-our-cycle&scrollTo=ourcycle">What is our strategy?</a> <br/> <br/>
                  &#8594; <a href="experiments?tab=heading">How did we do this?</a> <br/> <br/>
                  &#8594; <a href="results?scrollTo=experimental-design">What did we archieve?</a> <br/> <br/>
                  &#8594; <a href="parts?scrollTo=Parts Collection2">What parts are we contributing?</a> <br/> <br/>
                  &#8594; <a href="judging?scrollTo=OverviewH">What are our special awards?</a>
                </p>
              </div>
            <div className="col header-button-row">
              <p> 
                  <div className="col">
                    <button  onClick={() => goToPageAndScroll("Abstract", "/description")} > <b>CLICK</b> to go directly to our Project Description.</button> 
                  </div>
              </p>
              <p>
                <div className="col">
                    <button onClick={() => goToPageAndScroll("sciency", "")}> <b>SKIP</b> to jump straight to the scienicy part of the animation.</button>   
                  </div>
              </p>
              
              <p>
              <div className="col">
                    <button onClick={() => goToPageAndScroll("scrollstart", "")}> <b>SCROLL</b> to see whole animation.</button>  
                  </div>
              </p>
            </div>
              
            </div>
            
          </div>
        </div>
        <img src="https://static.igem.wiki/teams/5247/landing-page/lp-2.svg"/>  
        <div className="row">
            <div className="col button-x">
              <button  onClick={() => goToPageAndScroll("Approach2H", "/description")} > Lung-Specific Lipid Nanoparticle</button> 
            </div>
            <div className="col button-x">
              <button  onClick={() => goToPageAndScroll("Approach1H", "/description")} > Next-Generation Prime Editing Technology
              </button> 
            </div>
        </div>



    <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'}}>
                        <div id="scrollstart"></div>
            <img src="https://static.igem.wiki/teams/5247/landing/indicator.webp"></img>
          </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> 
    </>
  );
}