const roles = [
    { title: "Patients", desc: "Individuals seeking consultations." },
    { title: "Doctors/Nurses", desc: "Diaspora professionals offering consultations." },
    { title: "Laboratories", desc: "Upload and share test results securely." },
    { title: "Pharmacies", desc: "Receive prescriptions and referrals." },
    { title: "Admin", desc: "Platform management (no access to patient records)." },
  ];
  
  export default function RolesSection() {
    return (
      <section id="roles" className="py-16 px-6 sm:px-20">
        <h3 className="text-2xl font-bold mb-8 text-center">User Roles</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-4xl mx-auto">
          {roles.map((role, index) => (
            <div key={index} className="p-6 border rounded-xl dark:border-gray-700 shadow-md">
              <h4 className="text-lg font-semibold mb-2">{role.title}</h4>
              <p className="text-sm text-gray-700 dark:text-gray-300">{role.desc}</p>
            </div>
          ))}
        </div>
      </section>
    );
  }
  