function Contact() {
  const contacts = [
    { name: 'Mr Humayoun Awan', title: 'Deputy Director', phone: '051-9571971', email: 'qec@aiou.edu.pk' },
    { name: 'Ms. Gul Rukh Rana', title: 'Research Associate', phone: '051-9571982', email: '-' },
    { name: 'Mr. Fasih ul Islam', title: 'Research Associate', phone: '051-9571981', email: '' },
    { name: 'Mr Asif Nadeem Bhatti', title: 'Superintendent', phone: '051-9571995', email: '' },
    { name: 'Mr Muhammad Faran', title: 'Research Assistant', phone: '051-9571991', email: '-' },
    { name: 'Mr Muhammad Akmal Waheed', title: 'Statistical Assistant', phone: '051-9571991', email: '' },
    { name: 'Mr Imran Asif', title: 'UDC', phone: '051-9571995', email: '' },
    { name: 'Mr Saddam Hussain', title: 'UDC', phone: '051-9571991', email: '-' },
    { name: 'Ms Natasha Ashfaq', title: 'LDC', phone: '', email: '' },
  ]

  return (
    <div className="container">
      <hr />
      <div className="row">
        <div className="col-md-12 text-center">
          <div className="well"><strong>Further Contact Details</strong></div>
        </div>
      </div>
      <div>&nbsp;</div>
      <div>&nbsp;</div>

      {contacts.map((contact, index) => (
        <div key={index} className="row" style={{ marginBottom: '20px' }}>
          <div className="col-md-4 text-left">
            <h4>{contact.name}</h4>
            <strong>{contact.title}</strong><br />
            <span>📞 {contact.phone}</span><br />
            <span>✉️ {contact.email}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

export default Contact