import React, { useEffect } from 'react'
import styles from './styles/Hero.module.css'
import sal from 'sal.js'
import '../node_modules/sal.js/dist/sal.css'

const Hero = () => {
	useEffect(() => {
		sal({
			threshold: 0.5,
			once: true,
			root: null,
		});
	}, []);

  return (
    <>
			<div className='section dark'>
				<div className={styles.grid}>
					<div className={styles.col}>
						<h1 
						data-sal='slide-right'
						data-sal-delay='300'
						data-sal-easing='ease-out'
						className={styles.heading}>Refreshing <br /> web design</h1>
						<span 
						data-sal='fade'
						data-sal-delay='350'
						data-sal-easing='ease-out'
						className={styles.subtitle}>We are Brisbane's #1 small website design agency putting a refreshing twist on web development and design.</span>
						<div 
						data-sal='fade'
						data-sal-delay='400'
						data-sal-easing='ease-out'
						className={styles.inputHero}>
							<input className={styles.textInput} placeholder="Enter your email address." type="text" />
							<button className='button-round'>Contact Us</button>
						</div>
						<div className={styles.heroStats}>
							<span 
							data-sal='fade'
							data-sal-delay='500'
							data-sal-easing='ease-out'
							>
								<h4>5</h4>
								<p>Successful projects</p>
							</span>
							<span
							data-sal='fade'
							data-sal-delay='550'
							data-sal-easing='ease-out'>
								<h4>8</h4>
								<p>Years of experience</p>
							</span>
						</div>
					</div>
					<div className={`col centered ${styles.col}`}>
						<img 
						data-sal='slide-left'
						data-sal-delay='300'
						data-sal-easing='ease-out'
						className={styles.image}
						src="/hero.jpg" 
						alt="Brisbane Squash employees posing for photos" />
					</div>
				</div>
			</div>
    </>
  )
}

export default Hero