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 University of the Philippines Student Chapter</p>
            </div>
          </SwiperSlide>
          <SwiperSlide className='landing-slider-slide app-process'>
            <div className='app-process-panel'>
              <h1>Come and <br />Roll With Us!</h1>
              <span>Application Process - 2526B</span>
              <a href='apply' className='apply'>Apply Now! &rarr;</a>
            </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='get-licensed' className='learn-more'>Learn More &rarr;</a>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  );
};

export default Slider;
