import React from 'react';
import { useGSAP } from '@gsap/react'
import gsap from 'gsap'
import VideoCarousel from '../../components/VideoCarousel'

const Highlights = () => {
  useGSAP(() => {
    gsap.to('#title', {
      opacity: 1,
      y: 0
    })
    gsap.to('.link', {
      opacity: 1, 
      y: 0,
      duration: 1,
      stagger: {
        amount: 0.25,
      }
    })
  }, [])

  return (
    <section id="highlights" className="w-screen overflow-hidden h-full common-padding bg-zinc">
      <div className="screen-max-width">
        <div className='mb-12 w-full items-end md:flex justify-between'>
          <h1 id="title" className="section-heading bg-clip-text text-transparent" style={{color: "#3267B9"}}>Features that make VarDiG powerful.</h1>
        </div>

        <VideoCarousel data-testid="video-carousel"/>
      </div>
    </section>
  )
}

export default Highlights