import Timer from '../components/Timer';
import {useEffect, useState} from 'react';
import SpinnerImage from '../components/SpinnerImage';

const AboutSection = () => {
   const [opacity, setOpacity] = useState(0);

   useEffect( () => {
       let callback = (entries, observer) => {
           entries.forEach(entry => {
             if (entry.isIntersecting) {
               setOpacity(1);
             } else {
               setOpacity(0);
             }
           });
       };
         const observer = new IntersectionObserver(callback);
         const observed = document.getElementById("about-glow");
         observer.observe(observed);

          
   }, [])

  return (
    <section id="about" className="about-section">   
      <div className="about-section__container">
        <div className='about-section__text-box'>
            <div id="about-glow" className="about-section__glow" style={{opacity: opacity}}></div>
            <h2>Om vBytes</h2>
                <p>Föreningen vBytes etablerades Oktober 2020. vBytes står för Viskaforsbygdens Teknik- Elektronik och Spelförening. Vi är anslutna till SVEROK. </p>
                <p>Vi vill vara en mötesplats för spel och teknikintresserade i Viskaforsbygden. 
                    Medlemskapet är gratis och föreningen och dess verksamheter drivs ideellt.
                     Flera av verksamheterna riktar sig mot barn- och ungdomar, men det finns inga åldersgränser för medlemskapet i föreningen. 
                     vBytes är till för alla som delar ett liknande intresse.</p>
                <p>Vi har idag tre återkommande verksamheter:</p>
                <ul>
                    <li>LAN</li>
                    <li>OpenMakers</li>
                    <li>Aktiviteter på mötesplatsen</li>
                </ul>
        </div>
        <SpinnerImage />
      </div>
      <div className='about-section__activities'>
        <h2>Våra återkommande aktiviteter</h2>
        <div className='activities-container'>
            <div className="glowing-box"><h3>Makerspace</h3>
            <p>Makerspace är en kreativ miljö, precis som en studio eller en verkstad, där man tillsammans skapar uppfinningar, plockar isär saker, löser problem eller bara skapar saker för att det är roligt. I vårt Makerspace har du tillgång till material, 3d-skrivare, 
                elektronik, mikrokontrollers, mätinstrument, datorer, skrivare, pyssel och varierande verktyg som gör det lättare att skapa saker.</p>
                <p>Makerskvällar och kurser anordnars inom olika områden</p>
                
            </div>
            <div className="glowing-box"><h3>LAN</h3>
            <p>24 timmar LAN-partys sker två gånger per år. Under LAN:et så anordnas det olika former av turneringar och tävlingar. </p>
            <p>LANet har funnits i drygt 5 år och bruka samla runt 100 deltagare. </p>
                <p className='next-lan'>Nästa LAN</p>
                <Timer />
            </div>
            <div className="glowing-box"><h3>Aktiviteter på mötesplatsen</h3>
            <p>Vår mötesplats som ligger i anslutning till Makerspace skall kunna fungera som en social träffpunkt. Mötesplatsen skall kunna användas spontant, exempelvis när du och dina kompisar vill spela ett parti roll- eller bordsspel. 
                Mötesplatsen kan också användas kring speciella evenemang.</p>
                <p>Spelkvällar anordnas några gånger per år.</p>
            </div>
        </div>
      </div>
    </section>
);
};

export default AboutSection;

