import { useState } from 'react'
import banner1 from '../assets/banner1.jpg'
import banner2 from '../assets/banner2.jpg'
import banner3 from '../assets/banner3.jpg'
import banner4 from '../assets/banner4.jpg'
import banner5 from '../assets/banner5.jpg'
import img1 from '../assets/1.jpg'
import img2 from '../assets/2.jpg'
import img3 from '../assets/3.jpg'
import img4 from '../assets/4.jpg'
import img5 from '../assets/5.jpg'
import img6 from '../assets/6.jpg'

function Home() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div className="container">
      <div id="carousel1" className="carousel slide d-none d-sm-block" data-bs-ride="carousel">
        <div className="carousel-indicators">
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" className="active"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="2"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="3"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="4"></button>
        </div>
        <div className="carousel-inner">
          <div className="carousel-item active">
            <img src={banner1} className="d-block w-100" alt="First slide" />
          </div>
          <div className="carousel-item">
            <img src={banner2} className="d-block w-100" alt="Second slide" />
          </div>
          <div className="carousel-item">
            <img src={banner3} className="d-block w-100" alt="Third slide" />
          </div>
          <div className="carousel-item">
            <img src={banner4} className="d-block w-100" alt="Fourth slide" />
          </div>
          <div className="carousel-item">
            <img src={banner5} className="d-block w-100" alt="Fifth slide" />
          </div>
        </div>
        <button className="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide="prev">
          <span className="carousel-control-prev-icon"></span>
        </button>
        <button className="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide="next">
          <span className="carousel-control-next-icon"></span>
        </button>
      </div>

      <div className="container">
        <br />
        <div className="row text-left">
          <div className="col-md-8">
            <div className="col-sm-13">WELCOME TO DIRECTORATE OF QUALITY ENHANCEMENT</div>
          </div>
          <div className="col-md-4">
            <div className="col-sm-13 text-center">News and Events</div>
          </div>
          
          <div className="col-md-8">
            <hr />
            <p className="text-justify">
              The need for quality assurance in higher education has become a global phenomenon. The Higher Education Commission of Pakistan has established the Quality Assurance Agency (QAA) to spearhead the movement for enhancing the quality of higher education in the country. The Quality Assurance Agency is facilitating the establishment of quality enhancement cells (QECs) at all public and private sector universities and higher education institutions (HEIs). QECs are required to function at the universities for the implementation of quality enhancement policies and programs.
              <button 
                className="btn btn-link p-0" 
                onClick={() => setShowMore(!showMore)}
              >
                {showMore ? 'See Less' : 'Read More'}
              </button>
            </p>
            <br />
            {showMore && (
              <div className="accordion-body">
                <p className="text-justify">
                  The Directorate of Quality Enhancement has been established at AIOU, since 14 May, 2007. It is entrusted with the task to promote education for effective management of standard and quality of programmes at all levels. It requires to develop quality assurance processes, methods of evaluations that the quality as well as standards of AIOU education are well maintained and continuously improved. It includes QA in curriculum development, subject staff development together with research and other activities. Supporting the education and research oriented activities in Pakistan is one of the most preferable goals of AIOU. It is working diligently to create an environment that encourages the pursuit of scholarly activities in research and development. It is currently enhancing its research activities through advancement of basic and applied research projects including the same in the curriculum of almost all academic programmes.
                </p>
              </div>
            )}
          </div>
          
          <div className="col-md-4">
            <hr />
            <div className="news-scroll" style={{ height: '200px', overflowY: 'auto' }}>
              <ul className="list-unstyled">
                <li><a href="/Downloads/UNIVERSITY QUALITY POLICY-A.pdf">AIOU Quality Policy</a></li>
                <li><a href="/Downloads/IQC FORMATION NOTIFICATION-B.pdf">IQC Formation Notification</a></li>
              </ul>
            </div>
          </div>
        </div>

        <hr />
        
        <div className="row">
          <div className="col-md-4">
            <div className="col-sm-14 text-center">Quick Links</div>
            <br />
            <ol>
              <li><a href="http://hec.gov.pk/english/services/universities/QAA/Pages/default.aspx">QAA HEC</a></li>
              <li><a href="http://hec.gov.pk/english/services/universities/QAA/InternalQA/Pages/List-of-QECs.aspx">LIST OF QECS</a></li>
              <li><a href="/journals">Research and Journals</a></li>
              <li><a href="/Incentives/Call for Research Projects 2016.doc">Call for Research Projects 2016</a></li>
              <li><a href="/Incentives/Incentive Award on Research Publications.doc">Incentive Award on Research Publications</a></li>
              <li><a href="http://www.commlearn.com/">COL Membership</a></li>
              <li><a href="http://onlinelearningconsortium.org/">Sloan C</a></li>
              <li><a href="http://www.icde.org/">ICDE</a></li>
              <li><a href="/Downloads/UNIVERSITY QUALITY POLICY-A.pdf">AIOU Quality Policy</a></li>
            </ol>
          </div>
          
          <div className="col-md-4">
            <div className="col-sm-14 text-center">FAQ's</div>
            <br />
            <ul>
              <li><a href="/faq">What is Accreditation?</a></li>
              <li><a href="/faq">What is the role of Program Team (PT)?</a></li>
              <li><a href="/faq">What is the role of Assessment Team (AT)?</a></li>
            </ul>
          </div>
          
          <div className="col-md-4">
            <div className="col-sm-14 text-center">Gallery</div>
            <div className="gallery-scroll" style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
              <a href={img1} className="thumbnail"><img src={img1} alt="Image" style={{ maxWidth: '100px' }} /></a>
              <a href={img2} className="thumbnail"><img src={img2} alt="Image" style={{ maxWidth: '100px' }} /></a>
              <a href={img3} className="thumbnail"><img src={img3} alt="Image" style={{ maxWidth: '100px' }} /></a>
              <a href={img4} className="thumbnail"><img src={img4} alt="Image" style={{ maxWidth: '100px' }} /></a>
              <a href={img5} className="thumbnail"><img src={img5} alt="Image" style={{ maxWidth: '100px' }} /></a>
              <a href={img6} className="thumbnail"><img src={img6} alt="Image" style={{ maxWidth: '100px' }} /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Home