import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';

const Slider = () => {
  return (
    <section className="landing-slider-section">
      <div className="landing-slider-container">
        <Swiper
          modules={ [Navigation, Pagination] }
          navigation
          pagination={ {
            dynamicBullets: true,
            clickable: true,
          } }
          loop
          centeredSlides
          autoHeight
          className='landing-slider'
        >
          <SwiperSlide className='landing-slider-slide landing'>
            <div className='landing-panel'>
              <h1>One IECEP </h1>
              <span>One Organization.{ `\n` }One Profession.{ `\n` }One Family</span>
              <p>Institute of Electronics Engineers of the Philippines <br />University of the Philippines Student Chapter</p>
            </div>
          </SwiperSlide>
          <SwiperSlide className='landing-slider-slide get-licensed'>
            <div className='get-licensed-panel'>
              <h1>Get Licensed 2026</h1>
              <span>Geared Up for the Future</span>
              <a href='https://www.facebook.com/GetLicensed.upiecep' className='learn-more' target='_blank' rel='noopener noreferrer'>Learn More &rarr;</a>
            </div>
          </SwiperSlide>
          <SwiperSlide className='landing-slider-slide iecep-cares'>
            <div className='iecep-cares-panel'>
              <h1>IECEP Cares 2026</h1>
              <span>Bloom with IECEP</span>
              <a href='https://www.facebook.com/IECEPCares' className='learn-more' target='_blank' rel='noopener noreferrer'>Learn More &rarr;</a>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  );
};

export default Slider;
